docs for Swatch component

Author: akito470

packages/core/src/Swatch/Swatch.stories.tsx

@@ -1,43 +1,109 @@
+/* eslint-disable react/no-unescaped-entities */
+import { ArgsTable, Primary, PRIMARY_STORY } from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import {
+  DocTable,
+  DoDont,
+  Hero,
+  LiveDemo,
+  Note,
+  RelatedComponent,
+  RelatedComponentContainer,
+  Section,
+  StoryHeading,
+  StoryStage,
+  TableOfContents,
+} from 'pcln-docs-utils'
+import { Box, Flex, ISwatchProps, Swatch, Text, ThemeProvider } from '..'
 import React, { useState } from 'react'
-import Swatch from './Swatch'
-import { Box, Flex, Text } from '../'
 
-export default {
-  title: 'Swatch',
-  component: Swatch,
+type SwatchStory = StoryObj<ISwatchProps>
+
+export const Playground: SwatchStory = {
+  render: (args) => <Swatch {...args} />,
+  args: {
+    colors: [
+      '#D50032',
+      '#1B7742',
+      '#0033A0',
+      '#002244',
+      '#6244BB',
+      '#31225D',
+      '#31225D',
+      '#FFC658',
+      '#4F6F8F',
+    ],
+  },
+  argTypes: {
+    onClick: () => null,
+  },
+}
+
+export const SingleColor: SwatchStory = {
+  render: () => (
+    <StoryStage>
+      <Swatch colors={['#0033A0']} />
+    </StoryStage>
+  ),
 }
 
-export const SingleColor = () => <Swatch colors={['#0033A0']} />
-
-export const MultipleColors = () => <Swatch colors={['#D50032', '#1B7742', '#0033A0']} />
-
-export const Wrap = () => (
-  <Box width='100px'>
-    <Swatch
-      colors={[
-        '#D50032',
-        '#1B7742',
-        '#0033A0',
-        '#002244',
-        '#6244BB',
-        '#31225D',
-        '#31225D',
-        '#FFC658',
-        '#4F6F8F',
-      ]}
-    />
-  </Box>
-)
-
-export const SelectColor = () => {
+export const MultipleColors: SwatchStory = {
+  render: () => (
+    <StoryStage>
+      <Swatch colors={['#D50032', '#1B7742', '#0033A0']} />
+    </StoryStage>
+  ),
+}
+
+const SwatchWithState = () => {
   const [color, setColor] = useState('#D50032')
   return (
-    <>
-      <Swatch colors={['#FFFFFF', '#D50032', '#1B7742', '#0033A0']} onClick={(color) => setColor(color)} />
+    <StoryStage>
+      <Swatch
+        colors={['#FFFFFF', '#D50032', '#1B7742', '#0033A0']}
+        onClick={(color) => (typeof color === 'string' ? setColor(color) : undefined)}
+      />
       <Flex mt='3' flexDirection='row' alignItems='center'>
         <Text mr={2}>Color:</Text>
         <Text>{color}</Text>
       </Flex>
-    </>
+    </StoryStage>
   )
 }
+
+export const SelectColor: SwatchStory = {
+  render: () => <SwatchWithState />,
+}
+
+const meta: Meta<typeof Swatch> = {
+  title: 'Swatch',
+  component: Swatch,
+  parameters: {
+    docs: {
+      page: () => (
+        <ThemeProvider>
+          <Hero name='Swatch' img={null}>
+            Use the Swatch component to render a group of colors. Clicking one of the color will execute
+            onClick callback, that can be passed as a prop.
+          </Hero>
+
+          <TableOfContents links={['Overview', 'Props']} />
+
+          <Section heading='Overview'>
+            <Text textStyle='paragraph'>
+              Use the Swatch component to render a group of colors. Clicking one of the color will execute
+              onClick callback, that can be passed as a prop.
+            </Text>
+          </Section>
+
+          <Section heading='Props'>
+            <Primary />
+            <ArgsTable story={PRIMARY_STORY} />
+          </Section>
+        </ThemeProvider>
+      ),
+    },
+  },
+}
+
+export default meta

packages/core/src/Swatch/Swatch.tsx

@@ -1,4 +1,3 @@
-import PropTypes, { InferProps } from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 import { Flex } from '../Flex'
@@ -15,25 +14,25 @@ const SwatchColor = styled.div`
   cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
 `
 
-const propTypes = {
-  colors: PropTypes.arrayOf(PropTypes.string),
-  onClick: PropTypes.func,
+export interface ISwatchProps {
+  colors?: string[]
+  onClick?: (color: string) => void
 }
 
-const Swatch: React.FC<InferProps<typeof propTypes>> = ({ colors, onClick, ...props }) => (
-  <Flex flexWrap='wrap' {...props}>
-    {colors.map((color, idx) => (
-      <SwatchColor
-        data-testid={`${idx}-${color}`}
-        key={`${idx}-${color}`}
-        color={color}
-        onClick={onClick ? () => onClick(color) : undefined}
-      />
-    ))}
-  </Flex>
-)
-
-Swatch.propTypes = propTypes
-Swatch.displayName = 'Swatch'
+const Swatch: React.FC<ISwatchProps> = ((props: ISwatchProps) => {
+  const { colors, onClick } = props
+  return (
+    <Flex flexWrap='wrap' {...props}>
+      {colors.map((color, idx) => (
+        <SwatchColor
+          data-testid={`${idx}-${color}`}
+          key={`${idx}-${color}`}
+          color={color}
+          onClick={onClick ? () => onClick(color) : undefined}
+        />
+      ))}
+    </Flex>
+  )
+})
 
 export default Swatch

packages/core/src/Swatch/index.ts

@@ -1 +1 @@
-export { default as Swatch } from './Swatch'
+export { default as Swatch, ISwatchProps } from './Swatch'

packages/core/src/index.ts

@@ -48,7 +48,7 @@ export { Spinner } from './Spinner'
 export { SrOnly } from './SrOnly'
 export { Stamp } from './Stamp'
 export { Stepper } from './Stepper'
-export { Swatch } from './Swatch'
+export { Swatch, ISwatchProps } from './Swatch'
 export { Text } from './Text'
 export { TextArea } from './TextArea'
 export { Toast } from './Toast'