Concept

The idea behind this library is to use Storybook.js, Material UI and Typescript to create a Design System for People For Bikes which they can use across their various sites. This will make building, updating and maintaining their online infrastructure far more efficient and keeping their products consistent across platforms.

Setup

In order to set up this Design System, we are utilizing a guide provided by Storybooks.js (https://www.learnstorybook.com/design-systems-for-developers). To properly do this however, you must follow these steps for the application to properly work.

1. Use create-react-app with Typescript in order for the application to properly configured. (https://create-react-app.dev/docs/adding-typescript/) Use the command yarn create react-app my-app --template typescript.

2.Delete the src folder that's set up with the application.

3. Install the Material UI dependancies that you'll need: *yarn add @material-ui/core *yarn add @material-ui/icons *yarn add fontsource-roboto

4. Install Storybooks and configure it for Typescript:

   • run command npx -p @storybook/cli sb init to initialize Storybooks
   • run command yarn add -D @storybook/preset-create-react-app to configure storybooks for Typescript

Note that when using Typescript in React, you must name files .tsx, not .ts