Created
September 10, 2023 14:45
-
-
Save mehmetyilmaz001/05624a0fc8691bba89c1d7c858fda215 to your computer and use it in GitHub Desktop.
React Scaffold Files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { I<%= name %>Props } from './<%= name %>.types'; | |
export const use<%= name %> = (props: I<%= name %>Props) => { | |
// Logic and hooks go here. | |
const someValue = 'Hello from hook!'; | |
return { | |
someValue | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { Story, Meta } from '@storybook/react/types-6-0'; | |
import <%= name %>, { I<%= name %>Props } from './<%= name %>'; | |
export default { | |
title: 'Components/<%= name %>', | |
component: <%= name %>, | |
argTypes: { | |
onClick: { action: 'clicked' }, | |
}, | |
} as Meta; | |
const Template: Story<I<%= name %>Props> = (args) => <<%= name %> {...args} />; | |
export const Primary = Template.bind({}); | |
Primary.args = { | |
children: '<%= name %> Content', | |
}; | |
export const Secondary = Template.bind({}); | |
Secondary.args = { | |
...Primary.args, | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import styled from 'styled-components'; | |
export const <%= name %>Styled = styled.div` | |
/* Your styled-components styling here. */ | |
color: blue; | |
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { render } from '@testing-library/react'; | |
import <%= name %> from './<%= name %>'; | |
describe('<<%= name %> />', () => { | |
it('renders without crashing', () => { | |
expect(() => { | |
render(<<%= name %> />); | |
}).not.toThrow(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { I<%= name %>Props } from './<%= name %>.types'; | |
import { use<%= name %> } from './<%= name %>.hook'; | |
import { <%= name %>Styled } from './<%= name %>.styled'; | |
const <%= name %>: React.FC<I<%= name %>Props> = (props) => { | |
const { someValue } = use<%= name %>(props); | |
return <<%= name %>Styled>{someValue}</<%= name %>Styled>; | |
}; | |
export default <%= name %>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export interface I<%= name %>Props extends React.HTMLAttributes<any> { | |
// Define additional props here. | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment