Getting Started

Install

// npm
npm i @wavv/ui

// yarn
yarn add @wavv/ui

// pnpm
pnpm add @wavv/ui

Peer Dependencies

@wavv/ui currently has three peer dependencies: react, react-dom, and @emotion/react.

// npm
npm i react react-dom @emotion/react

// yarn
yarn add react react-dom @emotion/react

// pnpm
pnpm add react react-dom @emotion/react

Usage

A ThemeProvider needs to wrap the entire app so that all @wavv/ui components can use those styles.

By default, there is a light and a dark theme on the theme object exported by @wavv/ui. More can be read about the theme and how to customize it here.

import React from 'react';
import { ThemeProvider } from '@emotion/react';
import { theme, ResetStyles, ScrollbarStyles } from '@wavv/ui';

const App = () => {
	const currentTheme = theme.light;
	return (
		<ThemeProvider theme={currentTheme}>
			<ResetStyles />
			<ScrollbarStyles />
			{/* app contents */}
		</ThemeProvider>
	);
};

Documentation

Documentation can be found at ui.wavv.com

For new v2 components, pnpm storybook can be ran to bring up more detailed documentation for props.

Contributing

CLI

When a change is ready to be pushed to the library and published to NPM, the best method is to use the cli.

1. pnpm cli
2. Bump version (stick with the pre-release alpha version for now).
3. Document what changes are going out by answering the cli prompts.
4. You can answer "no" to the prompt for creating a new branch.
5. The final prompt asks if you would like to publish to npm. This will handle the alpha version tag for you.

Manual

If something goes wrong with using the CLI, or another change needs to be added to the build before publishing to npm, there are a couple different scripts that can be run to manually build and publish the library.

1. pnpm build:lib will run another build for the library, ensuring your new changes are included.
2. Make sure the version in package.json is the new version that should go out if it hasn't already been changed by the cli prompts.
3. pnpm pub:alpha will publish to npm with the correct alpha tag since we are sticking to a pre-release tag for now.

License

This project is licensed under the terms of the MIT license.