feat: move controls to main story props

ccontrols · Mar 16, 2020 · 5aeea92 · 5aeea92
1 parent a1e72aa
commit 5aeea92
Show file tree

Hide file tree

Showing 18 changed files with 391 additions and 427 deletions.
diff --git a/core/loader/src/story-store-data.ts b/core/loader/src/story-store-data.ts
@@ -47,6 +47,8 @@ const loadStoryStore = (): StoriesStore | undefined => {
                 } catch (e) {
                   console.error(`unable to load module ${kind.moduleId}`);
                 }
+                // clean-up
+                delete kind.moduleId;
               }
               globalStore.kinds[kindName] = kind;
               Object.keys(store.stories).forEach(storyName => {

diff --git a/core/specification/src/stories.ts b/core/specification/src/stories.ts
@@ -1,5 +1,6 @@
 import { CodeLocation, Repository } from './utility';
 import { StoryComponent } from './components';
+import { ComponentControls } from './controls';
 
 /**
  * an identifier/variable.argument in the source code
@@ -106,6 +107,11 @@ export interface Story {
    * id for component associated with the story
    */
   component?: string;
+
+  /**
+   * object of key/value pairs specifying the controls for the story
+   */
+  controls?: ComponentControls;
 }
 
 /**
@@ -180,6 +186,12 @@ export interface StoriesKind {
 
   includeStories?: string[] | RegExp;
 
+  /**
+   * object of key/value pairs specifying the controls for the stories file
+   * this will apply to all the stories in the file
+   */
+  controls?: ComponentControls;
+
   [name: string]: any;
 }
 

diff --git a/examples/storybook-5/src/stories/controls-editors-table.stories.tsx b/examples/storybook-5/src/stories/controls-editors-table.stories.tsx
@@ -25,15 +25,13 @@ export const docsControlsTable = ({ name, age }: DocsControlsTable) => {
 };
 
 docsControlsTable.story = {
-  parameters: {
-    controls: {
-      name: { type: ControlTypes.TEXT, label: 'Name', value: 'Mark' },
-      age: { type: ControlTypes.NUMBER, label: 'Age', value: 19, min: 10, max: 75 },
-      clickMe: {
-        type: ControlTypes.BUTTON,
-        label: 'button click',
-        onClick: () => {console.log('log')},
-      },
+  controls: {
+    name: { type: ControlTypes.TEXT, label: 'Name', value: 'Mark' },
+    age: { type: ControlTypes.NUMBER, label: 'Age', value: 19, min: 10, max: 75 },
+    clickMe: {
+      type: ControlTypes.BUTTON,
+      label: 'button click',
+      onClick: () => {console.log('log')},
     },
-  }
+  },
 };