Moved to vite bundler instead of webpack and fixed the imports that p…

…revented the channel from working as expected

.storybook/local-presets.js

@@ -0,0 +1,11 @@
+/**
+ * to load the built addon in this test Storybook
+ */
+
+function managerEntries(entry = []) {
+  return [...entry, require.resolve('../dist/esm/manager.js')];
+}
+
+module.exports = {
+  managerEntries,
+};

.storybook/main.ts

@@ -0,0 +1,23 @@
+export default {
+  stories: ['../stories/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    './local-presets.js',
+  ],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  framework: '@storybook/react-vite',
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      optimizeDeps: {
+        include: ['storybook-dark-mode'],
+      },
+    });
+  },
+};

.vscode/settings.json

@@ -1 +1,3 @@
-{}
+{
+  "cSpell.words": ["formik"]
+}

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
-  setupFilesAfterEnv: ['@testing-library/jest-dom']
+  setupFilesAfterEnv: ['@testing-library/jest-dom'],
 };

manager.js

@@ -0,0 +1 @@
+import './dist/esm/manager';

package.json

@@ -11,6 +11,8 @@
   "module": "dist/esm/index.js",
   "typings": "dist/types/index.d.ts",
   "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "rm -rf build-sb && storybook build",
     "clean": "rm -rf dist",
     "build": "npm run build:esm && npm run build:cjs",
     "build:watch": "concurrently \"npm run build:esm -- --watch\" \"npm run build:cjs -- --watch\"",
