Got "test-components" concept working

code/addons/actions/src/stories/basics.stories.tsx

@@ -1,17 +1,10 @@
-// TODO -- for now react, going to generalise
-import React, { FC } from 'react';
-
 import { action } from '@storybook/addon-actions';
 
-// TODO -- this needs to be a generic component
-const Button: FC<{ onClick: () => void }> = ({ onClick, children }) => (
-  <button type="button" onClick={onClick}>
-    {children}
-  </button>
-);
-
 export default {
-  component: Button,
+  component: 'Button',
+  args: {
+    children: 'Click Me!',
+  },
 };
 
 export const BasicExample = {

code/renderers/react/package.json

@@ -34,6 +34,11 @@
       "require": "./package.json",
       "import": "./package.json",
       "types": "./package.json"
+    },
+    "./test-components": {
+      "require": "./dist/test-components/preview.js",
+      "import": "./dist/test-components/preview.mjs",
+      "types": "./dist/test-components/preview.d.ts"
     }
   },
   "main": "dist/index.js",
@@ -97,7 +102,8 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/config.ts",
+      "./src/test-components/preview.tsx"
     ],
     "platform": "browser"
   },

code/renderers/react/src/test-components/Button.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+export const Button: FC<{ onClick: () => void }> = ({ onClick, children }) => (
+  <button type="button" onClick={onClick}>
+    {children}
+  </button>
+);

code/renderers/react/src/test-components/preview.tsx

@@ -0,0 +1,32 @@
+import React, { ComponentType, ReactElement } from 'react';
+import { ArgsStoryFn } from '@storybook/csf';
+
+import { Button } from './Button';
+
+const Components = { Button };
+
+type ReactFrameworkOrString = {
+  component: ComponentType | keyof typeof Components;
+  storyResult: ReactElement<unknown>;
+};
+
+export const render: ArgsStoryFn<ReactFrameworkOrString> = (args, context) => {
+  const { id, component } = context;
+  if (!component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+
+  let Component;
+  if (typeof component === 'string') {
+    if (!Object.keys(Components).includes(component)) {
+      throw new Error(`Unable to render story ${id}: unknown component name ${component}`);
+    }
+    Component = Components[component];
+  } else {
+    Component = component;
+  }
+
+  return <Component {...(args as any)} />;
+};

scripts/example.ts

@@ -135,9 +135,11 @@ const logger = console;
 export const overrideMainConfig = async ({
   cwd,
   mainOverrides,
+  isNode = false,
 }: {
   cwd: string;
   mainOverrides: Parameters['mainOverrides'];
+  isNode?: boolean;
 }) => {
   logger.info(`📝 Overwriting main.js with the following configuration:`);
   const configDir = path.join(cwd, '.storybook');
@@ -146,8 +148,12 @@ export const overrideMainConfig = async ({
   const mainConfig = await readConfig(mainConfigPath);
 
   Object.keys(mainOverrides).forEach((field) => {
-    // NOTE: using setFieldNode and passing the output of babelParse()
-    mainConfig.setFieldNode([field], mainOverrides[field]);
+    if (isNode) {
+      // NOTE: using setFieldNode and passing the output of babelParse()
+      mainConfig.setFieldNode([field], mainOverrides[field]);
+    } else {
+      mainConfig.setFieldValue([field], mainOverrides[field]);
+    }
   });
 
   await writeConfig(mainConfig);
@@ -255,6 +261,12 @@ async function main() {
     const rendererStoriesDir = path.resolve(codeDir, `./renderers/${renderer}/src/stories`);
     await copyStories(rendererStoriesDir, path.join(storiesDir, renderer), { isTS });
 
+    // TODO: why can I not just use `@storybook/react/test-components`? @ndelangen?
+    const testComponentsMainOverrides = {
+      previewEntries: [`@storybook/${renderer}/dist/test-components/preview.mjs`],
+    };
+    await overrideMainConfig({ cwd, mainOverrides: testComponentsMainOverrides });
+
     // TODO -- sb add <addon> doesn't actually work properly:
     //   - installs in `deps` not `devDeps`
     //   - does a `workspace:^` install (what does that mean?)
@@ -280,11 +292,11 @@ async function main() {
 
       // TODO -- work out exactly where this should happen
       const code = '(c) => ({ ...c, resolve: { ...c.resolve, symlinks: false } })';
-      const mainOverrides = {
+      const linkingMainOverrides = {
         // @ts-ignore (not sure why TS complains here, it does exist)
         webpackFinal: babelParse(code).program.body[0].expression,
       };
-      await overrideMainConfig({ cwd, mainOverrides });
+      await overrideMainConfig({ cwd, mainOverrides: linkingMainOverrides, isNode: true });
 
       await addPackageScripts({
         cwd,