+))
+
+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 00000000..106635c2
--- /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 500126f0..e961cea0 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/docs/index.stories.tsx b/docs/index.stories.tsx
new file mode 100644
index 00000000..15d5832c
--- /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: \`\` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
+ `,
+ },
+}
+
+/**
+ * Speed
+ */
+export const speed = () => {
+ return (
+ <>
+
+
+
+ )
+}
+
+speed.story = {
+ parameters: {
+ notes: `## \`speed?: number\`
+
+ Defaults to \`2\`. Animation speed in seconds.`,
+ },
+}
+
+/**
+ * Interval
+ */
+export const interval = () => {
+ return
+}
+
+interval.story = {
+ parameters: {
+ notes: `## \`interval?: number\`
+
+ Defaults to \`0.25\`. Interval of time between runs of the animation, as a fraction of the animation speed.`,
+ },
+}
+
+/**
+ * Width
+ */
+export const width = () => {
+ return
+}
+
+width.story = {
+ parameters: {
+ notes: `## \`width? number\`
+
+ Defaults to \`400\`. It will be set in the viewbox attr in the \`\`.`,
+ },
+}
+
+/**
+ * Width
+ */
+export const height = () => {
+ return
+}
+
+height.story = {
+ parameters: {
+ notes: `## \`height? number\`
+
+ Defaults to \`130\`. It will be set in the viewbox attr in the \`\`.`,
+ },
+}
+
+/**
+ * Gradient Ratio
+ */
+export const gradientRatio = () => {
+ return (
+ <>
+
+
+
+ )
+}
+
+gradientRatio.story = {
+ parameters: {
+ notes: `## \`gradientRatio? number\`
+
+ Defaults to \`2\`. Width of the animated gradient as a fraction of the viewbox width.`,
+ },
+}
+
+/**
+ * RTL
+ */
+export const RTL = () => {
+ return
+}
+
+RTL.story = {
+ parameters: {
+ notes: `## \`rtl? boolean\`
+
+ Defaults to \`false\`. Content right-to-left.`,
+ },
+}
+
+/**
+ * Primary color
+ */
+export const primaryColor = () => {
+ return
+}
+
+primaryColor.story = {
+ parameters: {
+ notes: `## \`primaryColor?: string\`
+
+ Defaults to \`#f3f3f3\` which is used as background of animation.`,
+ },
+}
+
+/**
+ * Secondary color
+ */
+export const secondaryColor = () => {
+ return
+}
+
+secondaryColor.story = {
+ parameters: {
+ notes: `## \`secondaryColor?: string\`
+
+ Defaults to \`#ecebeb\` which is used as foreground of animation.`,
+ },
+}
+
+/**
+ * Primary opacity
+ */
+export const primaryOpacity = () => {
+ return
+}
+
+primaryOpacity.story = {
+ parameters: {
+ notes: `## \`primaryOpacity?: number\`
+
+ Defaults to \`1\`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`,
+ },
+}
+
+/**
+ * Primary opacity
+ */
+export const secondaryOpacity = () => {
+ return
+}
+
+secondaryOpacity.story = {
+ parameters: {
+ notes: `## \`secondaryOpacity?: number\`
+
+ Defaults to \`1\`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`,
+ },
+}
+
+/**
+ * Unique key
+ */
+export const uniqueKey = () => {
+ return
+}
+
+uniqueKey.story = {
+ parameters: {
+ notes: `## \`uniquekey?: string\`
+
+ Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).`,
+ },
+}
+
+/**
+ * View box
+ */
+// export const viewBox = () => {
+// return
+// }
+
+// viewBox.story = {
+// parameters: {
+// notes: `## \`viewBox?: string\`
+
+// Use viewbox props to set viewbox value.
+// Additionally, pass viewBox props as empty string to remove viewBox.`,
+// },
+// }
diff --git a/docs/intro.mdx b/docs/intro.mdx
deleted file mode 100644
index 71f7a7d1..00000000
--- a/docs/intro.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
----
-name: Welcome
-route: /
----
-
-
-
-
-
-
-
-
-SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
-
-## Features
-
-- :gear: **Customizable:** Feel free to change the colors, speed, sizes and even **RTL**;
-- :ok_hand: **Plug and play:** with many presets to use, see the [examples](#examples);
-- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.github.io/create-content-loader/) to create your own custom loaders easily;
-- ⚛️ **Lightweight:** only **1.4kB** gzipped and **0 dependencies**;
-
-## Getting Started
-
-```sh
-npm i react-content-loader --save
-```
-
-```sh
-yarn add react-content-loader
-```
-
-CDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
-
-## Usage
-
-There are two ways to use it:
-
-**1. Presets, see the [examples](#examples):**
-
-```jsx
-import ContentLoader, { Facebook } from 'react-content-loader'
-
-const MyLoader = () =>
-const MyFacebookLoader = () =>
-```
-
-**2. Custom mode, see the [online tool](https://danilowoz.github.io/create-react-content-loader/)**
-
-```jsx
-const MyLoader = () => (
-
- {/* Only SVG shapes */}
-
-
-
-
-)
-```
-
-**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)
diff --git a/docs/props.mdx b/docs/props.mdx
deleted file mode 100644
index 565c6b19..00000000
--- a/docs/props.mdx
+++ /dev/null
@@ -1,177 +0,0 @@
----
-name: Props
-route: /props
----
-
-import { Playground } from 'docz'
-import ContentLoader, { Facebook, Instagram } from '../src'
-
-## `animate?: boolean`
-
-Defaults to `true`. Opt-out of animations with `false`
-
-
-
-
-
-## `ariaLabel? string | boolean`
-
-Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
-
-
-
-
-
-## **`baseUrl? string`**
-
-Required if you're using `` in your `
`. Defaults to an empty string. This prop is common used as: `
-
-