Upgrade to react 18

.github/workflows/percy.yml

@@ -25,8 +25,7 @@ jobs:
         run: |
           npm ci
       - name: Percy Test
-        uses: percy/storybook-action@v0.1.6
-        with:
-          percy-flags: "--widths=1080"
+        run: |
+          npm run percy:storybook
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.gitignore

@@ -29,3 +29,5 @@ yarn-error.log*
 
 # interplay
 /interplay/*/
+
+.build_storybook

.storybook/main.js

@@ -1,14 +1,21 @@
 module.exports = {
-  stories: ["../lib/**/*.stories.@(mdx|js)"],
+  stories: ["../lib/**/*.@(mdx|stories.@(js))"],
   addons: [
-    "@storybook/addon-docs/",
-    "@storybook/addon-actions/register",
-    "@storybook/addon-links/",
-    "@storybook/addon-viewport/",
-    "@storybook/addon-knobs/",
-    "@storybook/addon-a11y/",
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-viewport",
+    "@storybook/addon-knobs",
+    "@storybook/addon-a11y",
     "@storybook/addon-toolbars",
     "@storybook/components",
-    "@storybook/api"
-  ]
+    "@storybook/api",
+    "@storybook/addon-mdx-gfm"
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  docs: {
+    autodocs: "docs"
+  }
 };

.storybook/preview.js

@@ -1,17 +1,13 @@
 import React from "react";
-import { addDecorator, addParameters } from "@storybook/react";
-import {
-  DocsPage,
-  DocsContainer as BaseContainer
-} from "@storybook/addon-docs/blocks";
+import { DocsPage, DocsContainer as BaseContainer } from "@storybook/blocks";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
-import { withA11y } from "@storybook/addon-a11y";
 import { default as GlobalStyles } from "../lib/GlobalStyles";
 import { default as systemtheme } from "../lib/systemtheme";
 import { default as systemThemeCollapsed } from "../lib/systemThemeCollapsed";
 import styled, { ThemeProvider } from "styled-components";
+import { get } from "lodash";
 
 library.add(far, fas);
 
@@ -27,16 +23,19 @@ const FlexItem = styled.div`
   margin: 0 10px;
 `;
 
+const getThemeName = (context) =>
+  get(context, "parameters.theme") || get(context, "globals.theme");
+
 const getTheme = (context) => {
-  const theme = context.parameters.theme || context.globals.theme;
-  return theme === "default" ? systemtheme : systemThemeCollapsed;
+  const themeName = getThemeName(context);
+  return themeName === "default" ? systemtheme : systemThemeCollapsed;
 };
 
 const ThemeDecorator = (storyFn, context) => {
-  const theme = context.parameters.theme || context.globals.theme;
+  const themeName = getThemeName(context);
   const storyTheme = getTheme(context);
 
-  switch (theme) {
+  switch (themeName) {
     case "side-by-side":
       return (
         <FlexWrapper>
@@ -98,16 +97,15 @@ export const DocsContainer = ({ children, context }) => {
   );
 };
 
-addDecorator(withA11y);
-addDecorator(ThemeDecorator);
-
-addParameters({
+export const decorators = [ThemeDecorator];
+export const parameters = {
   options: {
     showRoots: true
   },
   docs: {
     container: DocsContainer,
     page: DocsPage
   },
+  a11y: { disable: false },
   viewMode: "docs"
-});
+};

lib/01-Intro.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Intro" />
 
@@ -187,11 +187,11 @@ Playroom allows you to simultaneously design across a variety of themes and scre
 Playroom allows you to create a zero-install code-oriented design environment, built into a standalone bundle that can be deployed alongside your existing design system documentation.
 
 To run playroom, use this command: `npm run playroom`
+
 ## Browser/device support
 
 This design system is intended to work correctly on all modern desktop and mobile browsers.
 
 ---
 
 > "A design system is a living, funded product with a roadmap and backlog, serving an ecosystem." — Nathan Curtis
-

lib/Colour.stories.mdx

@@ -3,8 +3,8 @@ import {
   ColorPalette,
   ColorItem,
   Story,
-  Preview
-} from "@storybook/addon-docs/blocks";
+  Canvas
+} from "@storybook/addon-docs";
 import { colors } from "./systemtheme";
 import Flex from "./components/Flex";
 import Colour from "./assets/Colour";
@@ -18,7 +18,7 @@ These are the colours used throughout the design system, defined in `systemtheme
 
 ## Main palette
 
-<Preview>
+<Canvas>
   <ColorPalette>
     <ColorItem
       title="Greyscale"
@@ -101,15 +101,15 @@ These are the colours used throughout the design system, defined in `systemtheme
       ]}
     />
   </ColorPalette>
-</Preview>
+</Canvas>
 
 ## Monochrome opacities
 
 For black and white colours at different opacities, use the following scales.
 
 ### Black opacity scale
 
-<Preview>
+<Canvas>
   <Flex justifyContent="center">
     <Colour bg="black" />
     <Colour bg="black90" />
@@ -122,11 +122,11 @@ For black and white colours at different opacities, use the following scales.
     <Colour bg="black20" />
     <Colour bg="black10" />
   </Flex>
-</Preview>
+</Canvas>
 
 ### White opacity scale
 
-<Preview>
+<Canvas>
   <Box bg="greyDarkest" padding="6">
     <Flex justifyContent="center">
       <Colour bg="white" />
@@ -141,13 +141,13 @@ For black and white colours at different opacities, use the following scales.
       <Colour bg="white10" />
     </Flex>
   </Box>
-</Preview>
+</Canvas>
 
 ## Coloured opacities
 
 ### Primary opacity scale
 
-<Preview>
+<Canvas>
   <Flex justifyContent="center">
     <Colour bg="primary" />
     <Colour bg="primary90" />
@@ -160,11 +160,11 @@ For black and white colours at different opacities, use the following scales.
     <Colour bg="primary20" />
     <Colour bg="primary10" />
   </Flex>
-</Preview>
+</Canvas>
 
 ### Secondary opacity scale
 
-<Preview>
+<Canvas>
   <Flex justifyContent="center">
     <Colour bg="secondary" />
     <Colour bg="secondary90" />
@@ -177,11 +177,11 @@ For black and white colours at different opacities, use the following scales.
     <Colour bg="secondary20" />
     <Colour bg="secondary10" />
   </Flex>
-</Preview>
+</Canvas>
 
 ### Success opacity scale
 
-<Preview>
+<Canvas>
   <Flex justifyContent="center">
     <Colour bg="success" />
     <Colour bg="success90" />
@@ -194,11 +194,11 @@ For black and white colours at different opacities, use the following scales.
     <Colour bg="success20" />
     <Colour bg="success10" />
   </Flex>
-</Preview>
+</Canvas>
 
 ### Warning opacity scale
 
-<Preview>
+<Canvas>
   <Flex justifyContent="center">
     <Colour bg="warning" />
     <Colour bg="warning90" />
@@ -211,11 +211,11 @@ For black and white colours at different opacities, use the following scales.
     <Colour bg="warning20" />
     <Colour bg="warning10" />
   </Flex>
-</Preview>
+</Canvas>
 
 ### Danger opacity scale
 
-<Preview>
+<Canvas>
   <Flex justifyContent="center">
     <Colour bg="danger" />
     <Colour bg="danger90" />
@@ -228,4 +228,4 @@ For black and white colours at different opacities, use the following scales.
     <Colour bg="danger20" />
     <Colour bg="danger10" />
   </Flex>
-</Preview>
+</Canvas>

lib/Spacing.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="System/Spacing" />