docs: build storybook in addition to yarn build with Vercel (#817)

* docs(.storybook): fix Inter font in `storybook`

* chore(.gitignore): ignore `yarn storybook:build` output

* docs(app/components/navbar): add Button to visit `storybook`

* ci(.github/workflows/storybook): create workflow to always merge `main` -> `storybook` branch

The `storybook` branch will now be a permanent fixture alongside `main`. Its purpose is to deploy to
a separate URL on Vercel so we can host the docs and `storybook` output simultaneously, since
`next.js` cannot deploy static HTML found in `storybook` output.

.github/workflows/codeql.yml

@@ -1,4 +1,4 @@
-name: 'CodeQL'
+name: CodeQL
 
 on:
   push:

.github/workflows/storybook.yml

@@ -0,0 +1,21 @@
+name: Deploy Storybook
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 📥 Checkout
+        uses: actions/checkout@v2.3.1
+
+      - name: 🚀 Merge main -> storybook
+        uses: devmasx/merge-branch@1.4.0
+        with:
+          type: now
+          from_branch: main
+          target_branch: storybook
+          github_token: ${{ github.token }}

.gitignore

@@ -6,6 +6,7 @@ cypress/screenshots
 cypress/videos
 lib
 node_modules
+storybook-static
 .DS_Store
 npm-debug.log*
 tsconfig.tsbuildinfo

.storybook/style.css

@@ -5,8 +5,12 @@
 @layer base {
   @font-face {
     font-family: 'Inter';
-    src: url(/public/inter.woff2) format('woff2');
+    src: url(inter.woff2) format('woff2');
     font-weight: 100 200 300 400 500 600 700 800 900;
     font-display: swap;
   }
+
+  html {
+    font-family: 'Inter', sans-serif;
+  }
 }

app/components/navbar.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import type { FC } from 'react';
 import { BsGithub } from 'react-icons/bs';
+import { SiStorybook } from 'react-icons/si';
 import { Badge, DarkThemeToggle, Tooltip } from '~/src';
 import pkg from './../../package.json' assert { type: 'json' };
 
@@ -57,6 +58,14 @@ export const NavbarIcons: FC = () => {
   const version = pkg?.version ?? 'latest';
   return (
     <div className="flex items-center gap-1">
+      <a
+        href="https://flowbite-react-git-storybook-themesberg.vercel.app"
+        className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700 lg:block"
+      >
+        <Tooltip animation={false} content="View Storybook">
+          <SiStorybook aria-hidden className="h-5 w-5" />
+        </Tooltip>
+      </a>
       <a
         href="https://github.com/themesberg/flowbite-react"
         className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700 lg:block"