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 + + + +
+ +
+ + + + + + Github + + + + + + + + Codesandbox + + +
+ +
+ Changelog +
+ +##### 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 +}