Skip to content

Latest commit

 

History

History
59 lines (39 loc) · 1.72 KB

CONTRIBUTING.md

File metadata and controls

59 lines (39 loc) · 1.72 KB
Raw

Dracula UI

Here's an overview of the architecture and some useful commands.

Architecture Overview

  • Each component consists of a React component implementation, a CSS stylesheet, and a Figma component.
  • Components are stateless and do not ship with JavaScript behavior.
  • All styling is done in CSS via CSS variables for maximum reuse and accessibility.

Folder Structure

  • src/styles: Contains the CSS styles for all components, typography, and colors.
  • src/components: Contains the React implementation for each component.
  • src/base: Contains the base spacing and color helpers.

Component Design Guidelines

  • Please don't include manual style changes in React Components.
  • Keep HTML and CSS simple as to not generate long and complex HTML trees.
  • Use CSS and especially CSS variables to compose your design, so the final result is as inclusive as possible to a wide range of users.

Useful Commands and Getting Started

Getting started:

$ yarn install
$ yarn docs
$ yarn dev

Running Tests

You can run all tests with the following command: Component tests will be executed with React and Enzyme, which compares rendered components to pre-existing snapshots.

$ yarn test

Generating Documentation

You can update component documentation in one of two ways:

  • a) Update TSDoc definitions that live alongside components
  • b) Update src/<component>/__tests__/<component>.test.tsx, which will generate examples / docs for the main docs website
$ yarn docs # generates examples, documentation, and snapshots for each component

Accessing Docs

You can access the documentation portal by running the following command, then visiting [http://localhost:3000] on your browser.

$ yarn dev