Graphite Design System

Graphite is PAQT's white-label design system for digital products and experiences. The system consists of working code, design kits, and human interface guidelines.

This repository contains the working code of the components. The core components are Web Components, and we offer wrappers for React & Vue 3 for optimal DX.

Quickstart · Documentation

Packages

Project	Package	Version	Downloads	Links
Core	@graphiteds/core			README.md
React	@graphiteds/react			README.md
Vue 3	@graphiteds/vue			README.md

Getting Started

Start using our design system by following our quick Getting Started guide. We would love to hear from you! If you have any feedback or run into issues using our design system, please file an issue on this repository.

Development

To start building the components using Stencil, clone this repo to a new directory:

Make sure you are using Node v16 (with npm v8). If you use nvm, you can run nvm use.

git clone https://github.com/paqtcom/graphite-design-system.git graphite-design-system
cd graphite-design-system

Run these commands to setup this project:

npm install
npm run bootstrap

Navigate to the core package and run npm start:

cd packages/core
npm start

Now you can develop the components.

Need help? Check out the Stencil docs.

Automated tests

Run this command in the core package to test the core components:

npm run test

Or run this command in the root to test the core components and all the framework bindings.

Release a new version

Run this command in the root:

npm run build

This will generate all necessary builds in the packages (core components and framework bindings).

You can then publish all the packages to npm (with lerna):

npm run publish

This will ask what the next version should be, changes all the package.json's, creates a tag in the repo and publishes it to npm (if your terminal has GitHub and npm access).