diff --git a/.eslintrc.json b/.eslintrc.json
index 8b709d7..3f52c89 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,11 @@
{
- "extends": "react-app",
+ "extends": "@significa/eslint-config",
+ "plugins": ["jest"],
"rules": {
- "@typescript-eslint/no-angle-bracket-type-assertion": 0 // I don't know wtf it is
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/ban-ts-ignore": "off"
+ },
+ "env": {
+ "jest": true
}
}
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 36301bc..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "semi": false,
- "singleQuote": true,
- "trailingComma": "es5"
-}
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..ab1c688
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1 @@
+module.exports = require("@significa/prettier-config");
\ No newline at end of file
diff --git a/.storybook/addons.js b/.storybook/addons.js
new file mode 100644
index 0000000..ea43e7e
--- /dev/null
+++ b/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-notes/register'
+import '@storybook/addon-notes/register-panel'
diff --git a/.storybook/config.js b/.storybook/config.js
new file mode 100644
index 0000000..1282d75
--- /dev/null
+++ b/.storybook/config.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { configure, addParameters, addDecorator } from '@storybook/react'
+import { themes } from '@storybook/theming'
+
+addParameters({ options: { theme: themes.normal } })
+
+addDecorator(storyFn => (
+
+ {storyFn()}
+
+))
+
+configure(require.context('../docs', true, /\.stories\.(mdx|[tj]sx?)$/), module)
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
new file mode 100644
index 0000000..106635c
--- /dev/null
+++ b/.storybook/webpack.config.js
@@ -0,0 +1,23 @@
+module.exports = ({ config }) => {
+ config.module.rules.push({
+ test: /\.(ts|tsx)$/,
+ use: [
+ {
+ loader: require.resolve('awesome-typescript-loader'),
+ options: {
+ reportFiles: ['src/**/*.{ts,tsx}', 'docs/**/*.{ts,tsx}'],
+ },
+ },
+ ],
+ })
+
+ config.resolve.extensions.push('.ts', '.tsx')
+
+ config.module.rules[0].use[0].options.presets = [
+ require.resolve('@babel/preset-react'),
+ require.resolve('@babel/preset-env'),
+ ]
+ config.resolve.mainFields = ['browser', 'module', 'main']
+
+ return config
+}
diff --git a/README.md b/README.md
index 500126f..e961cea 100755
--- a/README.md
+++ b/README.md
@@ -166,13 +166,13 @@ Defaults to `#f3f3f3` which is used as background of animation.
#### **`secondaryColor?: string`**
-Defaults to `#ecebeb` which is used as the placeholder/layer of animation.
+Defaults to `#ecebeb` which is used as the foreground of animation.
-#### **`primaryOpacity?: string`** - _Web only_
+#### **`primaryOpacity?: number`** - _Web only_
Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)
-#### **`secondaryOpacity?: string`** - _Web only_
+#### **`secondaryOpacity?: number`** - _Web only_
Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)
diff --git a/__mocks__/jestSetupFile.js b/__mocks__/jestSetupFile.js
deleted file mode 100644
index d32673f..0000000
--- a/__mocks__/jestSetupFile.js
+++ /dev/null
@@ -1,18 +0,0 @@
-jest.mock('Animated', () => {
- return {
- Value: () => {
- return {
- addListener: callback => callback({ value: 0 }),
- setValue: () => {},
- }
- },
- timing: (value, config) => {
- return {
- start: callback => {
- value.setValue(config.toValue)
- callback && callback()
- },
- }
- },
- }
-})
diff --git a/docs/index.stories.tsx b/docs/index.stories.tsx
new file mode 100644
index 0000000..d06931b
--- /dev/null
+++ b/docs/index.stories.tsx
@@ -0,0 +1,253 @@
+import React from 'react'
+
+import { Facebook, Instagram } from '../src'
+
+export default {
+ title: 'React Content Loader',
+}
+
+/**
+ * Animated
+ */
+export const animate = () => {
+ return
+}
+
+animate.story = {
+ parameters: {
+ notes: `##\`animate?: boolean\`
+
+ Defaults to \`true\`. Opt-out of animations with \`false\``,
+ },
+}
+
+/**
+ * Aria label
+ */
+export const ariaLabel = () => {
+ return
+}
+
+ariaLabel.story = {
+ parameters: {
+ notes: `## \`ariaLabel? string | boolean\`
+
+ Defaults to \`Loading interface...\`. It's used to describe what element it is. Use \`false\` to remove.
+ `,
+ },
+}
+
+/**
+ * Base URL
+ */
+export const baseURL = () => {
+ return
+}
+
+baseURL.story = {
+ parameters: {
+ notes: `## \`baseUrl? string\`
+
+ Required if you're using \`\` in the \`
-
- \`. Defaults to an empty string. This prop is common used as: \`