chore(storybook): configure storybook

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

.storybook/main.js

@@ -1,5 +1,32 @@
+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 = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  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()],
+      },
+    }
+  },
 };

.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,80 @@
+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 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();
+
+  React.useEffect(() => {
+    document.documentElement.dir = dir;
+  }, [dir]);
+
+  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

@@ -40,9 +40,11 @@
     "@babel/core": "^7.17.2",
     "@commitlint/config-conventional": "^16.0.0",
     "@jahed/firebase-rules": "^1.1.0",
+    "@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/react": "^6.4.18",
     "@types/node": "^17.0.13",
     "@types/react": "^17.0.38",
@@ -58,6 +60,8 @@
     "lint-staged": "^12.3.2",
     "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": {