Storybook (#1332)

* feat: configure storybook and add a basic button story

* fine-tune button variants, rename accent variant to secondary

* feat(Button): add loading state

* feat: add font-related classes to storybook previews

* feat: add `destructive-ghost` variant

.gitignore

@@ -32,4 +32,6 @@ yarn-error.log*
 cypress/screenshots
 cypress/videos
 
-.idea
+.idea
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from "@storybook/nextjs"
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    },
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,31 @@
+import type { Preview } from "@storybook/react"
+import "../src/app/globals.css"
+import { dystopian, inter } from "../src/fonts"
+
+import { withThemeByDataAttribute } from "@storybook/addon-themes"
+
+document?.querySelector("body")?.classList.add(inter.variable, dystopian.variable)
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+      attributeName: "data-theme",
+    }),
+  ],
+}
+
+export default preview