added storybook

Author: amareshsm

.eslintignore

@@ -1,3 +1,5 @@
 dist
 
-node_modules
+node_modules
+
+storybook-static

.gitignore

@@ -1,3 +1,5 @@
 dist
 
-node_modules
+node_modules
+
+storybook-static

.prettierignore

@@ -1,5 +1,7 @@
-dist
+/dist
 
-node_modules
+/node_modules
 
-*.html
+*.html
+
+/storybook-static

examples/cdn/Readme.md

@@ -2,4 +2,4 @@ DOME for CSS Loaders hosted on CDN using UMD Module.
 
 # To run:
 
-npm run serve
+npx serve

package-lock.json

@@ -9,7 +9,9 @@
     "prebuild": "rimraf dist",
     "build": "rollup -c",
     "format": "eslint **/*.js  && prettier **/*.js",
-    "format:fix": "eslint **/*.js --fix && prettier **/*.js --write"
+    "format:fix": "eslint **/*.js --fix && prettier **/*.js --write",
+    "storybook": "start-storybook -p 9001 -c storybook",
+    "storybook:build": "build-storybook  -c storybook"
   },
   "husky": {
     "hooks": {
@@ -24,7 +26,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/amareshsm/react-spinner-css.git"
+    "url": "https://github.com/amareshsm/react-spinner-css.git"
   },
   "keywords": [
     "react",
@@ -42,6 +44,9 @@
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@rollup/plugin-babel": "^5.1.0",
+    "@storybook/addon-options": "^5.3.19",
+    "@storybook/react": "^5.3.19",
+    "babel-loader": "^8.1.0",
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "^14.1.1",
@@ -53,6 +58,8 @@
     "eslint-plugin-standard": "^4.0.1",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.22.2",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -68,4 +75,4 @@
   "engines": {
     "node": ">=8"
   }
-}
+}

package.json

@@ -2,7 +2,7 @@ import React from 'react'
 import styles from './style.css'
 const Loader3 = (props) => (
   <>
-    <styles>{styles}</styles>
+    <style>{styles}</style>
     <div className="loader3">
       <div className="loader-ring">
         <div></div>

src/Components/Loader3/Loader.js

@@ -0,0 +1 @@
+import '@storybook/addon-options/register'

stories/addons.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Loader1, Loader2, Loader3 } from '../src'
+console.log(Loader1)
+storiesOf('Loaders', module)
+  .add('Loader 1 ', () => <Loader1 />)
+  .add('Loader 2', () => <Loader2 />)
+  .add('Loader 3', () => <Loader3 />)

stories/index.js

@@ -0,0 +1,17 @@
+import { configure, addDecorator } from '@storybook/react'
+import { withOptions } from '@storybook/addon-options'
+import packageJson from '../package.json'
+
+function loadStories() {
+  require('../stories/index.js')
+}
+
+addDecorator(
+  withOptions({
+    name: 'React CSS Loaders',
+    url: packageJson.repository.url,
+    showAddonsPanel: false,
+  }),
+)
+
+configure(loadStories, module)