diff --git a/examples/server-kitchen-sink/client/storybook.js b/examples/server-kitchen-sink/client/storybook.js index 0d890c8ccbcc..33483354211e 100644 --- a/examples/server-kitchen-sink/client/storybook.js +++ b/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 }); diff --git a/examples/server-kitchen-sink/client/storybook.stories.js b/examples/server-kitchen-sink/client/storybook.stories.js new file mode 100644 index 000000000000..880af3e8b056 --- /dev/null +++ b/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; diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json index a3e295cad397..7bda7201065d 100644 --- a/examples/server-kitchen-sink/package.json +++ b/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" } } diff --git a/yarn.lock b/yarn.lock index 18f08595001d..112ad7929bee 100644 --- a/yarn.lock +++ b/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" + tmp@0.0.28: 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" -tslib@1.10.0, tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: +tslib@1.10.0, 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==