Merge pull request #11703 from jonspalmer/server_object_controls

Server: Serialize Object controls as JSON over the wire

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

@@ -3,7 +3,7 @@ import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
 import { renderMain as render } from './render';
-import { StoryFnServerReturnType, IStorybookSection, ConfigureOptionsArgs } from './types';
+import { StoryFnServerReturnType, IStorybookSection } from './types';
 
 const framework = 'server';
 

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

@@ -20,17 +20,22 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => {
     const argType = argTypes[key];
     const { control } = argType;
     const controlType = control && control.type.toLowerCase();
+    const argValue = storyArgs[key];
     switch (controlType) {
       case 'date':
         // For cross framework & language support we pick a consistent representation of Dates as strings
-        storyArgs[key] = new Date(storyArgs[key]).toISOString();
+        storyArgs[key] = new Date(argValue).toISOString();
         break;
       case 'array': {
         // use the supplied separator when seriazlizing an array as a string
         const separator = control.separator || ',';
-        storyArgs[key] = storyArgs[key].join(separator);
+        storyArgs[key] = argValue.join(separator);
         break;
       }
+      case 'object':
+        // send objects as JSON strings
+        storyArgs[key] = JSON.stringify(argValue);
+        break;
       default:
     }
   });

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

@@ -18,7 +18,3 @@ export interface ShowErrorArgs {
   title: string;
   description: string;
 }
-
-export interface ConfigureOptionsArgs {
-  fetchStoryHtml: FetchStoryHtmlType;
-}

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

@@ -27,5 +27,3 @@ export interface StorybookSection {
   stories: StorybookStory[];
   [x: string]: any;
 }
-
-export type Decorator = (section: StorybookSection) => StorybookSection;

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

@@ -34,7 +34,8 @@
         "colour": "deeppink",
         "today": "Jan 20 2017 GMT+0",
         "items":  ["Laptop", "Book", "Whiskey"],
-        "nice": true
+        "nice": true,
+        "other": {"hair": "brown", "eyes": "blue"}
       },
       "argTypes": {
         "stock": { "control": { "type": "range", "min": 0, "max": 30, "step": 5} },

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

@@ -6,6 +6,7 @@
 - style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
 - today = new Date(today);
 - items = items.split(',');
+- other = JSON.parse(other)
 
 div(style=`${style}`)
   h1 My name is #{name},
@@ -15,4 +16,8 @@ div(style=`${style}`)
   ul 
     each item in items
       li= item
+  p Other things about me: 
+    ul 
+      each key in Object.keys(other)
+        li= `${key}: ${other[key]}`
   p #{salutation}