Maintenance: Update storybook example to vite and typescript

.storybook/main.ts

@@ -27,7 +27,6 @@ const addons = [
     : '@storybook/addon-essentials',
   '@storybook/addon-interactions',
   '@storybook/addon-coverage',
-  '@storybook/addon-mdx-gfm',
 ];
 module.exports = {
   stories,
@@ -40,7 +39,7 @@ module.exports = {
     disableTelemetry: true,
   },
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {

package.json

@@ -55,15 +55,15 @@
     "@babel/preset-typescript": "^7.18.6",
     "@jest/types": "^28.1.3",
     "@storybook/addon-coverage": "^0.0.7",
-    "@storybook/addon-essentials": "^7.0.0",
-    "@storybook/addon-interactions": "^7.0.0",
-    "@storybook/addon-mdx-gfm": "^7.0.0",
+    "@storybook/addon-essentials": "^7.2.0",
+    "@storybook/addon-interactions": "^7.2.0",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.0",
-    "@storybook/react-webpack5": "^7.0.0",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/react": "^7.2.0",
+    "@storybook/react-vite": "^7.2.0",
+    "@storybook/testing-library": "^0.2.0",
     "@types/jest": "^27.0.3",
     "@types/node": "^16.4.1",
+    "@vitejs/plugin-react": "^4.0.3",
     "auto": "^10.3.0",
     "babel-jest": "^28.1.3",
     "babel-loader": "^8.1.0",
@@ -73,30 +73,23 @@
     "jest-image-snapshot": "^5.1.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.8.1",
-    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
     "semver": "^7.3.7",
-    "storybook": "^7.0.0",
+    "storybook": "^7.2.0",
     "ts-jest": "^28.0.8",
     "tsup": "^6.5.0",
     "typescript": "~4.9.4",
-    "wait-on": "^6.0.0"
+    "wait-on": "^6.0.0",
+    "vite": "^4.4.5"
   },
   "lint-staged": {
     "*.{ts,js,tsx,jsx,css,md}": "prettier --write"
   },
   "publishConfig": {
     "access": "public"
   },
-  "storybook": {
-    "displayName": "Storybook test runner",
-    "unsupportedFrameworks": [
-      "react-native"
-    ],
-    "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
-  },
   "dependencies": {
     "@babel/core": "^7.22.5",
     "@babel/generator": "^7.22.5",
@@ -136,5 +129,12 @@
       "npm",
       "released"
     ]
+  },
+  "storybook": {
+    "displayName": "Storybook test runner",
+    "unsupportedFrameworks": [
+      "react-native"
+    ],
+    "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   }
 }

stories/atoms/Button.stories.js → stories/atoms/Button.stories.tsx

@@ -1,33 +1,36 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { expect } from '@storybook/jest';
-import { isTestRunner } from '../../.storybook/is-test-runner';
 import { within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library';
 
+import { isTestRunner } from '../../.storybook/is-test-runner';
+
 import { Button } from './Button';
 
-export default {
+const meta = {
   component: Button,
-  argTypes: {
-    onSubmit: { action: true },
-  },
-};
+} satisfies Meta<typeof Button>;
 
-const Template = (args) => <Button {...args} />;
+export default meta;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
+type Story = StoryObj<typeof meta>;
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  ...Primary.args,
-  primary: false,
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
-Secondary.parameters = {
-  tests: {
-    disableSnapshots: true,
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+  parameters: {
+    tests: {
+      disableSnapshots: true,
+    },
   },
 };
 
@@ -36,7 +39,9 @@ export const Demo = (args) => (
     Click
   </button>
 );
-
+Demo.argTypes = {
+  onSubmit: { action: true },
+};
 Demo.play = async ({ args, canvasElement }) => {
   await userEvent.click(within(canvasElement).getByRole('button'));
   await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
@@ -60,6 +65,7 @@ export const WaitFor = (args) => (
     Click
   </button>
 );
+WaitFor.argTypes = Demo.argTypes;
 WaitFor.play = async ({ args, canvasElement }) => {
   await userEvent.click(await within(canvasElement).findByText('Click'));
   await waitFor(async () => {
@@ -89,6 +95,7 @@ export const WithLoaders = (args, { loaded: { todo } }) => {
     </button>
   );
 };
+WithLoaders.argTypes = Demo.argTypes;
 WithLoaders.loaders = [
   async () => {
     // long fake timeout

stories/atoms/Button.jsx → stories/atoms/Button.tsx

@@ -1,50 +1,48 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import './button.css';
 
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor && { backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
-
-Button.propTypes = {
+interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
-  primary: PropTypes.bool,
+  primary?: boolean;
   /**
    * What background color to use
    */
-  backgroundColor: PropTypes.string,
+  backgroundColor?: string;
   /**
    * How large should the button be?
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size?: 'small' | 'medium' | 'large';
   /**
    * Button contents
    */
-  label: PropTypes.string.isRequired,
+  label: string;
   /**
    * Optional click handler
    */
-  onClick: PropTypes.func,
-};
+  onClick?: () => void;
+}
 
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
 };

stories/molecules/Header.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Header } from './Header';
+
+const meta = {
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

stories/molecules/Header.jsx → stories/molecules/Header.tsx

@@ -1,12 +1,22 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Button } from '../atoms/Button';
 import './header.css';
 
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+type User = {
+  name: string;
+};
+
+interface HeaderProps {
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
@@ -44,14 +54,3 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
     </div>
   </header>
 );
-
-Header.propTypes = {
-  user: PropTypes.shape({}),
-  onLogin: PropTypes.func.isRequired,
-  onLogout: PropTypes.func.isRequired,
-  onCreateAccount: PropTypes.func.isRequired,
-};
-
-Header.defaultProps = {
-  user: null,
-};

stories/molecules/__snapshots__/Header.stories.jsx.snap → stories/molecules/__snapshots__/Header.stories.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Molecules/Header LoggedIn smoke-test 2`] = `
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32"
            height="32"
@@ -50,7 +50,7 @@ exports[`Molecules/Header LoggedIn smoke-test 2`] = `
 
 exports[`Molecules/Header LoggedOut smoke-test 2`] = `
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32"
            height="32"

stories/molecules/header.css

@@ -1,4 +1,4 @@
-.wrapper {
+.storybook-header {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
@@ -7,25 +7,25 @@
   justify-content: space-between;
 }
 
-svg {
+.storybook-header svg {
   display: inline-block;
   vertical-align: top;
 }
 
-h1 {
-  font-weight: 900;
+.storybook-header h1 {
+  font-weight: 700;
   font-size: 20px;
   line-height: 1;
   margin: 6px 0 6px 10px;
   display: inline-block;
   vertical-align: top;
 }
 
-button + button {
+.storybook-header button + button {
   margin-left: 10px;
 }
 
-.welcome {
+.storybook-header .welcome {
   color: #333;
   font-size: 14px;
   margin-right: 10px;