[Fee 515] Migrate to Storybook 8

.github/workflows/prerelease.yml

@@ -7,10 +7,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 16
+      - name: Use Node.js 20
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 20
       - run: yarn install --immutable
       - run: yarn dist
       - run: npm version prerelease --preid=$GITHUB_HEAD_REF-`git rev-parse --short HEAD` --git-tag-version=false --commit-hooks=false

.github/workflows/release-please.yml

@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 20
       - uses: google-github-actions/release-please-action@v3
         id: release-please
         with:
@@ -51,7 +51,7 @@ jobs:
         if: ${{ steps.release.outputs.release_created }}
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 20
         if: ${{ steps.release.outputs.release_created }}
       - run: yarn install --immutable
         if: ${{ steps.release.outputs.release_created }}

.github/workflows/test.yml

@@ -15,10 +15,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 16
+      - name: Use Node.js 20
         uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 20
       - run: yarn install --immutable
       - run: yarn lint
       - run: yarn format

.storybook/main.js

@@ -4,26 +4,14 @@ module.exports = {
     '../src/**/*.stories.{js,tsx}',
     './stories/More.stories.js',
   ],
+
   addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-        controls: false,
-        docs: false,
-      },
-    },
-    '@storybook/addon-knobs',
+    '@storybook/addon-essentials',
+    '@storybook/addon-controls',
     '@storybook/addon-actions',
     'storybook-source-link',
-    {
-      name: '@storybook/addon-storysource',
-      options: {
-        rule: {
-          enforce: 'pre',
-        },
-      },
-    },
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook',
     '@storybook/addon-viewport',
     {
       name: '@storybook/addon-a11y',
@@ -32,5 +20,9 @@ module.exports = {
       },
     },
   ],
-  framework: '@storybook/react',
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
 };

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { create } from '@storybook/theming/create';
 import pkg from '../package.json';
 

.storybook/preview.js

@@ -15,7 +15,7 @@ import allThemes from './themes';
 
 export const parameters = {
   sourceLinkPrefix: 'https://github.com/appfolio/react-gears/tree/master/src/components/',
-}
+};
 
 const changeTheme = (url) => {
   const link = document.getElementById('theme');
@@ -76,3 +76,4 @@ export const decorators = [
     </div>
   ),
 ];
+export const tags = ['autodocs'];

.tool-versions

@@ -1,2 +1 @@
-nodejs lts-gallium
-yarn 1.22.19
+nodejs 20.14.0

package.json

@@ -27,15 +27,16 @@
     "format:fix": "prettier --write src",
     "test": "jest --coverage",
     "test:watch": "jest --watch",
-    "start": "start-storybook -p 6006",
-    "docs": "build-storybook -o docs",
+    "start": "storybook dev -p 6006",
+    "docs": "storybook build -o docs",
     "version": "yarn docs && git add -A docs",
     "clean": "rm -rf esm lib",
     "dist:types": "tsc --project tsconfig.build.json",
     "dist:types:js": "scripts/copyDTSFiles.js",
     "dist:esm": "babel src --out-dir esm --config-file ./babel.esm.config.js --extensions '.js,.ts,.tsx'",
     "dist:lib": "babel src --out-dir lib --config-file ./babel.build.config.js --extensions '.js,.ts,.tsx'",
