docs(development): migrate to storybook (#171)

* docs(dev mode): migrate to storybook

* style(codebase): update eslint rules

* build(dev dependencies): update

.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
   }
 }

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5"
-}

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require("@significa/prettier-config");

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-notes/register'
+import '@storybook/addon-notes/register-panel'

.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 => (
+  <div style={{ maxWidth: '400px', margin: 'auto', fontFamily: 'sans-serif' }}>
+    {storyFn()}
+  </div>
+))
+
+configure(require.context('../docs', true, /\.stories\.(mdx|[tj]sx?)$/), module)

.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
+}

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)
 

__mocks__/jestSetupFile.js

@@ -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()
-        },
-      }
-    },
-  }
-})

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 <Facebook animate={false} />
+}
+
+animate.story = {
+  parameters: {
+    notes: `##\`animate?: boolean\` 
+    
+    Defaults to \`true\`. Opt-out of animations with \`false\``,
+  },
+}
+
+/**
+ * Aria label
+ */
+export const ariaLabel = () => {
+  return <Facebook ariaLabel="my custom loader" />
+}
+
+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 <Facebook baseUrl="path/" />
+}
+
+baseURL.story = {
+  parameters: {
+    notes: `## \`baseUrl? string\`
+
+    Required if you're using \`<base url="/" />\` in the \`<head/>\`. Defaults to an empty string. This prop is common used as: \`<ContentLoader baseUrl={window.location.pathname} />\` 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 (
+    <>
+      <Facebook speed={4} />
+      <Facebook speed={1} />
+    </>
+  )
+}
+
+speed.story = {
+  parameters: {
+    notes: `## \`speed?: number\`
+
+    Defaults to \`2\`. Animation speed in seconds.`,
+  },
+}
+
+/**
+ * Interval
+ */
+export const interval = () => {
+  return <Facebook interval={0.8} />
+}
+
+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 <Facebook width={200} />
+}
+
+width.story = {
+  parameters: {
+    notes: `## \`width? number\`
+
+    Defaults to \`400\`. It will be set in the viewbox attr in the \`<svg />\`.`,
+  },
+}
+
+/**
+ * Height
+ */
+export const height = () => {
+  return <Facebook height={50} />
+}
+
+height.story = {
+  parameters: {
+    notes: `## \`height? number\`
+
+    Defaults to \`130\`. It will be set in the viewbox attr in the \`<svg />\`.`,
+  },
+}
+
+/**
+ * Gradient Ratio
+ */
+export const gradientRatio = () => {
+  return (
+    <>
+      <Instagram
+        gradientRatio={0.2}
+        primaryColor={'#333'}
+        secondaryColor={'#999'}
+      />
+      <Instagram
+        gradientRatio={4}
+        primaryColor={'#333'}
+        secondaryColor={'#999'}
+      />
+    </>
+  )
+}
+
+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 <Instagram rtl />
+}
+
+RTL.story = {
+  parameters: {
+    notes: `## \`rtl? boolean\`
+
+    Defaults to \`false\`. Content right-to-left.`,
+  },
+}
+
+/**
+ * Primary color
+ */
+export const primaryColor = () => {
+  return <Facebook primaryColor="#333" />
+}
+
+primaryColor.story = {
+  parameters: {
+    notes: `## \`primaryColor?: string\`
+
+    Defaults to \`#f3f3f3\` which is used as background of animation.`,
+  },
+}
+
+/**
+ * Secondary color
+ */
+export const secondaryColor = () => {
+  return <Facebook secondaryColor="#333" />
+}
+
+secondaryColor.story = {
+  parameters: {
+    notes: `## \`secondaryColor?: string\`
+
+    Defaults to \`#ecebeb\` which is used as foreground of animation.`,
+  },
+}
+
+/**
+ * Primary opacity
+ */
+export const primaryOpacity = () => {
+  return <Facebook primaryOpacity={0.06} />
+}
+
+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)`,
+  },
+}
+
+/**
+ * Secondary opacity
+ */
+export const secondaryOpacity = () => {
+  return <Facebook secondaryOpacity={0.06} />
+}
+
+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 <Facebook uniquekey="my-uniqye-key" />
+}
+
+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 <Facebook viewBox="" />
+// }
+
+// viewBox.story = {
+//   parameters: {
+//     notes: `## \`viewBox?: string\`
+
+//     Use viewbox props to set viewbox value.
+//     Additionally, pass viewBox props as empty string to remove viewBox.`,
+//   },
+// }

