STCOM-1176 Upgrade storybook to v7 (#2219)

* upgrade to storybook 7

* remove unused storybook addon

* whittle the babel config

* remove commented plugins

* add comments to storybook setup files.

* add blank lines to end of babel config.

* remove commented code in preview

* just use the usual babel config...

* remove the babel subset

* add replacements for intl, direction plugins

* Update CHANGELOG.md

* add blank line at the end of IntlWrap.css

.storybook/IntlWrap.css

@@ -0,0 +1,27 @@
+.iwControls {
+  position: sticky;
+  inset: 0;
+  background-color: #fff;
+  border-bottom: 1px solid #e7e7e7;
+  z-index: 1;
+  margin-bottom: 1rem;
+  padding-bottom: .5rem;
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+}
+
+.iwLabel {
+  font-weight: bold;
+  display: inline;
+}
+
+.iwLegend {
+  display: block;
+}
+
+.iwFieldSet {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: .5rem;
+}

.storybook/IntlWrap.js

@@ -0,0 +1,38 @@
+// component providing both a switch for locale and a toggle switch for rtl.
+import React, { useState, useCallback } from 'react';
+import { IntlProvider } from 'react-intl';
+import css from './IntlWrap.css';
+
+function updatePageDirection(direction) {
+  document.body.dir = direction;
+  console.log('setting direction');
+}
+
+const IntlWrap = ({ messages, children }) => {
+  const [locale, updateLocale] = useState('en');
+  const [direction, updateDirection ] = useState('LTR');
+
+  const handleDirectionChange = (e) => {
+    updateDirection(e.target.value);
+    updatePageDirection(e.target.value);
+  };
+
+  return (
+    <IntlProvider locale={locale} messages={messages['en']}>
+      <div className={css.iwControls} dir="ltr"><label className={css.iwLabel}>Locale: </label><select value={locale} onChange={e => updateLocale(e.target.value)}>
+        {
+          Object.keys(messages).map(l => <option key={l}>{l}</option>)
+        }
+        </select>
+        <div className={css.iwFieldSet}>
+          <label className={`${css.iwLegend} ${css.iwLabel}`} >Direction: </label>
+          <label><input type="radio" onChange={handleDirectionChange} name="direction" value="LTR" checked={direction === 'LTR'}/> LTR</label>
+          <label><input type="radio" onChange={handleDirectionChange} name="direction" value="RTL" checked={direction === 'RTL'}/> RTL</label>
+        </div>
+      </div>
+      { children }
+    </IntlProvider>
+  )
+}
+
+export default IntlWrap;

.storybook/main.js

@@ -1,12 +1,10 @@
 const customWebpack = require('./stcom-webpack.config.js');
 
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
+const config = {
   features: {
     postcss: false, // we use our own postcss setup
   },
+
   stories: [{
     directory: '../guides',
     titlePrefix: 'Guides',
@@ -17,12 +15,22 @@ module.exports = {
     titlePrefix: 'Components',
     files: '**/*.stories.[tj]s'
   }],
+
   addons: [
-    'storybook-readme/register',
     '@storybook/addon-essentials',
-    'storybook-addon-intl/register',
-    'storybook-addon-rtl/register',
-    'storybook-addon-designs/register',
+    '@storybook/addon-mdx-gfm'
   ],
-  webpackFinal: customWebpack
+
+  webpackFinal: customWebpack,
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { fastRefresh: true }
+  },
+
+  docs: {
+    autodocs: false
+  },
 };
+
+export default config;

.storybook/manager.js

@@ -1,15 +1,7 @@
-import { addons } from '@storybook/addons';
-import { themes } from '@storybook/theming';
-import pkg from '../package.json'
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
 
 addons.setConfig({
-  docs: {
-    theme: Object.assign(
-      themes.light,
-      {
-        brandTitle: `Stripes-Components v${pkg.version}`,
-        brandUrl: 'https://github.com/folio-org/stripes-components'
-      }
-    )
-  }
+  theme: theme
 });

.storybook/preview.js

@@ -1,16 +1,16 @@
 import React, { Component, Fragment } from 'react';
-import { addReadme } from 'storybook-readme';
-import { initializeRTL } from 'storybook-addon-rtl';
+import { IntlProvider } from 'react-intl';
 import pkg from '../package.json';
 import { themes } from '@storybook/theming';
+import IntlWrap from './IntlWrap';
 import '../lib/global.css';
 
 /**
  * React intl support
  */
 
 // Load the locale data for all your defined locales
-import { setIntlConfig, withIntl } from 'storybook-addon-intl';
+// import { setIntlConfig, withIntl } from 'storybook-addon-intl';
 
 import arTranslations from '../translations/stripes-components/ar.json';
 import caTranslations from '../translations/stripes-components/ca.json';
@@ -51,18 +51,6 @@ const messages = {
   sv: prefixKeys(svTranslations),
 };
 
-// Set intl configuration
-setIntlConfig({
-    locales: ['ar', 'ca', 'da', 'de', 'en', 'es', 'fr', 'hu', 'it', 'pt', 'ru', 'sv'],
-    defaultLocale: 'en',
-    getMessages: (locale) => messages[locale]
-});
-
-/**
- * RTL
- */
-initializeRTL();
-
 /**
  * Add OverlayContainer to all stories
  * Popovers, Modals etc. mount to this element in the real system
@@ -88,16 +76,26 @@ initializeRTL();
   }
  }
 
-const storyFnDecorator = storyFn => <AddOverlayContainer>{storyFn()}</AddOverlayContainer>
+const storyFnDecorator = storyFn => (
+  <IntlWrap messages={messages}>
+    <AddOverlayContainer>
+      {storyFn()}
+    </AddOverlayContainer>
+  </IntlWrap>
+);
 
- export const decorators = [withIntl, storyFnDecorator, addReadme]
- export const parameters = {
-   docs: {
-     theme: Object.assign({}, themes.light, {
-      brandTitle: `FOLIO Stripes-components v${pkg.version}`,
-     })
-   },
-   readme: {
-     codeTheme: 'a11y-dark',
-   }
- }
+const preview = {
+  decorators: [storyFnDecorator],
+  parameters: {
+    docs: {
+      theme: Object.assign({}, themes.light, {
+       brandTitle: `FOLIO Stripes-components v${pkg.version}`,
+      })
+    },
+    readme: {
+      codeTheme: 'a11y-dark',
+    }
+  }
+}
+
+export default preview;

.storybook/stcom-webpack.config.js

@@ -38,8 +38,7 @@ module.exports = async (config) => {
             plugins: [
               require('postcss-import'),
               require('autoprefixer'),
-              require('postcss-custom-properties')({ preserve: false, importFrom: './lib/variables.css' }),
-              require('postcss-calc'),
+              require('postcss-custom-properties')({ preserve: false, importFrom: './lib/variables.css', disableDeprecationNotice: true }),
               require('postcss-nesting'),
               require('postcss-custom-media'),
               require('postcss-media-minmax'),
@@ -104,6 +103,6 @@ module.exports = async (config) => {
     },
   ];
 
-  config.module.rules.splice(svgRuleIndex,1, ...svgrRules);
+  config.module.rules.splice(svgRuleIndex,2, ...svgrRules);
   return config;
 }

.storybook/theme.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming/create';
+import pkg from '../package.json';
+
+// Setting up this 'theme' renders the library version in the storybook UI.
+
+export default create({
+  base: 'light',
+  brandTitle: `Stripes-Components v${pkg.version}`,
+  brandUrl: 'https://github.com/folio-org/stripes-components',
+});

CHANGELOG.md

@@ -21,6 +21,7 @@
 * Show action buttons in correct color. Refs STCOM-1256.
 * Accessibility | Repeatable Field Component. Refs STCOM-766.
 * Apply highest z-index to focused `<Accordion>` within `AccordionSet`. Refs STCOM-1257.
+* Upgrade storybook to v7. Refs STCOM-1176.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)

guides/accessibility/AccessibilityDevPrimer.stories.mdx

@@ -86,32 +86,32 @@ Form controls require associated labels so that AT can convey the purpose of a t
 
 Typical labeling of form elements is as follows (explicit labeling) our form controls set these up under the hood:
 ```
-<!-- general html controls -->
+{/* general html controls */}
 <label for="inputid">username</label>
 <input type="text" id="inputid" />
 
