Installation

pnpm i @sayaww/nomi-mono"

Usage

Set up styles and fonts in your root file:

import '@sayaww/nomi-mono/style';
import '@fontsource/inter/400.css'; // optional
import '@fontsource/inter/500.css'; // optional
import '@fontsource/inter/700.css'; // optional

Import components:

import { Button } from '@sayaww/nomi-mono';

With storybook

import '../src/style.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/700.css';

Development

turbo dev
#http://localhost:6006

Import themes

• In Tokens Studio in Figma, select light theme
• Export from Figma, choose Tools > Export > single file
• Uncheck all token set
• check include parent key
• save as Light.json and put into figma-output folder, then repeat for dark theme
• put all files into figma-output folder
• run turbo build-token
• Access theme in src/themes/tokens.json
• Migrate tokens manually to tailwind.config.cjs
  • See /tokens/tokens-transformed-[dark | light].json

Developing UI

Adding a new component

Use shadcn/ui to add components you want.

Or

1. Duplicate from "Template" folder in src/components with the component name.
2. Add the component name to src/components/index.tsx.

Working on UI + your own project

If you are developing UI and other preoject at the same time, you'll need to let Tailwind knows when to compile your new class names.

tailwind.config

content: [
		"./index.html",
		"./*.mdx",
		"./src/components/*.{js,ts,jsx,tsx,mdx}",
		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
		"../perp-onboarding/app/**/*.{js,ts,jsx,tsx,mdx}",
		"../otc-maker-ui/app/**/*.{js,ts,jsx,tsx,mdx}",
        // add new files to watch here
],

package.json

		"dev": "tsup src/components/index.tsx --format esm,cjs --dts --watch src --watch ../perp-onboarding/app --watch <your path>  & storybook dev -p 6006",

Publish

turbo ship

Publish storybook to Chromatic

turbo chromatic

Embed Story in website

Get url from the top right corner of a story.