Includes TypeScript, Prettier, Eslint, Styled-Components, Styled-Systems, Storybook.
To add a story to the storybook add a <component name>.stories.tsx
file in the CSF format.
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
}
Customize [src/]utils/theme/default
(or more themes) 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="M">{children}</Box>;
};
// [src/]utils/theme/default/space.ts
const space = {
NONE: 0,
XXS: 4,
XS: 8,
S: 12,
M: 16,
L: 24,
XL: 32,
XXL: 48,
H: 64,
} as const;
// ...
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.
The baseUrl
property in the tsconfig.json
is set to src
.