Cero a Producción — Components

0️⃣ 🚀 Cero a Producción is a series of live coding sessions where we build RETO, a productivity app, from scratch to production — real decisions, failing tests, refactors and all.

📺 YouTube · 🟣 Twitch (live in 🇪🇸 Spanish, Tuesdays to Fridays)

Part of the Cero a Producción project.

What this is

@glrodasz/components is the UI kit built for RETO, following Atomic Design. It is published to npm and consumed by cero-web.

npm · Storybook

Getting Started

react and react-dom are peer dependencies and must be installed in your project.

1. Installation

yarn add @glrodasz/components

2. Using the library

import { Icon, ButtonIcon } from '@glrodasz/components'

<ButtonIcon icon="arrowRight" type="primary">
  Cowards Agreed
</ButtonIcon>

Browse every available component in the Storybook.

Running the project locally

1. Clone the repository: git clone https://github.com/glrodasz/cero-components.git
2. Install dependencies in the project folder: yarn
3. Run yarn dev — builds the design tokens and starts Storybook at http://localhost:6006.

Running the tests

• yarn test — unit and snapshot tests.
• yarn test:watch — same, in watch mode.

Methodologies

Atomic Design

Components follow Atomic Design. This library only builds Atoms and Molecules:

• Atom — a component composed of a single atom with or without HTML tags, or just HTML tags.
• Molecule — a component composed of at least 2 different atoms.