WIP: Refactor Refactor Refactor Refactor

.storybook/main.js

@@ -0,0 +1,51 @@
+const path = require("path")
+const toPath = (_path) => path.join(process.cwd(), _path)
+
+module.exports = {
+  stories: ['../src/components/**/*.stories.mdx', '../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        sourceLoaderOptions: {
+          parser: 'typescript',
+          injectStoryParameters: false,
+        },
+      },
+    },
+  ],
+  typescript: {
+    check: true,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => ['label', 'disabled'].includes(prop.name),
+      //      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+   webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ["style-loader", "css-loader", "sass-loader"],
+      include: path.resolve(__dirname, "../")
+    });
+
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve("babel-loader"),
+      options: {
+        presets: [["react-app", { flow: false, typescript: true }]]
+      }
+    });
+    config.resolve.extensions.push(".ts", ".tsx");
+    config.resolve.alias = {
+          "@emotion/core": toPath("node_modules/@emotion/react"),
+          "emotion-theming": toPath("node_modules/@emotion/react"),
+    }
+
+    return config;
+  }
+};

.storybook/preview.js

@@ -0,0 +1,62 @@
+import {
+  ChakraProvider,
+  extendTheme,
+  Flex,
+  IconButton,
+  useColorMode,
+  useColorModeValue,
+} from "@chakra-ui/react"
+import * as React from "react"
+import { FaMoon, FaSun } from "react-icons/fa"
+import { withPerformance } from "storybook-addon-performance"
+
+/**
+ * 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, context) => {
+  const { direction } = context.globals
+  const dir = direction.toLowerCase()
+  return (
+    <ChakraProvider theme={extendTheme({ direction: dir })}>
+      <div dir={dir} id="story-wrapper" style={{ minHeight: "100vh" }}>
+        <ColorModeToggleBar />
+        <StoryFn />
+      </div>
+    </ChakraProvider>
+  )
+}
+
+export const decorators = [withChakra, withPerformance]