Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(storybook): change react stories template to use ComponentStory and ComponentMeta #10490

Merged
merged 2 commits into from
May 31, 2022
Merged

feat(storybook): change react stories template to use ComponentStory and ComponentMeta #10490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
17bb381
feat(storybook): changed react stories template to use ComponentStory…
diginikkari May 27, 2022
734589a
feat(storybook): changed react stories template to use ComponentStory…
diginikkari May 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
74 changes: 37 additions & 37 deletions packages/react/src/generators/component-story/component-story.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
@@ -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