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

fix(react): ✨ Update react templates #4679

Closed
wants to merge 1 commit into from
Closed

fix(react): ✨ Update react templates #4679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions packages/react/src/schematics/component-story/component-story.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('react:component-story', () => {
expect(stripIndents`${tree.readContent(storyFilePath)}`)
.toContain(stripIndents`
import React from 'react';
import { TestUiLib, TestUiLibProps } from './test-ui-lib';
import { TestUiLib, ITestUiLibProps } from './test-ui-lib';

export default {
component: TestUiLib,
Expand All @@ -72,9 +72,9 @@ describe('react:component-story', () => {

export const primary = () => {
/* eslint-disable-next-line */
const props: TestUiLibProps = {};
const props: ITestUiLibProps = {};

return <TestUiLib />;
return <TestUiLib></TestUiLib>;
};
`);
});
Expand Down Expand Up @@ -132,7 +132,7 @@ describe('react:component-story', () => {
/* eslint-disable-next-line */
const props = {};

return <Test />;
return <Test></Test>;
};
`);
});
Expand Down Expand Up @@ -180,7 +180,7 @@ describe('react:component-story', () => {
};

export const primary = () => {
return <Test />;
return <Test></Test>;
};
`);
});
Expand All @@ -194,12 +194,12 @@ describe('react:component-story', () => {

import './test.scss';

export interface TestProps {
export interface ITestProps {
name: string;
displayAge: boolean;
}

export const Test = (props: TestProps) => {
export const Test = (props: ITestProps) => {
return (
<div>
<h1>Welcome to test component, {props.name}</h1>
Expand All @@ -226,20 +226,20 @@ describe('react:component-story', () => {
.toContain(stripIndents`
import { text, boolean } from '@storybook/addon-knobs';
import React from 'react';
import { Test, TestProps } from './test-ui-lib';
import { Test, ITestProps } from './test-ui-lib';

export default {
component: Test,
title: 'Test',
};

export const primary = () => {
const props: TestProps = {
const props: ITestProps = {
name: text('name', ''),
displayAge: boolean('displayAge', false),
};

return <Test name={props.name} displayAge={props.displayAge} />;
return <Test name={props.name} displayAge={props.displayAge}></Test>;
};
`);
});
Expand All @@ -248,7 +248,7 @@ describe('react:component-story', () => {
[
{
name: 'default export function',
src: `export default function Test(props: TestProps) {
src: `export default function Test(props: ITestProps) {
return (
<div>
<h1>Welcome to test component, {props.name}</h1>
Expand All @@ -260,7 +260,7 @@ describe('react:component-story', () => {
{
name: 'function and then export',
src: `
function Test(props: TestProps) {
function Test(props: ITestProps) {
return (
<div>
<h1>Welcome to test component, {props.name}</h1>
Expand All @@ -273,7 +273,7 @@ describe('react:component-story', () => {
{
name: 'arrow function',
src: `
const Test = (props: TestProps) => {
const Test = (props: ITestProps) => {
return (
<div>
<h1>Welcome to test component, {props.name}</h1>
Expand All @@ -286,14 +286,14 @@ describe('react:component-story', () => {
{
name: 'arrow function without {..}',
src: `
const Test = (props: TestProps) => <div><h1>Welcome to test component, {props.name}</h1></div>;
const Test = (props: ITestProps) => <div><h1>Welcome to test component, {props.name}</h1></div>;
export default Test
`,
},
{
name: 'direct export of component class',
src: `
export default class Test extends React.Component<TestProps> {
export default class Test extends React.Component<ITestProps> {
render() {
return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
}
Expand All @@ -303,7 +303,7 @@ describe('react:component-story', () => {
{
name: 'component class & then default export',
src: `
class Test extends React.Component<TestProps> {
class Test extends React.Component<ITestProps> {
render() {
return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
}
Expand All @@ -314,7 +314,7 @@ describe('react:component-story', () => {
{
name: 'PureComponent class & then default export',
src: `
class Test extends React.PureComponent<TestProps> {
class Test extends React.PureComponent<ITestProps> {
render() {
return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
}
Expand All @@ -331,7 +331,7 @@ describe('react:component-story', () => {

import './test.scss';

export interface TestProps {
export interface ITestProps {
name: string;
displayAge: boolean;
}
Expand All @@ -355,20 +355,20 @@ describe('react:component-story', () => {
.toContain(stripIndents`
import { text, boolean } from '@storybook/addon-knobs';
import React from 'react';
import { Test, TestProps } from './test-ui-lib';
import { Test, ITestProps } from './test-ui-lib';

export default {
component: Test,
title: 'Test',
};

export const primary = () => {
const props: TestProps = {
const props: ITestProps = {
name: text('name', ''),
displayAge: boolean('displayAge', false),
};

return <Test name={props.name} displayAge={props.displayAge} />;
return <Test name={props.name} displayAge={props.displayAge}></Test>;
};
`);
});
Expand All @@ -393,7 +393,7 @@ describe('react:component-story', () => {
expect(stripIndents`${tree.readContent(storyFilePath)}`)
.toContain(stripIndents`
import React from 'react';
import { TestUiLib, TestUiLibProps } from './test-ui-lib';
import { TestUiLib, ITestUiLibProps } from './test-ui-lib';

export default {
component: TestUiLib,
Expand All @@ -402,9 +402,9 @@ describe('react:component-story', () => {

export const primary = () => {
/* eslint-disable-next-line */
const props: TestUiLibProps = {};
const props: ITestUiLibProps = {};

return <TestUiLib />;
return <TestUiLib></TestUiLib>;
};
`);
});
Expand Down
2 changes: 1 addition & 1 deletion ...t/src/schematics/component-story/files/__componentFileName__.stories.__fileExt__.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ export const primary = () => {
};
<% } %>

return <<%= componentName %> <% for (let prop of props) { %><%= prop.name %> = {props.<%= prop.name %>} <% } %> />;
return <<%= componentName %> <% for (let prop of props) { %><%= prop.name %> = {props.<%= prop.name %>} <% }%>></<%= componentName %>>;
};
6 changes: 3 additions & 3 deletions packages/react/src/schematics/component/files/__fileName__.tsx__tmpl__
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { Route, Link } from 'react-router-dom';
} else { var wrapper = 'div'; } %>

/* eslint-disable-next-line */
export interface <%= className %>Props {
export interface I<%= className %>Props {
}

<% if (styledModule && styledModule !== 'styled-jsx') { %>
Expand All @@ -30,7 +30,7 @@ const Styled<%= className %> = styled.div`
`;
<% }%>
<% if (classComponent) { %>
export class <%= className %> extends Component<<%= className %>Props> {
export class <%= className %> extends Component<I<%= className %>Props> {
render() {
return (
<<%= wrapper %>>
Expand All @@ -47,7 +47,7 @@ export class <%= className %> extends Component<<%= className %>Props> {
}
}
<% } else { %>
export function <%= className %>(props: <%= className %>Props) {
export const <%= className %>: React.FC<I<%= className %>Props> = (props) => {
return (
<<%= wrapper %>>
<%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
Expand Down
4 changes: 4 additions & 0 deletions packages/react/src/utils/ast-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,10 @@ export function getComponentPropsInterface(
if (propsParam && propsParam.type) {
propsTypeName = ((propsParam.type as ts.TypeReferenceNode)
.typeName as ts.Identifier).text;
} else {
// If user is using React.FC<INTERFACE> then get the name of it
propsTypeName = ((cmpDeclaration as ts.VariableDeclaration)
.type as ts.NodeWithTypeArguments)?.typeArguments[0].getText();
}
} else if (
// do we have a class component extending from React.Component
Expand Down