Merge branch 'storybook_server' of https://github.com/jonspalmer/storybook into jonspalmer-storybook_server

app/server/README.md

@@ -0,0 +1,25 @@
+# Storybook for Server
+
+---
+
+Storybook for Server is a UI development environment for your plain HTML snippets rendered by your server backend.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-app
+npx -p @storybook/cli sb init -t server
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.

app/server/bin/build.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+require('../dist/server/build');

app/server/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/server/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@storybook/server",
+  "version": "5.3.0-rc.7",
+  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/server",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "app/html"
+  },
+  "license": "MIT",
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.3.0-rc.7",
+    "@storybook/core": "5.3.0-rc.7",
+    "@storybook/node-logger": "^5.2.8",
+    "@types/webpack-env": "^1.13.9",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "regenerator-runtime": "^0.13.3",
+    "safe-identifier": "^0.3.1",
+    "ts-dedent": "^1.1.0"
+  },
+  "devDependencies": {
+    "fs-extra": "^8.0.1"
+  },
+  "peerDependencies": {
+    "babel-loader": "^7.0.0 || ^8.0.0"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+}

app/server/src/client/index.ts

@@ -0,0 +1,14 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+  raw,
+} from './preview';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}

app/server/src/client/preview/globals.ts

@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'SERVER';

app/server/src/client/preview/index.ts

@@ -0,0 +1,43 @@
+import { start } from '@storybook/core/client';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
+
+import './globals';
+import { renderMain as render, setFetchStoryHtml } from './render';
+import { StoryFnServerReturnType, IStorybookSection, ConfigureOptionsArgs } from './types';
+
+const framework = 'server';
+
+interface ClientApi extends ClientStoryApi<StoryFnServerReturnType> {
+  setAddon(addon: any): void;
+  configure(loader: Loadable, module: NodeModule, options?: ConfigureOptionsArgs): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+}
+
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+const setRenderFecthAndConfigure: ClientApi['configure'] = (loader, module, options) => {
+  if (options && options.fetchStoryHtml) {
+    setFetchStoryHtml(options.fetchStoryHtml);
+  }
+  api.configure(loader, module, framework);
+};
+
+export const configure: ClientApi['configure'] = setRenderFecthAndConfigure;
+export const {
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  setAddon,
+  forceReRender,
+  getStorybook,
+  raw,
+} = api.clientApi;

app/server/src/client/preview/render.ts

@@ -0,0 +1,61 @@
+import { document, fetch, Node } from 'global';
+import dedent from 'ts-dedent';
+import { RenderMainArgs, FetchStoryHtmlType } from './types';
+
+const rootElement = document.getElementById('root');
+
+let fetchStoryHtml: FetchStoryHtmlType = async (url, id, params) => {
+  const fetchUrl = new URL(`${url}/${id}`);
+  fetchUrl.search = new URLSearchParams(params).toString();
+
+  const response = await fetch(fetchUrl);
+  return response.text();
+};
+
+export async function renderMain({
+  storyFn,
+  id,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  forceRender,
+  parameters,
+}: RenderMainArgs) {
+  const storyParams = storyFn();
+
+  const {
+    server: { url, id: storyId, params },
+  } = parameters;
+
+  const fetchId = storyId || id;
+  const fetchParams = { ...params, ...storyParams };
+  const element = await fetchStoryHtml(url, fetchId, fetchParams);
+
+  showMain();
+  if (typeof element === 'string') {
+    rootElement.innerHTML = element;
+  } else if (element instanceof Node) {
+    // Don't re-mount the element if it didn't change and neither did the story
+    if (rootElement.firstChild === element && forceRender === true) {
+      return;
+    }
+
+    rootElement.innerHTML = '';
+    rootElement.appendChild(element);
+  } else {
+    showError({
+      title: `Expecting an HTML snippet or DOM node from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `,
+    });
+  }
+}
+
+export const setFetchStoryHtml: any = (fetchHtml: FetchStoryHtmlType) => {
+  if (fetchHtml !== undefined) {
+    fetchStoryHtml = fetchHtml;
+  }
+};

app/server/src/client/preview/types.ts

@@ -0,0 +1,35 @@
+import { StoryFn } from '@storybook/addons';
+
+export type StoryFnServerReturnType = any;
+
+export type FetchStoryHtmlType = (url: string, id: string, params: any) => Promise<string | Node>;
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface ConfigureOptionsArgs {
+  fetchStoryHtml: FetchStoryHtmlType;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => StoryFn<StoryFnServerReturnType>;
+  id: string;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  forceRender: boolean;
+  parameters: any;
+}

app/server/src/lib/compiler/__testfixtures__/a11y.json

