feat: Storybook publishing

Author: alexwilson

.github/workflows/build-test-deploy.yml

@@ -43,7 +43,8 @@ jobs:
       - name: Install Dependencies
         run: |
           npm config set legacy-peer-deps true
-          npm ci --ignore-scripts --workspace @alexwilson/personal-website
+          npm ci --workspace @alexwilson/personal-website
+          npm rebuild
       - name: Build
         run: npx lerna run --scope @alexwilson/personal-website build
         env:
@@ -80,7 +81,7 @@ jobs:
       - name: Install Dependencies
         run: |
           npm config set legacy-peer-deps true
-          npm ci --ignore-scripts --workspace @alexwilson/personal-website
+          npm ci --include optional --workspace @alexwilson/personal-website
       - name: Run Tests
         run: npx lerna run --scope @alexwilson/personal-website test
 

.github/workflows/monorepo-deploy.yml

@@ -70,6 +70,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NODE_ENV: ${{ secrets.NODE_ENV }}
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
     strategy:
       matrix: ${{ fromJson(needs.prepare.outputs.projects) }}
     steps:
@@ -123,6 +124,7 @@ jobs:
         run: npx lerna run deploy --scope ${{ matrix.name }}
         env:
           CI: true
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           CF_ZONE_ID: ${{ secrets.CF_ZONE_ID }}
           CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
           CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}

.nvmrc

@@ -1 +1 @@
-18
+20

components/legacy-components/src/article-card/article-card.js

@@ -1,47 +1,53 @@
-import { Link } from "@reach/router"
-import { format as formatDate } from 'date-fns'
-import React from "react"
-import ResponsiveImage from '../responsive-image'
-
-export default function articleCard({ article, linkImplementation = Link, withBody = true, withImage = true, withDate = true }) {
-
-  const date = new Date(article.date)
-  const LinkImplementation = linkImplementation
+import { Link } from "@reach/router";
+import { format as formatDate } from "date-fns";
+import React from "react";
+import ResponsiveImage from "../responsive-image";
+
+export function ArticleCard({
+  article,
+  linkImplementation = Link,
+  withBody = true,
+  withImage = true,
+  withDate = true,
+}) {
+  const date = new Date(article.date);
+  const LinkImplementation = linkImplementation;
 
   return (
     <div className="alex-card">
-
       <div className="alex-card__content--container">
-
         <div className="alex-card__title">
-          <h3><LinkImplementation to={article.slug}>{article.title}</LinkImplementation></h3>
+          <h3>
+            <LinkImplementation to={article.slug}>
+              {article.title}
+            </LinkImplementation>
+          </h3>
         </div>
 
-        {(withBody !== false) ?
+        {withBody !== false ? (
           <div className="alex-card__abstract">
-            <p>
-              {article.content.excerpt}
-            </p>
+            <p>{article.content.excerpt}</p>
           </div>
-          : null}
+        ) : null}
 
-        {(withDate !== false) ?
+        {withDate !== false ? (
           <div className="alex-card__timetamp">
             <span className="dateline">
-              <time dateTime={date.toISOString()}>{formatDate(date, "d MMM yyyy")}</time>
+              <time dateTime={date.toISOString()}>
+                {formatDate(date, "d MMM yyyy")}
+              </time>
             </span>
           </div>
-          : null}
-
+        ) : null}
       </div>
 
-      {(withImage !== false && article.image && article.image.thumbnail) ?
+      {withImage !== false && article.image && article.image.thumbnail ? (
         <div className="alex-card__image">
           <ResponsiveImage src={article.image.thumbnail} width={400} />
         </div>
-        : null}
-
+      ) : null}
     </div>
-  )
-
+  );
 }
+
+export default ArticleCard;

components/legacy-components/src/responsive-image/index.js

@@ -1,4 +1,4 @@
-import './responsive-image.scss'
-import ResponsiveImage from './responsive-image'
-export {ResponsiveImage}
-export default ResponsiveImage
+import "./responsive-image.scss";
+import ResponsiveImage from "./responsive-image";
+export { ResponsiveImage };
+export default ResponsiveImage;

components/legacy-components/src/responsive-image/responsive-image.js

@@ -1,24 +1,33 @@
-import React from 'react'
+import React from "react";
 
-export default function responsiveImage({src, alt, width, height, quality, format, className}) {
-
-  const queryParams = []
-  if (Number.isInteger(width)) queryParams.push(`width=${width}`)
-  if (Number.isInteger(height)) queryParams.push(`height=${height}`)
+export function ResponsiveImage({
+  src,
+  alt,
+  width,
+  height,
+  quality,
+  format,
+  className,
+}) {
+  const queryParams = [];
+  if (Number.isInteger(width)) queryParams.push(`width=${width}`);
+  if (Number.isInteger(height)) queryParams.push(`height=${height}`);
 
   if (quality) {
-    queryParams.push(`quality=${quality}`)
+    queryParams.push(`quality=${quality}`);
   }
 
   if (format) {
-    queryParams.push(`format=${format}`)
+    queryParams.push(`format=${format}`);
   }
 
   return (
     <img
-        src={`https://imagecdn.app/v2/image/${encodeURIComponent(src)}?${queryParams.join('&')}`}
-        className={`responsive-image ${className}`}
-        alt={alt}
+      src={`https://imagecdn.app/v2/image/${encodeURIComponent(src)}?${queryParams.join("&")}`}
+      className={`responsive-image ${className}`}
+      alt={alt}
     />
-  )
+  );
 }
+
+export default ResponsiveImage;