@datacamp/toppings v0.0.24

Toppings SPIKE

This repo is a spike only

Storybook

A React component library for DataCamp's higher level UI elements, built with Waffles and Emotion.

Overview

Toppings is a collection of reusable React components that follow DataCamp's design system. The library provides accessible, consistent UI elements that can be used across DataCamp's web applications.

Atomic design

Toppings follows the Atomic Design methodology, which structures UI components into five hierarchical levels: Atoms, Molecules, Organisms, Templates, and Pages.

• Atoms are the fundamental building blocks, such as buttons, icons, and typography styles. Should mainly come from Waffles, see the readme
• Molecules combine atoms into more complex elements like input fields with labels.
• Organisms are reusable groups of molecules, such as navigation bars or card components.

Note that pages and templates are not in scope due to this primarily being a component library.

By adhering to this approach, Toppings ensures modularity, reusability, and scalability across DataCamp’s applications.

Features

• Accessible Components: Built with accessibility in mind, including screen reader support
• TypeScript Support: Fully typed components for better developer experience
• Emotion Styling: CSS-in-JS styling using Emotion
• Storybook Documentation: Interactive component documentation
• Unit Tests: Comprehensive test coverage using Jest and React Testing Library

Installation

# Using yarn
yarn add @datacamp/toppings

# Using npm
npm install @datacamp/toppings

Development

Prerequisites

• Node.js (version >= 16)
• Yarn or npm

Setup

1. Clone the repository:

   git clone git@github.com:datacamp-engineering/toppings.git
   cd toppings

2. Install dependencies:

   yarn install

3. Start Storybook:

   yarn storybook

Testing

We use Jest and React Testing Library for testing. Run tests with:

yarn test