@voiceiq/web-components NPM

Introduction

Not the React Component Library VoiceIQ devs need, the React Component Library VoiceIQ devs deserve

Features

📗 Incredibly good documentation (you are reading it right now)
🤩 Modern ReactJS components tailored to be used on VoiceIQ Web Applications
🚀 Easy to install and use on any of your projects

Purpose

Bring a unified design language across the VoiceIQ Eco System

Say goodbye to maintaining a stylegiude for components in your massive codebase. Leave it to us!
Pick the component you want from many components tailored to be used on the VoiceIQ Eco System.
Use this library to compose or extend your own component with the VoiceIQ pizzaz built in.

For more info on components, see our Components section. That covers intro to individual components and the architecture, including installation, running and configuration. If you look at the repo, that has has more content and configuration than this relatively plain documentation.

How to use

Prerequisites

react^16 and react-dom^16 are required for the library to function properly
Your project should have support for SCSS

Installation

yarn add @voiceiq/web-components

Setup

To make use of all the library services, you need to connect your root component to the library

import { connectAll } from '@voiceiq/web-components';

export default connectAll(App)

You may decide to connect to each individual ones if you prefer. This gives you the flexibility to ommit features you don't need.

import { connectTheme } from '@voiceiq/web-components';

export default connectTheme(App)

import { connectSnackbar } from '@voiceiq/web-components';

export default connectSnackbar(App)

Usage

You have the flexibility to import the component in multiple different ways. Choose the way you prefer.

import { Button } from '@voiceiq/web-components';

Development Setup

Environment

The environment setup guide will focus primarily on a Unix environment. It's easy enough to find Windows alternatives. Google it!

Git - The world pretty much runs because of Git. Thanks Linus!
NodeJS - Javascript runtime (Psst! Try NVM. It's so cool!)
Yarn - Package manager

Project

git clone git@bitbucket.org:voiceiq/viq.web.components.git
cd viq.web.components
yarn

Editor

The setup guide will primarily focus on Visual Studio Code since it is the editor largely used by Viqizens. Here is a list of recommended extensions to install.

ESLint - Makes linting Javascript code infinitely easier
Import Cost - Makes you paranoid (at least tries to make you paranoid) about cost of imported modules
Auto Close Tag - Writing JSX/HTML easier. Closes the tags for you. Who said chivalry is dead!?
Better Comments - Helps you write (maybe not good, but) better comments

Development

Code Standard

Check out our ESLint configuration. The expected number of lint errors is 0.
Imagin this library to be used by the general public. Design the specs, props and docs to cater to that audience.

Component Structure

We have 4 different types of components in this library defined by their size.

Atoms

Smalles fundemental components
Does not have an internal state
Includes Texts, Icons, Colours, etc.

Molecules

Bigger yet simple components
Does not have an internal state
Maybe composed using atomic components
Includes Buttons, Containers, etc.

Organisms

Bigger shared components
Usually composed using multiple other components
May contain an internal state
Includes Trays, Data Cards, Notifications, etc.

Templates

Specialized components tailor made for VoiceIQ usage
Usually composed using multiple other components
May contain an internal state
Includes Calendar, Tables, Accordions, Navigation Panels, etc.

Pull Requests

Contributions are welcome in the form of Pull Requests. Component code, documentation and the storybook is expected to be on point.

Versioning

We use Semantic Versioning to handle versioning

LIbrary Resources

Storybook

This project has a built in Storybook. To serve the storybook, run the following command from the root directory

yarn serve:storybook

Documentation

This project is powered by Docsify to generate this amazing documentation site. To serve the site locally, run the following command from the root directory

yarn serve:docs

Running Doc Site in prod mode

We have a custom ExpressJS server that ties up both the prod version of above sites behind a Active Directory auth wall. To run it, simply

yarn build:storybook
yarn build:docs
yarn serve:express

VoiceIQ ReactJS Components UI

@everything-registry/sub-chunk-990 @infinitebrahmanuniverse/nolb-_voi

2 months ago

3 months ago

4 months ago

4 months ago

5 months ago

5 months ago

6 months ago

9 months ago

10 months ago

9 months ago

10 months ago

8 months ago

9 months ago

9 months ago

6 months ago

8 months ago

9 months ago

9 months ago

6 months ago

8 months ago

6 months ago

8 months ago

5 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 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

12 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

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years 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

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

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

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

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago