Add Storybook

.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 install --workspace @alexwilson/personal-website
+          npm rebuild
       - name: Build
         run: npx lerna run --scope @alexwilson/personal-website build
         env:
@@ -80,7 +81,8 @@ jobs:
       - name: Install Dependencies
         run: |
           npm config set legacy-peer-deps true
-          npm ci --ignore-scripts --workspace @alexwilson/personal-website
+          npm install --workspace @alexwilson/personal-website
+          ls -la node_modules/@parcel/watcher
       - name: Run Tests
         run: npx lerna run --scope @alexwilson/personal-website test
 

.github/workflows/monorepo-deploy.yml

@@ -24,9 +24,10 @@ jobs:
           cache: "npm"
       - name: Install Dependencies
         run: |
-          rm  services/personal-website/package.json
+          rm services/personal-website/package.json
           npm config set legacy-peer-deps true
-          npm ci --ignore-scripts --production=false
+          npm install --include=dev
+          npm install lerna
       - id: find-projects
         name: Find affected projects
         run: |
@@ -70,6 +71,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:
@@ -85,7 +87,7 @@ jobs:
         run: |
           rm  services/personal-website/package.json
           npm config set legacy-peer-deps true
-          npm ci --ignore-scripts --production=false
+          npm install --include=dev
       - name: Test
         run: npx lerna run test --scope ${{ matrix.name }}
 
@@ -118,11 +120,12 @@ jobs:
         run: |
           rm  services/personal-website/package.json
           npm config set legacy-peer-deps true
-          npm ci --ignore-scripts --production=false
+          npm install --include=dev
       - name: Deploy
         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,46 +1,53 @@
-import { Link } from "gatsby"
-import { format as formatDate } from 'date-fns'
-import React from "react"
-import ResponsiveImage from '../responsive-image'
-
-export default function articleCard({article, withBody = true, withImage = true, withDate = true}) {
-
-  const date = new Date(article.date)
+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><Link to={ article.slug }>{ article.title }</Link></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>
-        </div>
-        :null}
+            <p>{article.content.excerpt}</p>
+          </div>
+        ) : 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 } />
+          <ResponsiveImage src={article.image.thumbnail} width={400} />
         </div>
-      :null}
-
+      ) : null}
     </div>
-  )
-
+  );
 }
+
+export default ArticleCard;

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

@@ -1,4 +1,4 @@
 import "./article-card.scss";
 import ArticleCard from "./article-card"
-export {ArticleCard}
+export { ArticleCard }
 export default ArticleCard

components/legacy-components/src/header/header.js

@@ -176,11 +176,13 @@ class Header extends Component {
 Header.propTypes = {
   siteTitle: PropTypes.string,
   image: PropTypes.string,
+  location: PropTypes.object
 }
 
 Header.defaultProps = {
   siteTitle: `Alex Wilson`,
   image: null,
+  location: { pathname: "/" }
 }
 
 export default Header

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;

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

@@ -0,0 +1,29 @@
+import { ArticleCard } from '../src/article-card';
+
+export default {
+  title: 'Legacy/Article Card',
+  component: ArticleCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {
+  args: {
+    article: {
+      title: "Test Article",
+      slug: "/#",
+      date: new Date(),
+      image: {
+        thumbnail: "https://avatars.githubusercontent.com/u/440052"
+      },
+      content: {
+        excerpt: "This is some test copy"
+      }
+    },
+    withBody: true,
+    withImage: true,
+    withDate: true,
+  }
+};

components/legacy-components/stories/footer.stories.js

@@ -0,0 +1,12 @@
+import { Footer } from '../src/footer';
+
+export default {
+  title: 'Legacy/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};

components/legacy-components/stories/form.stories.js

@@ -0,0 +1,31 @@
+import { Form, Input, InlineGroup, TextArea, Submit } from '../src/form';
+
+export default {
+  title: 'Legacy/Form',
+  component: Form,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {
+  render: () =>
+    <Form action="#" target="_self">
+      <Input type="text" name="name" placeholder="Name" />
+      <Input type="text" name="phone" placeholder="Phone" />
+      <Input type="text" name="email" placeholder="Email" />
+      <TextArea name="message" placeholder="How can I help?" />
+      <Submit />
+    </Form>
+};
+
+export const Inline = {
+  render: () =>
+    <Form action="#" target="_self">
+      <InlineGroup>
+        <Input type="text" name="phone" placeholder="Phone" />
+        <Submit />
+      </InlineGroup>
+    </Form>
+}

components/legacy-components/stories/header.stories.js

@@ -0,0 +1,12 @@
+import { Header } from '../src/header';
+
+export default {
+  title: 'Legacy/Header',
+  component: Header,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};

components/legacy-components/stories/share-widget.stories.js

@@ -0,0 +1,17 @@
+import { ShareWidget } from '../src/share-widget';
+
+export default {
+  title: 'Legacy/Share Widget',
+  component: ShareWidget,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {
+  args: {
+    url: "https://example.com",
+    title: "Example"
+  }
+};