cra-template-typescript-linting-styling-storybook

Typescript Linting Styling Storybook Custom CRA Template

Includes TypeScript, Prettier, Eslint, Styled-Components, Styled-Systems, Storybook.

Storybook

To add a story to the storybook add a <component name>.stories.tsx file in the CSF format.

Linting

Add the following property to the VSCode Settings (JSON) to enable prettier and eslint linting automatically on document save. On Mac CMD + Shift + P and select Preferences: Open Settings (JSON).

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Styling

Customize [src/]utils/theme.ts as described at the styled-systems docs. The following creates a box with a padding of 16px based on the theme value.

const PaddedBox: React.FC = ({ children }) => {
  return <Box p={3}>{children}</Box>;
};

// [src/]utils/theme.ts
// ...
const space = [0, 4, 8, 16, 32, 64, 128, 256, 512];

The ThemeDecorator is applied as a wrapper in the AppProvider component at [src/]components/AppProvider.tsx.

The Box component is included and useful to extend for custom styled components.

Misc

The baseUrl property in the tsconfig.json is set to src.