-<!-- stripes-components controls -->
+{/* stripes-components controls */}
 <TextField label="username" />
 ```
 
 Given this, a screen reader will announce 'username edit blank' when the user tabs to the field. Without the `<label>`, it simply announces 'edit blank'.
 
 If visible labels are inadequate, `aria-label` can be used:
 ```
-<!-- general html controls -->
+{/* general html controls */}
 <input type="text" aria-label="username" id="inputid" />
 
-<!-- stripes-components controls -->
+{/* stripes-components controls */}
 <TextField aria-label="username" />
 ```
 If the label is visible elsewhere in the page, its element can be associated with the input via `aria-labelledby`:
 ```
-<!-- general html controls -->
+{/* general html controls */}
 <div id="columnlabel">starting date</div>
 ...
 <input type="text" aria-labelledby="columnlabel" />
 
-<!-- stripes-components controls -->
+{/* stripes-components controls */}
 <TextField aria-labelledby="columnlabel" />
 ```
 

lib/Accordion/stories/Accordion.stories.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
 import Readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 import Accordion from '../Accordion';
@@ -17,14 +16,11 @@ const as = {
 
 export default {
   title: 'Accordion',
-  decorators: [withReadme(Readme)],
 };
 
 export const WithDefaults = () => <BasicUsage />;
 
-WithDefaults.story = {
-  name: 'With defaults',
-};
+WithDefaults.storyName = 'With defaults';
 
 export const AccordionStatus = () => <Status />;
 
@@ -58,15 +54,11 @@ export const DisplayWhenProps = () => (
   </>
 );
 
-DisplayWhenProps.story = {
-  name: 'DisplayWhen',
-};
+DisplayWhenProps.storyName = 'DisplayWhen';
 
 export const Separator = () => <Accordion separator={false}>Separator set to false.</Accordion>;
 
-Separator.story = {
-  name: 'Separator',
-};
+Separator.storyName = 'Separator';
 
 export const Header = () => {
   const header = ({
@@ -94,12 +86,8 @@ export const Header = () => {
   );
 };
 
-Header.story = {
-  name: 'Header',
-};
+Header.storyName = 'Header';
 
 export const ExpandAllWithinSet = () => <ExpandAllWithin />;
 
-ExpandAllWithinSet.story = {
-  name: 'ExpandAll within set',
-};
+ExpandAllWithinSet.storyName = 'ExpandAll within set';

lib/AdvancedSearch/stories/AdvancedSearch.stories.js

@@ -1,22 +1,15 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import Readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 import WithQueryBuilder from './WithQueryBuilder';
 
 export default {
   title: 'AdvancedSearch',
-  decorators: [withReadme(Readme)],
 };
 
 export const WithDefaults = () => <BasicUsage />;
 
-WithDefaults.story = {
-  name: 'with defaults',
-};
+WithDefaults.storyName = 'with defaults';
 
 export const WithCustomQueryBuilder = () => <WithQueryBuilder />;
 
-WithCustomQueryBuilder.story = {
-  name: 'with custom queryBuilder',
-};
+WithCustomQueryBuilder.storyName = 'with custom queryBuilder';

lib/AutoSuggest/stories/AutoSuggest.stories.js

@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'AutoSuggest',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;

lib/Avatar/stories/Avatar.stories.js

@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Avatar',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;

lib/Badge/stories/Badge.stories.js

@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Badge',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;