# Veeqo Components

This package includes a variety of React UI components that we use to build apps at Veeqo.

![](https://img.shields.io/npm/v/@veeqo/components)

## Usage

First you'll need to install the package via NPM:

`npm install -S @veeqo/components`

Then you can start importing components:

```jsx
import { VeeqoCommon } from '@veeqo/components`;

const { Button } = VeeqoCommon;

<Button>Click me</Button>
```

## Get started

[View the docs for a full list of components](https://veeqo-frontend.vercel.app/components/)

[Try them out in Playroom](https://veeqo-frontend.vercel.app/components/playroom/#?code=N4Igxg9gJgpiBcIA8AhArgFwxAdgAlwGEAbASzAGsBeYACgEo8qA%2BPAd1JygjYDoBDYjABOGWgHJ0WXHjBlKMKAEJx9AL7MAOvjwlyFPAFsY2pAHop2HMxBqgA)

## Development

To develop and run Storybook locally you'll need to clone this repository:

`git clone git@github.com:veeqo/veeqo-frontend.git`

`cd veeqo-frontend/packages/components`

Install dependencies:

> We use `rush ` to manage this monorepo project so please use rush to install all dependencies

```
rush install
```

Start Storybook:

```
npm run storybook
```

Start Playroom:

```
npm run playroom:start
```

### Read for publish
Please refer to the `README` file in the root directory.

### Folder structure

`lib` - all source files for the npm package
  | - `components` - all react components
  | - | - `common` - components that are small & represent a unit of UI (should have very little or no local state or logic)
  | - | - `forms` - components that allow user input
  | - | - `layouts` - components that only control the layout of other components
  | - | - `ui` - components that are bigger composites of UI (can have local state, interactivity or business logic)
  | - `hooks` - custom hooks
  | - `theme` - theme configuration
  | - `types` - type declarations that are re-used across multiple components/files
  | - `utils` - utility functions (mappers, reducers, converters, etc.)

### Component folder structure

`index.ts` - usually contains import and export statements (used for supporting short imports since `index.js|ts` are auto-resolved)
`ComponentName.tsx` - JSX of the component itself
`styled.ts` - styled components used in the JSX, components from `ui/` should have imports of commons there as well
`types.ts` - local type declarations

### Typings

It's preferred for prop types declarations to have suffix `Props`, eg. - `export interface ContainerProps {}`
In rare cases, if the type declaration name clashes with component name (eg. `Tab` as component and `Tab` as an interface for tab data-object), it's recommended to use prefix I `ITab`. Otherwise the cleanest version of the interface name is most preferred `Tab`

[TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
[TypeScript React Cheatsheet](https://github.com/typescript-cheatsheets/react)


### On-boarding screencast
[Watch veeqo-components on-boarding screencast](https://www.loom.com/share/44f625697db04d988f5e9202aa369acd)