chore: temporary GH Pages deployment on branch push

.github/workflows/push.yml

@@ -9,6 +9,11 @@ on:
     branches:
       - main
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
   run-linters:
     name: Run linters
@@ -40,3 +45,27 @@ jobs:
       #   uses: cypress-io/github-action@v6
       #   with:
       #     start: yarn start
+  deploy-storybook:
+    name: Deploy to Storybook
+    runs-on: ubuntu-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - run: ls -l
+      - name: Build
+        shell: bash
+        run: |
+          echo "::group::Build"
+          yarn install
+          yarn build-storybook
+          echo "::endgroup::"
+      - name: Upload
+        uses: actions/[email protected]
+        with:
+          path: preview
+      - id: deploy
+        name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4

.gitignore

@@ -5,3 +5,4 @@ cypress/screenshots
 cypress/videos
 server_killer.rb
 yarn-error.log
+preview

.storybook/styles.css

@@ -2,12 +2,10 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "../core/fonts/jetBrains-mono.css";
-@import "../core/fonts/manrope.css";
-
-@import "../reset/styles.css";
-@import "../core/styles.css";
+@import "../src/core/fonts/jetBrains-mono.css";
+@import "../src/core/fonts/manrope.css";
+@import "../src/reset/styles.css";
+@import "../src/core/styles.css";
+@import "../src/core/utils/syntax-highlighter.css";
 
 @import "./application.css";
-
-@import "../src/core/utils/syntax-highlighter.css";

package.json

