@whoisryosuke/oat-milk-design
v0.1.0
Published
Readme
Oat Milk Design
Design system and UI components for prototyping.
Getting Started
- Install the library:
yarn add @whoisryosuke/oat-milk-design - Wrap your app in the
<AppWrapper>component. - Add the fonts to your app wherever appropriate (ideally in the
<head>of the HTML):
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2family=Hubot+Sans:ital,wght@0,200..900;1,200..900&IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>- Use the components!:
import {Button} from '@whoisryosuke/oat-milk-design'
Icons
Use Box Icons from react-icons:
yarn add react-iconsCheck the stories for examples of using icons from that library (like changing the size).
The colors should sync with the component since the icon library uses currentcolor, so as long as the parent component's color is what you need, it'll look right.
Development
Preview the code
- Clone this project:
git clone [email protected]:whoisryosuke/oat-milk-design.git - Install dependencies:
yarn - Start the dev server:
yarn storybook
Open the app in your web browser: http://localhost:4200/
Write code
Write code in src/ and export any components, functions, etc in the index.ts.
Release
Make sure to run
yarn buildlocally to check for any build errors (usually types).
Using GitHub:
Or manually:
- Bump version in
package.json yarn buildnpm publish- Create new release on GitHub and manually upload build.