Merge pull request #238 from akhilmhdh/feat/storybook

feat(frontend): added storybook with tailwind integration

frontend/.eslintrc.js

@@ -4,7 +4,14 @@ module.exports = {
     browser: true,
     es2021: true
   },
-  extends: ['airbnb', 'airbnb-typescript', 'airbnb/hooks', 'plugin:react/recommended', 'prettier'],
+  extends: [
+    'airbnb',
+    'airbnb-typescript',
+    'airbnb/hooks',
+    'plugin:react/recommended',
+    'prettier',
+    'plugin:storybook/recommended'
+  ],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
@@ -20,15 +27,27 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'react-hooks/exhaustive-deps': 'off',
     '@typescript-eslint/ban-ts-comment': 'warn',
+    'react/jsx-props-no-spreading': 'off', // switched off for component building
     // TODO: This rule will be switched ON after complete revamp of frontend
     '@typescript-eslint/no-explicit-any': 'off',
     'no-console': 'off',
     'arrow-body-style': 'off',
-    'no-underscore-dangle': ['error', { allow: ['_id'] }],
-    'jsx-a11y/anchor-is-valid': 'off', // all those <a> tags must be converted to label or a p component
+    'no-underscore-dangle': [
+      'error',
+      {
+        allow: ['_id']
+      }
+    ],
+    'jsx-a11y/anchor-is-valid': 'off',
+    // all those <a> tags must be converted to label or a p component
     //
     'react/require-default-props': 'off',
-    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.ts'] }],
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['.tsx', '.ts']
+      }
+    ],
     // TODO: turn this rule ON after migration. everything should use arrow functions
     'react/function-component-definition': [
       0,
@@ -36,7 +55,12 @@ module.exports = {
         namedComponents: 'arrow-function'
       }
     ],
-    'react/no-unknown-property': ['error', { ignore: ['jsx'] }],
+    'react/no-unknown-property': [
+      'error',
+      {
+        ignore: ['jsx']
+      }
+    ],
     '@typescript-eslint/no-non-null-assertion': 'off',
     'simple-import-sort/exports': 'warn',
     'simple-import-sort/imports': [

frontend/.storybook/main.js

@@ -0,0 +1,21 @@
+const path = require('path');
+module.exports = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-dark-mode',
+    '@storybook/addon-postcss'
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
+  },
+  core: {
+    disableTelemetry: true
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};

frontend/.storybook/preview.js

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

frontend/package.json

@@ -7,7 +7,9 @@
     "start": "next start",
     "start:docker": "next build && next start",
     "lint": "eslint --fix --ext js,ts,tsx ./src",
-    "type-check": "tsc --project tsconfig.json"
+    "type-check": "tsc --project tsconfig.json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/css": "^11.10.0",
@@ -18,6 +20,15 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/react-fontawesome": "^0.1.19",
     "@headlessui/react": "^1.6.6",
+    "@radix-ui/react-accordion": "^1.1.0",
+    "@radix-ui/react-alert-dialog": "^1.0.2",
+    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-label": "^2.0.0",
+    "@radix-ui/react-popover": "^1.0.3",
+    "@radix-ui/react-progress": "^1.0.1",
+    "@radix-ui/react-select": "^1.2.0",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-toast": "^1.1.2",
     "@reduxjs/toolkit": "^1.8.3",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.46.0",
@@ -51,6 +62,7 @@
     "set-cookie-parser": "^2.5.1",
     "sharp": "^0.31.2",
     "styled-components": "^5.3.5",
+    "tailwind-merge": "^1.8.1",
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1",
     "uuid": "^8.3.2",
@@ -58,6 +70,14 @@
     "yaml": "^2.2.0"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.0-beta.30",
+    "@storybook/addon-interactions": "^7.0.0-beta.30",
+    "@storybook/addon-links": "^7.0.0-beta.30",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/blocks": "^7.0.0-beta.30",
+    "@storybook/nextjs": "^7.0.0-beta.30",
+    "@storybook/react": "^7.0.0-beta.30",
+    "@storybook/testing-library": "^0.0.13",
     "@tailwindcss/typography": "^0.5.4",
     "@types/jsrp": "^0.2.4",
     "@types/node": "18.11.9",
@@ -77,8 +97,11 @@
     "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-storybook": "^0.6.10",
     "postcss": "^8.4.14",
     "prettier": "^2.8.3",
+    "storybook": "^7.0.0-beta.30",
+    "storybook-dark-mode": "^2.0.5",
     "tailwindcss": "^3.1.4",
     "typescript": "^4.9.3"
   }

frontend/src/components/v2/Button/Button.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    children: 'Hello Infisical'
+  }
+};

frontend/src/components/v2/Button/Button.tsx

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  children: ReactNode;
+  isDisabled?: boolean;
+  // loading state
+  isLoading?: boolean;
+  // various button sizes
+  size: 'sm' | 'md' | 'lg';
+};
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & Props;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, isDisabled = false, className, ...props }, ref): JSX.Element => {
+    return (
+      <button
+        ref={ref}
+        aria-disabled={isDisabled}
+        type="button"
+        className={twMerge(
+          'bg-primary hover:opacity-80 transition-all text-sm px-4 py-2 font-bold rounded',
+          className
+        )}
+        disabled={isDisabled}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

frontend/src/components/v2/Button/index.tsx

@@ -0,0 +1 @@
+export { Button } from './Button';