vc-components

Voice Computer component library

Usage no npm install needed!

<script type="module">
  import vcComponents from 'https://cdn.skypack.dev/vc-components';
</script>

README

Voice Computer Components

Build Status Coverage Status NPM Version

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.

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.

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'
    });