docs/intro.mdx

@@ -1,60 +0,0 @@
----
-name: Welcome
-route: /
----
-
-<p align="center">
-  <img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png"/>
-</p>
-<p align="center">
-  <img width="400" alt="Example's react-content-loader" src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" />
-</p>
-
-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 = () => <ContentLoader />
-const MyFacebookLoader = () => <Facebook />
-```
-
-**2. Custom mode, see the [online tool](https://danilowoz.github.io/create-react-content-loader/)**
-
-```jsx
-const MyLoader = () => (
-  <ContentLoader>
-    {/* Only SVG shapes */}
-    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
-    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
-    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
-  </ContentLoader>
-)
-```
-
-**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)

docs/props.mdx

@@ -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`
-
-<Playground>
-  <Facebook animate={false} />
-</Playground>
-
-## `ariaLabel? string | boolean`
-
-Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
-
-<Playground>
-  <Facebook ariaLabel="my custom loader" />
-</Playground>
-
-## **`baseUrl? string`**
-
-Required if you're using `<base url="/" />` in your `<head/>`. Defaults to an empty string. This prop is common used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
-
-<Playground>
-  <Facebook baseUrl="/mypage" />
-</Playground>
-
-## `speed?: number`
-
-Defaults to `2`. Animation speed in seconds.
-
-<Playground>
-  <Facebook speed={4} />
-  <Facebook speed={1} />
-</Playground>
-
-## `interval?: number`
-
-Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
-
-<Playground>
-  <Facebook interval={0.8} />
-</Playground>
-
-## `className? string`
-
-Defaults to an empty string. The classname will be set in the `<svg />` element.
-
-<Playground>
-  <Facebook className="custom-classname" />
-</Playground>
-
-## `width? number`
-
-Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
-
-<Playground>
-  <Facebook width={200} />
-</Playground>
-
-## `height? number`
-
-Defaults to `130`. It will be set in the viewbox attr in the `<svg />`.
-
-<Playground>
-  <Facebook height={50} />
-</Playground>
-
-## `gradientRatio? number`
-
-Defaults to `2`. Width of the animated gradient as a fraction of the viewbox width.
-
-<Playground>
-  <Instagram
-    gradientRatio={0.2}
-    primaryColor={'#333'}
-    secondaryColor={'#999'}
-  />
-  <Instagram gradientRatio={4} primaryColor={'#333'} secondaryColor={'#999'} />
-</Playground>
-
-## `rtl? boolean`
-
-Defaults to `false`. Content right-to-left.
-
-<Playground>
-  <Instagram rtl />
-</Playground>
-
-## `preserveAspectRatio?: string`
-
-Defaults to `xMidYMid meet`. Aspect ratio option of `<svg/>`. See the available options [here](https://github.com/danilowoz/react-content-loader/blob/master/src/interface.ts#L7).
-
-<Playground>
-  <Instagram preserveAspectRatio="none" />
-</Playground>
-
-## `primaryColor?: string`
-
-Defaults to `#f3f3f3` which is used as background of animation.
-
-<Playground>
-  <Facebook primaryColor="#333" />
-</Playground>
-
-## `secondaryColor?: string`
-
-Defaults to `#ecebeb` which is used as the placeholder/layer of animation.
-
-<Playground>
-  <Facebook secondaryColor="#333" />
-</Playground>
-
-## `primaryOpacity?: string`
-
-Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)
-
-<Playground>
-  <Facebook primaryOpacity={0.06} />
-</Playground>
-
-## `secondaryOpacity?: string`
-
-Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)
-
-<Playground>
-  <Facebook secondaryOpacity={0.06} />
-</Playground>
-
-## `style?: React.CSSProperties`
-
-Defaults to an empty object.
-
-<Playground>
-  <Facebook style={{ width: '100%' }} />
-</Playground>
-
-## **`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).
-
-<Playground>
-  <Facebook uniquekey="my-uniqye-key" />
-</Playground>
-
-## `viewBox?: string`
-
-Use viewbox props to set viewbox value.
-Additionally, pass viewBox props as empty string to remove viewBox.
-
-<Playground>
-  <ContentLoader viewBox="" />
-</Playground>
-
-# Issues known
-
-## BugFix in Safari
-
-When using `rgba` as a `primaryColor` or `secondaryColor` value,
-[Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180),
-meaning that the color will be opaque. To prevent this, instead of using an
-`rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and
-move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.
-
-<Playground>
-  <ContentLoader
-    primaryColor="rgb(0,0,0)"
-    secondaryColor="rgb(0,0,0)"
-    primaryOpacity={0.06}
-    secondaryOpacity={0.12}
-  />
-</Playground>

docs/usage.mdx

@@ -1,58 +0,0 @@
----
-name: Usage
-route: /usage
----
-
-import { Playground } from 'docz'
-
-import ContentLoader, {
-  Facebook,
-  Instagram,
-  Code,
-  List,
-  BulletList,
-} from '../src'
-
-## Usage
-
-## Presets
-
-### Facebook Style Loader
-
-<Playground>
-  <Facebook />
-</Playground>
-
-### Instagram Style Loader
-
-<Playground>
-  <Instagram />
-</Playground>
-
-### Code Style Loader
-
-<Playground>
-  <Code />
-</Playground>
-
-### List Style Loader
-
-<Playground>
-  <List />
-</Playground>
-
-### BulletList Style Loader
-
-<Playground>
-  <BulletList />
-</Playground>
-
-### Custom Loader
-
-<Playground>
-  <ContentLoader>
-    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
-    <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
-    <circle cx="35" cy="35" r="35" />
-  </ContentLoader>
-</Playground>

doczrc.js

@@ -1,25 +0,0 @@
-import emoji from 'remark-emoji'
-
-export default {
-  title: 'React Content Loader',
-  typescript: true,
-  mdPlugins: [emoji],
-  menu: ['Welcome', 'Usage', 'Props'],
-  htmlContext: {
-    head: {
-      links: [
-        {
-          rel: 'stylesheet',
-          href: 'https://codemirror.net/theme/dracula.css',
-        },
-      ],
-    },
-  },
-  themeConfig: {
-    codemirrorTheme: 'dracula',
-    colors: {
-      primary: '#673ab7',
-      sidebarBg: '#f3f3f3',
-    },
-  },
-}

jest.native.config.js

@@ -1,23 +1,23 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { defaults: tsjPreset } = require('ts-jest/presets')
 
 module.exports = {
   ...tsjPreset,
-  preset: "react-native",
+  preset: 'react-native',
   collectCoverage: true,
   coverageDirectory: './coverage/native',
-  "transformIgnorePatterns": [
-    "/node_modules/(?!react-native|react-clone-referenced-element|react-navigation)"
+  transformIgnorePatterns: [
+    '/node_modules/(?!react-native|react-clone-referenced-element|react-navigation)',
   ],
   transform: {
     ...tsjPreset.transform,
     '^.+\\.js$': require.resolve('react-native/jest/preprocessor.js'),
   },
   testRegex: '/src/native/__tests__/.*(\\.|/)(test|spec)\\.[jt]sx?$',
-  setupFiles: ['./__mocks__/jestSetupFile.js'],
   globals: {
     'ts-jest': {
       babelConfig: false,
       tsConfig: 'tsconfig.test.json',
     },
   },
-};
+}

package.json

@@ -32,7 +32,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "dev": "docz dev",
+    "dev": "start-storybook -p 6006",
     "build": "rm -fr ./dist ./native && rollup -c && npm run test:size",
     "test": "npm run test:tsc && npm run test:unit && npm run build",
     "test:unit": "npm run test:unit:web && npm run test:unit:native",
@@ -40,7 +40,7 @@
     "test:unit:native": "jest -c jest.native.config.js",
     "test:watch": "npm run test:unit -- --watch",
     "test:size": "bundlesize",
-    "test:tsc": "node_modules/.bin/tsc",
+    "test:tsc": "tsc",
     "test:tsc:watch": "npm run tsc -- --watch",
     "commit": "git-cz",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
@@ -49,54 +49,54 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "7.5.5",
-    "@babel/polyfill": "7.4.4",
-    "@babel/preset-env": "7.5.5",
-    "@babel/preset-react": "7.0.0",
-    "@babel/register": "7.5.5",
-    "@babel/runtime": "7.5.5",
-    "@commitlint/cli": "8.1.0",
-    "@commitlint/config-conventional": "8.1.0",
-    "@types/jest": "24.0.18",
-    "@types/react": "16.9.2",
-    "@types/react-dom": "16.9.0",
-    "@types/react-native": "0.60.11",
-    "@types/react-test-renderer": "16.9.0",
-    "@typescript-eslint/eslint-plugin": "2.1.0",
-    "@typescript-eslint/parser": "2.1.0",
-    "babel-core": "6.26.3",
+    "@babel/core": "7.7.7",
+    "@babel/polyfill": "7.7.0",
+    "@babel/preset-env": "7.7.7",
+    "@babel/preset-react": "7.7.4",
+    "@babel/register": "7.7.7",
+    "@babel/runtime": "7.7.7",
+    "@commitlint/cli": "8.2.0",
+    "@commitlint/config-conventional": "8.2.0",
+    "@significa/eslint-config": "0.0.8",
+    "@significa/prettier-config": "0.0.8",
+    "@storybook/addon-notes": "5.2.8",
+    "@storybook/addons": "5.2.8",
+    "@storybook/react": "5.2.8",
+    "@types/jest": "24.0.24",
+    "@types/react": "16.9.17",
+    "@types/react-dom": "16.9.4",
+    "@types/react-native": "0.60.26",
+    "@types/react-test-renderer": "16.9.1",
+    "@typescript-eslint/eslint-plugin": "2.13.0",
+    "awesome-typescript-loader": "5.2.1",
+    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.3",
-    "babel-jest": "24.8.0",
+    "babel-jest": "24.9.0",
+    "babel-loader": "8.0.6",
     "bundlesize": "0.18.0",
     "commitizen": "4.0.3",
     "cz-conventional-changelog": "3.0.2",
-    "docz": "1.2.0",
-    "docz-theme-default": "1.2.0",
-    "eslint": "6.3.0",
-    "eslint-config-react-app": "5.0.1",
-    "eslint-plugin-flowtype": "4.3.0",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "2.0.1",
-    "husky": "3.0.4",
+    "eslint": "6.8.0",
+    "eslint-plugin-jest": "23.1.1",
+    "eslint-plugin-react": "7.17.0",
+    "eslint-plugin-react-hooks": "2.3.0",
+    "husky": "3.1.0",
     "jest": "24.9.0",
-    "metro-react-native-babel-preset": "0.56.0",
-    "prettier": "1.18.2",
+    "metro-react-native-babel-preset": "0.57.0",
+    "prettier": "1.19.1",
     "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-native": "0.60.5",
-    "react-native-svg": "9.11.1",
-    "react-test-renderer": "16.9.0",
-    "remark-emoji": "2.0.2",
-    "rollup": "1.20.2",
+    "react-dom": "16.12.0",
+    "react-native": "0.61.5",
+    "react-native-svg": "9.13.6",
+    "react-test-renderer": "16.12.0",
+    "rollup": "1.27.14",
     "rollup-plugin-copy": "3.1.0",
     "rollup-plugin-replace": "2.2.0",
-    "rollup-plugin-typescript2": "0.23.0",
-    "rollup-plugin-uglify": "6.0.2",
-    "semantic-release": "15.13.24",
-    "ts-jest": "24.0.2",
-    "typescript": "3.5.3"
+    "rollup-plugin-typescript2": "0.25.3",
+    "rollup-plugin-uglify": "6.0.4",
+    "semantic-release": "15.14.0",
+    "ts-jest": "24.2.0",
+    "typescript": "3.7.4"
   },
   "peerDependencies": {
     "react": "^16.0.0"

rollup.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 import replace from 'rollup-plugin-replace'
 import { uglify } from 'rollup-plugin-uglify'
 import typescript from 'rollup-plugin-typescript2'
@@ -11,14 +12,14 @@ const cjs = {
   exports: 'named',
   format: 'cjs',
   sourcemap: true,
-};
+}
 
 const esm = {
   format: 'es',
   sourcemap: true,
-};
+}
 
-const globals = { react: 'React', 'react-dom': 'ReactDOM' };
+const globals = { react: 'React', 'react-dom': 'ReactDOM' }
 
 const commonPlugins = [
   typescript({
@@ -47,7 +48,7 @@ const umdConfig = mergeAll([
         file: `dist/${pkg.name}.js`,
         format: 'umd',
         name: 'ContentLoader',
-        globals
+        globals,
       },
     ]),
     external: Object.keys(pkg.peerDependencies || {}),
@@ -97,7 +98,7 @@ const webConfig = mergeAll([
     input: 'src/index.ts',
     output: [
       mergeAll([configBase.output, { ...esm, file: pkg.module }]),
-      mergeAll([configBase.output, { ...cjs, file: pkg.main,  }]),
+      mergeAll([configBase.output, { ...cjs, file: pkg.main }]),
     ],
     plugins: configBase.plugins.concat(),
   },
@@ -108,14 +109,20 @@ const nativeConfig = mergeAll([
   {
     input: './src/native/index.ts',
     output: [
-      mergeAll([configBase.output, { ...esm, file: `native/${pkg.name}.native.es.js` }]),
-      mergeAll([configBase.output, { ...cjs, file: `native/${pkg.name}.native.cjs.js`,  }]),
+      mergeAll([
+        configBase.output,
+        { ...esm, file: `native/${pkg.name}.native.es.js` },
+      ]),
+      mergeAll([
+        configBase.output,
+        { ...cjs, file: `native/${pkg.name}.native.cjs.js` },
+      ]),
     ],
-    plugins: configBase.plugins.concat(copy({
-      targets: [
-        { src: 'src/native/package.json', dest: 'native' },
-      ]
-    }))
+    plugins: configBase.plugins.concat(
+      copy({
+        targets: [{ src: 'src/native/package.json', dest: 'native' }],
+      })
+    ),
   },
 ])
 

src/Holder.tsx

@@ -21,9 +21,7 @@ export const defaultProps: IContentLoaderProps = {
   width: 400,
 }
 
-const InitialComponent: React.FunctionComponent<
-  IContentLoaderProps
-> = props => (
+const InitialComponent: React.FC<IContentLoaderProps> = props => (
   <rect x="0" y="0" rx="5" ry="5" width={props.width} height={props.height} />
 )
 

src/__tests__/uid.test.tsx

@@ -3,7 +3,7 @@ import uid from '../uid'
 describe('unique id', () => {
   const options = 100
   // @ts-ignore To avoid adding polyfill for `fill` becoz fill is ES6 feature and our target is ES5
-  const ids = new Array(options).fill(' ').map(item => uid())
+  const ids = new Array(options).fill(' ').map(() => uid())
   // @ts-ignore To avoid adding polyfill for `from`
   const unique = Array.from(new Set(ids))
 

src/native/Holder.tsx

@@ -29,9 +29,7 @@ export const defaultProps: DefaultProps = {
   width: 400,
 }
 
-const InitialComponent: React.FunctionComponent<
-  IContentLoaderProps
-> = props => (
+const InitialComponent: React.FC<IContentLoaderProps> = props => (
   <Rect x="0" y="0" rx="5" ry="5" width={props.width} height={props.height} />
 )
 

src/native/stylized/BulletListStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect, Circle } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderBulletList: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <Circle cx="10" cy="20" r="8" />
     <Rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
@@ -15,3 +15,5 @@ export default (props: IContentLoaderProps) => (
     <Rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderBulletList

src/native/stylized/CodeStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderCode: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <Rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
     <Rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
@@ -19,3 +19,5 @@ export default (props: IContentLoaderProps) => (
     <Rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderCode

src/native/stylized/FacebookStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect, Circle } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderFacebook: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <Rect x="70" y="15" rx="4" ry="4" width="117" height="6" />
     <Rect x="70" y="35" rx="3" ry="3" width="85" height="6" />
@@ -13,3 +13,5 @@ export default (props: IContentLoaderProps) => (
     <Circle cx="30" cy="30" r="30" />
   </Holder>
 )
+
+export default ReactContentLoaderFacebook

src/native/stylized/InstagramStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect, Circle } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderInstagram: React.FC<IContentLoaderProps> = props => (
   <Holder {...props} height={480}>
     <Circle cx="30" cy="30" r="30" />
 
@@ -12,3 +12,5 @@ export default (props: IContentLoaderProps) => (
     <Rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
   </Holder>
 )
+
+export default ReactContentLoaderInstagram

src/native/stylized/ListStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderListStyle: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <Rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
     <Rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
@@ -13,3 +13,5 @@ export default (props: IContentLoaderProps) => (
     <Rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderListStyle

src/stylized/BulletListStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderBulletList: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <circle cx="10" cy="20" r="8" />
     <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
@@ -15,3 +15,5 @@ export default (props: IContentLoaderProps) => (
     <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderBulletList

src/stylized/CodeStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderCode: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
     <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
@@ -19,3 +19,5 @@ export default (props: IContentLoaderProps) => (
     <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderCode

src/stylized/FacebookStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderFacebook: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
     <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
@@ -13,3 +13,5 @@ export default (props: IContentLoaderProps) => (
     <circle cx="30" cy="30" r="30" />
   </Holder>
 )
+
+export default ReactContentLoaderFacebook

src/stylized/InstagramStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderInstagram: React.FC<IContentLoaderProps> = props => (
   <Holder {...props} height={480}>
     <circle cx="30" cy="30" r="30" />
 
@@ -12,3 +12,5 @@ export default (props: IContentLoaderProps) => (
     <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
   </Holder>
 )
+
+export default ReactContentLoaderInstagram

src/stylized/ListStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderListStyle: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
     <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
@@ -13,3 +13,5 @@ export default (props: IContentLoaderProps) => (
     <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderListStyle

tsconfig.base.json

@@ -1,16 +1,17 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "jsx": "react",
-    "lib": ["es6"],
     "declaration": true,
     "declarationDir": "./dist/types",
     "declarationMap": true,
-    "noEmit": true,
-    "sourceMap": true,
     "esModuleInterop": true,
+    "jsx": "react",
+    "lib": ["es6"],
+    "noEmit": true,
     "noImplicitAny": false,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "target": "es5"
   },
   "include": ["./src/**/*"],
   "exclude": ["node_modules", "src/__tests__"]

tsconfig.test.json

@@ -1,7 +1,6 @@
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    "lib": ["dom"],
-    "noEmit": true
+    "lib": ["dom"]
   }
 }