v3

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 150,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxBracketSameLine": true
+}

.storybook/main.js

@@ -4,7 +4,7 @@ module.exports = {
     stories: ['../src/ui/**/*.stories.tsx'],
 
     // Add any Storybook addons you want here: https://storybook.js.org/addons/
-    addons: [],
+    addons: ['@storybook/addon-styling-webpack'],
 
     webpackFinal: async (config) => {
         config.module.rules.push({

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.js

@@ -65,3 +65,4 @@
  *
  * Will add a new dropdown in your toolbar with options light and dark.
  **/
+import '../src/index.css';

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
-  "workbench.colorCustomizations": {
-    "activityBar.background": "#302F09",
-    "titleBar.activeBackground": "#43410D",
-    "titleBar.activeForeground": "#FBFAE9"
-  }
-}
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#302F09",
+        "titleBar.activeBackground": "#43410D",
+        "titleBar.activeForeground": "#FBFAE9"
+    }
+}