@@ -20,19 +22,14 @@
     "deploy": "npm run build-storybook && gh-pages -d build-sb",
     "preversion": "npm run clean && npm run build && npm run deploy",
     "postversion": "git push && git push --tags && npm publish",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "rm -rf build-sb && storybook build -o build-sb",
     "format": "prettier --write  --trailing-comma es5 --single-quote 'src/**/*' 'test/**/*' 'README.md' '/docs/**/*.md'",
     "format:check": "prettier --check --trailing-comma es5 --single-quote 'src/**/*' 'test/**/*' 'README.md' '/docs/**/*.md'",
     "test": "jest"
   },
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "dist/**/*",
-    "register.js"
-  ],
+  "files": ["dist/**/*", "manager.js"],
   "peerDependencies": {
     "formik": "^1.0.0||^2.0.0",
     "react": "*",
@@ -45,9 +42,10 @@
     "@babel/preset-typescript": "^7.26.0",
     "@storybook/addon-essentials": "^8.4.3",
     "@storybook/addon-links": "^8.4.3",
+    "@storybook/builder-vite": "^8.4.3",
     "@storybook/components": "^8.4.3",
     "@storybook/react": "^8.4.3",
-    "@storybook/react-webpack5": "^8.4.3",
+    "@storybook/react-vite": "^8.4.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.14",
@@ -56,8 +54,6 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@types/yup": "^0.32.0",
-    "babel-loader": "^9.2.1",
     "concurrently": "^9.1.0",
     "formik": "^2.4.6",
     "gh-pages": "^6.2.0",
@@ -85,9 +81,11 @@
   "dependencies": {
     "@storybook/core-events": "^8.4.3",
     "@storybook/manager-api": "^8.4.3",
+    "@vitejs/plugin-react": "^4.3.3",
     "jest-environment-jsdom": "^29.7.0",
     "react-json-tree": "^0.19.0",
-    "ts-loader": "^9.5.1"
+    "ts-loader": "^9.5.1",
+    "vite": "^5.4.11"
   },
   "storybook": {
     "icon": "https://pbs.twimg.com/profile_images/1148688127252471810/-UcA36Bw_400x400.png",

src/FormikPanel.tsx

@@ -1,9 +1,10 @@
-import React, { CSSProperties, useState } from 'react';
+import { STORY_RENDERED } from '@storybook/core-events';
+import { useChannel } from '@storybook/manager-api';
 import { FormikState } from 'formik';
+import React, { CSSProperties, memo, useState } from 'react';
 import { JSONTree } from 'react-json-tree';
-import { useChannel } from '@storybook/manager-api';
-import { STORY_RENDERED } from '@storybook/core-events';
 
+import { AddonPanel } from '@storybook/components';
 import { EVT_ON_SUBMIT, EVT_RENDER, EVT_SUBMIT } from './shared';
 
 const trafficLightStyle: CSSProperties = {
@@ -37,8 +38,8 @@ const BooleanState = ({ name, value }: { name: string; value?: boolean }) => (
         value === undefined
           ? {}
           : value === true
-          ? booleanStateStyle.trafficLightTrue
-          : booleanStateStyle.trafficLightFalse
+            ? booleanStateStyle.trafficLightTrue
+            : booleanStateStyle.trafficLightFalse
       }
     >
       {value === undefined && '?'}
@@ -107,33 +108,29 @@ const eightiesTheme = {
 
 type Values = any;
 
-export const FormikPanel = () => {
+export const FormikPanel = memo(({ active }: { active?: boolean }) => {
   const [formikState, setFormikState] = useState<Partial<FormikState<Values>>>(
-    {}
+    {},
   );
   const [submittedValues, setSubmittedValues] = useState<Values[]>([]);
 
-  const emit = useChannel({
-    [STORY_RENDERED]: async id => await setSubmittedValues([]),
-    [EVT_RENDER]: async (state: FormikState<Values>) =>
-      await setFormikState(state),
-    // TODO: Two instances of channel listener, causing duplicate values to be set on state hook
-    [EVT_ON_SUBMIT]: async (values: Values) =>
-      await setSubmittedValues([...submittedValues, values]),
-  });
+  const emit = useChannel(
+    {
+      [STORY_RENDERED]: async id => await setSubmittedValues([]),
+      [EVT_RENDER]: async (state: FormikState<Values>) =>
+        await setFormikState(state),
+      // TODO: Two instances of channel listener, causing duplicate values to be set on state hook
+      [EVT_ON_SUBMIT]: async (values: Values) =>
+        await setSubmittedValues([...submittedValues, values]),
+    },
+    [],
+  );
 
-  const {
-    values,
-    errors,
-    touched,
-    // status,
-    isValidating,
-    isSubmitting,
-    submitCount,
-  } = formikState;
+  const { values, errors, touched, isValidating, isSubmitting, submitCount } =
+    formikState;
 
   return (
-    <>
+    <AddonPanel active={!!active}>
       <style dangerouslySetInnerHTML={{ __html: injectCss }} />
       <div style={style.container}>
         <div style={style.header}>
@@ -168,6 +165,6 @@ export const FormikPanel = () => {
           */}
         </div>
       </div>
-    </>
+    </AddonPanel>
   );
-};
+});

src/index.tsx

@@ -1,7 +1,6 @@
+import { addons, makeDecorator, useArgs } from '@storybook/preview-api';
+import { Form, Formik } from 'formik';
 import React, { ReactNode, useEffect } from 'react';
-import { Formik, Form } from 'formik';
-import { makeDecorator, useArgs } from '@storybook/preview-api';
-import { addons } from '@storybook/manager-api';
 import {
   ConfigWithoutExtra,
   EVT_ON_SUBMIT,
@@ -17,8 +16,8 @@ export const withFormik = makeDecorator({
   skipIfNoParametersOrOptions: false,
   wrapper: (getStory, context, { parameters }) => {
     const channel = addons.getChannel();
-    let submitter: () => void;
-    channel.on(EVT_SUBMIT, () => submitter && submitter());
+    let submitter: () => Promise<void>;
+    channel.on(EVT_SUBMIT, () => submitter?.());
     const formikConfig = parameters as ConfigWithoutExtra | undefined;
     const hasArgs = Object.keys(context.argTypes).length > 0;
     let initialValues =
@@ -43,7 +42,7 @@ export const withFormik = makeDecorator({
         {...formikConfig}
         initialValues={initialValues}
       >
-        {function FormWrap(props) {
+        {props => {
           channel.emit(EVT_RENDER, props);
           if (!submitter) {
             submitter = props.submitForm;

src/register.tsx → src/manager.tsx

@@ -1,19 +1,14 @@
+import { addons, types } from '@storybook/manager-api';
 import React from 'react';
-import { types, addons } from '@storybook/manager-api';
-import { AddonPanel } from '@storybook/components';
 
-import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 import { FormikPanel } from './FormikPanel';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 
 addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Formik',
-    render: ({ active }) => (
-      <AddonPanel active={!!active}>
-        <FormikPanel />
-      </AddonPanel>
-    ),
+    render: ({ active }) => <FormikPanel active={active} />,
     paramKey: PARAM_KEY,
   });
 });

tsconfig.base.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES6",
+    "module": "commonjs",
     "moduleResolution": "node",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  // Add any additional configuration here
+});