feat(storybook): from addon knobs to controls

nrwl · Jun 22, 2021 · 4c2d4fe · 4c2d4fe
1 parent 122f7ec
commit 4c2d4fe
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 23 deletions.
diff --git a/packages/react/src/generators/component-story/component-story.ts b/packages/react/src/generators/component-story/component-story.ts
@@ -18,10 +18,8 @@ export interface CreateComponentStoriesFileSchema {
   componentPath: string;
 }
 
-export type KnobType = 'text' | 'boolean' | 'number' | 'select';
-
 // TODO: candidate to refactor with the angular component story
-export function getKnobDefaultValue(property: ts.SyntaxKind): string {
+export function getControlDefaultValue(property: ts.SyntaxKind): string {
   const typeNameToDefault: Record<number, any> = {
     [ts.SyntaxKind.StringKeyword]: "''",
     [ts.SyntaxKind.NumberKeyword]: 0,
@@ -97,24 +95,16 @@ export function createComponentStoriesFile(
   let propsTypeName: string = null;
   let props: {
     name: string;
-    type: KnobType;
     defaultValue: any;
   }[] = [];
 
   if (propsInterface) {
     propsTypeName = propsInterface.name.text;
 
     props = propsInterface.members.map((member: ts.PropertySignature) => {
-      const initializerKindToKnobType: Record<number, KnobType> = {
-        [ts.SyntaxKind.StringKeyword]: 'text',
-        [ts.SyntaxKind.NumberKeyword]: 'number',
-        [ts.SyntaxKind.BooleanKeyword]: 'boolean',
-      };
-
       return {
         name: (member.name as ts.Identifier).text,
-        type: initializerKindToKnobType[member.type.kind],
-        defaultValue: getKnobDefaultValue(member.type.kind),
+        defaultValue: getControlDefaultValue(member.type.kind),
       };
     });
   }
@@ -127,7 +117,6 @@ export function createComponentStoriesFile(
       componentFileName: name,
       propsTypeName,
       props,
-      usedKnobs: props.map((x) => x.type).join(', '),
       componentName: (cmpDeclaration as any).name.text,
       isPlainJs,
       fileExt,

diff --git a/...ages/react/src/generators/component-story/files/__componentFileName__.stories.__fileExt__ b/...ages/react/src/generators/component-story/files/__componentFileName__.stories.__fileExt__
@@ -1,4 +1,3 @@
-<% if(usedKnobs && usedKnobs.length > 0) { %>import { <%= usedKnobs %> } from '@storybook/addon-knobs';<% } %>
 import React from 'react';
 import { <%= componentName %><% if ( propsTypeName && !isPlainJs ) { %>, <%= propsTypeName %> <% } %> } from './<%= componentFileName %>';
 
@@ -7,13 +6,9 @@ export default {
   title: '<%= componentName %>'
 };
 
-export const primary = () => {
-  <% if (propsTypeName || isPlainJs ) { %>
-  <% if (props.length === 0) { %>/* <%= usesEsLint ? 'eslint' : 'tslint'%>-disable-next-line */<% } %>
-  const props<%= isPlainJs ? '': ':' + propsTypeName %> = {<% for (let prop of props) { %>
-    <%= prop.name %>: <%= prop.type %>('<%= prop.name %>', <%- prop.defaultValue %>),<% } %>
-  };
-  <% } %>
+const Template<%= isPlainJs ? '': ': Story<' + propsTypeName %> + '>' = (args) => <<%= componentName %> {...args} />;
 
-  return <<%= componentName %> <% for (let prop of props) { %><%= prop.name %> = {props.<%= prop.name %>} <% } %> />;
-};
+export const primary = Template.bind({})
+primary.args = {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+}