@visibly/vui NPM

Visibly UI Library

VUI is a frontend component library used for building pages and components in Visibly apps. The components are built using TypeScript, React, and Vanilla Extract. It's compiled into tree-shakable ESM, with TypeScript definitions and source maps in the distribution.

Installation

Access Token

VUI is a private repo in npm and requires an access token to access. In any repo that uses VUI, you need to create an .npmrc file

@visibly:registry=https://registry.npmjs.org/
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

In your .env file, make a NPM_TOKEN key and give it your npm token generated from npm.

NPM_TOKEN=ABC123

Now when you install the package, it will use your token to authenticate that you have access.

Install

npm:

npm install @visibly/vui

Usage

Here's an example of the basic usage of a VUI button component

import * as React from 'react';
import { Button } from '@visibly/vui';

const App = () => (
  <Button 
    variant="primary"
    onClick={() => window.alert("Primary button clicked")}
    >
    Primary
  </Button>
)

export default App

How to run Storybook

Make sure all the dependencies are installed. From the vui directory, run npm run storybook A window should open up running Storybook locally in your browser

Structure

vui
├── .storybook
│   ├── main.js # storybook build file
│   ├── preview-head.html # storybook file for applying custom styles
│   ├── preview.js # storybook file
│   ├── ts-paths.js # webpack config for typescript paths with webpack
│   ├── vanilla-extract.js # webpack config for VE
├── dist # the package
├── pages # used to develop pages in isolation
├── src
│   ├── components # uses atomic design structure
│   │   └── atoms # smallest components used as building blocks for UI elements
│   │   └── molecules # groups of atoms that work together to perform a certain action
│   │   └── organisms # the most complex, making up distinct sections of a UI
│   │   └── pages # what the user will see and interact with, made up of atoms, molecules, and organisms
│   ├── types
│   │── utils
│   │── variables
│   ├── index.ts # Entrypoint. Exports all modules. Can be tree-shaken.
│   ├── base.css # Base CSS, includes a reset (modern-css-reset).
├── tests # folder for all tests
├── assetTransformer.js
├── bable.config.js
├── colors.ts # makes colors accessible within the package
├── package.json
├── rollup.config.js # config for using rollup as our module bundler
├── tsconfig.json # TypeScript configuration, only emits declaration files