@voiceiq/web-components

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 [e-mail]: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