Veeqo Components

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

Usage

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

npm install -S @veeqo/components

Then you can start importing components:

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

const { Button } = VeeqoCommon;

<Button>Click me</Button>

Get started

View the docs for a full list of components

Try them out in Playroom

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:

npm install

Start Storybook:

npm run storybook

Start Playroom:

npm run playroom:start

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
TypeScript React Cheatsheet

On-boarding screencast

Watch veeqo-components on-boarding screencast