Add storybook. Include build/testing workflow

.github/workflows/testing.yml

@@ -0,0 +1,35 @@
+name: Test App
+on: [pull_request, workflow_dispatch]
+
+jobs:
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - name: Using Node latest
+              uses: actions/setup-node@v4
+              with:
+                node-version: ">=18.0"
+            - name: Install packages
+              run: npm ci
+            - name: Run lint check
+              run: npm run lint
+            - name: Install playwright
+              run: npx playwright install --with-deps
+            - name: Run Tests
+              run: npm test
+
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - name: Using Node latest
+              uses: actions/setup-node@v4
+              with:
+                node-version: ">=18.0"
+            - name: Install packages
+              run: npm ci
+            - name: Run lint check
+              run: npm run lint
+            - name: Build
+              run: npm run build

.gitignore

@@ -23,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log
+storybook-static

.storybook/devoteam.ts

@@ -0,0 +1,16 @@
+import { create } from 'storybook/theming';
+import theme from '../src/core/theme';
+
+export default create({
+    base: 'dark',
+    brandTitle: 'Devoteam',
+    brandUrl: "https://gcloud.devoteam.com/home/",
+    brandImage: "/logo-devoteam.svg",
+    brandTarget: "_blank",
+    fontBase: '"Open Sans", sans-serif',
+    fontCode: 'monospace',
+
+    barSelectedColor: theme.colors.primary,
+    barHoverColor: theme.colors.primary,
+    colorSecondary: theme.colors.primary
+});

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    "stories": [
+        "../src/**/*.mdx",
+        "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+    ],
+    "addons": [
+        "@chromatic-com/storybook",
+        "@storybook/addon-docs",
+        "@storybook/addon-a11y",
+        "@storybook/addon-vitest"
+    ],
+    "framework": {
+        "name": "@storybook/react-vite",
+        "options": {}
+    },
+    managerHead: (head) =>
+        `${head}
+      <link rel="shortcut icon" href="/favicon.ico" type="image/ico">`,
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,8 @@
+import {addons} from 'storybook/manager-api';
+import theme from './devoteam';
+
+addons.setConfig({
+    theme: theme
+});
+
+export default theme;

.storybook/preview.ts

@@ -0,0 +1,32 @@
+import type { Preview } from '@storybook/react-vite';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import theme from '../src/core/theme';
+import { ThemeProvider } from '@emotion/react';
+
+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',
+        }
+    },
+    decorators: [
+        withThemeFromJSXProvider({
+            themes: {
+                theme
+            },
+            Provider: ThemeProvider
+        })
+    ]
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

eslint.config.js

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
@@ -6,8 +9,16 @@ import tseslint from 'typescript-eslint'
 import { globalIgnores } from 'eslint/config'
 
 export default tseslint.config([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'node_modules', 'public']),
   {
+    rules: {
+      "indent": ["error", 4, { "SwitchCase": 2 }],
+      "no-tabs": ["error"],
+      "no-trailing-spaces": ["error"],
+      "prefer-const": "error",
+      "no-console": "warn",
+      semi: 'warn'
+    },
     files: ['**/*.{ts,tsx}'],
     extends: [
       js.configs.recommended,
@@ -20,4 +31,4 @@ export default tseslint.config([
       globals: globals.browser,
     },
   },
-])
+], storybook.configs["flat/recommended"]);