- Notifications
You must be signed in to change notification settings - Fork1
input-output-hk/lace-ui-toolkit
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
- yarn v3.8.2. Followinstallation guide
First, install the dependencies:
yarn install
Storybook is used for development, run it using command:
yarn storybook
or
yarn dev
For more details checkCONTRIBUTING.md guide.
FILES | PURPOSE |
---|---|
*.index.ts | Defines the public API to be imported by other modules |
*.component.tsx | Defines the UI component |
*.css.ts | Vanilla-extract CSS files |
*.stories.ts | Storybook files |
*.data.ts | Defines the data/types representation of the UI component or application logic |
*.context.ts | Defines the UI component's inner state to be consumed by nested children |
*.hooks.ts | Defines methods to manipulate the context state |
Type | PURPOSE |
---|---|
Overview | Dumb components presented as 1:1 parity from Figma file |
Interactions | Used for testing and to simulate user interactions |
Controls | Interact with a component's arguments dynamically without needing to code |
Make sure to exportcomponents
andsubcomponents
so they are displayed in theDocs
tab.
exportdefault{title:'List & tables/Assets table',component:AssetsTable,subcomponents:{ TokenProfile, TokenAmount, MarketPrice,}}asMeta;
Adding a new or updating existing icons require:
- Add svg icon to
src/icons/raw
directory. - Run
build:icons
command (It will generate tsx components insrc/icons
directory and updatesrc/icons/index.ts
)
yarn build:icons
- Commit all added and modified files.
To use icon in this project import it using lookup location@icons/
import AdaComponent from '@icons/AdaComponents';
To use icon in dependent project import it like this
import { AdaComponent } from '@input-output-hk/lace-ui-toolkit';
We recommend usingyalc for linking a package from your local development environment to another project. This is particularly helpful when developing multiple packages that depend on each other and you want to test changes in real time without needing to publish the package to a registry.
Note
Yalc is simple local npm registry which works across package managers. Learn more aboutyalc
If you work with projects using different package managers like npm, yarn, or pnpm the recommended approach is to use yalc, as it work across different package managers. You can easily link yarn based repository likeLace UI Toolkit to npm, yarn, or pnpm repositories in the same time.
- Install dependencies:
yarn install
- Build projectLace UI Toolkit:
yarn build
- Publish to yalc:
yalc publish
- LinkLace UI Toolkit to dependent project:
yalc link @input-output-hk/lace-ui-toolkit
- Update package in dependant project after each published build:
yalc update @input-output-hk/lace-ui-toolkit
- Once development done unlinkLace UI Toolkit:
yalc remove @input-output-hk/lace-ui-toolkit
- Install dependencies:
yarn install
- Watch for changes and build, publish and push updates:
yarn watch:pub
yarn watch:pub
uses commandsyarn build --watch
andyalc push
.yalc push
is alias foryalc publish --push
. Push will auto updateLace UI Toolkit in all linked projects.
- Navigate to dependent project and linkLace UI Toolkit:
yalc link @input-output-hk/lace-ui-toolkit
- Once development done unlinkLace UI Toolkit:
yalc remove @input-output-hk/lace-ui-toolkit
yalc link @input-output-hk/lace-ui-toolkit
: LinkLace UI Toolkit with other projectsyalc remove @input-output-hk/lace-ui-toolkit
: UnlinkLace UI Toolkit from other projectsyalc installations show @input-output-hk/lace-ui-toolkit
: List all projects linking toLace UI Toolkityalc publish
: Publish package to yalc's registryyalc update @input-output-hk/lace-ui-toolkit
: UpdateLace UI Toolkit in dependent projectyalc push
oryalc publish --push
: Publish package to yalc's registry and auto update dependant projects
About
Lace UI Toolkit library
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.