First part of the Storybook

.gitignore

@@ -69,4 +69,6 @@ android/.project
 android/.settings/
 android/app/.classpath
 android/app/.project
-android/app/.settings/
+android/app/.settings/
+*storybook.log
+storybook-static

.npmrc

@@ -1 +0,0 @@
-min-release-age=7

.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@chromatic-com/storybook", "@storybook/addon-a11y", "@storybook/addon-docs", "@storybook/addon-mcp"],
+  framework: "@storybook/react-vite",
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+  rel="stylesheet"
+/>

.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import type { Preview } from "@storybook/react-vite";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import React from "react";
+
+const theme = createTheme();
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
+
+    docs: {
+      toc: true,
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default preview;