Design-system-tracktor NPM

Tracktor design system

A design system React library

The library is based on MUI Core

Features

📦 React - v18+ with Hooks
⚡️ Vite - Next Generation Frontend Tooling
📐 ESLint - Code analyzer
🚀 Vitest - A Vite native unit test framework. It's fast!
🛠️ React Testing Library - React DOM testing utilities
💅 Emotion CSS - Writing css styles with JavaScript
🐶 Husky - Modern native git hooks made easy

Installation

yarn add design-system-tracktor

Usage

Provide the theme

Put <ThemeProvider> around your application. Custom theme can be provided as prop theme={YOUR_CUSTOM_THEME}

import { Button, ThemeProvider } from "design-system-tracktor";

const App = () => (
  <ThemeProvider>
    <Button>Text</Button>
  </ThemeProvider>
);

export default App;

Docs

Storybook

Start storybook

yarn storybook

Or you can start storybook with docker

docker-compose up

Open http://localhost:6006 to view it in the browser.

Local installation

Clone the repository and install dependencies

yarn install

Available Scripts

In the project directory, you can run:

`yarn dev`

Runs the app in the development mode.\ Open http://localhost:5173 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

`yarn build`

Builds the library for production to the dist folder.\ It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

See the section about deployment for more information.