-    "dist": "yarn clean && concurrently \"yarn:dist:*\""
+    "dist": "yarn clean && concurrently \"yarn:dist:*\"",
+    "storybook:doctor": "npx storybook doctor"
   },
   "peerDependencies": {
     "react": ">= 16.8",
@@ -75,7 +76,6 @@
     "react-transition-group": "^2.9.0",
     "react-use": "^17.3.2",
     "reactstrap": "^9.2.2",
-    "storybook-source-link": "^2.0.8",
     "styled-jsx": "^5.1.1",
     "text-mask-addons": "^3.8.0",
     "tributejs": "^5.1.3",
@@ -90,16 +90,17 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@chromatic-com/storybook": "^1.5.0",
     "@jest/types": "^27.5.1",
-    "@storybook/addon-a11y": "^6.3.11",
-    "@storybook/addon-actions": "^6.3.11",
-    "@storybook/addon-essentials": "^6.3.11",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.11",
-    "@storybook/addon-storysource": "^6.3.11",
-    "@storybook/addon-viewport": "^6.3.11",
-    "@storybook/addons": "^6.3.11",
-    "@storybook/react": "^6.3.11",
+    "@storybook/addon-a11y": "^8.1.5",
+    "@storybook/addon-actions": "^8.1.5",
+    "@storybook/addon-controls": "^8.1.5",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/addon-viewport": "^8.1.5",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-webpack5": "^8.1.5",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^11.2.6",
@@ -151,6 +152,8 @@
     "react-dom": "^16.14.0",
     "regenerator-runtime": "^0.13.7",
     "sinon": "^9.2.1",
+    "storybook": "^8.1.5",
+    "storybook-source-link": "^4.0.1",
     "ts-node": "^10.7.0",
     "typescript": "^4.6.3",
     "uncontrollable": "^4.1.0"

src/components/Accordion/Accordion.stories.js

@@ -1,4 +1,3 @@
-import { boolean } from '@storybook/addon-knobs';
 import React, { useState } from 'react';
 import {
   Accordion,
@@ -17,7 +16,7 @@ export default {
   },
 };
 
-export const Example = () => {
+export const Example = (args) => {
   const [open, setOpen] = useState('1');
   const toggle = (id) => {
     if (open === id) {
@@ -29,7 +28,7 @@ export const Example = () => {
 
   return (
     <div>
-      <Accordion open={open} toggle={toggle} flush={boolean('flush', false)}>
+      <Accordion open={open} toggle={toggle} {...args}>
         <AccordionItem>
           <AccordionHeader targetId="1">Accordion Item 1</AccordionHeader>
           <AccordionBody accordionId="1">
@@ -61,14 +60,11 @@ export const Example = () => {
     </div>
   );
 };
+Example.args = { flush: false };
 
-export const Uncontrolled = () => (
+export const Uncontrolled = (args) => (
   <div>
-    <UncontrolledAccordion
-      defaultOpen="1"
-      flush={boolean('flush', false)}
-      stayOpen={boolean('stayOpen', false)}
-    >
+    <UncontrolledAccordion defaultOpen="1" {...args}>
       <AccordionItem>
         <AccordionHeader targetId="1">Accordion Item 1</AccordionHeader>
         <AccordionBody accordionId="1">
@@ -99,3 +95,7 @@ export const Uncontrolled = () => (
     </UncontrolledAccordion>
   </div>
 );
+Uncontrolled.args = {
+  flush: false,
+  stayOpen: false,
+};

src/components/Activity/Activity.stories.js

@@ -1,28 +1,37 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
+import { action as sbAction } from '@storybook/addon-actions';
 import React from 'react';
 import { colors } from '../../tooling/colors';
 import Activity from './Activity';
 
 export default {
-  title: 'ActivityLog',
+  title: 'ActivityOnly',
   component: Activity,
   parameters: {
     sourceLink: 'Activity/Activity.tsx',
   },
 };
 
-export const ActivityOnly = () => (
-  <Activity
-    action={text('action', 'Published')}
-    active={boolean('active', false)}
-    by={text('by', 'Joel Bandi')}
-    color={select('color', ['', ...colors], '')}
-    date={new Date()}
-    dateFormat={text('dateFormat')}
-    disabled={boolean('disabled', false)}
-    onClick={action('onClick')}
-  >
-    {text('content')}
+export const ActivityOnly = ({ content, ...args }) => (
+  <Activity date={new Date()} {...args}>
+    {content}
   </Activity>
 );
+ActivityOnly.args = {
+  action: 'Published',
+  active: false,
+  by: 'Joel Bandi',
+  color: '',
+  dateFormat: undefined,
+  disabled: false,
+  onClick: sbAction('onClick'),
+  content: '',
+};
+ActivityOnly.argTypes = {
+  color: {
+    options: ['', ...colors],
+    control: { type: 'select' },
+  },
+  dateFormat: {
+    control: 'text',
+  },
+};

src/components/Activity/ActivityLog.stories.js

@@ -1,4 +1,3 @@
-import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 import Activity from './Activity';
 import ActivityLog from './ActivityLog';
@@ -11,8 +10,8 @@ export default {
   },
 };
 
-export const WithProps = () => (
-  <ActivityLog flush={boolean('flush', false)}>
+export const WithProps = (args) => (
+  <ActivityLog {...args}>
     <Activity date={new Date(2017, 10, 31, 23, 15)} action="Created" by="Services" />
     <Activity date={new Date(2017, 9, 13, 13, 0)} action="Edited" />
     <Activity date={new Date(2017, 4, 1, 6, 0)} action="Edited" by="Gary">
@@ -22,6 +21,9 @@ export const WithProps = () => (
     <Activity date={new Date()}>Nothing to see here, move on</Activity>
   </ActivityLog>
 );
+WithProps.args = {
+  flush: false,
+};
 
 export const AddingCustomComponents = () => (
   <ActivityLog>