chore(storybook): setup storybook (#49)

* chore: init storybook

* chore(storybook): configure storybook

Ref:
- storybookjs/storybook#13486 (comment)
- emotion-js/emotion#971

* chore: update packages

* chore: add ts config for sb, use webpack5

- https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
- https://storybook.js.org/blog/storybook-for-webpack-5/
- https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade
- storybookjs/storybook#15336 (comment)

* chore: add shared components stories

.eslintrc.js

@@ -4,5 +4,6 @@ module.exports = {
     "sznm/react",
     "plugin:react/jsx-runtime",
     "plugin:@next/next/recommended",
+    "plugin:storybook/recommended",
   ],
 };

.storybook/main.js

@@ -0,0 +1,45 @@
+const { TsconfigPathsPlugin } = require("tsconfig-paths-webpack-plugin");
+
+const path = require("path");
+const toPath = (_path) => path.join(process.cwd(), _path);
+
+/** @type {import('@storybook/react/types').StorybookConfig} */
+module.exports = {
+  core: {
+    builder: "webpack5",
+  },
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-toolbars",
+    "@storybook/addon-a11y",
+    "@storybook/addon-storysource",
+    "storybook-addon-performance/register",
+  ],
+  framework: "@storybook/react",
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "@emotion/core": toPath("node_modules/@emotion/react"),
+          "emotion-theming": toPath("node_modules/@emotion/react"),
+        },
+        plugins: [...(config.resolve.plugins ?? []), new TsconfigPathsPlugin()],
+      },
+    };
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: false,
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+};

.storybook/mainTheme.js

@@ -0,0 +1,7 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "dark",
+  brandTitle: "Spoker Storybook",
+  brandURL: "https://storybook.spoker.sznm.dev",
+});

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from "@storybook/addons";
+
+import mainTheme from "./mainTheme";
+
+addons.setConfig({
+  theme: mainTheme,
+});

.storybook/preview.tsx

