feat(storybook): generate typed import from storybook/react (#12743)

nrwl · Oct 27, 2022 · 6e5ebfa · 6e5ebfa
1 parent 594c63b
commit 6e5ebfa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/packages/react/src/generators/component-story/component-story.spec.ts b/packages/react/src/generators/component-story/component-story.spec.ts
@@ -52,7 +52,7 @@ describe('react:component-story', () => {
       it('should properly set up the story', () => {
         expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
           .toContain(formatFile`
-          import { ComponentStory, ComponentMeta } from '@storybook/react';
+          import type { ComponentStory, ComponentMeta } from '@storybook/react';
           import { TestUiLib } from './test-ui-lib';
           
           const Story: ComponentMeta<typeof TestUiLib> = {
@@ -149,7 +149,7 @@ describe('react:component-story', () => {
       it('should create a story without controls', () => {
         expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
           .toContain(formatFile`
-          import { ComponentStory, ComponentMeta } from '@storybook/react';
+          import type { ComponentStory, ComponentMeta } from '@storybook/react';
           import { Test } from './test-ui-lib';
           
           const Story: ComponentMeta<typeof Test> = {
@@ -200,7 +200,7 @@ describe('react:component-story', () => {
       it('should setup controls based on the component props', () => {
         expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
           .toContain(formatFile`
-            import { ComponentStory, ComponentMeta } from '@storybook/react';
+            import type { ComponentStory, ComponentMeta } from '@storybook/react';
             import { Test } from './test-ui-lib';
 
             const Story: ComponentMeta<typeof Test> = {
@@ -259,7 +259,7 @@ describe('react:component-story', () => {
       it('should setup controls based on the component props', () => {
         expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
           .toContain(formatFile`
-            import { ComponentStory, ComponentMeta } from '@storybook/react';
+            import type { ComponentStory, ComponentMeta } from '@storybook/react';
             import { Test } from './test-ui-lib';
 
             const Story: ComponentMeta<typeof Test> = {
@@ -423,7 +423,7 @@ describe('react:component-story', () => {
             it('should properly setup the controls based on the component props', () => {
               expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
                 .toContain(formatFile`
-            import { ComponentStory, ComponentMeta } from '@storybook/react';
+            import type { ComponentStory, ComponentMeta } from '@storybook/react';
             import { Test } from './test-ui-lib';
 
             const Story: ComponentMeta<typeof Test> = {
@@ -556,7 +556,7 @@ describe('react:component-story', () => {
             it('should properly setup the controls based on the component props', () => {
               expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
                 .toContain(formatFile`
-              import { ComponentStory, ComponentMeta } from '@storybook/react';
+              import type { ComponentStory, ComponentMeta } from '@storybook/react';
               import { Test } from './test-ui-lib';
   
               const Story: ComponentMeta<typeof Test> = {
@@ -620,7 +620,7 @@ describe('react:component-story', () => {
 
           expect(formatFile`${appTree.read(storyFilePathOne, 'utf-8')}`)
             .toContain(formatFile`
-            import { ComponentStory, ComponentMeta } from '@storybook/react';
+            import type { ComponentStory, ComponentMeta } from '@storybook/react';
             import { One } from './test-ui-lib';
             
             const Story: ComponentMeta<typeof One> = {
@@ -637,7 +637,7 @@ describe('react:component-story', () => {
 
           expect(formatFile`${appTree.read(storyFilePathTwo, 'utf-8')}`)
             .toContain(formatFile`
-            import { ComponentStory, ComponentMeta } from '@storybook/react';
+            import type { ComponentStory, ComponentMeta } from '@storybook/react';
             import { Two } from './test-ui-lib';
             
             const Story: ComponentMeta<typeof Two> = {
@@ -654,7 +654,7 @@ describe('react:component-story', () => {
 
           expect(formatFile`${appTree.read(storyFilePathThree, 'utf-8')}`)
             .toContain(formatFile`
-            import { ComponentStory, ComponentMeta } from '@storybook/react';
+            import type { ComponentStory, ComponentMeta } from '@storybook/react';
             import { Three } from './test-ui-lib';
             
             const Story: ComponentMeta<typeof Three> = {
@@ -687,7 +687,7 @@ describe('react:component-story', () => {
     it('should properly set up the story', () => {
       expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
         .toContain(formatFile`
-        import { ComponentStory, ComponentMeta } from '@storybook/react';
+        import type { ComponentStory, ComponentMeta } from '@storybook/react';
         import { TestUiLib } from './test-ui-lib';
         
         const Story: ComponentMeta<typeof TestUiLib> = {

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,4 @@
-<% if ( !isPlainJs ) { %>import { ComponentStory, ComponentMeta } from '@storybook/react';<% } %>
+<% if ( !isPlainJs ) { %>import type { ComponentStory, ComponentMeta } from '@storybook/react';<% } %>
 import<% if ( !isPlainJs ) { %> { <% } %> <%= componentName %> <% if ( !isPlainJs ) { %> } <% } %> from './<%= componentImportFileName %>';
 
 <% if ( isPlainJs ) { %>