Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paqtcom/graphite-design-system
Library of components for the Graphite Design System
https://github.com/paqtcom/graphite-design-system
design-system javascript react typescript vue webcomponents
Last synced: 7 days ago
JSON representation
Library of components for the Graphite Design System
- Host: GitHub
- URL: https://github.com/paqtcom/graphite-design-system
- Owner: paqtcom
- License: mit
- Created: 2020-08-26T11:54:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T13:09:45.000Z (5 months ago)
- Last Synced: 2025-01-16T12:32:10.615Z (14 days ago)
- Topics: design-system, javascript, react, typescript, vue, webcomponents
- Language: TypeScript
- Homepage: https://graphitedesignsystem.com
- Size: 13 MB
- Stars: 25
- Watchers: 3
- Forks: 6
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
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`](https://www.npmjs.com/package/@graphiteds/core) | [](https://www.npmjs.com/package/@graphiteds/core) | 
| [`README.md`](packages/core/README.md) |
| **React** | [`@graphiteds/react`](https://www.npmjs.com/package/@graphiteds/react) | [](https://www.npmjs.com/package/@graphiteds/react) | 
| [`README.md`](packages/react/README.md) |
| **Vue 3** | [`@graphiteds/vue`](https://www.npmjs.com/package/@graphiteds/vue) | [](https://www.npmjs.com/package/@graphiteds/vue) | 
| [`README.md`](packages/vue/README.md) |
### Getting Started
Start using our design system by following our quick [Getting Started guide](https://graphitedesignsystem.com/getting-started/developers/#quick-start).
We would love to hear from you! If you have any feedback or run into issues using our design system, please file an [issue](https://github.com/paqtcom/graphite-design-system/issues/new) on this repository.
### Development
To start building the components using [Stencil](https://stenciljs.com/), 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`.
```bash
git clone https://github.com/paqtcom/graphite-design-system.git graphite-design-system
cd graphite-design-system
```
Run these commands to setup this project:
```bash
npm install
npm run bootstrap
```
Navigate to the [core package](packages/core/) and run `npm start`:
```bash
cd packages/core
npm start
```
Now you can develop the components.
Need help? Check out the [Stencil docs](https://stenciljs.com/docs/my-first-component).
## Automated tests
Run this command in the [core package](packages/core/) to test the core components:
```bash
npm run test
```
Or run this command in the root to test the core components and all the framework wrappers.
## Release a new version
To create a new npm release, you have to be a member of the graphiteds organization and be logged in to npm in your local terminal (npm login). Your local terminal should also have permission to push to GitHub.
Switch to the `master` branch.
Go to the root of the repo in your terminal.
Run these commands:
```bash
npm run bootstrap
npm run build
```
This will generate all necessary builds in the packages (core components and framework wrappers).
If successful, you can then publish all the packages to npm (with lerna):
```bash
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).