Test Storybook support

client/.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  stories: [
+    {
+      directory: '../src/stories',
+      titlePrefix: 'Routed',
+    },
+  ],
+  staticDirs: ['../public', '../build'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/preset-create-react-app'],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+};

client/.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" type="text/css" href="/libraries/fontawesome-free/css/all.css" />
+<link rel="stylesheet" type="text/css" href="/libraries/uswds/theme/styles.css" />

client/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

client/package.json

@@ -33,7 +33,9 @@
     "sass": "sass --load-path=../node_modules/uswds/dist/scss --style=compressed src/theme/styles.scss build/libraries/uswds/theme/styles_pre.css",
     "postcss": "postcss --verbose build/libraries/uswds/theme/styles_pre.css --use autoprefixer -o build/libraries/uswds/theme/styles.css",
     "test": "craco test",
-    "eject": "craco eject"
+    "eject": "craco eject",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook"
   },
   "browserslist": {
     "production": [
@@ -47,6 +49,18 @@
       "last 1 safari version"
     ]
   },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/node-logger": "^6.5.15",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",

client/src/stories/Alert.stories.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Alert from '../Components/Alert';
+
+const metadata = {
+  component: Alert,
+  argTypes: {},
+};
+
+export default metadata;
+
+function story(args = {}, Component = metadata.component) {
+  const func = (args) => <Component {...args} />;
+
+  func.args = args;
+
+  return func;
+}
+
+export const Warning = story({
+  type: 'warning',
+  title: 'Clear form?',
+  message: 'All of the fields will be reset.',
+  destructive: 'Clear form',
+  cancel: 'Keep editing',
+});

client/src/stories/RingdownBadge.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import RingdownBadge from '../Components/RingdownBadge';
+import DeliveryStatus from '../../../shared/constants/DeliveryStatus';
+
+const metadata = {
+  component: RingdownBadge,
+  argTypes: {
+    status: {
+      options: DeliveryStatus.ALL_STATUSES,
+      control: 'select',
+    },
+  },
+};
+
+export default metadata;
+
+function story(args = {}, Component = metadata.component) {
+  const func = (args) => <Component {...args} />;
+
+  func.args = args;
+
+  return func;
+}
+
+export const Sent = story({ status: DeliveryStatus.RINGDOWN_SENT });
+export const Confirmed = story({ status: DeliveryStatus.RINGDOWN_CONFIRMED });
+export const Arrived = story({ status: DeliveryStatus.ARRIVED });
+export const Offloaded = story({ status: DeliveryStatus.OFFLOADED });

client/src/stories/TabBar.stories.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import TabBar from '../Components/TabBar';
+
+const metadata = {
+  component: TabBar,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '50%' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default metadata;
+
+function story(args = {}, Component = metadata.component) {
+  const func = (args) => {
+    // since func() isn't a component, we can't call a hook from inside it.  so create a functional component to
+    // contain the state hook and render the TabBar
+    function Header() {
+      const [selectedTab, setSelectedTab] = useState(args.selectedTab);
+
+      return (
+        <Component
+          {...args}
+          selectedTab={selectedTab}
+          onSelect={(tab) => {
+            setSelectedTab(tab);
+            args.onSelect(tab);
+          }}
+        />
+      );
+    }
+
+    return <Header />;
+  };
+
+  func.args = args;
+
+  return func;
+}
+
+export const EMS = story({
+  tabs: [
+    { label: 'Ringdown', id: 'ringdown' },
+    { label: 'Hospital Info', id: 'hospitalInfo' },
+  ],
+  selectedTab: 'ringdown',
+});

client/src/utils/index.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export function isValueEmpty(value) {
   const valueType = typeof value;
   // count 0 and false as non-empty values