@@ -0,0 +1,77 @@
+import {
+  ChakraProvider,
+  Flex,
+  IconButton,
+  useColorMode,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { Parameters, StoryContext } from "@storybook/react";
+import * as React from "react";
+import { FaMoon, FaSun } from "react-icons/fa";
+import { withPerformance } from "storybook-addon-performance";
+import "@fontsource/outfit/latin.css";
+
+import customTheme from "../src/lib/styles/theme";
+
+/**
+ * Add global context for RTL-LTR switching
+ */
+export const globalTypes = {
+  direction: {
+    name: "Direction",
+    description: "Direction for layout",
+    defaultValue: "LTR",
+    toolbar: {
+      icon: "globe",
+      items: ["LTR", "RTL"],
+    },
+  },
+};
+
+const ColorModeToggleBar = () => {
+  const { toggleColorMode } = useColorMode();
+  const SwitchIcon = useColorModeValue(FaMoon, FaSun);
+  const nextMode = useColorModeValue("dark", "light");
+
+  return (
+    <Flex justify="flex-end" mb={4}>
+      <IconButton
+        size="md"
+        fontSize="lg"
+        aria-label={`Switch to ${nextMode} mode`}
+        variant="ghost"
+        color="current"
+        marginLeft="2"
+        onClick={toggleColorMode}
+        icon={<SwitchIcon />}
+      />
+    </Flex>
+  );
+};
+
+const withChakra = (StoryFn: Function, context: StoryContext) => {
+  const { direction } = context.globals;
+  const dir = direction.toLowerCase();
+
+  return (
+    <ChakraProvider theme={customTheme}>
+      <div dir={dir} id="story-wrapper" style={{ minHeight: "100vh" }}>
+        <ColorModeToggleBar />
+        <StoryFn />
+      </div>
+    </ChakraProvider>
+  );
+};
+
+export const parameters: Parameters = {
+  options: {
+    storySort: (a, b) =>
+      a[1].kind === b[1].kind
+        ? 0
+        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: { expanded: true },
+};
+
+export const decorators = [withChakra, withPerformance];

package.json

@@ -15,18 +15,20 @@
     "up-latest": "yarn up --latest",
     "release": "standard-version",
     "push-release": "git push --follow-tags origin main",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.8.1",
+    "@chakra-ui/react": "^1.8.3",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@fontsource/outfit": "^4.5.3",
-    "firebase": "^9.6.5",
+    "firebase": "^9.6.6",
     "formik": "^2.2.9",
     "framer-motion": "^5.6.0",
     "nanoid": "^3.2.0",
-    "next": "^12.0.9",
+    "next": "^12.0.10",
     "next-pwa": "^5.4.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -35,20 +37,33 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.2",
     "@commitlint/config-conventional": "^16.0.0",
     "@jahed/firebase-rules": "^1.1.0",
-    "@types/node": "^17.0.13",
-    "@types/react": "^17.0.38",
+    "@storybook/addon-a11y": "^6.4.18",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addon-storysource": "^6.4.18",
+    "@storybook/builder-webpack5": "^6.4.18",
+    "@storybook/manager-webpack5": "^6.4.18",
+    "@storybook/react": "^6.4.18",
+    "@types/node": "^17.0.16",
+    "@types/react": "^17.0.39",
     "@types/twemoji": "^12.1.2",
     "@types/umami": "^0.1.0",
+    "babel-loader": "^8.2.3",
     "commitlint": "^16.1.0",
     "eslint": "^8.8.0",
-    "eslint-config-next": "^12.0.9",
+    "eslint-config-next": "^12.0.10",
     "eslint-config-sznm": "^0.2.1",
+    "eslint-plugin-storybook": "^0.5.6",
     "husky": "^7.0.4",
-    "lint-staged": "^12.3.2",
+    "lint-staged": "^12.3.3",
     "prettier": "^2.5.1",
     "standard-version": "^9.3.2",
+    "storybook-addon-performance": "^0.16.1",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.5.5"
   },
   "repository": {

src/lib/components/shared/SpokerButton/SpokerButton.stories.tsx

@@ -0,0 +1,19 @@
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import SpokerButton from "./index";
+
+export default {
+  title: "shared/Button",
+  component: SpokerButton,
+} as ComponentMeta<typeof SpokerButton>;
+
+const Template: ComponentStory<typeof SpokerButton> = (props) => (
+  <SpokerButton {...props} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: "Button",
+  colorScheme: "blue",
+  variant: "solid",
+};

src/lib/components/shared/SpokerInput/SpokerInput.stories.tsx

@@ -0,0 +1,18 @@
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import SpokerInput from "./index";
+
+export default {
+  title: "shared/Input",
+  component: SpokerInput,
+} as ComponentMeta<typeof SpokerInput>;
+
+const Template: ComponentStory<typeof SpokerInput> = (props) => (
+  <SpokerInput {...props} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Label",
+  variant: "filled",
+};

src/lib/components/shared/SpokerLoading/SpokerLoading.stories.tsx

@@ -0,0 +1,12 @@
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import SpokerLoading from "./index";
+
+export default {
+  title: "shared/LoadingScreen",
+  component: SpokerLoading,
+} as ComponentMeta<typeof SpokerLoading>;
+
+const Template: ComponentStory<typeof SpokerLoading> = () => <SpokerLoading />;
+
+export const Default = Template.bind({});

src/lib/components/shared/SpokerRadioBox/SpokerRadioBox.stories.tsx

@@ -0,0 +1,14 @@
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import SpokerRadioBox from "./index";
+
+export default {
+  title: "shared/RadioBox",
+  component: SpokerRadioBox,
+} as ComponentMeta<typeof SpokerRadioBox>;
+
+const Template: ComponentStory<typeof SpokerRadioBox> = (props) => (
+  <SpokerRadioBox {...props} />
+);
+
+export const Default = Template.bind({});

src/lib/stories/Introduction.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Introduction" />
+
+# Welcome to `Spoker` Storybook