Storybook: Convert stories to CSF 3 (#435)

* feat(storybook): try CSF for Alert stories

* chore(storybook): convert alert WC story to CSF 3

* chore(storybook): convert alert React story to CSF 3

* chore(storybook): extract DocsPage config and convert breadcrumb to CSF3

* chore(storybook): convert Button stories to CSF 3

* chore(storybook): convert Checkbox stories to CSF 3

* chore(storybook): convert CheckboxGroup stories to CSF 3

* chore(storybook): convert Combobox stories to CSF 3

* chore(storybook): convert DropdownMenu stories to CSF 3

* chore(storybook): convert DropdownMenuNav stories to CSF 3

* chore(storybook): convert Footer stories to CSF 3

* chore(storybook): convert Header stories to CSF 3

* chore(storybook): convert Heading stories to CSF 3

* chore(storybook): convert Icon stories to CSF 3

* chore(storybook): convert ImageCard stories to CSF 3

* chore(storybook): convert InputGroup stories to CSF 3

* chore(storybook): convert Layout stories to CSF 3

* chore(storybook): convert Link stories to CSF 3

* chore(storybook): convert LoadingSpinner stories to CSF 3

* chore(storybook): convert Modal stories to CSF 3

* chore(storybook): convert Pagination stories to CSF 3

* chore(storybook): convert ProgressBar stories to CSF 3

* chore(storybook): convert RadioButton stories to CSF 3

* chore(storybook): convert RadioButtonGroup stories to CSF 3

* chore(storybook): convert Select stories to CSF 3

* chore(storybook): convert Sidenav stories to CSF 3

* chore(storybook): convert Tabs stories to CSF 3

* chore(storybook): convert TextInput stories to CSF 3

* chore(storybook): convert Textarea stories to CSF 3

* chore(storybook): convert Toast stories to CSF 3

* chore(storybook): convert ToggleButtonGroup stories to CSF 3

* chore(storybook): convert Tooltip stories to CSF 3

* chore(storybook): convert Page stories to CSF 3

* chore(storybook): convert Styles stories to CSF 3

* fix(storybook): make diverged stories consistent

* chore(storybook): clean up imports

* fix: add type declarations and remove console log

* chore: add changeset

* fix(storybook): fix React Storybook build

* feat(storybook): enable new build options

This necessitated getting rid of dynamic component titles, namely for
showing e.g. "Pharos 12.13.0" in the left nav. I opted instead to inject
the version as the title of the intro page. I had to wrestle with MDX a
bit to do this; it appears the "components" and "props" features
documented on their site are v2 features, but our Storybook is still
using v1. I attemped to enable the v2 preview, but HTML comments cause a
parsing error currently and we need them for our README setup to
function properly.

* fix(storybook): update webpack config to fix GitHub Actions

* fix(storybook): remove new Babel config to fix build

* fix(storybook): remove inline render to try fixing build

* fix(storybook): remove story store v7 to fix build

.changeset/tidy-cherries-report.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Update Storybook stories to Component Story Format (CSF) version 3

.storybook/docsPageConfig.jsx

@@ -0,0 +1,25 @@
+import {
+  ArgsTable,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs';
+
+import { GuidelineLink } from '@config/GuidelineLink';
+
+export const configureDocsPage = (componentName) => {
+  return () => (
+    <>
+      <Title />
+      <Subtitle />
+      <Description />
+      {componentName && <GuidelineLink path={componentName} />}
+      <Primary />
+      <ArgsTable story={PRIMARY_STORY} />
+      <Stories />
+    </>
+  );
+};

.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
+  features: {
+    previewCsfV3: true,
+  },
   core: {
     builder: 'webpack5',
   },

.storybook/react/main.js

@@ -1,5 +1,8 @@
 let config = require('../main');
 
-config.stories.push('../../packages/pharos/**/*.@(react|docs|pages).stories.@(js|mdx|tsx)');
+config.stories.push({
+  directory: '../../packages/pharos',
+  files: '**/*.@(react|docs|pages).stories.@(js|jsx|mdx|tsx)',
+});
 
 module.exports = config;

.storybook/react/preview.js

@@ -14,8 +14,5 @@ export const parameters = {
     components: {
       Canvas: Canvas,
     },
-    source: {
-      type: 'code',
-    },
   },
 };

.storybook/wc/main.js

@@ -1,5 +1,8 @@
 let config = require('../main');
 
-config.stories.push('../../packages/pharos/**/*.@(wc|docs|pages).stories.@(js|mdx|ts)');
+config.stories.push({
+  directory: '../../packages/pharos',
+  files: '**/*.@(wc|docs|pages).stories.@(js|jsx|mdx|ts)',
+});
 
 module.exports = config;

packages/pharos-site/static/styles/global.scss

@@ -1,4 +1,5 @@
 @use '@ithaka/pharos/lib/styles/pharos';
+@use '@ithaka/pharos/lib/utils/scss/mixins';
 
 .pharos-storybook__image {
   margin-top: var(--pharos-spacing-three-quarters-x);
@@ -270,3 +271,7 @@ p.alert-example__content + p.alert-example__content {
 .image-card-example__card--promotional {
   grid-column: span 4;
 }
+
+.hide-in-storybook {
+  @include mixins.hidden;
+}

packages/pharos/README.md

@@ -1,5 +1,9 @@
+<div class="hide-in-storybook">
+
 # Pharos Web Components
 
+</div>
+
 <!-- toc -->
 
 - [Installation](#installation)

packages/pharos/docs/1.intro.docs.stories.mdx

@@ -1,6 +1,13 @@
 import { Meta } from '@storybook/addon-docs';
+
 import Intro from '../README.md';
-import PHAROS_TITLE from '../../../.storybook/pharosTitle';
+import PHAROS_TITLE from '@config/pharosTitle';
+
+<Meta title="Pharos/Intro" />
+
+export const Title = () => PHAROS_TITLE;
+
+# <Title /> Web Components
 
 <Intro />
 
@@ -10,5 +17,3 @@ JSTOR is part of ITHAKA, a not-for-profit dedicated to expanding access to knowl
 
 - [See career opportunities](https://www.ithaka.org/careers/)
 - [Learn more about ITHAKA](https://www.ithaka.org/)
-
-<Meta title={`${PHAROS_TITLE}/Intro`} />

packages/pharos/docs/2.changelog.docs.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
-import Intro from '../CHANGELOG.md';
-import PHAROS_TITLE from '../../../.storybook/pharosTitle';
 
-<Intro />
+import Changelog from '../CHANGELOG.md';
 
-<Meta title={`${PHAROS_TITLE}/Changelog`} />
+<Meta title="Pharos/Changelog" />
+
+<Changelog />

packages/pharos/src/components/alert/PharosAlert.react.stories.jsx

@@ -0,0 +1,77 @@
+import { PharosAlert, PharosLink } from '../../react-components';
+import { configureDocsPage } from '@config/docsPageConfig';
+import { defaultArgs, argTypes } from './storyArgs';
+
+export default {
+  title: 'Components/Alert',
+  component: PharosAlert,
+  parameters: {
+    docs: {
+      page: configureDocsPage('alert'),
+    },
+  },
+  argTypes,
+};
+
+const Base = {
+  render: ({ status, text, closable }) => (
+    <PharosAlert status={status} closable={closable}>
+      {text}
+    </PharosAlert>
+  ),
+  args: defaultArgs,
+};
+
+export const Info = {
+  ...Base,
+  args: {
+    status: 'info',
+    text: 'There will be maintenance tomorrow.',
+  },
+};
+
+export const Success = {
+  ...Base,
+  args: {
+    status: 'success',
+    text: 'Success!',
+  },
+};
+
+export const Warning = {
+  render: ({ status, text, closable }) => (
+    <PharosAlert status={status} closable={closable}>
+      <p className="alert-example__content">{text}</p>
+      <p className="alert-example__content">
+        See <PharosLink href="#">how to fix this</PharosLink>.
+      </p>
+    </PharosAlert>
+  ),
+  args: {
+    status: 'warning',
+    text: 'Your profile is incomplete.',
+  },
+};
+
+export const Error = {
+  render: ({ status, text, closable }) => (
+    <PharosAlert status={status} closable={closable}>
+      <p className="alert-example__content">{text}</p>
+      <p className="alert-example__content">
+        For more information, <pharos-link href="#">read the documentation</pharos-link>.
+      </p>
+    </PharosAlert>
+  ),
+  args: {
+    status: 'error',
+    text: "Your password didn't meet the minimum requirements.",
+  },
+};
+
+export const Closable = {
+  ...Error,
+  args: {
+    ...Error.args,
+    closable: true,
+  },
+};

packages/pharos/src/components/alert/pharos-alert.ts

@@ -20,7 +20,7 @@ export enum ALERT_ICON {
   WARNING = 'exclamation-inverse',
 }
 
-const STATUSES = ['info', 'success', 'warning', 'error'];
+const STATUSES = ['info', 'success', 'warning', 'error'] as AlertStatus[];
 
 /**
  * Pharos alert component

packages/pharos/src/components/alert/pharos-alert.wc.stories.jsx

@@ -0,0 +1,71 @@
+import { html } from 'lit';
+import { configureDocsPage } from '@config/docsPageConfig';
+import { defaultArgs, argTypes } from './storyArgs';
+
+export default {
+  title: 'Components/Alert',
+  component: 'pharos-alert',
+  parameters: {
+    docs: {
+      page: configureDocsPage('alert'),
+    },
+  },
+  argTypes,
+};
+
+const Base = {
+  render: ({ status, text, closable }) =>
+    html`<pharos-alert status=${status} ?closable=${closable}>${text}</pharos-alert>`,
+  args: defaultArgs,
+};
+
+export const Info = {
+  ...Base,
+  args: {
+    status: 'info',
+    text: 'There will be maintenance tomorrow.',
+  },
+};
+
+export const Success = {
+  ...Base,
+  args: {
+    status: 'success',
+    text: 'Success!',
+  },
+};
+
+export const Warning = {
+  render: ({ status, text, closable }) =>
+    html` <pharos-alert status=${status} ?closable=${closable}>
+      <p class="alert-example__content">${text}</p>
+      <p class="alert-example__content">See <pharos-link href="#">how to fix this</pharos-link>.</p>
+    </pharos-alert>`,
+  args: {
+    status: 'warning',
+    text: 'Your profile is incomplete.',
+  },
+};
+
+export const Error = {
+  render: ({ status, text, closable }) =>
+    html` <pharos-alert status=${status} ?closable=${closable}>
+      <p class="alert-example__content">${text}</p>
+      <p class="alert-example__content">
+        For more information,
+        <pharos-link href="#">read the documentation</pharos-link>.
+      </p>
+    </pharos-alert>`,
+  args: {
+    status: 'error',
+    text: "Your password didn't meet the minimum requirements.",
+  },
+};
+
+export const Closable = {
+  ...Error,
+  args: {
+    ...Error.args,
+    closable: true,
+  },
+};