@veeqo/components v6.1.0
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
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 TypeScript React Cheatsheet
On-boarding screencast
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
7 months ago
8 months ago
8 months ago
9 months ago
11 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago