fix: refactor and update storybook deploy action

Author: ChrisUser

.github/workflows/storybook.yml

@@ -14,13 +14,17 @@ jobs:
               run: | # Install npm packages and build the Storybook files
                   npm install --force
                   npm run build-storybook
+            - name: Get commit info
+              shell: bash
+              run: |
+                  echo "sha_short=$(git rev-parse --short "$GITHUB_SHA")" >> "$GITHUB_ENV"
             - name: Deploy 🚀
-              uses: JamesIves/github-pages-deploy-action@v4
+              uses: crazy-max/ghaction-github-pages@v3
               with:
-                  token: ${{ secrets.GITHUB_TOKEN }}
-                  branch: docs # The branch the action should deploy to.
-                  folder: docs-build # The folder that the build-storybook script generates files.
-                  clean: true # Automatically remove deleted files from the deploy branch
-                  clean-exclude: |
-                      .nojekyll
-                  target-folder: docs # The folder that we serve our Storybook files from
+                  target_branch: docs
+                  build_dir: docs-build
+                  commit_message: 'Deploying to docs from ${{ env.sha_short }}'
+                  keep_history: false
+                  jekyll: false
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -20,7 +20,7 @@
         "test": "react-scripts test",
         "prepublishOnly": "yarn build",
         "storybook": "storybook dev",
-        "build-storybook": "storybook build -c .storybook -o docs-build .out && touch ./docs-build/.nojekyll"
+        "build-storybook": "storybook build -c .storybook -o docs-build .out"
     },
     "release": {
         "branches": [

src/main.tsx

@@ -28,7 +28,7 @@ const App = () => {
     ]
 
     return (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', gap: 32, width: '100%', marginTop: 32 }}>
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', gap: 32, width: '100%', marginTop: 24 }}>
             <div style={{ padding: '24px 0', width: '60%' }}>
                 <UsageBar showFallbackColors items={itemsToDisplay} total={100} />
             </div>