Wire up the knobs

examples/server-kitchen-sink/client/storybook.js

@@ -1,32 +1,19 @@
 import camelcase from 'camelcase';
 import { configure, setFetchStoryHtml } from '@storybook/server';
-import stories from '../server/stories';
+
+import stories from './storybook.stories';
 
 const port = process.env.PORT || 8080;
 
 const fetchHtml = async (id, params) => {
   const [component, story] = id.split('--').map(s => camelcase(s));
 
-  const url = `http://localhost:${port}/storybook_preview/${component}/${story}`;
+  const url = new URL(`http://localhost:${port}/storybook_preview/${component}/${story}`);
+  url.search = new URLSearchParams(params).toString();
 
   // eslint-disable-next-line no-undef
   const response = await fetch(url);
   return response.text();
 };
 
-const storyBookStories = Object.keys(stories).map(component => {
-  const storybookDescription = {
-    default: {
-      title: component,
-    },
-  };
-  Object.keys(stories[component]).forEach(storyName => {
-    storybookDescription[storyName] = () => {};
-  });
-
-  return storybookDescription;
-});
-
-setFetchStoryHtml(fetchHtml);
-
-configure(() => storyBookStories, module);
+configure(() => stories, module, { fetchStoryHtml: fetchHtml });

examples/server-kitchen-sink/client/storybook.stories.js

@@ -0,0 +1,33 @@
+import { text, withKnobs } from '@storybook/addon-knobs';
+import { titleCase } from 'title-case';
+
+import stories from '../server/stories';
+
+const storyBookStories = Object.keys(stories).map(component => {
+  const storybookDescription = {
+    default: {
+      title: component,
+      decorators: [withKnobs],
+    },
+  };
+  const componentStories = stories[component];
+  Object.keys(componentStories).forEach(storyName => {
+    const componentStory = componentStories[storyName];
+
+    storybookDescription[storyName] = () => {
+      // Build the list of knobs from the stroy arguments. Assume that all arguments are text.
+      // More sophisticated server backends could have DSLs to provide other types.
+      const knobs = {};
+      Object.keys(componentStory).forEach(argument => {
+        const name = titleCase(argument);
+        const defaultValue = componentStory[argument];
+        knobs[argument] = text(name, defaultValue);
+      });
+      return knobs;
+    };
+  });
+
+  return storybookDescription;
+});
+
+export default storyBookStories;

examples/server-kitchen-sink/package.json

@@ -7,12 +7,14 @@
     "start": "PORT=1337 node server/app.js"
   },
   "devDependencies": {
+    "@storybook/addon-knobs": "5.3.0-rc.3",
     "@storybook/server": "5.3.0-rc.3",
     "camelcase": "^5.3.1",
     "concurrently": "^5.0.0",
     "express": "~4.16.4",
     "morgan": "^1.9.1",
     "nodemon": "^2.0.2",
-    "parcel-bundler": "^1.12.4"
+    "parcel-bundler": "^1.12.4",
+    "title-case": "^3.0.2"
   }
 }

yarn.lock

@@ -30466,6 +30466,13 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
+title-case@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/title-case/-/title-case-3.0.2.tgz#9f926a0a42071366f85470572f312c4b647773ab"
+  integrity sha512-1P5hyjEhJ9Ab0AT8Xbm0z1avwPSgRR6XtFSNCdfo6B7111TTTja+456UZ2ZPkbTbzqBwIpQxp/tazh5UvpJ+fA==
+  dependencies:
+    tslib "^1.10.0"
+
 [email protected]:
   version "0.0.28"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
@@ -30871,7 +30878,7 @@ tsconfig-paths@^3.4.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-[email protected], tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+[email protected], tslib@^1.10.0, tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==