Merge pull request #1 from jhancock532/storybook

Add Storybook

.github/workflows/deploy-storybook.yaml

@@ -0,0 +1,21 @@
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: bitovi/[email protected]
+        with:
+          install_command: npm ci
+          build_command: npm run build-storybook
+          path: storybook-static

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

.node-version

@@ -0,0 +1 @@
+20

.storybook/main.ts

@@ -0,0 +1,49 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        {
+            name: '@storybook/addon-styling-webpack',
+            options: {
+                rules: [
+                    {
+                        test: /\.s[ac]ss$/i,
+                        use: [
+                            'style-loader',
+                            {
+                                loader: 'css-loader',
+                                options: {
+                                    modules: {
+                                        localIdentName:
+                                            '[name]__[local]--[hash:base64:5]',
+                                    },
+                                },
+                            },
+                            {
+                                loader: 'sass-loader',
+                                options: {
+                                    implementation: require.resolve('sass'),
+                                    additionalData: `@use "sass:math"; @use "variables" as *; @use "mixins" as *;`,
+                                    sassOptions: {
+                                        includePaths: ['src/styles'],
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+    ],
+    framework: {
+        name: '@storybook/nextjs',
+        options: {},
+    },
+    staticDirs: ['../public'],
+};
+export default config;

.storybook/manager-head.html

@@ -0,0 +1 @@
+<meta name="robots" content="noindex" />

.storybook/preview-head.html

@@ -0,0 +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=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
+<style>
+    body {
+        font-family: "Rubik", sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+</style>

.storybook/preview.ts

@@ -0,0 +1,9 @@
+import type { Preview } from '@storybook/react';
+
+import '../src/styles/globals.scss';
+
+const preview: Preview = {
+    parameters: {},
+};
+
+export default preview;

.github/workflows/nextjs.yml → documentation/Next Github Deployment Action/nextjs.yml

@@ -51,7 +51,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v3