🎨 WWL Core UI Kit

Installation

Add to your project with:

• 🧶 yarn add @workweeklunchui/wwl-core-ui
• 📦 npm i @workweeklunchui/wwl-core-ui -s

React is a required peer dependency.

Usage

To get started, wrap your app with the exported ThemeProvider:

import { ThemeProvider } from '@workweeklunch/wwl-core-ui';

const App = () => (
  <ThemeProvider>
    <MainContent />
  </ThemeProvider>
);

export default App;

You'll also need to globally import @workweeklunch/wwl-core-ui/lib/css/bundle.css (loads necessary fonts).

TypeScript:

If you're using TypeScript, there's a few additional steps you should take to add typed theme tokens:

1. yarn add --dev @chakra-ui/cli or npm i -D @chakra-ui/cli
2. Add a postinstall script to your package.json:

{
  ...
  "scripts": {
    "gen:theme-typings": "chakra-cli tokens @workweeklunch/wwl-core-ui",
    "postinstall": "yarn gen:theme-typings"
  }
  ...
}

Notes

This UI kit is based off of Chakra UI. Some components are simply themed variants of their Chakra counterparts, others have been implemented from scratch. In practice, this means a few things:

• All exported components support the full range of styling props from Chakra
• All components should follow the import pattern of:

  import { Checkbox } from '@workweeklunch/wwl-core-ui';

  You should never import from Chakra directly.

Development

# first, install dependencies
yarn install

# start Storybook
yarn storybook

# build a distributable package
yarn build

# trigger the GitHub Action to publish a new version
npm version [major|minor|patch] && git push --tags

TODO:

• Document org structure
• Add inline code samples / docs to Storybook

Known issues:

• https://github.com/chakra-ui/chakra-ui/issues/4652
• https://github.com/chakra-ui/chakra-ui/issues/4647
• https://github.com/chakra-ui/chakra-ui/issues/4741