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 [email protected]: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 TypeScript React Cheatsheet

On-boarding screencast

Watch veeqo-components on-boarding screencast