diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 0000000..c7085f4
--- /dev/null
+++ b/.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'
+ }
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 0000000..3c4160c
--- /dev/null
+++ b/.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$/
+ }
+ }
+}
diff --git a/src/stories/Changelog.stories.mdx b/src/stories/Changelog.stories.mdx
new file mode 100644
index 0000000..b2e1168
--- /dev/null
+++ b/src/stories/Changelog.stories.mdx
@@ -0,0 +1,5 @@
+import Changelog from '../../CHANGELOG.md'
+
+
+
+
diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx
new file mode 100644
index 0000000..90df908
--- /dev/null
+++ b/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'
+
+
+
+
+
+# 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
+```
+
+
Usage
+
+```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 (
+
+ )
+```
+
+#### Props
+
+
+
+
+
+
+
+
+
+##### License MIT © [awran5](https://github.com/awran5/)
+
+
+ TipEdit the Markdown in stories/Introduction.stories.mdx
+
diff --git a/src/stories/Rating.stories.tsx b/src/stories/Rating.stories.tsx
new file mode 100644
index 0000000..2a98c2b
--- /dev/null
+++ b/src/stories/Rating.stories.tsx
@@ -0,0 +1,243 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import {
+ MdFavoriteBorder,
+ MdFavorite,
+ MdOutlineSentimentDissatisfied,
+ MdOutlineSentimentNeutral,
+ MdOutlineSentimentSatisfied,
+ MdOutlineSentimentVeryDissatisfied,
+ MdOutlineSentimentVerySatisfied
+} from 'react-icons/md'
+
+import { Rating } from '../components/Rating'
+
+export default {
+ title: 'Example',
+ component: Rating,
+ argTypes: {}
+} as ComponentMeta
+
+const Template: ComponentStory = (args) =>
+ args.rtl ? (
+
+
+
+ ) : (
+
+ )
+
+export const Default = Template.bind({})
+Default.args = {
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const TransitionEffect = Template.bind({})
+TransitionEffect.args = {
+ transition: true,
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const InitialValue = Template.bind({})
+InitialValue.args = {
+ initialValue: 3,
+ transition: true,
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const ColorRange = Template.bind({})
+ColorRange.args = {
+ transition: true,
+ fillColorArray: ['#f14f45', '#f16c45', '#f18845', '#f1b345', '#f1d045'],
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const WithTooltip = Template.bind({})
+WithTooltip.args = {
+ showTooltip: true,
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const CustomTooltip = Template.bind({})
+CustomTooltip.args = {
+ showTooltip: true,
+ tooltipArray: ['Terrible', 'Bad', 'Average', 'Great', 'Prefect'],
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const ReadOnlyMode = Template.bind({})
+ReadOnlyMode.args = {
+ initialValue: 2,
+ readonly: true,
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const FractionRate = Template.bind({})
+FractionRate.args = {
+ allowFraction: true,
+ transition: true,
+ showTooltip: true,
+ tooltipArray: [
+ 'Terrible',
+ 'Terrible+',
+ 'Bad',
+ 'Bad+',
+ 'Average',
+ 'Average+',
+ 'Great',
+ 'Great+',
+ 'Awesome',
+ 'Awesome+'
+ ],
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const CustomSVG = Template.bind({})
+CustomSVG.args = {
+ fillIcon: ,
+ emptyIcon: ,
+ transition: true,
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const CustomSVGGroup = Template.bind({})
+CustomSVGGroup.args = {
+ customIcons: [
+ { icon: },
+ { icon: },
+ { icon: },
+ { icon: },
+ { icon: }
+ ],
+ transition: true,
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const DisableHover = Template.bind({})
+DisableHover.args = {
+ allowHover: false,
+ disableFillHover: false,
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const DisableFillHover = Template.bind({})
+DisableFillHover.args = {
+ disableFillHover: true,
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const IconsCount = Template.bind({})
+IconsCount.args = {
+ iconsCount: 10,
+ showTooltip: true,
+ transition: true,
+ tooltipArray: [
+ 'Terrible',
+ 'Terrible+',
+ 'Bad',
+ 'Bad+',
+ 'Average',
+ 'Average+',
+ 'Great',
+ 'Great+',
+ 'Awesome',
+ 'Awesome+'
+ ],
+ fillColorArray: [
+ '#f14f45',
+ '#f14f45',
+ '#f16c45',
+ '#f17a45',
+ '#f18845',
+ '#f19745',
+ '#f1b345',
+ '#f1c245',
+ '#f1d045',
+ '#f1de45'
+ ],
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const RTLSupport = Template.bind({})
+RTLSupport.args = {
+ rtl: true,
+ showTooltip: true,
+ titleSeparator: 'من',
+ tooltipDefaultText: 'التقييم',
+ tooltipArray: ['سيئ جدا', 'سيئ', 'متوسط', 'رائع', 'ممتاز'],
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const OnClick = Template.bind({})
+OnClick.args = {
+ onPointerEnter: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+export const onPointerEnter = Template.bind({})
+onPointerEnter.args = {
+ onClick: undefined,
+ onPointerLeave: undefined,
+ onPointerMove: undefined
+}
+
+export const onPointerLeave = Template.bind({})
+onPointerLeave.args = {
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerMove: undefined
+}
+
+export const onPointerMove = Template.bind({})
+onPointerMove.args = {
+ onClick: undefined,
+ onPointerEnter: undefined,
+ onPointerLeave: undefined
+}