jahama/cero-components

Component library for Cero a Producción Project

Cero a Producción — Components

0️⃣ 🚀 Cero a Producción is a project of live coding sessions where we develop a a productivity management app called RETO from the scratch to production.

The idea behind

The idea behind this sessions is to show a real developer experience where we explore every decision that a common programmer do in daily basis with JavaScript and other tools. You will see failing tests, refactors, Google and StackOverflow searchs, but also a lot of fun and the struggle of naming things.

Watch the project in live streaming in 🇪🇸 Spanish, every Tuesdays and Thursdays.

Table of Contents

• Getting Started
• Storybook
• Running the project locally
• Running the tests
• Methodologies
  • Atomic Design
  • Molecules definition

Getting Started

You must have react, react-dom and classnames installed thiose are peer dependencies of this project.

1. Installation

Using NPM

npm install @glrodasz/components

Using Yarn

yarn add @glrodasz/components

2. Using the library

• Import component

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

• Use component

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

Storybook

Check the rest of the available components in our Storybook

Running the project locally

Follow these steps to start the project in development

1. Clone repository. git clone https://github.com/glrodasz/cero-components.git
2. Install dependencies in the project folder running yarn or npm install
3. Run Storybook with yarn dev or npm run dev, this command will build the tokens and open Storybook.

Running the tests

1. Run yarn run testor `npm run test``
2. To keep the tests running, run yarn run test:watch

Methodologies

Atomic Design

For this project will be using the methodology to create componentes called Atomic Design. The component library will be creating just Atoms and Molecules with the following definitions:

Atoms definition

For this project an atom will be a component that is composed by an unique Atom with or without HTML tags, or just HTML tags.

Molecules definition

For this project a molecule is a component that is composed by at least 2 different atoms.