1.1.2 โข Published 2 years ago
@workweeklunchui/wwl-core-ui v1.1.2
๐จ 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:
yarn add --dev @chakra-ui/cli
ornpm i -D @chakra-ui/cli
- Add a
postinstall
script to yourpackage.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:
You should never import from Chakra directly.import { Checkbox } from '@workweeklunch/wwl-core-ui';
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