Init Storybook and replace from Vite.js

.eslintrc.cjs

@@ -1,11 +1,7 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],

.github/workflows/build-deploy.yml

@@ -31,14 +31,14 @@ jobs:
       - name: Install and Build 🔧
         run: |
           npm ci
-          npm run build
+          npm run build-storybook
       - name: Setup Pages
         uses: actions/configure-pages@v4
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload entire repository
-          path: 'dist'
+          path: 'storybook-static'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.gitignore

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

.storybook/CustomTheme.ts

@@ -0,0 +1,9 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "light",
+  brandTitle: "FOIL4G",
+  brandUrl: "https://unopengis.github.io/foil4g/",
+  brandImage: "https://i.gyazo.com/a19117e21c1c918c2218a337877ed77e.jpg",
+  brandTarget: "_blank",
+});

.storybook/main.ts

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

.storybook/manager.ts

@@ -0,0 +1,24 @@
+import { addons } from "@storybook/manager-api";
+
+import CustomTheme from "./CustomTheme.ts";
+
+addons.setConfig({
+  theme: CustomTheme,
+  navSize: 300,
+  bottomPanelHeight: 100,
+  rightPanelWidth: 100,
+  enableShortcuts: true,
+  showToolbar: true,
+  showPanel: false,
+  initialActive: "sidebar",
+  sidebar: {
+    showRoots: true,
+  },
+  toolbar: {
+    title: { hidden: false },
+    zoom: { hidden: true },
+    eject: { hidden: false },
+    copy: { hidden: false },
+    fullscreen: { hidden: true },
+  },
+});

.storybook/preview.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { themes } from "@storybook/theming";
+
+const preview: Preview = {
+  parameters: {
+    docs: { theme: themes.dark },
+    options: {
+      bottomPanelHeight: 0,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default preview;