Skip to content

Commit

Permalink
feat(storybook): change react stories template to use ComponentStory …
Browse files Browse the repository at this point in the history 
…and ComponentMeta (#10490)
  • Loading branch information
@diginikkari
diginikkari committed May 31, 2022
1 parent c6af229 commit b35e383
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 41 deletions.
74 changes: 37 additions & 37 deletions packages/react/src/generators/component-story/component-story.spec.ts
View file
Expand Up @@ -52,15 +52,15 @@ describe('react:component-story', () => {
it('should properly set up the story', () => {
expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
.toContain(formatFile`
import { Story, Meta } from '@storybook/react';
import { TestUiLib, TestUiLibProps } from './test-ui-lib';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { TestUiLib } from './test-ui-lib';
export default {
component: TestUiLib,
title: 'TestUiLib',
} as Meta;
} as ComponentMeta<typeof TestUiLib>;
const Template: Story<TestUiLibProps> = (args) => <TestUiLib {...args} />;
const Template: ComponentStory<typeof TestUiLib> = (args) => <TestUiLib {...args} />;
export const Primary = Template.bind({});
Primary.args = {};
Expand Down Expand Up @@ -148,15 +148,15 @@ describe('react:component-story', () => {
it('should create a story without controls', () => {
expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
.toContain(formatFile`
import { Story, Meta } from '@storybook/react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Test } from './test-ui-lib';
export default {
component: Test,
title: 'Test',
} as Meta;
} as ComponentMeta<typeof Test>;
const Template: Story = (args) => <Test {...args} />;
const Template: ComponentStory<typeof Test> = (args) => <Test {...args} />;
export const Primary = Template.bind({});
Primary.args = {};
Expand Down Expand Up @@ -198,15 +198,15 @@ describe('react:component-story', () => {
it('should setup controls based on the component props', () => {
expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
.toContain(formatFile`
import { Story, Meta } from '@storybook/react';
import { Test, TestProps } from './test-ui-lib';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Test } from './test-ui-lib';
export default {
component: Test,
title: 'Test',
} as Meta;
} as ComponentMeta<typeof Test>;
const Template: Story<TestProps> = (args) => <Test {...args} />;
const Template: ComponentStory<typeof Test> = (args) => <Test {...args} />;
export const Primary = Template.bind({});
Primary.args = {
Expand Down Expand Up @@ -256,18 +256,18 @@ describe('react:component-story', () => {
it('should setup controls based on the component props', () => {
expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
.toContain(formatFile`
import { Story, Meta } from '@storybook/react';
import { Test, TestProps } from './test-ui-lib';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Test } from './test-ui-lib';
export default {
component: Test,
title: 'Test',
argTypes: {
someAction: { action: 'someAction executed!' },
},
} as Meta;
} as ComponentMeta<typeof Test>;
const Template: Story<TestProps> = (args) => <Test {...args} />;
const Template: ComponentStory<typeof Test> = (args) => <Test {...args} />;
export const Primary = Template.bind({});
Primary.args = {
Expand Down Expand Up @@ -419,15 +419,15 @@ 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 { Story, Meta } from '@storybook/react';
import { Test, TestProps } from './test-ui-lib';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Test } from './test-ui-lib';
export default {
component: Test,
title: 'Test',
} as Meta;
} as ComponentMeta<typeof Test>;
const Template: Story<TestProps> = (args) => <Test {...args} />;
const Template: ComponentStory<typeof Test> = (args) => <Test {...args} />;
export const Primary = Template.bind({});
Primary.args = {
Expand Down Expand Up @@ -551,15 +551,15 @@ 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 { Story, Meta } from '@storybook/react';
import { Test, TestProps } from './test-ui-lib';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Test } from './test-ui-lib';
export default {
component: Test,
title: 'Test',
} as Meta;
} as ComponentMeta<typeof Test>;
const Template: Story<TestProps> = (args) => <Test {...args} />;
const Template: ComponentStory<typeof Test> = (args) => <Test {...args} />;
export const Primary = Template.bind({});
Primary.args = {
Expand Down Expand Up @@ -614,47 +614,47 @@ describe('react:component-story', () => {

expect(formatFile`${appTree.read(storyFilePathOne, 'utf-8')}`)
.toContain(formatFile`
import { Story, Meta } from '@storybook/react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { One } from './test-ui-lib';
export default {
component: One,
title: 'One',
} as Meta;
} as ComponentMeta<typeof One>;
const Template: Story = (args) => <One {...args} />;
const Template: ComponentStory<typeof One> = (args) => <One {...args} />;
export const Primary = Template.bind({});
Primary.args = {};
`);

expect(formatFile`${appTree.read(storyFilePathTwo, 'utf-8')}`)
.toContain(formatFile`
import { Story, Meta } from '@storybook/react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Two } from './test-ui-lib';
export default {
component: Two,
title: 'Two',
} as Meta;
} as ComponentMeta<typeof Two>;
const Template: Story = (args) => <Two {...args} />;
const Template: ComponentStory<typeof Two> = (args) => <Two {...args} />;
export const Primary = Template.bind({});
Primary.args = {};
`);

expect(formatFile`${appTree.read(storyFilePathThree, 'utf-8')}`)
.toContain(formatFile`
import { Story, Meta } from '@storybook/react';
import { Three, ThreeProps } from './test-ui-lib';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Three } from './test-ui-lib';
export default {
component: Three,
title: 'Three',
} as Meta;
} as ComponentMeta<typeof Three>;
const Template: Story<ThreeProps> = (args) => <Three {...args} />;
const Template: ComponentStory<typeof Three> = (args) => <Three {...args} />;
export const Primary = Template.bind({});
Primary.args = {
Expand All @@ -678,15 +678,15 @@ describe('react:component-story', () => {
it('should properly set up the story', () => {
expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
.toContain(formatFile`
import { Story, Meta } from '@storybook/react';
import { TestUiLib, TestUiLibProps } from './test-ui-lib';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { TestUiLib } from './test-ui-lib';
export default {
component: TestUiLib,
title: 'TestUiLib',
} as Meta;
} as ComponentMeta<typeof TestUiLib>;
const Template: Story<TestUiLibProps> = (args) => <TestUiLib {...args} />;
const Template: ComponentStory<typeof TestUiLib> = (args) => <TestUiLib {...args} />;
export const Primary = Template.bind({});
Primary.args = {};
Expand Down
8 changes: 4 additions & 4 deletions ...ages/react/src/generators/component-story/files/__componentFileName__.stories.__fileExt__
View file
@@ -1,5 +1,5 @@
<% if ( !isPlainJs ) { %>import { Story, Meta } from '@storybook/react';<% } %>
import<% if ( !isPlainJs ) { %> { <% } %> <%= componentName %><% if ( propsTypeName && !isPlainJs ) { %>, <%= propsTypeName %> <% } %> <% if ( !isPlainJs ) { %> } <% } %> from './<%= componentImportFileName %>';
<% if ( !isPlainJs ) { %>import { ComponentStory, ComponentMeta } from '@storybook/react';<% } %>
import<% if ( !isPlainJs ) { %> { <% } %> <%= componentName %> <% if ( !isPlainJs ) { %> } <% } %> from './<%= componentImportFileName %>';

export default {
component: <%= componentName %>,
Expand All @@ -8,9 +8,9 @@ export default {
<%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
}
<% } %>
}<% if ( !isPlainJs ) { %> as Meta <% } %>;
}<% if ( !isPlainJs ) { %> as ComponentMeta<typeof <%= componentName %>> <% } %>;

const Template<% if ( !isPlainJs ) { %>: Story<% if ( propsTypeName ) { %><<%= propsTypeName %>><% } %><% } %> = (args) => <<%= componentName %> {...args} />;
const Template<% if ( !isPlainJs ) { %>: ComponentStory< typeof <%= componentName %> ><% } %> = (args) => <<%= componentName %> {...args} />;

export const Primary = Template.bind({})
Primary.args = {<% for (let prop of props) { %>
Expand Down

0 comments on commit b35e383

Please sign in to comment.