@lapidist/garnet

Opinionated and flexible design system by Lapidist.

Overview

Welcome to the @lapidist/garnet monorepo, the hub for the Garnet Design System. This repository is organised into various packages and applications to streamline development, documentation, and maintenance.

Table of Contents

• Applications
  • Storybook
  • Website
• Packages
  • eslint-config-garnet
  • react
  • styles
  • tokens
  • types
• Development

Applications

Storybook

Explore and interact with our design system components using Storybook.

Getting Started

npm run storybook

Website

The public documentation website built with Next.js.

Getting Started

npm run dev

Packages

eslint-config-garnet

Our custom ESLint configuration for maintaining code quality.

Usage

{
  "extends": "@lapidist/garnet"
}

react

The React implementation of the Garnet Design System, including components, hooks, and helpers.

Installation

npm install @lapidist/garnet-react

Usage

import { App } from '@lapidist/garnet-react';
import '@lapidist/garnet-react/style.css';

export default function Root() {
    return <App>Hello world!</App>;
}

styles

CSS modules defining the styles for our design system components.

tokens

Design tokens generated with style-dictionary.

types

Shared TypeScript types, including props for components.

---

Development

Command	Description
npm run build	Build projects with Lerna and Nx to ensure correct dependencies and build order.
npm run lint	Run ESLint for code style, syntax, and issue identification, enforcing coding standards.
npm run fix	Automatically fix common linting issues using ESLint's auto-fixing capabilities.
npm run watch	Continuously monitor projects for changes, triggering recompilation when necessary.
npm run snapshots	Update and regenerate snapshot tests.
npm run typecheck	Execute TypeScript type checker to catch type-related issues.
npm run commit	Create a new commit with Commitizen.