feat: storybook theming exploration (#425)

* feat: storybook customisation * feat: improved storybook themeing * chore: remove website directory from unrelated branch * feat: install storybook test runner and add corresponding github workflow (#418) * feat: install storybook test runner and add corresponding github workflow * chore: remove unnecessary storybook test runner config file * feat: update readme to include testing instructions * feat: add vite dependency for ci * chore(deps-dev): bump @storybook/blocks from 8.0.5 to 8.0.6 (#419) Bumps [@storybook/blocks](https://github.com/storybookjs/storybook/tree/HEAD/code/ui/blocks) from 8.0.5 to 8.0.6. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.6/code/ui/blocks) --- updated-dependencies: - dependency-name: "@storybook/blocks" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump typescript from 5.4.2 to 5.4.4 (#420) Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.4.2 to 5.4.4. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](microsoft/TypeScript@v5.4.2...v5.4.4) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/preset-env from 7.24.3 to 7.24.4 (#424) Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.24.3 to 7.24.4. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.4/packages/babel-preset-env) --- updated-dependencies: - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @storybook/react from 8.0.1 to 8.0.6 (#421) Bumps [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/code/renderers/react) from 8.0.1 to 8.0.6. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.6/code/renderers/react) --- updated-dependencies: - dependency-name: "@storybook/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @storybook/addon-links from 8.0.1 to 8.0.6 (#422) Bumps [@storybook/addon-links](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/links) from 8.0.1 to 8.0.6. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.6/code/addons/links) --- updated-dependencies: - dependency-name: "@storybook/addon-links" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: storybook customisation * feat: install storybook test runner and add corresponding github workflow (#418) * feat: install storybook test runner and add corresponding github workflow * chore: remove unnecessary storybook test runner config file * feat: update readme to include testing instructions * feat: add vite dependency for ci * chore(deps-dev): bump @storybook/react from 8.0.1 to 8.0.6 (#421) Bumps [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/code/renderers/react) from 8.0.1 to 8.0.6. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.6/code/renderers/react) --- updated-dependencies: - dependency-name: "@storybook/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: storybook customisation * feat: install storybook test runner and add corresponding github workflow (#418) * feat: install storybook test runner and add corresponding github workflow * chore: remove unnecessary storybook test runner config file * feat: update readme to include testing instructions * feat: add vite dependency for ci * feat: storybook customisation * feat: install storybook test runner and add corresponding github workflow (#418) * feat: install storybook test runner and add corresponding github workflow * chore: remove unnecessary storybook test runner config file * feat: update readme to include testing instructions * feat: add vite dependency for ci * chore(deps-dev): bump @storybook/blocks from 8.0.5 to 8.0.6 (#419) Bumps [@storybook/blocks](https://github.com/storybookjs/storybook/tree/HEAD/code/ui/blocks) from 8.0.5 to 8.0.6. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.6/code/ui/blocks) --- updated-dependencies: - dependency-name: "@storybook/blocks" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @storybook/react from 8.0.1 to 8.0.6 (#421) Bumps [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/code/renderers/react) from 8.0.1 to 8.0.6. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.6/code/renderers/react) --- updated-dependencies: - dependency-name: "@storybook/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: storybook customisation * feat: storybook customisation * feat: storybook customisation * feat: slightly improved spacing in storybook docs * fix: deps * fix: deps * fix: deps * fix: linting * Revert "fix: linting" This reverts commit e018f8d. * fix: linting --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
nearform · Apr 15, 2024 · 99d14bb · 99d14bb
1 parent cc6de02
commit 99d14bb
Show file tree

Hide file tree

Showing 16 changed files with 4,640 additions and 5,259 deletions.
diff --git a/.storybook/DocsContainer.tsx b/.storybook/DocsContainer.tsx
diff --git a/.storybook/colors.ts b/.storybook/colors.ts
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,5 +1,5 @@
-import * as path from 'path'
-import type { StorybookConfig } from '@storybook/react-vite'
+import * as path from 'path';
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: [
@@ -10,12 +10,13 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    'storybook-dark-mode'
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
     name: '@storybook/react-vite',
     options: {}
   },
+  staticDirs: ['../public/'],
   docs: {
     autodocs: 'tag'
   },
@@ -24,10 +25,10 @@ const config: StorybookConfig = {
       config.resolve.alias = {
         ...config.resolve.alias,
         '@': path.join(__dirname, '../src')
-      }
+      };
     }
 
-    return config
+    return config;
   }
-}
-export default config
+};
+export default config;
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -1,5 +1,10 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+  rel="stylesheet" />
+<link href="/manager.css" rel="stylesheet" />
 <style>
   iframe#storybook-preview-iframe {
     background-color: transparent;
   }
-</style>
+</style>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,6 +1,5 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+  rel="stylesheet" />
+<link href="/preview.css" rel="stylesheet" />
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,15 +1,20 @@
-import { DocsContainer } from './DocsContainer'
-import { themes } from '@storybook/theming'
+import './global.css';
+import { Preview } from '@storybook/react';
+import theme from './theme';
 
-import './global.css'
-
-export const parameters = {
-  backgrounds: { disable: true },
-  darkMode: {
-    dark: { ...themes.dark },
-    light: { ...themes.normal }
-  },
-  docs: {
-    container: DocsContainer
+const preview: Preview = {
+  parameters: {
+    backgrounds: { disable: true },
+    docs: {
+      theme,
+      toc: true
+    },
+    options: {
+      storySort: {
+        order: ['Get Started']
+      }
+    }
   }
-}
+};
+
+export default preview;
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -1,6 +1,37 @@
-import { create } from '@storybook/theming/create'
+import { create } from '@storybook/theming/create';
+import colors from '../src/colors';
 
 export default create({
   base: 'light',
-  brandTitle: 'NearForm Quantum'
-})
+  brandTitle: 'Quantum',
+  brandImage: '/quantum-logo-light.png',
+
+  fontBase: 'Inter',
+
+  appBg: colors.white.DEFAULT,
+
+  colorPrimary: '#000E38',
+  colorSecondary: '#0C3D60',
+
+  // UI
+  appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
+  appBorderColor: '#D1D5DB',
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: '#111928',
+  textInverseColor: '#111928',
+
+  // Toolbar default and active colors
+  barTextColor: '#fff',
+  barHoverColor: '#7EDCE2',
+  barSelectedColor: '#7EDCE2',
+  barBg: '#000E38',
+
+  // Form colors
+  inputBg: '#ffffff',
+  inputBorder: '#97A1B8',
+  inputTextColor: '#111928',
+  inputBorderRadius: 2
+});