fix: initial storybook setup

.storybook/main.js

@@ -0,0 +1,32 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../www/documentation', '../src'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '../www/storybook/analytics/preset.js',
+  ],
+  framework: '@storybook/react',
+  staticDirs: ['../www/assets'],
+
+  core: {
+    builder: 'webpack5',
+    enableCrashReports: false,
+  },
+  // https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.css$/i,
+      use: [
+        {
+          loader: 'postcss-loader',
+        },
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+    return config;
+  },
+};

.storybook/manager-head.html

@@ -0,0 +1,28 @@
+<!-- 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>
+
+<script>
+  if (window.MutationObserver !== null) {
+    new MutationObserver(function (mutations) {
+      if (document.title.match(/⋅ Storybook$/)) {
+        document.title = document.title.replace('⋅ Storybook', '⋅ Adslot UI');
+      }
+    }).observe(document.querySelector('title'), {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+  }
+</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.js

@@ -0,0 +1,41 @@
+import theme from './theme';
+import { Vertical } from '../www/storybook/Decorators';
+import Overview from '../www/storybook/Overview/index.mdx';
+import '../src/styles/bootstrap-custom.css';
+import '../www/storybook/storybook.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      order: [
+        'Getting Started',
+        ['Introduction', 'Installation', 'Contributing'],
+        'Design System',
+        ['Design Guide', 'Tokens', ['Overview', 'Colours', 'Typography', 'Border']],
+        'Components',
+        'Pending Review',
+      ],
+    },
+  },
+  backgrounds: {
+    grid: {
+      cellSize: 12,
+    },
+  },
+  viewMode: 'docs',
+  docs: {
+    theme: theme,
+    components: {
+      Overview,
+    },
+  },
+};
+
+// this is the default decorator, which will wrap all stories
+export const decorators = [Vertical];

.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,
+});

config/paths.js

@@ -12,8 +12,6 @@ module.exports = {
   appDistEs: resolveApp('es'),
   appDistCjs: resolveApp('lib'),
   appPublic: resolveApp('www'),
-  appHtml: resolveApp('www/index.html'),
-  appIndexJs: resolveApp('www/index.jsx'),
   appDistJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appDemo: resolveApp('www'),