Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Lace UI Toolkit library

License

NotificationsYou must be signed in to change notification settings

input-output-hk/lace-ui-toolkit

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Quality Gate StatusSecurity RatingVulnerabilities

Getting Started

Prerequisites

First, install the dependencies:

yarn install

Development

Storybook is used for development, run it using command:

yarn storybook

or

yarn dev

For more details checkCONTRIBUTING.md guide.

File naming convention

FILESPURPOSE
*.index.tsDefines the public API to be imported by other modules
*.component.tsxDefines the UI component
*.css.tsVanilla-extract CSS files
*.stories.tsStorybook files
*.data.tsDefines the data/types representation of the UI component or application logic
*.context.tsDefines the UI component's inner state to be consumed by nested children
*.hooks.tsDefines methods to manipulate the context state

Working with Storybook

Stories format

TypePURPOSE
OverviewDumb components presented as 1:1 parity from Figma file
InteractionsUsed for testing and to simulate user interactions
ControlsInteract with a component's arguments dynamically without needing to code

Docs

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;

Working with Icons

Adding a new or updating existing icons require:

  1. Add svg icon tosrc/icons/raw directory.
  2. Runbuild:icons command (It will generate tsx components insrc/icons directory and updatesrc/icons/index.ts)
yarn build:icons
  1. 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';

Link Lace UI Toolkit for local development / testing

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.

To useyalc follow steps described bellow:

  1. Install dependencies:yarn install
  2. Build projectLace UI Toolkit:yarn build
  3. Publish to yalc:yalc publish
  4. LinkLace UI Toolkit to dependent project:yalc link @input-output-hk/lace-ui-toolkit
  5. Update package in dependant project after each published build:yalc update @input-output-hk/lace-ui-toolkit
  6. Once development done unlinkLace UI Toolkit:yalc remove @input-output-hk/lace-ui-toolkit

To effectively useyalc follow steps described bellow:

  1. Install dependencies:yarn install
  2. 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.
  3. Navigate to dependent project and linkLace UI Toolkit:yalc link @input-output-hk/lace-ui-toolkit
  4. Once development done unlinkLace UI Toolkit:yalc remove @input-output-hk/lace-ui-toolkit

Useful yalc commands

  • yalc link @input-output-hk/lace-ui-toolkit: LinkLace UI Toolkit with other projects
  • yalc remove @input-output-hk/lace-ui-toolkit: UnlinkLace UI Toolkit from other projects
  • yalc installations show @input-output-hk/lace-ui-toolkit: List all projects linking toLace UI Toolkit
  • yalc publish: Publish package to yalc's registry
  • yalc update @input-output-hk/lace-ui-toolkit: UpdateLace UI Toolkit in dependent project
  • yalc push oryalc publish --push: Publish package to yalc's registry and auto update dependant projects

About

Lace UI Toolkit library

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors16

Languages


[8]ページ先頭

©2009-2025 Movatter.jp