build: move to pnpm and upgrade storybook, closes #70

.npmrc

@@ -0,0 +1,3 @@
+# @see https://github.com/storybookjs/builder-vite/issues/55
+public-hoist-pattern[]=*storybook*
+public-hoist-pattern[]=@mdx-js/react

.prettierignore

@@ -1,2 +1,9 @@
 *.md
 *.mdx
+node_modules/
+dist/
+coverage/
+.nyc_output/
+*.ignore
+pnpm-lock.yaml
+.pnpm-store

.prettierrc.js

@@ -0,0 +1,15 @@
+/** @type {import('prettier').Options} */
+module.exports = {
+  plugins: [require.resolve('@ianvs/prettier-plugin-sort-imports')],
+  printWidth: 90,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'es5',
+  useTabs: false,
+
+  importOrder: ['^~/(.*)$', '^[./]'],
+  importOrderBuiltinModulesToTop: true,
+  importOrderCombineTypeAndValueImports: false,
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};

.storybook/main.ts

@@ -1,71 +1,42 @@
-const path = require('path');
+const path = require('node:path');
+
+const { mergeConfig } = require('vite');
 
 const codesandbox = require('remark-codesandbox');
 
 const storybookConfig = {
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: { fastRefresh: true },
+  },
+
+  csfPluginOptions: {},
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/jest',
     '@storybook/addon-coverage',
+    '@storybook/addon-docs',
     '@storybook/addon-storysource',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        sourceLoaderOptions: {
-          rule: {
-            include: [
-              path.resolve(__dirname, '../docs'),
-              path.resolve(__dirname, '../src'),
-            ],
-          },
-        },
-      },
-    },
   ],
+
   /** Files to load as stories */
   stories: ['../docs/**/*.stories.@(mdx|tsx)'],
-  /** Customise webpack config */
-  webpackFinal: async (config) => {
-    console.group('[webpackFinal]');
-
-    const mdxConfig = config.module.rules
-      .find(
-        (rule) => rule?.test?.test?.('story.mdx') && !rule?.exclude?.test?.('story.mdx')
-      )
-      ?.use?.find?.((use) => use.loader.includes('@storybook/mdx1-csf'));
 
-    console.debug('using MDX config', mdxConfig);
-
-    mdxConfig.options = mdxConfig.options ?? {};
-    mdxConfig.options.remarkPlugins = mdxConfig.options.remarkPlugins ?? [];
-    mdxConfig.options.remarkPlugins.push([
-      codesandbox,
-      {
-        autoDeploy: process.env.NODE_ENV === 'production',
-        mode: 'iframe',
-        customTemplates: {
-          'react-compare-slider': {
-            entry: 'src/App.jsx',
-            extends: '9si6l',
-          },
-        },
-        query: {
-          view: 'preview',
-          hidedevtools: 1,
-          hidenavigation: 1,
-          fontsize: 14,
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          ['react-compare-slider']: path.resolve(__dirname, '..', 'src'),
         },
       },
-    ]);
-
-    config.resolve.alias['react-compare-slider'] = path.resolve(__dirname, '..', 'src');
-
-    console.groupEnd();
-
-    return config;
+    });
   },
 };
 

.storybook/preview-head.html

@@ -1,25 +1,71 @@
+<script>
+   window.global = window;
+</script>
+
 <style type="text/css">
   :root {
+    --sb-brand-base: rgb(180, 100, 250);
     --sb-brand-outline-base: rgba(255, 255, 255, 0.1);
     --sb-brand-contrast: #ffffff;
     --sb-surface-top-base: rgb(39, 37, 39, 0.5);
     --sb-surface-middle-base: rgb(39, 37, 39, 0.25);
+
+    font-family: system-ui, sans-serif;
   }
 
   html,
   body {
+    width: 100% !important;
     height: 100% !important;
+    max-height: 100vh !important;
+  }
+
+  html {
+    display: flex;
   }
 
   body {
-    margin: 0 !important;
-    padding: 0 !important;
+    flex-grow: 1;
+  }
+
+   /** any story **/
+
+   #storybook-root:not([hidden="true"]) {
+    display: flex !important;
+    height: 100%;
+  }
+
+  #storybook-root > div {
+    max-height: 100vh !important;
+  }
+
+
+  /** sidebar */
+
+  .sidebar-subheading,
+  .sidebar-container,
+  .storybook-explorer-tree {
+    font-family: system-ui !important;
   }
 
   .sidebar-item.selected {
     color: var(--sb-brand-contrast) !important;
   }
 
+  /** docs **/
+
+  .sbdocs.sbdocs-preview div[scale="1"] {
+    height: 100% !important;
+  }
+
+  .sbdocs .innerZoomElementWrapper {
+    padding-bottom: 10px !important;
+  }
+
+  .sbdocs.sbdocs-preview div[id^="story--"] div[data-name] > div {
+    height: 100% !important;
+  }
+
   .sbdocs.sbdocs-wrapper {
     padding-top: 2rem !important;
   }
@@ -30,6 +76,13 @@
     margin-bottom: 1rem;
   }
 
+  .sbdocs a {
+    color: var(--sb-brand-base);
+    text-decoration: none;
+    font-family: inherit;
+    font-size: inherit;
+  }
+
   .sbdocs.sbdocs-h1 a,
   .sbdocs.sbdocs-h2 a,
   .sbdocs.sbdocs-h3 a,
@@ -53,14 +106,6 @@
     border-color: var(--sb-brand-outline-base) !important;
   }
 
-  .sb-show-main > #root {
-    display: flex;
-    flex-grow: 1;
-    width: 100%;
-    min-height: 100%;
-    max-height: 100vh;
-  }
-
   .docblock-propstable-body tr td,
   .docblock-argstable-body tr td {
     background-color: var(--sb-surface-middle-base) !important;
@@ -70,6 +115,8 @@
     background: var(--sb-surface-top-base) !important;
   }
 
+  /** custom **/
+
   .sb-custom-note {
     display: block;
     font-family: sans-serif;
@@ -79,18 +126,4 @@
     background-color: rgba(0, 0, 0, 0.85);
     color: white;
   }
-
-  /** @HACK Storybook adds a 100px height to this container for some reason.
-   *  Using custom styles to workaround it...ish.
-   */
-
-  .sbdocs-preview div[id^='story--'] {
-    display: flex;
-  }
-
-  .sbdocs-preview div[id^='story--'] > div {
-    height: 70vh !important;
-    max-height: 32rem;
-    flex-grow: 1;
-  }
 </style>

.storybook/preview.ts

@@ -1,24 +1,23 @@
-import { withConsole } from '@storybook/addon-console';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { addDecorator, addParameters } from '@storybook/react';
+// import { withConsole } from '@storybook/addon-console';
 
-import { theme } from './theme';
+import '@storybook/addon-console';
 
-addDecorator((storyFn, context) => withConsole()(storyFn)(context));
+import { theme } from './theme';
 
-addParameters({
+export const parameters = {
+  layout: 'fullscreen',
   controls: {
     hideNoControlsWarning: true,
   },
   docs: {
+    /** @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-page */
+    docsPage: 'automatic',
+    defaultName: 'Docs',
     inlineStories: true,
     theme,
   },
   options: {
     showRoots: true,
     theme,
   },
-  viewport: {
-    viewports: INITIAL_VIEWPORTS,
-  },
-});
+};

example/package.json

@@ -7,11 +7,8 @@
     "start": "parcel index.html",
     "build": "parcel build index.html"
   },
-  "dependencies": {},
-  "alias": {
-    "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom/profiling",
-    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+  "dependencies": {
+    "react-compare-slider": "latest"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",