Add base pattern library setup with Storybook

client/src/components/Sidebar/Sidebar.stories.tsx

@@ -9,8 +9,6 @@ import { LinkMenuItemDefinition } from './menu/LinkMenuItem';
 import { SubMenuItemDefinition } from './menu/SubMenuItem';
 import { initFocusOutline } from '../../utils/focus';
 
-import '../../../../wagtail/admin/static/wagtailadmin/css/sidebar.css';
-
 export default {
   title: 'Sidebar/Sidebar',
   parameters: { layout: 'fullscreen' },

client/storybook/TemplatePattern.tsx

@@ -0,0 +1,37 @@
+import React, { useRef, useEffect } from 'react';
+
+import { renderPattern, simulateLoading } from 'storybook-django';
+
+const getTemplateName = (template?: string, filename?: string) =>
+  template ||
+  filename?.replace(/.+\/templates\//, '').replace(/\.stories\..+$/, '.html');
+
+interface TemplatePatternProps {
+  element?: 'div' | 'span';
+  template?: string;
+  filename?: string;
+  context?: { [key: string]: any };
+  tags?: { [key: string]: any };
+}
+
+const TemplatePattern = ({
+  element = 'div',
+  template,
+  filename,
+  context = {},
+  tags = {},
+}: TemplatePatternProps) => {
+  const ref = useRef(null);
+  const templateName = getTemplateName(template, filename);
+
+  useEffect(() => {
+    renderPattern(window.PATTERN_LIBRARY_API, templateName, context, tags)
+      .catch((err) => simulateLoading(ref.current, err))
+      .then((res) => res.text())
+      .then((html) => simulateLoading(ref.current, html));
+  }, []);
+
+  return React.createElement(element, { ref });
+};
+
+export default TemplatePattern;

client/storybook/main.js

@@ -1,9 +1,11 @@
 module.exports = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../../client/**/*.stories.*', '../../wagtail/**/*.stories.*'],
+  addons: ['@storybook/addon-docs'],
   core: {
     builder: 'webpack5',
   },
   webpackFinal: (config) => {
+    /* eslint-disable no-param-reassign */
     config.resolve.fallback.crypto = false;
 
     const rules = [
@@ -23,10 +25,19 @@ module.exports = {
           'sass-loader',
         ],
       },
+      {
+        test: /\.(md|html)$/,
+        type: 'asset/source',
+      },
     ];
 
     config.module.rules = config.module.rules.concat(rules);
 
+    config.node = {
+      __filename: true,
+      __dirname: true,
+    };
+
     return config;
   },
 };

client/storybook/middleware.js

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const middleware = require('storybook-django/src/middleware');
+
+const origin = process.env.TEST_ORIGIN ?? 'http://localhost:8000';
+
+module.exports = middleware.createDjangoAPIMiddleware({
+  origin,
+  // Must match the urls.py pattern for the pattern library.
+  apiPath: '/pattern-library/',
+});

client/storybook/preview.js

@@ -2,13 +2,6 @@ import '../tests/stubs';
 
 import '../../wagtail/admin/static_src/wagtailadmin/scss/core.scss';
 import '../../wagtail/admin/static_src/wagtailadmin/scss/sidebar.scss';
+import './preview.scss';
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
+window.PATTERN_LIBRARY_API = '/pattern-library/api/v1/render-pattern';

client/storybook/preview.scss

@@ -0,0 +1,14 @@
+@import '../scss/settings';
+@import '../scss/tools';
+
+// Fix compatibility issue with Wagtail’s headings.
+h1,
+h2 {
+  text-transform: initial;
+}
+
+// Fix compatibility issue with Wagtail’s tag implementation.
+.sbdocs .tag,
+.sbdocs .tag::before {
+  all: revert;
+}

client/storybook/stories.d.ts

@@ -0,0 +1,7 @@
+// See https://stackoverflow.com/questions/44678315/how-to-import-markdown-md-file-in-typescript.
+declare module '*.md';
+declare module '*.html';
+
+interface Window {
+  PATTERN_LIBRARY_API: string;
+}

package.json

@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
+    "@storybook/addon-docs": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
     "@storybook/manager-webpack5": "^6.3.12",
     "@storybook/react": "^6.3.12",
@@ -81,6 +82,7 @@
     "redux-mock-store": "^1.3.0",
     "sass": "^1.45.1",
     "sass-loader": "^12.4.0",
+    "storybook-django": "^0.3.0",
     "stylelint": "^14.2.0",
     "ts-jest": "^26.5.6",
     "ts-loader": "^9.2.6",
@@ -120,7 +122,7 @@
     "test:unit:watch": "jest --watch",
     "test:unit:coverage": "jest --coverage",
     "test:integration": "./client/tests/integration/node_modules/.bin/jest --config ./client/tests/integration/jest.config.js",
-    "storybook": "start-storybook -c client/storybook -p 6006",
-    "build-storybook": "build-storybook -c client/storybook"
+    "storybook": "start-storybook -c client/storybook -p 6006 --no-open --no-version-updates --no-release-notes --quiet --modern",
+    "build-storybook": "build-storybook -c client/storybook --modern"
   }
 }

setup.py

@@ -51,6 +51,7 @@ testing_extras = [
     "Unidecode>=0.04.14,<2.0",
     "azure-mgmt-cdn>=5.1,<6.0",
     "azure-mgmt-frontdoor>=0.3,<0.4",
+    "django-pattern-library>=0.7,<0.8",
     # For coverage and PEP8 linting
     "coverage>=3.7.0",
     "black==22.1.0",

tsconfig.json

@@ -10,5 +10,6 @@
     "allowJs": true,
     "downlevelIteration": true
   },
-  "files": ["client/src/index.ts", "client/src/custom.d.ts"]
+  "include": ["src", "wagtail"],
+  "exclude": ["mode_modules", "static"]
 }

wagtail/tests/settings_ui.py

@@ -5,4 +5,19 @@ DEBUG = True
 
 DATABASES["default"]["NAME"] = "ui_tests.db"  # noqa
 
-WAGTAIL_EXPERIMENTAL_FEATURES = {"slim-sidebar"}
+INSTALLED_APPS += [  # noqa
+    "pattern_library",
+]
+
+TEMPLATES[0]["OPTIONS"]["builtins"] = ["pattern_library.loader_tags"]  # noqa
+
+PATTERN_LIBRARY = {
+    # Groups of templates for the pattern library navigation. The keys
+    # are the group titles and the values are lists of template name prefixes that will
+    # be searched to populate the groups.
+    "SECTIONS": (("components", ["wagtailadmin/shared"]),),
+    # Configure which files to detect as templates.
+    "TEMPLATE_SUFFIX": ".html",
+    "PATTERN_BASE_TEMPLATE_NAME": "",
+    "BASE_TEMPLATE_NAMES": [],
+}

wagtail/tests/urls.py

@@ -1,3 +1,4 @@
+from django.apps import apps
 from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 from django.http import HttpResponse
 from django.urls import include, path
@@ -42,6 +43,11 @@ urlpatterns = [
     path("fallback/", lambda: HttpResponse("ok"), name="fallback"),
 ]
 
+if apps.is_installed("pattern_library"):
+    urlpatterns += [
+        path("pattern-library/", include("pattern_library.urls")),
+    ]
+
 urlpatterns += staticfiles_urlpatterns()
 
 urlpatterns += [