Quick Change

All-in-one API for design systems

Features

• Hot swap
• Easy to use
• Light weight
  • Small foot print (~12kB)

Goal

• Less HTML/CSS

Non-Goal

• Perfomance
• WAI-ARIA
• Production(DON'T TRY THIS AT OFFICE)

Installation

코어 모듈과 원하는 디자인 시스템을 설치하세요.

npm install @quick-change/core
npm install @quick-change/antd @quick-change/bootstrap

Usage

아래처럼 코드를 작성하세요.

import { DesignSystemContext } from '@quick-change/core'

import * as Antd from '@quick-change/antd'
import * as Bootstrap from '@quick-change/bootstrap'

const catalog = {
  'Ant Design': Antd,
  'Bootstrap': Bootstrap
}

<DesignSystemContext catalog={catalog} name="Ant Design">
  <Button>Hello World!</Button>
</DesignSystemContext>

Documentation

Storybook

Build from source

Prerequisites

• Node
• pnpm

npm install -g pnpm

Setup

pnpm install
pnpm build
pnpm storybook

Clean-up

pnpm clean

Roadmap

DONE

• Integrated API
• Hot swap

TODO

• Lazy Loading
• A11Y
• Cross-Platform (Vue, Angular, Svelte, Solid)
• Transpiler
• Wireframe tool

Related works

• Drop-in switcher for previewing minimal CSS frameworks
• The Component Gallery
• Open UI
• Component Encyclopedia
• Component Driven User Interfaces

License

MIT © sarojaba