feat: add storybook and new badge component with stories

frontend/.storybook/decorators/RouterDecorator.tsx

@@ -0,0 +1,17 @@
+import type { Decorator } from "@storybook/react-vite";
+import { createRootRoute, createRouter, RouterProvider } from "@tanstack/react-router";
+
+export const RouterDecorator: Decorator = (Story) => {
+  const rootRoute = createRootRoute({
+    component: Story
+  });
+
+  const routeTree = rootRoute;
+
+  const router = createRouter({
+    routeTree
+  });
+
+  // @ts-expect-error just to make Links happy :)
+  return <RouterProvider router={router} />;
+};

frontend/.storybook/decorators/index.ts

@@ -0,0 +1 @@
+export * from "./RouterDecorator";

frontend/.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/components/v3/**/*.mdx",
+    "../src/components/v3/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  addons: ["@storybook/addon-docs", "@storybook/addon-a11y"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  }
+};
+export default config;

frontend/.storybook/preview.tsx

@@ -0,0 +1,45 @@
+import type { Preview } from "@storybook/react-vite";
+
+import { RouterDecorator } from "./decorators";
+
+import "../src/index.css";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      const root = document.getElementsByTagName("html")[0];
+
+      root.setAttribute("class", "overflow-visible");
+
+      return <Story />;
+    },
+    RouterDecorator
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    docs: {
+      backgroundColor: "var(--background)"
+    },
+    a11y: {
+      test: "todo"
+    },
+    backgrounds: {
+      default: "dark",
+      options: {
+        dark: { name: "Dark", value: "var(--background)" }
+      }
+    }
+  },
+  initialGlobals: {
+    backgrounds: {
+      value: "dark"
+    }
+  }
+};
+
+export default preview;