0.0.46 • Published 2 years ago

@sayaww/nomi-mono v0.0.46

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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.

0.0.46

2 years ago

0.0.40

2 years ago

0.0.41

2 years ago

0.0.42

2 years ago

0.0.43

2 years ago

0.0.44

2 years ago

0.0.45

2 years ago

0.0.37

2 years ago

0.0.38

2 years ago

0.0.39

2 years ago

0.0.30

2 years ago

0.0.31

2 years ago

0.0.33

2 years ago

0.0.34

2 years ago

0.0.35

2 years ago

0.0.27

2 years ago

0.0.28

2 years ago

0.0.26

2 years ago

0.0.25

2 years ago

0.0.24

2 years ago

0.0.23

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.16

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.1

2 years ago