feat: add basic webui

apps/storybook/.storybook/main.ts

@@ -0,0 +1,30 @@
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from '@storybook/nextjs';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+const getAbsolutePath = (value: string) =>
+  dirname(require.resolve(join(value, 'package.json')));
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-themes'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/nextjs'),
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+
+export default config;

apps/storybook/.storybook/preview-head.html

@@ -0,0 +1,17 @@
+<!-- https://github.com/vercel/geist-font/issues/72 -->
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap" rel="stylesheet">
+
+<style>
+  :root {
+    --font-geist-sans: "Geist", sans-serif;
+    --font-geist-mono: "Geist Mono", monospace;
+  }
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    touch-action: manipulation;
+  }
+</style>

apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,53 @@
+import { Toaster } from '@konobangu/design-system/components/ui/sonner';
+import { TooltipProvider } from '@konobangu/design-system/components/ui/tooltip';
+import { ThemeProvider } from '@konobangu/design-system/providers/theme';
+import { withThemeByClassName } from '@storybook/addon-themes';
+import type { Preview } from '@storybook/react';
+
+import '@konobangu/design-system/styles/globals.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    chromatic: {
+      modes: {
+        light: {
+          theme: 'light',
+          className: 'light',
+        },
+        dark: {
+          theme: 'dark',
+          className: 'dark',
+        },
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+    (Story) => {
+      return (
+        <div className="bg-background">
+          <ThemeProvider>
+            <TooltipProvider>
+              <Story />
+            </TooltipProvider>
+            <Toaster />
+          </ThemeProvider>
+        </div>
+      );
+    },
+  ],
+};
+
+export default preview;