Minimal component render

.storybook/decorators.tsx

@@ -0,0 +1,50 @@
+import type {Decorator} from '@storybook/react';
+import {Formik} from 'formik';
+import {CSSProperties} from 'react';
+
+/**
+ * Wrap stories so that they are inside a container with the class name "utrecht-document", used
+ * to wrap some 'page-global' styling.
+ */
+export const utrechtDocumentDecorator: Decorator = Story => {
+  return (
+    <div
+      className="utrecht-document utrecht-document--surface"
+      style={
+        {
+          '--utrecht-document-font-size': '16px',
+        } as CSSProperties
+      }
+    >
+      <Story />
+    </div>
+  );
+};
+
+export const withFormik: Decorator = (Story, context) => {
+  const isDisabled = context.parameters?.formik?.disable ?? false;
+  if (isDisabled) {
+    return <Story />;
+  }
+  const initialValues = context.parameters?.formik?.initialValues || {};
+  const initialErrors = context.parameters?.formik?.initialErrors || {};
+  const initialTouched = context.parameters?.formik?.initialTouched || {};
+  const wrapForm = context.parameters?.formik?.wrapForm ?? true;
+  return (
+    <Formik
+      initialValues={initialValues}
+      initialErrors={initialErrors}
+      initialTouched={initialTouched}
+      enableReinitialize
+      onSubmit={(values, formikHelpers) => console.log(values, formikHelpers)}
+    >
+      {wrapForm ? (
+        <form id="storybook-withFormik-decorator-form" data-testid="storybook-formik-form">
+          <Story />
+        </form>
+      ) : (
+        <Story />
+      )}
+    </Formik>
+  );
+};

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type {StorybookConfig} from '@storybook/react-webpack5';
+import CircularDependencyPlugin from 'circular-dependency-plugin';
+import path from 'path';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 const config: StorybookConfig = {
@@ -17,13 +19,56 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     'storybook-react-intl',
     '@storybook/addon-webpack5-compiler-babel',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          // Replaces existing CSS rules with given rule
+          {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader'],
+          },
+          // Replaces any existing Sass rules with given rules
+          {
+            test: /\.s[ac]ss$/i,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'sass-loader',
+                options: {
+                  implementation: require.resolve('sass'),
+                  sassOptions: {
+                    quietDeps: true,
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
   docs: {},
   webpackFinal: async config => {
     if (!config.resolve) {
       config.resolve = {};
     }
     config.resolve.plugins = [new TsconfigPathsPlugin()];
+
+    if (!config.resolve.alias) {
+      config.resolve.alias = {};
+    }
+    config.resolve.alias['@/scss'] = path.resolve('src/scss');
+
+    if (!config.plugins) {
+      config.plugins = [];
+    }
+    config.plugins.push(
+      new CircularDependencyPlugin({
+        failOnError: true,
+      })
+    );
     return config;
   },
 };

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script defer>
+  document.documentElement.classList.add('openforms-theme');
+</script>

.storybook/preview.ts

@@ -1,6 +1,11 @@
+import '@open-formulieren/design-tokens/dist/index.css';
 import {Preview} from '@storybook/react';
+import '@utrecht/components/dist/document/css/index.css';
+
+import {utrechtDocumentDecorator} from './decorators';
 
 const preview: Preview = {
+  decorators: [utrechtDocumentDecorator],
   parameters: {
     controls: {
       matchers: {
@@ -9,6 +14,7 @@ const preview: Preview = {
       },
     },
   },
+  tags: ['private'],
 };
 
 export default preview;