vite

.storybook/main.js

@@ -1,15 +1,15 @@
-const { join } = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const {
-  twingLoader,
-  valLoader,
-  alias: twingAlias,
-} = require('../twing/webpack-options');
+const svgr = require('@svgr/rollup').default;
+const { twingPlugin } = require('../twing/rollup-plugin');
 
 module.exports = {
   // We load the welcome story separately so it will be the first sidebar item.
   stories: ['../src/welcome.stories.mdx', '../src/**/*.stories.@(js|mdx)'],
-  staticDirs: ['../static', '../src/assets'],
+  features: {
+    storyStoreV7: true, // TODO: figure out if this actually has an effect for vite
+  },
+  core: {
+    builder: '@storybook/builder-vite',
+  },
   addons: [
     {
       name: '@storybook/addon-essentials',
@@ -22,77 +22,48 @@ module.exports = {
     // Disabling these two until they are fixed upstream
     // 'storybook-mobile',
     // '@whitespace/storybook-addon-html',
-    'storybook-addon-outline',
+    // 'storybook-addon-outline',
     '@etchteam/storybook-addon-status',
-    '@storybook/addon-postcss',
+    '@storybook/addon-postcss', // TODO: still used with vite?
   ],
-  managerHead: (head) => {
-    const iconSuffix = process.env.NODE_ENV === 'development' ? '-dev' : '';
-    return `${head}
-      <link rel="icon" href="favicons/favicon${iconSuffix}.ico" />
-      <link rel="icon" href="favicons/icon${iconSuffix}.svg" type="image/svg+xml" />`;
-  },
-  webpackFinal: async (config) => {
-    const isDev = config.mode === 'development';
-
-    /**
-     * For development, leave the default 'cheap-module-source-map', as it's faster and works.
-     * For the build, using the default does not work correctly, but this option appears to.
-     * @see https://webpack.js.org/configuration/devtool/
-     */
-    if (!isDev) {
-      config.devtool = 'source-map';
-    }
-
-    // Push new rules
-    config.module.rules.push(
-      {
-        test: /\.s[ca]ss$/,
-        use: [
-          {
-            // @see https://github.com/webpack-contrib/style-loader/issues/303#issuecomment-581168870
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              // Lets CSS loader know there are two loaders left that may be
-              // handling imports.
-              // @see https://github.com/webpack-contrib/css-loader#importloaders
-              importLoaders: 2,
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              // Dart Sass is easier to install than Node Sass
-              implementation: require('sass'),
-              sourceMap: true,
-              sassOptions: {
-                importer: [require('../glob-sass-importer')],
-              },
-            },
-          },
-        ],
-      },
-      twingLoader,
-      valLoader
-    );
-
-    Object.assign(config.resolve.alias, twingAlias);
-    // Allow resolving `static/*` paths so relative paths don't have to be used
-    // This is used for url() paths in CSS
-    config.resolve.alias['static'] = join(__dirname, '..', 'static');
+  /** @param {import('vite').UserConfig} config */
+  async viteFinal(config) {
+    config.plugins ||= [];
+    config.plugins.push(twingPlugin());
+    config.plugins.push(svgr());
 
-    config.plugins.push(new MiniCssExtractPlugin());
+    config.optimizeDeps ||= {};
+    config.optimizeDeps.include = [
+      '@cloudfour/twing-browser-esm',
+      '@mdx-js/react',
+      '@storybook/addon-docs',
+      '@storybook/addon-viewport',
+      'focus-visible',
+      'jabber',
+      'prismjs',
+      'prismjs/components/prism-bash',
+      'prismjs/components/prism-handlebars',
+      'prismjs/components/prism-json',
+      'prismjs/components/prism-jsx',
+      'prismjs/components/prism-markup-templating',
+      'prismjs/components/prism-php',
+      'prismjs/components/prism-scss',
+      'prismjs/components/prism-toml',
+      'prismjs/components/prism-tsx',
+      'prismjs/components/prism-twig',
+      'prismjs/components/prism-typescript',
+      'prismjs/components/prism-yaml',
+      'react',
+      'react-syntax-highlighter/dist/esm/languages/prism/twig',
+      'react-syntax-highlighter/dist/esm/prism-light',
+      'smoldash',
+    ];
 
+    config.css ||= {};
+    config.css.preprocessorOptions ||= {};
+    config.css.preprocessorOptions.scss = {
+      importer: [require('../glob-sass-importer')],
+    };
     return config;
   },
 };

.storybook/preview.js → .storybook/preview.jsx

@@ -1,4 +1,3 @@
-import { Parser } from 'html-to-react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 import twig from 'react-syntax-highlighter/dist/esm/languages/prism/twig';
@@ -10,6 +9,8 @@ import '../src/index-with-dependencies.scss';
 import './preview.scss';
 import { makeTwigInclude } from '../src/make-twig-include';
 const breakpoints = tokens.size.breakpoint;
+import { useEffect, useRef } from 'react';
+import { useEffect as storyBookUseEffect } from '@storybook/client-api';
 
 // Extend the languages Storybook will highlight
 ReactSyntaxHighlighter.registerLanguage('twig', twig);
@@ -27,8 +28,6 @@ const breakpointViewports = Object.keys(breakpoints).map((name) => {
   };
 });
 
-const htmlToReactParser = new Parser();
-
 export const parameters = {
   options: {
     storySort: {
@@ -56,25 +55,26 @@ export const parameters = {
     source: {
       language: 'twig',
     },
-    prepareForInline: (storyFn) => htmlToReactParser.parse(storyFn()),
-    transformSource(src, storyContext) {
-      try {
-        const storyFunction = storyContext.originalStoryFn;
-        if (!storyFunction) return src;
-        const rendered = storyFunction(
-          storyContext.args || storyContext.initialArgs
-        );
-        // The twing/source-inputs-loader.js file makes it so that whenever twig templates are rendered,
-        // the arguments and input path are stored in the window.__twig_inputs__ variable.
-        // __twig_inputs__ is a map between the output HTML and and objects with the arguments and input paths
-        // Here, since we have the rendered HTML, we can look up what the arguments and path were
-        // that correspond to that output
-        const input = window.__twig_inputs__?.get(rendered);
-        if (!input) return src;
-        return makeTwigInclude(input.path, input.args);
-      } catch {
-        return src;
-      }
+    prepareForInline: (storyFn) => {
+      useEffect(() => {
+        if (rootRef.current) {
+          const result = storyFn();
+          if (result instanceof Element) {
+            rootRef.current.append(result);
+          } else {
+            rootRef.current.innerHTML = result;
+          }
+        }
+      }, []);
+      const rootRef = useRef();
+      return <div ref={rootRef}></div>;
+    },
+    transformSource(_src, storyContext) {
+      return makeTwigInclude(
+        storyContext.originalStoryFn(storyContext.parameters.args)
+          ?.__twigSourceFile,
+        storyContext.parameters.args
+      );
     },
   },
   viewport: {
@@ -153,4 +153,15 @@ export const globalTypes = {
   },
 };
 
-export const decorators = [withTheme, withTextFlow];
+const handleCleanup = (story, ctx) => {
+  const result = story();
+  storyBookUseEffect(() => {
+    if (result instanceof Element) result.__onStoryBookAttach?.();
+    return () => {
+      if (result instanceof Element) result.__onStoryBookDetach?.();
+    };
+  }, [ctx]);
+  return result;
+};
+
+export const decorators = [withTheme, withTextFlow, handleCleanup];

.style-dictionary/build.js

@@ -1,5 +1,5 @@
 const StyleDictionary = require('style-dictionary');
-const _ = require('lodash');
+const _ = require('smoldash');
 
 /**
  * Custom Transform: Kebab-Case without Category

README.md

@@ -1,4 +1,4 @@
-<p align="center"><img src="https://cloudfour.com/android-chrome-512x512.png" alt="" width="128" height="128"></p>
+<p align="center"><img src="https://cloudfour.com/android-chrome-512x512.png" alt="" width="128" height="128" /></p>
 
 # Cloud Four Patterns