@visibly/vui v1.1.13
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
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
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
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
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
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
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
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