feat: create stepper component

.storybook/main.ts

@@ -0,0 +1,55 @@
+import path, { dirname, join } from "node:path";
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  staticDirs: ["../public"],
+  addons: [
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("storybook-dark-mode"),
+    {
+      name: "storybook-addon-module-mock",
+      options: {
+        exclude: ["**/node_modules/@mui/**"]
+      }
+    }
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {
+      nextConfigPath: "../next.config.js",
+      builder: {
+        fsCache: true
+      }
+    }
+  },
+  core: {
+    disableTelemetry: true
+  },
+  features: {
+    experimentalRSC: true
+  },
+  typescript: {
+    reactDocgen: false
+  },
+  webpack(baseConfig) {
+    baseConfig.resolve = {
+      ...(baseConfig.resolve ?? {}),
+      alias: {
+        ...(baseConfig.resolve?.alias ?? {}),
+        "@lingui/macro": path.resolve(__dirname, "../__mocks__/@lingui/macro.ts"),
+        "~/storybook/*": path.resolve(__dirname, "./*"),
+        "@opentelemetry/api": "next/dist/compiled/@opentelemetry/api"
+      }
+    };
+    return baseConfig;
+  }
+};
+
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,81 @@
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import type { Preview } from "@storybook/react";
+import ApplicationProvider from "../src/core/ApplicationProvider";
+import { AVAILABLE_LOCALES } from "../src/core/locale";
+import "~/app/[locale]/globals.css";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+const decorators: Preview["decorators"] = [
+  (Story, { globals: { locale } }) => {
+    return (
+      <div lang={locale} dir="ltr" className={inter.className}>
+        <ApplicationProvider locale={locale}>
+          <Story />
+        </ApplicationProvider>
+      </div>
+    );
+  }
+];
+
+const parameters: Preview["parameters"] = {
+  nextjs: {
+    appDirectory: true
+  },
+  layout: "fullscreen",
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  options: {
+    storySort: {
+      method: "alphabetical",
+      order: ["Components"]
+    }
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  },
+  backgrounds: {
+    default: "White",
+    values: [
+      {
+        name: "dark",
+        value: "black"
+      },
+      {
+        name: "Cream",
+        value: "white"
+      },
+      {
+        name: "Cream dark",
+        value: "white"
+      }
+    ]
+  },
+  viewport: { viewports: INITIAL_VIEWPORTS, defaultViewport: "desktop" }
+};
+
+export const globalTypes: Preview["globalTypes"] = {
+  locale: {
+    toolbar: {
+      icon: "globe",
+      items: [
+        { value: AVAILABLE_LOCALES.en, right: "🇺🇸", title: "English" },
+        { value: AVAILABLE_LOCALES.fr, right: "🇫🇷", title: "French" }
+      ]
+    },
+    name: "Locale",
+    description: "Internationalization locale",
+    defaultValue: AVAILABLE_LOCALES.en
+  }
+};
+
+const preview: Preview = {
+  parameters,
+  decorators,
+  globalTypes
+};
+
+export default preview;