import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Introduction" />

# Welcome to Okra Component Library System

This project was PARTLY bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
There has been a lot of edits in the package.json so `yarn start` or `npm run start` would not work

## Available Scripts

In the project directory, you can run:

### `yarn storybook`

Runs the storybook for view

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

## Instructions

1. Create a folder with 3 files (4th is for test)
   1. Component File
      - `Component Name`.js (in Pascal Case) to build the Functional Component
      - Please use react hooks.
      - Define your prop types
      - Include your defualt props.
   2. Component StyleSheet.
      - `Component Name`.js (in lower case) to add the styles
      - We have mixin and base styles written out so please always use them.
      - Please use rem (1 rem is 10px).
      - Also check all viewpoint (all components must be responsive)
      - Also add dark mode (check `Modal` for example) (You don't need it to be perfect just have it there for now)
   3. Component Storybook
      - Please check `Modal` for help
      - Also you can get more information [here](https://storybook.js.org/docs/react/get-started/introduction)
      - btw, you can create a template like this `const Template = (args) => <Modal {...args} />`
2. Please abstract all your helpers to `helpers/index.js` (I have already taken care of exporting)
3. Please try as much as possible to follow DRY principles. Always check the styles folders and helpers to see if what you need exists.
4. Always try to write clean code and check for errors.
5. Try not to over complicate any component, if it is looking weird or too long, please reach out to Peter for clarification or help.
6. We would use folders and sections, but build for now, I would rearrange them.

Go and make beautiful components