React Scaffold Files

__name__.hook.ts

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
  };
};

__name__.stories.tsx

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,
};

__name__.styled.ts

import styled from 'styled-components';

export const <%= name %>Styled = styled.div`
  /* Your styled-components styling here. */
  color: blue;
`;

__name__.tests.tsx

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();
  });
});

__name__.tsx

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 %>;

__name__.types.ts

export interface I<%= name %>Props extends React.HTMLAttributes<any> {
  // Define additional props here.
}