docs: migrate to storybook for docs app

.eslintrc

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "extends": ["adslot", "plugin:import/typescript"],
+  "extends": ["adslot", "plugin:import/typescript", "plugin:storybook/recommended"],
   "settings": {
     "lodash": {
       "version": 4

.storybook/main.ts

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+const config: StorybookConfig = {
+  stories: ['../www/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../www/assets'],
+
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    return mergeConfig(config, {
+      plugins: [
+        svgr({
+          exportAsDefault: true,
+        }),
+      ],
+    });
+  },
+};
+
+export default config;

.storybook/manager-head.html

@@ -0,0 +1,14 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-18273448-24"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'UA-18273448-24');
+</script>
+
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
+<link rel="stylesheet" href="/storybook-global.css" />

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { Title, Subtitle, Description, Primary, ArgTypes, Stories } from '@storybook/blocks';
+
+import '../src/styles/bootstrap-custom.css';
+import '../www/storybook.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+      expanded: true,
+    },
+    options: {
+      storySort: {
+        order: [
+          'Getting Started',
+          ['Introduction', 'Installation', 'Contributing'],
+          'Design System',
+          ['Design Guide', 'Usage', 'Colors', 'Typography', 'Border'],
+          'Components',
+          'Pending Review',
+        ],
+      },
+    },
+    layout: 'centered',
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <ArgTypes />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default preview;

.storybook/theme.js

@@ -0,0 +1,38 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  brandTitle: 'Adslot UI',
+  brandUrl: 'https://ui.adslot.com',
+  brandImage: '/aui--logo.png',
+  gridCellSize: 12,
+  base: 'light',
+
+  colorPrimary: '#006dcc',
+  colorSecondary: '#006dcc',
+
+  // UI
+  appBg: 'white',
+  appContentBg: '#ffffff',
+  appBorderColor: '#e8e8e8',
+  appBorderRadius: 3,
+
+  // Typography
+  fontBase: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#333',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+  textMutedColor: '#838383',
+
+  // Toolbar default and active colors
+  barTextColor: '#5a5a5a',
+  barSelectedColor: '#5a5a5a',
+  barBg: '#f9f9f9',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: '#d3d3d3',
+  inputTextColor: '#333',
+  inputBorderRadius: 3,
+});