@@ -0,0 +1,15 @@
+{
+  "title": "Addons/a11y",
+  "addons": ["a11y"],
+  "parameters": {
+    "options": { "selectedPanel": "storybook/a11y/panel" }
+  },
+  "stories": [
+    {
+      "name": "Label",
+      "parameters": {
+        "server": { "id": "addons/a11y/label" }
+      }
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/a11y.snapshot

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler a11y.json 1`] = `
+"import { withA11y } from '@storybook/addon-a11y';
+
+export default {
+  title: 'Addons/a11y',
+  decorators: [
+    withA11y
+  ],
+  parameters: {
+    options: {
+      selectedPanel: 'storybook/a11y/panel'
+    }
+  }
+};
+
+export const Label = () => {};
+Label.story = {
+  name: 'Label',
+  parameters: {
+    server: {
+      id: 'addons/a11y/label'
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/actions.json

@@ -0,0 +1,16 @@
+{
+  "title": "Addons/Actions",
+  "addons": ["actions"],
+  "parameters": {
+    "options": { "selectedPanel": "storybook/actions/panel" }
+  },
+  "stories": [
+    {
+      "name": "Multiple actions + config",
+      "parameters": {
+        "server": { "id": "addons/actions/story3" }
+      },
+      "actions": ["click", "contextmenu", { "clearOnStoryChange": false }]
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/actions.snapshot

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler actions.json 1`] = `
+"import { withActions } from '@storybook/addon-actions';
+
+export default {
+  title: 'Addons/Actions',
+  parameters: {
+    options: {
+      selectedPanel: 'storybook/actions/panel'
+    }
+  }
+};
+
+export const Multiple_actions_config = () => {};
+Multiple_actions_config.story = {
+  decorators: [
+    withActions(
+      'click',
+      'contextmenu',
+      {
+        clearOnStoryChange: false
+      }
+    )
+  ],
+  name: 'Multiple actions + config',
+  parameters: {
+    server: {
+      id: 'addons/actions/story3'
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/backgrounds.json

@@ -0,0 +1,17 @@
+{
+  "title": "Addons/Backgrounds",
+  "parameters": {
+    "backgrounds": [
+      { "name": "light", "value": "#eeeeee" },
+      { "name": "dark", "value": "#222222", "default": true }
+    ]
+  },
+  "stories": [
+    {
+      "name": "Story 1",
+      "parameters": {
+        "server": { "id": "addons/backgrounds/story1" }
+      }
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler backgrounds.json 1`] = `
+"
+export default {
+  title: 'Addons/Backgrounds',
+  parameters: {
+    backgrounds: [
+      {
+        name: 'light',
+        value: '#eeeeee'
+      },
+      {
+        name: 'dark',
+        value: '#222222',
+        default: true
+      }
+    ]
+  }
+};
+
+export const Story_1 = () => {};
+Story_1.story = {
+  name: 'Story 1',
+  parameters: {
+    server: {
+      id: 'addons/backgrounds/story1'
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/kitchen_sink.json

@@ -0,0 +1,40 @@
+{
+  "title": "Kitchen Sink",
+  "addons": ["a11y", "knobs", "actions", "links"],
+  "parameters": {
+    "backgrounds": [
+      { "name": "light", "value": "#eeeeee" },
+      { "name": "dark", "value": "#222222", "default": true }
+    ],
+    "options": { "selectedPanel": "storybook/a11y/panel" },
+    "server": { 
+      "params": { "color": "red" }
+    }
+  },
+  "stories": [
+    {
+      "name": "Heading",
+      "parameters": {
+        "notes": "My notes on some bold text",
+        "server": { 
+          "id": "demo/heading",
+          "params": { 
+            "color": "orange"
+          }
+        }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "number", "name": "Age", "value": 44, "param": "age"}
+      ],
+      "actions": ["click", "contextmenu", { "clearOnStoryChange": false }]
+    },
+    {
+      "name": "Button",
+      "parameters": {
+        "notes": "My notes on a button",
+        "server": { "id": "demo/button" }
+      }
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler kitchen_sink.json 1`] = `
+"import { withA11y } from '@storybook/addon-a11y';
+import { withLinks } from '@storybook/addon-links';
+import { array, boolean, color, date, number, object, select, text, withKnobs } from '@storybook/addon-knobs';
+import { withActions } from '@storybook/addon-actions';
+
+export default {
+  title: 'Kitchen Sink',
+  decorators: [
+    withA11y,
+    withLinks,
+    withKnobs
+  ],
+  parameters: {
+    backgrounds: [
+      {
+        name: 'light',
+        value: '#eeeeee'
+      },
+      {
+        name: 'dark',
+        value: '#222222',
+        default: true
+      }
+    ],
+    options: {
+      selectedPanel: 'storybook/a11y/panel'
+    },
+    server: {
+      params: {
+        color: 'red'
+      }
+    }
+  }
+};
+
+export const Heading = () => {
+  return {
+    name: text('Name', 'John Doe'),
+    age: number('Age', 44, {}),
+  };
+};
+Heading.story = {
+  decorators: [
+    withActions(
+      'click',
+      'contextmenu',
+      {
+        clearOnStoryChange: false
+      }
+    )
+  ],
+  name: 'Heading',
+  parameters: {
+    notes: 'My notes on some bold text',
+    server: {
+      id: 'demo/heading',
+      params: {
+        color: 'orange'
+      }
+    }
+  }
+};
+
+export const Button = () => {};
+Button.story = {
+  name: 'Button',
+  parameters: {
+    notes: 'My notes on a button',
+    server: {
+      id: 'demo/button'
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/knobs.json

@@ -0,0 +1,19 @@
+{
+  "title": "Addons/Knobs",
+  "addons": ["knobs"],
+  "parameters": {
+    "options": { "selectedPanel": "storybook/knobs/panel" }
+  },
+  "stories": [
+    {
+      "name": "Simple",
+      "parameters": {
+        "server": { "id": "addons/knobs/simple" }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "number", "name": "Age", "value": 44, "param": "age"}
+      ]
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/knobs.snapshot

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler knobs.json 1`] = `
+"import { array, boolean, color, date, number, object, select, text, withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Addons/Knobs',
+  decorators: [
+    withKnobs
+  ],
+  parameters: {
+    options: {
+      selectedPanel: 'storybook/knobs/panel'
+    }
+  }
+};
+
+export const Simple = () => {
+  return {
+    name: text('Name', 'John Doe'),
+    age: number('Age', 44, {}),
+  };
+};
+Simple.story = {
+  name: 'Simple',
+  parameters: {
+    server: {
+      id: 'addons/knobs/simple'
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/links.json

@@ -0,0 +1,14 @@
+{
+  "title": "Welcome",
+  "addons": ["links"],
+  "stories": [
+    {
+      "name": "Welcome",
+      "parameters": {
+        "server": {
+          "id": "welcome/welcome"
+        }
+      }
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/links.snapshot

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler links.json 1`] = `
+"import { withLinks } from '@storybook/addon-links';
+
+export default {
+  title: 'Welcome',
+  decorators: [
+    withLinks
+  ],
+};
+
+export const Welcome = () => {};
+Welcome.story = {
+  name: 'Welcome',
+  parameters: {
+    server: {
+      id: 'welcome/welcome'
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/multiple_stories.json

@@ -0,0 +1,23 @@
+{
+  "title": "Demo",
+  "stories": [
+    {
+      "name": "Heading",
+      "parameters": {
+        "server": { "id": "demo/heading" }
+      }
+    },
+    {
+      "name": "Headings",
+      "parameters": {
+        "server": { "id": "demo/headings" }
+      }
+    },
+    {
+      "name": "Button",
+      "parameters": {
+        "server": { "id": "demo/button" }
+      }
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler multiple_stories.json 1`] = `
+"
+export default {
+  title: 'Demo',
+};
+
+export const Heading = () => {};
+Heading.story = {
+  name: 'Heading',
+  parameters: {
+    server: {
+      id: 'demo/heading'
+    }
+  }
+};
+
+export const Headings = () => {};
+Headings.story = {
+  name: 'Headings',
+  parameters: {
+    server: {
+      id: 'demo/headings'
+    }
+  }
+};
+
+export const Button = () => {};
+Button.story = {
+  name: 'Button',
+  parameters: {
+    server: {
+      id: 'demo/button'
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/notes.json

@@ -0,0 +1,12 @@
+{
+  "title": "Addons/Notes",
+  "stories": [
+    {
+      "name": "Simple note",
+      "parameters": {
+        "notes": "My notes on some bold text",
+        "server": { "id": "addons/notes/story1" }
+      }
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/notes.snapshot

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler notes.json 1`] = `
+"
+export default {
+  title: 'Addons/Notes',
+};
+
+export const Simple_note = () => {};
+Simple_note.story = {
+  name: 'Simple note',
+  parameters: {
+    notes: 'My notes on some bold text',
+    server: {
+      id: 'addons/notes/story1'
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/params.json

@@ -0,0 +1,19 @@
+{
+  "title": "Params",
+  "parameters": {
+    "server": {
+      "params": { "color": "red" }
+    }
+  },
+  "stories": [
+    {
+      "name": "Story",
+      "parameters": {
+        "server": {
+          "id": "params/story",
+          "params": { "message": "Hello World" }
+        }
+      }
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/params.snapshot

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler params.json 1`] = `
+"
+export default {
+  title: 'Params',
+  parameters: {
+    server: {
+      params: {
+        color: 'red'
+      }
+    }
+  }
+};
+
+export const Story = () => {};
+Story.story = {
+  name: 'Story',
+  parameters: {
+    server: {
+      id: 'params/story',
+      params: {
+        message: 'Hello World'
+      }
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/__testfixtures__/params_override.json

@@ -0,0 +1,19 @@
+{
+  "title": "Params",
+  "parameters": {
+    "server": {
+      "params": { "color": "red" }
+    }
+  },
+  "stories": [
+    {
+      "name": "Override",
+      "parameters": {
+        "server": {
+          "id": "params/override",
+          "params": { "message": "Hello World", "color": "green" }
+        }
+      }
+    }
+  ]
+}

app/server/src/lib/compiler/__testfixtures__/params_override.snapshot

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler params_override.json 1`] = `
+"
+export default {
+  title: 'Params',
+  parameters: {
+    server: {
+      params: {
+        color: 'red'
+      }
+    }
+  }
+};
+
+export const Override = () => {};
+Override.story = {
+  name: 'Override',
+  parameters: {
+    server: {
+      id: 'params/override',
+      params: {
+        message: 'Hello World',
+        color: 'green'
+      }
+    }
+  }
+};
+"
+`;

app/server/src/lib/compiler/decorators/actions.ts

@@ -0,0 +1,36 @@
+import { StorybookSection, StorybookStory } from '../types';
+import { importMeta } from './utils';
+import { stringifyObject } from '../stringifier';
+
+type Action = string | any;
+
+function stringifyActionsDecorator(actions: Action[], importName: string): string[] {
+  if (!actions || actions.length === 0) return [];
+
+  const actionArgs = stringifyObject(actions, 2, true);
+  return [`${importName}(\n      ${actionArgs}\n    )`];
+}
+
+function actionsStoryDecorator(story: StorybookStory, importName: string): StorybookStory {
+  const { name, storyFn, decorators = [], actions, ...options } = story;
+
+  return {
+    name,
+    storyFn,
+    decorators: [...decorators, ...stringifyActionsDecorator(actions, importName)],
+    ...options,
+  };
+}
+
+export function actionsDecorator(section: StorybookSection): StorybookSection {
+  const { title, imports, decorators, stories, ...options } = section;
+  const { importName, moduleName } = importMeta('actions');
+
+  return {
+    title,
+    imports: { ...imports, ...{ [moduleName]: [importName] } },
+    decorators,
+    stories: stories.map(story => actionsStoryDecorator(story, importName)),
+    ...options,
+  };
+}

app/server/src/lib/compiler/decorators/index.ts

@@ -0,0 +1,23 @@
+import { StorybookSection, Decorator } from '../types';
+import { decorateSimpleAddon } from './utils';
+import { knobsDecorator } from './knobs';
+import { actionsDecorator } from './actions';
+
+function createSimpleDecorator(addon: string) {
+  return (section: StorybookSection): StorybookSection => decorateSimpleAddon(section, addon);
+}
+
+const allDecorators: Record<string, Decorator> = {
+  a11y: createSimpleDecorator('a11y'),
+  links: createSimpleDecorator('links'),
+  knobs: knobsDecorator,
+  actions: actionsDecorator,
+};
+
+export function decorateSection(section: StorybookSection, addons: string[]): StorybookSection {
+  const decorators = Object.keys(allDecorators)
+    .filter(addon => addons.includes(addon))
+    .map(addon => allDecorators[addon]);
+
+  return decorators.reduce((sec, decorator) => decorator(sec), section);
+}

app/server/src/lib/compiler/decorators/knobs.ts

@@ -0,0 +1,93 @@
+import dedent from 'ts-dedent';
+import { StorybookSection, StorybookStory } from '../types';
+import { decorateSimpleAddon, importMeta } from './utils';
+import { stringifyObject } from '../stringifier';
+
+type KnobType = 'text' | 'number' | 'color' | 'array' | 'boolean' | 'object' | 'date' | 'select';
+
+interface StoryKnob {
+  param: string;
+  type: KnobType;
+  name: string;
+  value: any;
+  [x: string]: any;
+}
+
+function stringifyKnob(knob: StoryKnob) {
+  const { param, type, name, value, ...opts } = knob;
+  const knobParam = param || name; // Todo: can we do away with this?
+  const level = 2;
+  const stringifiedValue = stringifyObject(value, level);
+  // TODO: Add group
+  const knobFunction = (t => {
+    switch (t) {
+      case 'text':
+        return `text('${name}', ${stringifiedValue})`;
+      case 'number':
+        return `number('${name}', ${stringifiedValue}, ${stringifyObject(opts, level)})`;
+      case 'color':
+        return `color('${name}', ${stringifiedValue})`;
+      case 'array':
+        return `array('${name}', ${stringifiedValue}).join(',')`;
+      case 'boolean':
+        return `boolean('${name}', ${stringifiedValue})`;
+      case 'object':
+        return `object('${name}', ${stringifiedValue})`;
+      case 'date':
+        return `date('${name}', new Date(${stringifiedValue}))`;
+      case 'select':
+        return `select('${name}', ${stringifyObject(opts.options, level)}, ${stringifiedValue})`;
+      default:
+        return '';
+    }
+  })(type);
+
+  return `${knobParam}: ${knobFunction}`;
+}
+
+function stringifyStoryFunction(knobs: StoryKnob[], storyFn: string) {
+  if (!knobs || knobs.length === 0) return storyFn;
+
+  return dedent`
+    () => {
+      return {
+        ${knobs.map((knob: any) => `${stringifyKnob(knob)},`).join('\n    ')}
+      };
+    }
+  `;
+}
+
+function knobsStoryDecorator(story: StorybookStory): StorybookStory {
+  const { name, storyFn, knobs, ...options } = story;
+
+  return {
+    name,
+    storyFn: stringifyStoryFunction(knobs, storyFn),
+    ...options,
+  };
+}
+
+export function knobsDecorator(section: StorybookSection): StorybookSection {
+  const { title, imports, decorators, stories, ...options } = decorateSimpleAddon(section, 'knobs');
+  const { importName, moduleName } = importMeta('knobs');
+
+  const knobImports = [
+    importName,
+    'array',
+    'boolean',
+    'color',
+    'date',
+    'text',
+    'number',
+    'object',
+    'select',
+  ];
+
+  return {
+    title,
+    imports: { ...imports, ...{ [moduleName]: knobImports } },
+    decorators,
+    stories: stories.map(story => knobsStoryDecorator(story)),
+    ...options,
+  };
+}

app/server/src/lib/compiler/decorators/utils.ts

@@ -0,0 +1,21 @@
+import { StorybookSection } from '../types';
+
+export function importMeta(addon: string) {
+  return {
+    importName: `with${addon.charAt(0).toUpperCase() + addon.slice(1)}`,
+    moduleName: `@storybook/addon-${addon}`,
+  };
+}
+
+export function decorateSimpleAddon(section: StorybookSection, addon: string) {
+  const { title, imports, decorators, stories, ...options } = section;
+  const { importName, moduleName } = importMeta(addon);
+
+  return {
+    title,
+    imports: { ...imports, ...{ [moduleName]: [importName] } },
+    decorators: [...decorators, importName],
+    stories,
+    ...options,
+  };
+}

app/server/src/lib/compiler/index.ts

@@ -0,0 +1,38 @@
+import {
+  CompileCsfModuleArgs,
+  CompileStorybookSectionArgs,
+  CompileStorybookStoryArgs,
+  StorybookSection,
+  StorybookStory,
+} from './types';
+
+import { stringifySection } from './stringifier';
+import { decorateSection } from './decorators';
+
+function createStory(storyArgs: CompileStorybookStoryArgs): StorybookStory {
+  const { name, ...options } = storyArgs;
+
+  return {
+    name,
+    storyFn: '() => {}',
+    ...options,
+  };
+}
+
+function createSection(args: CompileStorybookSectionArgs): StorybookSection {
+  const { title, stories, ...options } = args;
+  return {
+    imports: {},
+    decorators: [],
+    title,
+    stories: stories.map(storyArgs => createStory(storyArgs)),
+    ...options,
+  };
+}
+
+export function compileCsfModule(args: CompileCsfModuleArgs): string {
+  const { addons = [], ...compileSectionArgs } = args;
+  const storybookSection = createSection(compileSectionArgs);
+  const decoratedSection = decorateSection(storybookSection, addons);
+  return stringifySection(decoratedSection);
+}

app/server/src/lib/compiler/json-to-csf-compiler.test.ts

@@ -0,0 +1,24 @@
+import 'jest-specific-snapshot';
+import path from 'path';
+import fs from 'fs-extra';
+import { compileCsfModule } from '.';
+
+const inputRegExp = /\.json$/;
+
+async function generate(filePath: string) {
+  const content = await fs.readFile(filePath, 'utf8');
+  return compileCsfModule(JSON.parse(content));
+}
+
+describe('json-to-csf-compiler', () => {
+  const transformFixturesDir = path.join(__dirname, '__testfixtures__');
+  fs.readdirSync(transformFixturesDir)
+    .filter((fileName: string) => inputRegExp.test(fileName))
+    .forEach((fixtureFile: string) => {
+      it(fixtureFile, async () => {
+        const inputPath = path.join(transformFixturesDir, fixtureFile);
+        const code = await generate(inputPath);
+        expect(code).toMatchSpecificSnapshot(inputPath.replace(inputRegExp, '.snapshot'));
+      });
+    });
+});

app/server/src/lib/compiler/stringifier.ts

@@ -0,0 +1,85 @@
+import dedent from 'ts-dedent';
+import { StorybookStory, StorybookSection } from './types';
+
+const { identifier } = require('safe-identifier');
+
+export function stringifyObject(object: any, level = 0, excludeOuterParams = false): string {
+  if (typeof object === 'string') {
+    return `'${object}'`;
+  }
+  const indent = '  '.repeat(level);
+  if (Array.isArray(object)) {
+    const arrayStrings: string[] = object.map((item: any) => stringifyObject(item, level + 1));
+    const arrayString = arrayStrings.join(`,\n${indent}  `);
+    if (excludeOuterParams) return arrayString;
+    return `[\n${indent}  ${arrayString}\n${indent}]`;
+  }
+  if (typeof object === 'object') {
+    let objectString = '';
+    if (Object.keys(object).length > 0) {
+      const objectStrings: string[] = Object.keys(object).map(key => {
+        const value: string = stringifyObject(object[key], level + 1);
+        return `\n${indent}  ${key}: ${value}`;
+      });
+      objectString = objectStrings.join(',');
+    }
+    if (excludeOuterParams) return objectString;
+    if (objectString.length === 0) return '{}';
+    return `{${objectString}\n${indent}}`;
+  }
+
+  return object;
+}
+
+export function stringifyImports(imports: Record<string, string[]>): string {
+  if (Object.keys(imports).length === 0) return '';
+  return Object.entries(imports)
+    .map(([module, names]) => `import { ${names.sort().join(', ')} } from '${module}';\n`)
+    .join('');
+}
+
+export function stringifyDecorators(decorators: string[]): string {
+  return decorators && decorators.length > 0
+    ? `\n  decorators: [\n    ${decorators.join(',\n    ')}\n  ],`
+    : '';
+}
+
+export function stringifyDefault(section: StorybookSection): string {
+  const { title, imports, decorators, stories, ...options } = section;
+
+  const decoratorsString = stringifyDecorators(decorators);
+
+  const optionsString = stringifyObject(options, 0, true);
+
+  return dedent`
+  export default {
+    title: '${title}',${decoratorsString}${optionsString}
+  };
+  
+  `;
+}
+
+export function stringifyStory(story: StorybookStory): string {
+  const { name, storyFn, decorators, ...options } = story;
+  const storyId = identifier(name);
+
+  const decoratorsString = stringifyDecorators(decorators);
+  const optionsString = stringifyObject({ name, ...options }, 0, true);
+
+  let storyString = '';
+  if (decoratorsString.length > 0 || optionsString.length > 0) {
+    storyString = `${storyId}.story = {${decoratorsString}${optionsString}\n};\n`;
+  }
+  return `export const ${storyId} = ${storyFn};\n${storyString}`;
+}
+
+export function stringifySection(section: StorybookSection): string {
+  const sectionString = [
+    stringifyImports(section.imports),
+    stringifyDefault(section),
+    ...section.stories.map(story => stringifyStory(story)),
+  ].join('\n');
+
+  // console.log('sectionString:\n', sectionString);
+  return sectionString;
+}

app/server/src/lib/compiler/types.ts

@@ -0,0 +1,31 @@
+export interface CompileStorybookStoryArgs {
+  name: string;
+  [x: string]: any;
+}
+
+export interface CompileStorybookSectionArgs {
+  title: string;
+  stories: CompileStorybookStoryArgs[];
+  [x: string]: any;
+}
+
+export interface CompileCsfModuleArgs extends CompileStorybookSectionArgs {
+  addons?: string[];
+}
+
+export interface StorybookStory {
+  name: string;
+  storyFn: string;
+  decorators?: string[];
+  [x: string]: any;
+}
+
+export interface StorybookSection {
+  imports: Record<string, string[]>;
+  decorators?: string[];
+  title: string;
+  stories: StorybookStory[];
+  [x: string]: any;
+}
+
+export type Decorator = (section: StorybookSection) => StorybookSection;

app/server/src/server/build.ts

@@ -0,0 +1,4 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+
+buildStatic(options);

app/server/src/server/framework-preset-server.ts

@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Configuration } from 'webpack';
+import path from 'path';
+
+export function webpack(config: Configuration) {
+  return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          type: 'javascript/auto',
+          test: /\.stories\.json$/,
+          use: [
+            {
+              loader: path.resolve(__dirname, './loader.js'),
+            },
+          ],
+        },
+      ],
+    },
+  };
+}

app/server/src/server/index.ts

@@ -0,0 +1,4 @@
+import { buildDev } from '@storybook/core/server';
+import options from './options';
+
+buildDev(options);

app/server/src/server/loader.ts

@@ -0,0 +1,5 @@
+import { compileCsfModule } from '../lib/compiler';
+
+export default (content: string) => {
+  return compileCsfModule(JSON.parse(content));
+};

app/server/src/server/options.ts

@@ -0,0 +1,8 @@
+// tslint:disable-next-line: no-var-requires
+const packageJson = require('../../package.json');
+
+export default {
+  packageJson,
+  framework: 'server',
+  frameworkPresets: [require.resolve('./framework-preset-server.js')],
+};

app/server/src/typings.d.ts

@@ -0,0 +1,6 @@
+declare module '@storybook/core/*';
+declare module 'global';
+declare module 'fs-extra';
+
+// will be provided by the webpack define plugin
+declare var NODE_ENV: string | undefined;

app/server/standalone.js

@@ -0,0 +1,8 @@
+const build = require('@storybook/core/standalone');
+const frameworkOptions = require('./dist/server/options').default;
+
+async function buildStandalone(options) {
+  return build(options, frameworkOptions);
+}
+
+module.exports = buildStandalone;

app/server/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*"]
+}

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

@@ -0,0 +1,13 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.json'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-knobs',
+    '@storybook/addon-links',
+    '@storybook/addon-notes',
+    '@storybook/addon-options',
+  ],
+};

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

@@ -0,0 +1,25 @@
+import { addParameters, addDecorator } from '@storybook/server';
+import { withA11y } from '@storybook/addon-a11y';
+
+addDecorator(withA11y);
+
+const port = process.env.SERVER_PORT || 1337;
+
+addParameters({
+  a11y: {
+    config: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
+  options: {
+    showRoots: true,
+  },
+  docs: {
+    iframeHeight: '200px',
+  },
+  server: {
+    url: `http://localhost:${port}/storybook_preview`,
+  },
+});

examples/server-kitchen-sink/README.md

@@ -0,0 +1,9 @@
+# Server Kitchen Sink
+
+This is a dmmo app to test a standalone server using integration with Storybook using `@storybook/server`.
+
+Run `yarn install` to sync Storybook module with the source.
+
+Run `yarn start` to start. 
+
+This starts an ExpressJS server on port `1337` and Storybook on port `9006`.

examples/server-kitchen-sink/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "server-kitchen-sink",
+  "version": "5.3.0-rc.7",
+  "private": true,
+  "description": "",
+  "keywords": [],
+  "license": "MIT",
+  "author": "",
+  "main": "index.js",
+  "scripts": {
+    "build-storybook": "build-storybook",
+    "server": "PORT=1337 nodemon server.js",
+    "start": "concurrently \"yarn server\" \"yarn storybook\"",
+    "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "5.3.0-rc.7",
+    "@storybook/addon-actions": "5.3.0-rc.7",
+    "@storybook/addon-backgrounds": "5.3.0-rc.7",
+    "@storybook/addon-centered": "5.3.0-rc.7",
+    "@storybook/addon-knobs": "5.3.0-rc.7",
+    "@storybook/addon-links": "5.3.0-rc.7",
+    "@storybook/addon-notes": "5.3.0-rc.7",
+    "@storybook/node-logger": "5.3.0-rc.7",
+    "@storybook/server": "5.3.0-rc.7",
+    "concurrently": "^5.0.2",
+    "cors": "^2.8.5",
+    "express": "~4.16.4",
+    "morgan": "^1.9.1",
+    "nodemon": "^2.0.2",
+    "pug": "^2.0.4",
+    "safe-identifier": "^0.3.1"
+  }
+}

examples/server-kitchen-sink/server.js

@@ -0,0 +1,21 @@
+const express = require('express');
+const cors = require('cors');
+const morgan = require('morgan');
+const path = require('path');
+const { logger } = require('@storybook/node-logger');
+
+const port = process.env.PORT || 8080;
+
+const app = express();
+app.use(cors());
+app.use(morgan('dev'));
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+
+app.get('/', (req, res) => res.send('Hello World!'));
+
+app.get(/storybook_preview\/(.*)/, (req, res) => {
+  res.render(req.params[0], req.query);
+});
+
+app.listen(port, () => logger.info(`Server listening on port ${port}!`));

examples/server-kitchen-sink/stories/addon-a11y.stories.json

@@ -0,0 +1,34 @@
+{
+  "title": "Addons/a11y",
+  "addons": ["a11y"],
+  "parameters": {
+    "options": { "selectedPanel": "storybook/a11y/panel" }
+  },
+  "stories": [
+    {
+      "name": "Default",
+      "parameters": {
+        "server": { "id": "addons/a11y/default" }
+      }
+    },
+    {
+      "name": "Label",
+      "parameters": {
+        "server": { "id": "addons/a11y/label" }
+      }
+    },
+    {
+      "name": "Disabled",
+      "parameters": {
+        "server": { "id": "addons/a11y/disabled" }
+      }
+    },
+    {
+      "id": "Contrast",
+      "name": "Invalid contrast",
+      "parameters": {
+        "server": { "id": "addons/a11y/contrast" }
+      }
+    }
+  ]
+}

examples/server-kitchen-sink/stories/addon-actions.stories.json

@@ -0,0 +1,44 @@
+ {
+  "title": "Addons/Actions",
+  "addons": ["actions"],
+  "parameters": {
+    "options": { "selectedPanel": "storybook/actions/panel" }
+  },
+  "stories": [
+    {
+      "name": "Hello World",
+      "parameters": {
+        "server": { "id": "addons/actions/story1" }
+      },
+      "actions": ["click"]
+    },
+    {
+      "name": "Multiple actions",
+      "parameters": {
+        "server": { "id": "addons/actions/story2" }
+      },
+      "actions": ["click", "contextmenu"]
+    },
+    {
+      "name": "Multiple actions + config",
+      "parameters": {
+        "server": { "id": "addons/actions/story3" }
+      },
+      "actions": ["click", "contextmenu", { "clearOnStoryChange": false }]
+    },
+    {
+      "name": "Multiple actions, object",
+      "parameters": {
+        "server": { "id": "addons/actions/story4" }
+      },
+      "actions": [{ "click": "clicked", "contextmenu": "right clicked" }]
+    },
+    {
+      "name": "Multiple actions, object + config",
+      "parameters": {
+        "server": { "id": "addons/actions/story6" }
+      },
+      "actions": [{ "click": "clicked", "contextmenu": "right clicked" }, { "clearOnStoryChange": false }]
+    }
+  ]
+}

examples/server-kitchen-sink/stories/addon-backgrounds.stories.json

@@ -0,0 +1,23 @@
+{
+  "title": "Addons/Backgrounds",
+  "parameters": {
+    "backgrounds": [
+      { "name": "light", "value": "#eeeeee" },
+      { "name": "dark", "value": "#222222", "default": true }
+    ]
+  },
+  "stories": [
+    {
+      "name": "Story 1",
+      "parameters": {
+        "server": { "id": "addons/backgrounds/story1" }
+      }
+    },
+    {
+      "name": "Story 2",
+      "parameters": {
+        "server": { "id": "addons/backgrounds/story2" }
+      }
+    }
+  ]
+}

examples/server-kitchen-sink/stories/addon-knobs.stories.json

@@ -0,0 +1,64 @@
+{
+  "title": "Addons/Knobs",
+  "addons": ["knobs"],
+  "parameters": {
+    "options": { "selectedPanel": "storybook/knobs/panel" }
+  },
+  "stories": [
+    {
+      "name": "Simple",
+      "parameters": {
+        "server": { "id": "addons/knobs/simple" }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "number", "name": "Age", "value": 44, "param": "age"}
+      ]
+    },
+    {
+      "name": "CSS transitions",
+      "parameters": {
+        "server": { "id": "addons/knobs/css" }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "color", "name": "Text Color", "value": "orangered", "param": "textColor"}
+      ]
+    },
+    {
+      "name": "All knobs",
+      "parameters": {
+        "server": { "id": "addons/knobs/all" }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "Jane", "param": "name"},
+        { 
+          "type": "number",
+          "name": "Stock", 
+          "value": 20, 
+          "param": "stock",
+          "range": true,
+          "min": 0,
+          "max": 30,
+          "step": 5
+        },
+        { 
+          "type": "select",
+          "name": "Fruit",
+          "value": "apples",
+          "param": "fruit",
+          "options": {
+            "Apple": "apples",
+            "Banana": "bananas",
+            "Cherry": "cherries"
+          }
+        },
+        { "type": "number", "name": "Price", "value": 2.25, "param": "price"},
+        { "type": "color", "name": "Border", "value": "deeppink", "param": "colour"},
+        { "type": "date", "name": "Today", "value": "Jan 20 2017 GMT+0", "param": "today"},
+        { "type": "array", "name": "Items", "value": ["Laptop", "Book", "Whiskey"], "param": "items"},
+        { "type": "boolean", "name": "Nice", "value": true, "param": "nice"}
+      ]
+    }
+  ]
+}

examples/server-kitchen-sink/stories/addon-notes.stories.json

@@ -0,0 +1,12 @@
+{
+  "title": "Addons/Notes",
+  "stories": [
+    {
+      "name": "Simple note",
+      "parameters": {
+        "notes": "My notes on some bold text",
+        "server": { "id": "addons/notes/story1" }
+      }
+    }
+  ]
+}

examples/server-kitchen-sink/stories/demo.stories.json

@@ -0,0 +1,23 @@
+{
+  "title": "Demo",
+  "stories": [
+    {
+      "name": "Heading",
+      "parameters": {
+        "server": { "id": "demo/heading" }
+      }
+    },
+    {
+      "name": "Headings",
+      "parameters": {
+        "server": { "id": "demo/headings" }
+      }
+    },
+    {
+      "name": "Button",
+      "parameters": {
+        "server": { "id": "demo/button" }
+      }
+    }
+  ]
+}

examples/server-kitchen-sink/stories/kitchen_sink.stories.json

@@ -0,0 +1,33 @@
+{
+  "title": "Kitchen Sink",
+  "addons": ["a11y", "knobs", "actions", "links"],
+  "parameters": {
+    "backgrounds": [
+      { "name": "light", "value": "#eeeeee" },
+      { "name": "dark", "value": "#222222", "default": true }
+    ],
+    "options": { "selectedPanel": "storybook/a11y/panel" },
+    "server": { 
+      "params": { "name": "Jane Doe" }
+    }
+  },
+  "stories": [
+    {
+      "name": "All the things",
+      "parameters": {
+        "notes": "My notes on some person",
+        "server": { 
+          "id": "addons/knobs/simple",
+          "params": { 
+            "name": "Jim Doe"
+          }
+        }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "number", "name": "Age", "value": 44, "param": "age"}
+      ],
+      "actions": ["click", "contextmenu", { "clearOnStoryChange": false }]
+    }
+  ]
+}

examples/server-kitchen-sink/stories/params.stories.json

@@ -0,0 +1,28 @@
+{
+  "title": "Params",
+  "parameters": {
+    "server": {
+      "params": { "color": "red" }
+    }
+  },
+  "stories": [
+    {
+      "name": "Story",
+      "parameters": {
+        "server": {
+          "id": "params/story",
+          "params": { "message": "Hello World" }
+        }
+      }
+    },
+    {
+      "name": "Override",
+      "parameters": {
+        "server": {
+          "id": "params/override",
+          "params": { "message": "Hello World", "color": "green" }
+        }
+      }
+    }
+  ]
+}

examples/server-kitchen-sink/stories/welcome.stories.json

@@ -0,0 +1,14 @@
+{
+  "title": "Welcome",
+  "addons": ["links"],
+  "stories": [
+    {
+      "name": "Welcome",
+      "parameters": {
+        "server": {
+          "id": "welcome/welcome"
+        }
+      }
+    }
+  ]
+}

examples/server-kitchen-sink/views/addons/a11y/contrast.pug

@@ -0,0 +1 @@
+button(style='color: black; background-color: brown;') Testing the a11y addon

examples/server-kitchen-sink/views/addons/a11y/default.pug

@@ -0,0 +1 @@
+button

examples/server-kitchen-sink/views/addons/a11y/disabled.pug

@@ -0,0 +1 @@
+button(disabled) Testing the a11y addon

examples/server-kitchen-sink/views/addons/a11y/label.pug

@@ -0,0 +1 @@
+button Testing the a11y addon

examples/server-kitchen-sink/views/addons/actions/button.pug

@@ -0,0 +1 @@
+button(type="button") Hello World

examples/server-kitchen-sink/views/addons/actions/story1.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/views/addons/actions/story2.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/views/addons/actions/story3.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/views/addons/actions/story4.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/views/addons/actions/story5.pug

@@ -0,0 +1,3 @@
+div
+  | Clicks on this button will be logged:
+  button(class="btn" type="button") Button

examples/server-kitchen-sink/views/addons/actions/story6.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/views/addons/actions/story7.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/views/addons/actions/story8.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/views/addons/backgrounds/story1.pug

@@ -0,0 +1 @@
+span(style="color: white") You should be able to switch backgrounds for this story

examples/server-kitchen-sink/views/addons/backgrounds/story2.pug

@@ -0,0 +1 @@
+span(style="color: white") This one too!

examples/server-kitchen-sink/views/addons/knobs/all.pug

@@ -0,0 +1,18 @@
+- nice = (nice === 'true')
+- stock = parseInt(stock)
+- stockMessage = stock > 0 ? `I have a stock of ${stock} ${fruit}, costing $${price} each.` : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+- salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+- dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+- style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+- today = new Date(parseInt(today, 10));
+- items = items.split(',');
+
+div(style=`${style}`)
+  h1 My name is #{name},
+  h3 today is #{today.toLocaleDateString('en-US', dateOptions)}
+  p !{stockMessage}
+  p Also, I have:
+  ul 
+    each item in items
+      li= item
+  p #{salutation}

examples/server-kitchen-sink/views/addons/knobs/css.pug

@@ -0,0 +1 @@
+p(style=`transition: color 0.5s ease-out; color: ${textColor}`)= name

examples/server-kitchen-sink/views/addons/knobs/simple.pug

@@ -0,0 +1,2 @@
+div.
+  I am #{name} and I'm #{age} years old.

examples/server-kitchen-sink/views/addons/knobs/xss_safety.pug

@@ -0,0 +1 @@
+ !{content}

examples/server-kitchen-sink/views/addons/notes/story1.pug

@@ -0,0 +1,2 @@
+p
+  strong This is a fragment of HTML

examples/server-kitchen-sink/views/demo/button.pug

@@ -0,0 +1 @@
+button Hello Button

examples/server-kitchen-sink/views/demo/heading.pug

@@ -0,0 +1 @@
+h1 Hello World

examples/server-kitchen-sink/views/demo/headings.pug

@@ -0,0 +1,4 @@
+h1 Hellow World
+h2 Hellow World
+h3 Hellow World
+h4 Hellow World

examples/server-kitchen-sink/views/params/override.pug

@@ -0,0 +1 @@
+include params.pug

examples/server-kitchen-sink/views/params/params.pug

@@ -0,0 +1 @@
+h1(style=`color: ${color}`)= message 

examples/server-kitchen-sink/views/params/story.pug

@@ -0,0 +1 @@
+include params.pug

examples/server-kitchen-sink/views/params/story_fn_override.pug

@@ -0,0 +1 @@
+include params.pug

examples/server-kitchen-sink/views/welcome/welcome.pug

@@ -0,0 +1,36 @@
+.main
+  h1 Welcome to Storybook for Server
+  p This is a UI component dev environment for your plain HTML snippets.
+  p.
+    We've added some basic stories inside the #[code.code stories] directory.
+    #[br]
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    #[br]
+    (Basically a story is like a visual test case.)
+  p.
+    See these sample #[a.link(href='#' data-sb-kind='Demo' data-sb-story='Headings') stories]
+  p.
+    Just like that, you can add your own snippets as stories.
+    #[br]
+    You can also edit those snippets and see changes right away.
+    #[br]
+  p.
+    Usually we create stories with smaller UI components in the app.
+    #[br]
+    Have a look at the #[a.link(href='https://storybook.js.org/basics/writing-stories' target='_blank') Writing Stories] section in our documentation.
+style.
+  .main {
+    padding: 15px;
+    line-height: 1.4;
+    font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+    background-color: #ffffff;
+  }
+  .code {
+    font-size: 15px;
+    font-weight: 600;
+    padding: 2px 5px;
+    border: 1px solid #eae9e9;
+    border-radius: 4px;
+    background-color: #f3f2f2;
+    color: #3a3a3a;
+  }