feature/aip

.gitignore

@@ -45,3 +45,6 @@ __pycache__
 # yalc
 .yalc
 yalc.lock
+
+*storybook.log
+storybook-static

.storybook/main.js

@@ -0,0 +1,30 @@
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: ['@storybook/preset-create-react-app', '@storybook/addon-docs', '@storybook/addon-onboarding'],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
+
+  staticDirs: ['../public'],
+
+  webpackFinal: async (config) => {
+    config.module.rules = config.module.rules.filter(
+      (rule) => !(rule.use && rule.use.some((u) => u.loader?.includes('eslint')))
+    );
+
+    config.plugins = config.plugins.filter(
+      (plugin) => !(plugin.constructor && plugin.constructor.name === 'ESLintWebpackPlugin')
+    );
+
+    return config;
+  },
+};
+
+export default config;

.storybook/manager.js

@@ -0,0 +1,10 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: {
+    ...themes.light,
+    brandTitle: 'Cosmotech Storybook',
+    brandImage: '/theme/cosmotech_light_logo.png',
+  },
+});

.storybook/preview.js

@@ -0,0 +1,27 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+/* eslint-disable react/react-in-jsx-scope */
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import { getTheme } from '../src/theme';
+
+const theme = getTheme(false);
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Story />
+    </ThemeProvider>
+  ),
+];
+
+export default {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};

eslint.config.mjs

@@ -6,6 +6,7 @@ import js from '@eslint/js';
 import cypress from 'eslint-plugin-cypress';
 import jest from 'eslint-plugin-jest';
 import prettier from 'eslint-plugin-prettier';
+import storybook from 'eslint-plugin-storybook';
 import globals from 'globals';
 import neostandard from 'neostandard';
 import path from 'node:path';
@@ -35,10 +36,8 @@ export default [
   },
   ...neostandardConfig,
   ...compat.extends('plugin:react/recommended', 'prettier', 'plugin:prettier/recommended', 'plugin:jest/recommended'),
-
   cypress.configs.recommended,
   cypress.configs.globals,
-
   {
     plugins: {
       react,
@@ -100,4 +99,5 @@ export default [
       'jest/valid-expect-in-promise': 0,
     },
   },
+  ...storybook.configs['flat/recommended'],
 ];

package.json

@@ -22,6 +22,7 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.555.0",
     "prop-types": "^15.8.1",
     "react": "^19.1.1",
     "react-countdown": "^2.3.6",
@@ -49,7 +50,9 @@
     "eslint": "eslint",
     "prettier": "npx prettier -w",
     "link:ui": "yalc add @cosmotech/ui && yalc link @cosmotech/ui && yarn install",
-    "unlink:ui": "yalc remove @cosmotech/ui && yarn install"
+    "unlink:ui": "yalc remove @cosmotech/ui && yarn install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "engines": {
     "node": "^22",
@@ -75,6 +78,17 @@
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
+    "@storybook/addon-controls": "^9.0.8",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-onboarding": "10.0.8",
+    "@storybook/addon-storyshots": "7.6.17",
+    "@storybook/addon-storyshots-puppeteer": "7.6.17",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/preset-create-react-app": "^10.0.8",
+    "@storybook/react-webpack5": "10.0.8",
+    "@storybook/theming": "^8.6.14",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -98,6 +112,7 @@
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "10.0.8",
     "globals": "^16.4.0",
     "http-proxy-middleware": "^3.0.5",
     "i18next-parser": "^9.3.0",
@@ -110,7 +125,10 @@
     "react-app-rewired": "^2.2.1",
     "react-scripts": "^5.0.1",
     "read-excel-file": "^6.0.1",
-    "stream-browserify": "^3.0.0"
+    "sass-loader": "^16.0.6",
+    "storybook": "10.0.8",
+    "stream-browserify": "^3.0.0",
+    "webpack": "5.103.0"
   },
   "packageManager": "[email protected]"
 }

src/AppRoutes.js

@@ -21,13 +21,21 @@ const AppRoutes = () => {
       <>
         <Route path="/" element={<Navigate to={redirectPath} replace />} />
         <Route
-          path="/workspaces"
           element={
             <UserStatusGate>
-              <Workspaces />
+              <TabLayout />
             </UserStatusGate>
           }
-        />
+        >
+          <Route
+            path="/workspaces"
+            element={
+              <UserStatusGate>
+                <Workspaces />
+              </UserStatusGate>
+            }
+          />
+        </Route>
         <Route
           path=":workspaceId"
           element={
@@ -39,7 +47,7 @@ const AppRoutes = () => {
         <Route
           element={
             <UserStatusGate>
-              <TabLayout tabs={tabs} />
+              <TabLayout />
             </UserStatusGate>
           }
         >