Getting Started with Create React App

This project is a front end library for the What's Cooking project.

Available Scripts

In the project directory, you can run:

yarn storybook

Runs the storybook in the development mode.
Open http://localhost:6006 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Learn More

| | | |--- |--- | | React | https://reactjs.org/ | | Styled Components | https://styled-components.com/ | | Styled System | https://styled-system.com/ | | Storybook | https://storybook.js.org/ | | Jest | https://jestjs.io/ |

Project structure

src/Components

A component should have it's own folder with at bare minimun the following files: | | | |--- |--- |
| index.tsx | Exports the component and necessary types/functions | | ComponentName.tsx | Exports only the component | | *.stories.tsx | Has all storybook stories |
| *.spec.tsx | Has tests for storybook stories | | *.style.tsx | Export raw styled component | | *.types.tsx | Export types and interfaces |

All dependencies should be inside the same folder, (ie: TabPanel in a Tab component), unless it's a generic component, like a Button in a Header.

src/Themes

Contains folders for light and dark themes. Themes should be exported on the index.ts file and variants should have its own files.

src/Types

Contains only global types and interfaces, such as Variants, Size, etc...