feat: add storybook

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-docs',
+      options: { transcludeMarkdown: true }
+    }
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5'
+  }
+}

.storybook/preview.js

@@ -0,0 +1,14 @@
+export const parameters = {
+  options: {
+    storySort: {
+      order: ['Introduction', 'Changelog']
+    }
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+}

src/stories/Changelog.stories.mdx

@@ -0,0 +1,5 @@
+import Changelog from '../../CHANGELOG.md'
+
+<Meta title='Changelog' />
+
+<Changelog />

src/stories/Introduction.stories.mdx

@@ -0,0 +1,180 @@
+import { Meta, ArgsTable } from '@storybook/addon-docs'
+import { FaGithub, FaCodepen } from 'react-icons/fa'
+import { Rating } from '../components/Rating'
+
+<Meta title='Introduction' />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 30px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-columns: repeat(2, 1fr);
+      column-gap: 10px;
+      margin-bottom: 15px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        column-gap: 20px;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item svg {
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+
+     .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# React simple star rating
+
+A simple yet powerful react component for adding a nice rating icons to your project.
+
+[![NPM](https://img.shields.io/npm/v/react-simple-star-rating.svg)](https://www.npmjs.com/package/react-simple-star-rating) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)![npm bundle size](https://img.shields.io/bundlephobia/min/react-simple-star-rating)![GitHub](https://img.shields.io/github/license/awran5/react-simple-star-rating)
+
+---
+
+##### Install with npm
+
+```sh
+npm i react-simple-star-rating
+
+```
+
+##### Yarn
+
+```sh
+yarn add react-simple-star-rating
+```
+
+<div className='subheading'>Usage</div>
+
+```jsx
+import React, { useState } from 'react'
+import { Rating } from 'react-simple-star-rating'
+
+function App() {
+  const [ratingValue, setRatingValue] = useState(0)
+
+  const handleRating = (rate: number) => {
+    setRatingValue(rate)
+  }
+  return (
+    <Rating onClick={handleRating}
+      {/* props */}
+    />
+  )
+```
+
+#### Props
+
+<ArgsTable of={Rating} />
+
+<br />
+
+<div className='link-list'>
+  <a className='link-item' href='https://github.com/awran5/react-simple-star-rating' target='_blank'>
+    <span className='svg'>
+      <FaGithub />
+    </span>
+    <span>
+      <strong>Github</strong>
+    </span>
+  </a>
+  <a
+    className='link-item'
+    href='https://codesandbox.io/s/react-simple-rating-ts-fzmpu?fontsize=14&hidenavigation=1&theme=dark'
+    target='_blank'
+  >
+    <span className='svg'>
+      <FaCodepen />
+    </span>
+    <span>
+      <strong>Codesandbox</strong>
+    </span>
+  </a>
+</div>
+
+<div className='subheading'>
+  <a href='?path=/story/changelog--page'>Changelog</a>
+</div>
+
+##### License MIT © [awran5](https://github.com/awran5/)
+
+<div className='tip-wrapper'>
+  <span className='tip'>Tip</span>Edit the Markdown in <code>stories/Introduction.stories.mdx</code>
+</div>