chore: copy everything from Models/storybook

.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ]
+  ],
+  "plugins": []
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.github/workflows/deploy.yml

@@ -0,0 +1,54 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    outputs:
+      commit_hash: ${{ steps.commit-assets.outputs.commit_hash }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Install
+        run: npm ci
+      - name: Build project
+        run: NODE_ENV=production npm run build
+      - name: Commit built assets
+        id: commit-assets
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Build assets
+      - name: Copy styles and fonts to output dir
+        run: |
+          find ./styles/ -name \*.css -print | cpio -pvd storybook-static
+          cp -r fonts storybook-static/
+      - uses: actions/upload-artifact@v3
+        with:
+          name: storybook-static
+          path: storybook-static      
+  deploy:
+    runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    needs: build
+    steps:
+      - name: Download latest assets
+        uses: actions/download-artifact@v3
+        with:
+          name: storybook-static
+          path: storybook-static
+      - name: Deploy Storybook
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.gitignore

@@ -1,3 +1,6 @@
 /node_modules
 /test_data
 /storybook-static
+*.log
+.DS_Store
+.idea

.storybook/main.js

@@ -1,13 +1,14 @@
 module.exports = {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/preset-scss',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
-  ],
+  addons: ['@storybook/preset-scss', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   features: {
     postcss: false
   },
-  framework: '@storybook/html'
-}
+  framework: {
+    name: '@storybook/html-webpack5',
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
+};

README.md

@@ -1,10 +1,10 @@
 # Models Storybook
 
-Style guide made on Storybook for Models.com. A compressed style file is hosted on GitHub through jsDelivr and can be fetched as CDN so it is used by the client.
-<br><br>
+Style guide made on Storybook for Models.com. 
+
 ## Tech Stack
 
-Storybook, Chromatic, SCSS
+Storybook, Github Pages, SCSS
 <br><br>
 ## Run Locally
 
@@ -17,24 +17,12 @@ Install dependencies with npm
 Run the storybook script
 
 ```bash
-  npm run storybook
+  npm run dev
 ```
 <br><br>
 ## Deployment
-Before pushing a change to any branch, the SCSS files need to be compiled to both a CSS file and a compressed CSS file.
-
-To do this, run:
-```bash
-  npm run sass
-```
-Make sure you push these updated files along with your changes to the `main` branch.
-
-When a commit gets pushed to the `main` branch, a GitHub action gets triggered in order to publish the changes to Chromatic and review the visual changes. This is where the client reviews the Storybook as well.
+When a commit gets pushed to the `main` branch, a GitHub action gets triggered in order to publish the changes to Github Pages and review the visual changes.
 
-GitHub action setup file: `.github/workflows/chromatic.yml`
+GitHub action setup file: `.github/workflows/deploy.yml`
 <br><br>
 ## Authors
-
-#### Lead Developer
-
-- [@hugh-hmiranda](https://www.github.com/hugh-miranda)