chore: initialize storybook using nx command

.gitignore

@@ -45,3 +45,6 @@ Thumbs.db
 # Next.js
 .next
 out
+
+
+storybook-static

apps/website/app/components/button.tsx

@@ -0,0 +1,3 @@
+export function Button() {
+  return <button type="button">Button</button>
+}

libs/storybook-host/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/storybook-host/.storybook/custom-viewports.ts

@@ -0,0 +1,40 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+export const customViewports = {
+  ...INITIAL_VIEWPORTS,
+  '720p': {
+    name: '720p',
+    styles: {
+      width: '1280px',
+      height: '720px',
+    },
+  },
+  '1080p': {
+    name: '1080p',
+    styles: {
+      width: '1920px',
+      height: '1080px',
+    },
+  },
+  '2k': {
+    name: '2K',
+    styles: {
+      width: '2560px',
+      height: '1440px',
+    },
+  },
+  '4k': {
+    name: '4K',
+    styles: {
+      width: '3840px',
+      height: '2160px',
+    },
+  },
+  '21/9': {
+    name: '21/9',
+    styles: {
+      width: '2560px',
+      height: '1080px',
+    },
+  },
+}

libs/storybook-host/.storybook/globals.css

@@ -0,0 +1,222 @@
+@config '../../../apps/website/tailwind.config.ts';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*Easily customize theme: https://zippystarter.com/tools/shadcn-ui-theme-generator*/
+/*Explore the Shadcn/ui ecosystem: https://github.com/birobirobiro/awesome-shadcn-ui*/
+
+/*'primary': '#00A3E0',*/
+/*'primary-content': '#000a12',*/
+/*'secondary': '#00629b',*/
+/*'secondary-content': '#d0dfec',*/
+/*'accent': '#FFD100',*/
+/*'accent-content': '#161000',*/
+/*'neutral': '#00843d',*/
+/*'neutral-content': '#d3e6d7',*/
+/*// "base-100": "#002855",*/
+/*'base-100': '#000000',*/
+/*'base-200': '#002149',*/
+/*'base-300': '#001b3d',*/
+/*'base-content': '#c8d1dc',*/
+/*'info': '#009CA6',*/
+/*'info-content': '#00090a',*/
+/*'success': '#78be21',*/
+/*'success-content': '#050d00',*/
+/*'warning': '#ffa400',*/
+/*'warning-content': '#160a00',*/
+/*'error': '#BA0C2F',*/
+/*'error-content': '#f8d4d3',*/
+
+@layer base {
+  :root {
+    --background: 196 100% 95%;
+    /* hsl(196, 100%, 95%) */
+    --foreground: 196 5% 0%;
+    /* hsl(196, 5%, 0%) */
+    --card: 196 50% 90%;
+    /* hsl(196, 50%, 90%) */
+    --card-foreground: 196 5% 10%;
+    /* hsl(196, 5%, 10%) */
+    --popover: 196 100% 95%;
+    /* hsl(196, 100%, 95%) */
+    --popover-foreground: 196 100% 0%;
+    /* hsl(196, 100%, 0%) */
+
+    --primary: 196 100% 43.9%;
+    /* hsl(196, 100%, 43.9%) */
+    --primary-foreground: 0 0% 100%;
+    /* hsl(0, 0%, 100%) */
+    --auxiliary: 203, 100%, 37%;
+    /* hsl(203, 100%, 37%) */
+    --auxiliary-foreground: 213, 13%, 91%;
+    /* hsl(213, 13%, 91%) */
+    --tertiary: 52, 100%, 50%;
+    /* hsl(52, 100%, 50%) */
+    --tertiary-foreground: 60, 4%, 9%;
+    /* hsl(60, 4%, 9%) */
+    --neutral: 143, 100%, 26%;
+    /* hsl(143, 100%, 26%) */
+    --neutral-foreground: 141, 13%, 85%;
+    /* hsl(141, 13%, 85%) */
+    /*// "base-100": "#002855",*/
+    /*'base-100': '#000000',*/
+    /*'base-200': '#002149',*/
+    /*'base-300': '#001b3d',*/
+    /*'base-content': '#c8d1dc',*/
+    --info: 183, 100%, 33%;
+    /* hsl(183, 100%, 33%) */
+    --info-foreground: 180, 100%, 3%;
+    /* hsl(180, 100%, 3%) */
+    --success: 83, 100%, 25%;
+    /* hsl(83, 100%, 25%) */
+    --success-foreground: 120, 100%, 2%;
+    /* hsl(120, 100%, 2%) */
+    --warning: 38, 100%, 50%;
+    /* hsl(38, 100%, 50%) */
+    --warning-foreground: 30, 100%, 5%;
+    /* hsl(30, 100%, 5%) */
+
+    --secondary: 196 30% 70%;
+    /* hsl(196, 30%, 70%) */
+    --secondary-foreground: 0 0% 0%;
+    /* hsl(0, 0%, 0%) */
+    --muted: 158 30% 85%;
+    /* hsl(158, 30%, 85%) */
+    --muted-foreground: 196 5% 35%;
+    /* hsl(196, 5%, 35%) */
+    --accent: 158 30% 80%;
+    /* hsl(158, 30%, 80%) */
+    --accent-foreground: 196 5% 10%;
+    /* hsl(196, 5%, 10%) */
+    --destructive: 0 100% 30%;
+    /* hsl(0, 100%, 30%) */
+    --destructive-foreground: 196 5% 90%;
+    /* hsl(196, 5%, 90%) */
+    --border: 196 30% 50%;
+    /* hsl(196, 30%, 50%) */
+    --input: 196 30% 18%;
+    /* hsl(196, 30%, 18%) */
+    --ring: 196 100% 43.9%;
+    /* hsl(196, 100%, 43.9%) */
+    --radius: 0.75rem;
+    --chart-1: 12 76% 61%;
+    /* hsl(12, 76%, 61%) */
+    --chart-2: 173 58% 39%;
+    /* hsl(173, 58%, 39%) */
+    --chart-3: 197 37% 24%;
+    /* hsl(197, 37%, 24%) */
+    --chart-4: 43 74% 66%;
+    /* hsl(43, 74%, 66%) */
+    --chart-5: 27 87% 67%;
+    /* hsl(27, 87%, 67%) */
+  }
+
+  .dark {
+    --background: 218 100% 1%;
+    /* hsl(218, 100%, 1%) */
+    --foreground: 196 5% 90%;
+    /* hsl(196, 5%, 90%) */
+    --card: 196 50% 0%;
+    /* hsl(196, 50%, 0%) */
+    --card-foreground: 196 5% 90%;
+    /* hsl(196, 5%, 90%) */
+    --popover: 196 50% 5%;
+    /* hsl(196, 50%, 5%) */
+    --popover-foreground: 196 5% 90%;
+    /* hsl(196, 5%, 90%) */
+    --primary: 196 100% 43.9%;
+    /* hsl(196, 100%, 43.9%) */
+    --primary-foreground: 0 0% 100%;
+    /* hsl(0, 0%, 100%) */
+
+    --auxiliary: 203, 100%, 37%;
+    /* hsl(203, 100%, 37%) */
+    --auxiliary-foreground: 213, 13%, 91%;
+    /* hsl(213, 13%, 91%) */
+    --tertiary: 52, 100%, 50%;
+    /* hsl(52, 100%, 50%) */
+    --tertiary-foreground: 60, 4%, 9%;
+    /* hsl(60, 4%, 9%) */
+    --neutral: 143, 100%, 26%;
+    /* hsl(143, 100%, 26%) */
+    --neutral-foreground: 141, 13%, 85%;
+    /* hsl(141, 13%, 85%) */
+    /*// "base-100": "#002855",*/
+    /*'base-100': '#000000',*/
+    /*'base-200': '#002149',*/
+    /*'base-300': '#001b3d',*/
+    /*'base-content': '#c8d1dc',*/
+    --info: 183, 100%, 33%;
+    /* hsl(183, 100%, 33%) */
+    --info-foreground: 180, 100%, 3%;
+    /* hsl(180, 100%, 3%) */
+    --success: 83, 100%, 25%;
+    /* hsl(83, 100%, 25%) */
+    --success-foreground: 120, 100%, 2%;
+    /* hsl(120, 100%, 2%) */
+    --warning: 38, 100%, 50%;
+    /* hsl(38, 100%, 50%) */
+    --warning-foreground: 30, 100%, 5%;
+    /* hsl(30, 100%, 5%) */
+
+    --secondary: 196 30% 10%;
+    /* hsl(196, 30%, 10%) */
+    --secondary-foreground: 0 0% 100%;
+    /* hsl(0, 0%, 100%) */
+    --muted: 158 30% 15%;
+    /* hsl(158, 30%, 15%) */
+    --muted-foreground: 196 5% 60%;
+    /* hsl(196, 5%, 60%) */
+    --accent: 158 30% 15%;
+    /* hsl(158, 30%, 15%) */
+    --accent-foreground: 196 5% 90%;
+    /* hsl(196, 5%, 90%) */
+    --destructive: 0 100% 30%;
+    /* hsl(0, 100%, 30%) */
+    --destructive-foreground: 196 5% 90%;
+    /* hsl(196, 5%, 90%) */
+    --border: 196 30% 18%;
+    /* hsl(196, 30%, 18%) */
+    --input: 196 30% 18%;
+    /* hsl(196, 30%, 18%) */
+    --ring: 196 100% 43.9%;
+    /* hsl(196, 100%, 43.9%) */
+    --radius: 0.75rem;
+    --chart-1: 220 70% 50%;
+    /* hsl(220, 70%, 50%) */
+    --chart-2: 160 60% 45%;
+    /* hsl(160, 60%, 45%) */
+    --chart-3: 30 80% 55%;
+    /* hsl(30, 80%, 55%) */
+    --chart-4: 280 65% 60%;
+    /* hsl(280, 65%, 60%) */
+    --chart-5: 340 75% 55%;
+    /* hsl(340, 75%, 55%) */
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.backdrop-blur-xs {
+  @apply backdrop-blur-[2px];
+}
+
+@keyframes bobbing {
+  0%,
+  100% {
+    transform: translateY(-2px);
+  }
+
+  50% {
+    transform: translateY(2px);
+  }
+}

libs/storybook-host/.storybook/main.ts

@@ -0,0 +1,109 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  // Pick up any files ending in .mdx, or stories.{js,jsx,ts,tsx} as stories
+  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  // Did not use @storybook/addon-essentials due to lack of toolbar ordering API
+  addons: [
+    // --------------- TOOLBAR ICONS ---------------
+    // Ruler
+    '@storybook/addon-measure',
+    // Phone
+    '@storybook/addon-viewport',
+    // Dotted Outline
+    '@storybook/addon-outline',
+    // Sun/Moon icon. Toggle Manager, Preview Components, and Preview Background
+    'storybook-dark-mode',
+    // Pen. Toggle both Preview Components and Preview Background
+    '@storybook/addon-themes',
+    // Portrait. Toggle only Preview Background. Not affected by other two, use to 'lock' the background.
+    '@storybook/addon-backgrounds',
+    // Person inside circle icon. Also 'Accessibility' tab to action bar
+    '@storybook/addon-a11y',
+
+    // --------------- ACTION BAR ---------------
+    // https://storybook.js.org/docs/essentials/controls
+    '@storybook/addon-controls',
+    // Accessibility tab added by '@storybook/addon-a11y'
+    {
+      name: '@storybook/addon-designs', // Actually has amazing docs for once: https://storybookjs.github.io/addon-designs/?path=/docs/docs-quick-start--docs
+      options: {
+        // renderTarget: 'canvas' | 'tab'
+      },
+    },
+    // https://storybook.js.org/docs/essentials/actions
+    '@storybook/addon-actions',
+    // https://storybook.js.org/docs/essentials/interactions
+    '@storybook/addon-interactions', // Must be listed after @storybook/addon-actions or @storybook/addon-essentials
+
+    '@storybook/addon-links',
+
+    // Chromatic Visual Test Server
+    '@chromatic-com/storybook',
+
+    // Code for component story
+    // {
+    //   name: '@storybook/addon-storysource',
+    //   options: {
+    //     rule: {
+    //       test: [/\.stories\.tsx?$/],
+    //       include: [path.resolve(__dirname, '../src')], // You can specify directories
+    //     },
+    //     loaderOptions: {
+    //       parser: 'typescript',
+    //       injectStoryParameters: false,
+    //       prettierConfig: { printWidth: 80, singleQuote: false },
+    //     },
+    //     enforce: 'pre',
+    //   },
+
+    // --------------- NO ICONS ---------------
+    // Onboarding flow
+    // '@storybook/addon-onboarding',
+    // Custom toolbars
+    // '@storybook/addon-toolbars',
+    // Auto-generate MDX/React/JSX documentation for components
+    // https://github.com/storybookjs/storybook/tree/next/code/addons/docs
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        // csfPluginOptions: null,
+        // mdxPluginOptions: {
+        //   mdxCompileOptions: {
+        //     remarkPlugins: [],
+        //   },
+        // },
+        sourceLoaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    // HTML Tab in action bar
+    // https://github.com/whitespace-se/storybook-addon-html
+    // '@whitespace/storybook-addon-html',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  viteFinal: async config =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+}
+
+export default config
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs