feat(FOROME-969): Added storybook and few stories (#611)

Author: AndreyUstyumenko

.storybook/main.js

@@ -0,0 +1,32 @@
+const path = require('path')
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+    'storybook-dark-mode',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.scss|.sass$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    })
+
+    config.resolve.plugins = [
+      new TsconfigPathsPlugin({
+        configFile: path.resolve(__dirname, '../tsconfig.json'),
+      }),
+    ]
+
+    return config
+  },
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../src/index.css'
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -30,6 +30,7 @@
     "react-intl": "5.15.8",
     "react-modal": "3.13.1",
     "react-popper": "2.2.5",
+    "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-scripts": "5.0.0",
     "react-switch": "6.0.0",
@@ -52,6 +53,17 @@
     "@commitlint/cli": "16.0.2",
     "@commitlint/config-conventional": "16.0.0",
     "@craco/craco": "6.4.3",
+    "@storybook/addon-actions": "6.4.22",
+    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-interactions": "6.4.22",
+    "@storybook/addon-links": "6.4.22",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/builder-webpack5": "6.4.22",
+    "@storybook/manager-webpack5": "6.4.22",
+    "@storybook/node-logger": "6.4.22",
+    "@storybook/preset-create-react-app": "4.1.0",
+    "@storybook/react": "6.4.22",
+    "@storybook/testing-library": "0.0.11",
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "12.1.10",
@@ -90,16 +102,20 @@
     "eslint-config-ts-react-important-stuff": "3.0.0",
     "eslint-plugin-formatjs": "2.20.5",
     "eslint-plugin-jest": "25.2.4",
+    "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-react": "7.28.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "eslint-plugin-unicorn": "40.1.0",
     "lint-staged": "12.1.7",
     "postcss": "7",
     "simple-git-hooks": "2.7.0",
+    "storybook-dark-mode": "1.1.0",
     "stylelint": "14.2.0",
     "stylelint-config-standard": "24.0.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "tsconfig-paths-webpack-plugin": "3.5.2",
+    "webpack": "5.72.0"
   },
   "scripts": {
     "start": "node ./env.js && yarn & craco start",
@@ -113,7 +129,9 @@
     "test": "craco test",
     "eject": "react-scripts eject",
     "cy:open": "cypress open",
-    "cy:run": "cypress run"
+    "cy:run": "cypress run",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "simple-git-hooks": {
     "pre-commit": "yarn lint-stage && yarn lint:fix",
@@ -124,6 +142,16 @@
     "extends": [
       "react-app",
       "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
     ]
   },
   "browserslist": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/preset-control/preset-control-list/preset-control-list.tsx

@@ -25,10 +25,11 @@ export const PresetControlList = ({
   onModify,
   onDelete,
 }: IPresetControlListProps): ReactElement => {
-  const [contextMenuItem, setContextMenuItem] = useState<{
-    name: string
-    element: HTMLElement
-  } | null>(null)
+  const [contextMenuItem, setContextMenuItem] =
+    useState<{
+      name: string
+      element: HTMLElement
+    } | null>(null)
 
   const closeContextMenu = () => {
     setContextMenuItem(null)

src/components/variant/drawer.utils.ts

@@ -32,9 +32,8 @@ export const useScrollShadow = (
   handleScroll: () => void
   handleStartScroll: () => void
 } => {
-  const [startedLeftDistance, setStartedLeftDistance] = useState<number | null>(
-    null,
-  )
+  const [startedLeftDistance, setStartedLeftDistance] =
+    useState<number | null>(null)
 
   const [shouldAddShadow, setShouldAddShadow] = useState(false)
 

src/pages/filter/common/groups/chart/utils/useChartConfig.ts

@@ -145,9 +145,8 @@ const getVariantsChartConfig = (
 export const useChartConfig = (
   status: TPropertyStatus,
 ): TChartConfig | undefined => {
-  const prevSourceRef = useRef<
-    TNumericPropertyHistogram | TVariant[] | undefined
-  >()
+  const prevSourceRef =
+    useRef<TNumericPropertyHistogram | TVariant[] | undefined>()
 
   const configRef = useRef<TChartConfig>()
   const isNumeric = status.kind === AttributeKinds.NUMERIC

src/stories/button.stories.tsx

@@ -0,0 +1,11 @@
+import { Button } from '@ui/button'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+export default {
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>
+
+export const Template: ComponentStory<typeof Button> = args => (
+  <Button variant="primary" text="Button" {...args} />
+)

src/stories/popper-menu.stories.tsx

@@ -0,0 +1,38 @@
+import { PopperMenu } from '@components/popper-menu/popper-menu'
+import { PopperMenuItem } from '@components/popper-menu/popper-menu-item'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+export default {
+  title: 'Popper Menu',
+  component: PopperMenu,
+} as ComponentMeta<typeof PopperMenu>
+
+const Template: ComponentStory<typeof PopperMenu> = args => (
+  <div style={{ width: '100px' }}>
+    <PopperMenu {...args} close={() => {}}>
+      {args.children}
+    </PopperMenu>
+  </div>
+)
+
+export const Default = Template.bind({})
+
+Default.args = {
+  children: (
+    <>
+      <PopperMenuItem>Item 1</PopperMenuItem>
+      <PopperMenuItem>Item 2</PopperMenuItem>
+    </>
+  ),
+}
+
+export const WithIcon = Template.bind({})
+
+WithIcon.args = {
+  children: (
+    <>
+      <PopperMenuItem iconName="Cloud">Item 1</PopperMenuItem>
+      <PopperMenuItem iconName="Copy">Item 2</PopperMenuItem>
+    </>
+  ),
+}