Voice Computer Components

View Component Library

Basic Usage

yarn add vc-components

import React from 'react';
import { Atoms } from 'vc-components';

const HelloDemo = () => (
    <Atoms.Button
        type="primary"
        onClick={() => { console.log('hello!'); }}
    >
        Hello world!
    </Atoms.Button>
);

View the storybook component library for more details and previews of all the available components.

Start Development

yarn install
yarn storybook

Background Learning

Styled Components

The basis for the entire library. All components are built on styled components as the base, with some slight tools to make overall implementations easier. The idea behind styled components is one of css-in-js.

• Egg Head Tutorials
• Official Documentation

Styled System

A library that adds base utilities such as padding, margins, colors. This is based on a theme that is passed down by the theme provider. The Theme Table details which function names relate to which theme field.

• Official Documentation

System Components

A wrapper for styled system that allows for object declaration. This allows for less code when a component is basically just an extension of styled system. System components also exposes the is prop, which allows us to change the tag on the fly. This is useful if you want to make something a h1 tag. A common pattern in the component library is to expose some attribute like titleAttributes allow the is prop to be passed in to the element.

Before

    import styled from 'styled-components';
    import { space } from 'styled-system';
    const Card = styled.section.attrs({
        p: 3
    })`
        ${space};
    `

After

    import sys from 'system-components';
    const Card = sys({
        p: 3,
        is: 'section'
    });

• Official Documentation