@@ -77,7 +77,7 @@
     "release": "./scripts/release.sh",
     "start": "lite-server -- port 5000",
     "storybook": "storybook dev -p 6006 --no-version-updates",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build -o preview"
   },
   "dependencies": {
     "@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",

src/core/CustomerLogos/CustomerLogos.stories.tsx

@@ -1,4 +1,4 @@
-import CustomerLogos from "../../core/CustomerLogos/component.jsx";
+import CustomerLogos from "../CustomerLogos/component.jsx";
 
 import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
 import webflow from "../images/cust-logo-webflow-col-pos.svg";

src/core/Footer/Footer.stories.tsx

@@ -1,10 +1,10 @@
 import Footer from "./component.jsx";
 
-import ablyStack from "../../core/images/ably-stack.svg";
-import highestPerformer from "../../core/images/high-performer-2023.svg";
-import bestSupport from "../../core/images/best-support-2023.svg";
-import fastestImplementation from "../../core/images/fastest-implementation-2023.svg";
-import highestUserAdoption from "../../core/images/highest-user-adoption-2023.svg";
+import ablyStack from "../images/ably-stack.svg";
+import highestPerformer from "../images/high-performer-2023.svg";
+import bestSupport from "../images/best-support-2023.svg";
+import fastestImplementation from "../images/fastest-implementation-2023.svg";
+import highestUserAdoption from "../images/highest-user-adoption-2023.svg";
 
 export default {
   title: "Components/Footer",

src/core/Logo/Logo.stories.tsx

@@ -1,5 +1,5 @@
 import Logo from "./component.jsx";
-import logoUrl from "../../core/images/ably-logo.png";
+import logoUrl from "../images/ably-logo.png";
 
 export default {
   title: "Components/Logo",

src/core/Meganav/Meganav.stories.tsx

@@ -3,9 +3,9 @@ import { rest } from "msw";
 
 import Meganav from "../../../src/core/Meganav/component.jsx";
 import loadIcons from "../icons.js";
-import logo from "../../core/images/ably-logo.png";
-import ablyStack from "../../core/images/ably-stack.svg";
-import awsLogo from "../../core/images/icon-tech-aws.svg";
+import logo from "../images/ably-logo.png";
+import ablyStack from "../images/ably-stack.svg";
+import awsLogo from "../images/icon-tech-aws.svg";
 
 import {
   attachStoreToWindow,

src/core/icons.js

@@ -1,6 +1,5 @@
-import { loadSprites } from "../../core/scripts";
-
-import sprites from "../../core/sprites.svg";
+import { loadSprites } from "./scripts";
+import sprites from "./sprites.svg";
 
 const loadIcons = () => loadSprites(sprites);
 

src/core/styles.components.css

@@ -3,33 +3,31 @@
 @import "./styles/text.css";
 @import "./styles/forms.css";
 
-@layer components {
-  .ui-input {
-    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-    @apply max-w-screen-sm;
-  }
+.ui-input {
+  @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+  @apply hover:bg-white hover:shadow-input hover:border-transparent;
+  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+  @apply max-w-screen-sm;
+}
 
-  /* Basis for icon component */
-  .ui-icon-cool-black {
-    stroke: var(--color-cool-black);
-  }
+/* Basis for icon component */
+.ui-icon-cool-black {
+  stroke: var(--color-cool-black);
+}
 
-  .ui-icon-white {
-    stroke: var(--color-white);
-  }
+.ui-icon-white {
+  stroke: var(--color-white);
+}
 
-  .ui-icon-dark-grey {
-    stroke: var(--color-dark-grey);
-  }
+.ui-icon-dark-grey {
+  stroke: var(--color-dark-grey);
+}
 
-  .ui-version-tag {
-    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+.ui-version-tag {
+  @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
 
-    position: relative;
-    vertical-align: super;
-    margin-left: 3px;
-    font-size: 8px;
-  }
+  position: relative;
+  vertical-align: super;
+  margin-left: 3px;
+  font-size: 8px;
 }

src/core/styles/forms.css

@@ -1,64 +1,62 @@
-@layer components {
-  .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans font-medium;
-  }
+.ui-checkbox-p1 {
+  @apply flex items-start mb-16 font-sans font-medium;
+}
 
-  .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans font-medium;
-  }
+.ui-checkbox-p2 {
+  @apply flex items-start mb-12 font-sans font-medium;
+}
 
-  .ui-checkbox-input {
-    @apply opacity-0 absolute h-20 w-20;
-  }
+.ui-checkbox-input {
+  @apply opacity-0 absolute h-20 w-20;
+}
 
-  .ui-checkbox-styled {
-    @apply w-20 h-20 mr-16;
-    @apply bg-white flex flex-shrink-0 justify-center items-center;
-    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
-  }
+.ui-checkbox-styled {
+  @apply w-20 h-20 mr-16;
+  @apply bg-white flex flex-shrink-0 justify-center items-center;
+  @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+}
 
-  .ui-checkbox-styled-tick {
-    @apply hidden text-white;
-  }
+.ui-checkbox-styled-tick {
+  @apply hidden text-white;
+}
 
-  .ui-checkbox-label-p1 {
-    @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
-  }
+.ui-checkbox-label-p1 {
+  @apply select-none;
+  @apply text-p1 font-medium text-cool-black;
+}
 
-  .ui-checkbox-label-p2 {
-    @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
-  }
+.ui-checkbox-label-p2 {
+  @apply select-none;
+  @apply text-p2 font-medium text-cool-black;
+}
 
-  .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
-  }
+.ui-checkbox-input:disabled + .ui-checkbox-styled {
+  @apply bg-gui-unavailable border;
+}
 
-  .ui-checkbox-input:focus + .ui-checkbox-styled {
-    border-width: 0.125rem;
-    @apply border-gui-focus;
-  }
+.ui-checkbox-input:focus + .ui-checkbox-styled {
+  border-width: 0.125rem;
+  @apply border-gui-focus;
+}
 
-  .ui-checkbox-input:checked + .ui-checkbox-styled {
-    @apply bg-active-orange border-dark-grey border;
-  }
+.ui-checkbox-input:checked + .ui-checkbox-styled {
+  @apply bg-active-orange border-dark-grey border;
+}
 
-  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
-    @apply block;
-  }
+.ui-checkbox-input:checked + .ui-checkbox-styled svg {
+  @apply block;
+}
 
-  .ui-textarea {
-    @apply font-sans font-medium text-cool-black text-p1;
-    @apply p-input mb-16;
-    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-  }
+.ui-textarea {
+  @apply font-sans font-medium text-cool-black text-p1;
+  @apply p-input mb-16;
+  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
+  @apply hover:bg-white hover:shadow-input hover:border-transparent;
+  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+}
 
-  .ui-textarea::placeholder {
-    /* CSS vars don't work in ::placeholder in Webkit :( */
-    /* color: var(--text-dark-grey); */
-    color: #76767c;
-  }
+.ui-textarea::placeholder {
+  /* CSS vars don't work in ::placeholder in Webkit :( */
+  /* color: var(--text-dark-grey); */
+  color: #76767c;
 }