{"id":19444174,"url":"https://github.com/glrodasz/cero-components","last_synced_at":"2025-04-25T00:32:56.676Z","repository":{"id":40809890,"uuid":"298076313","full_name":"glrodasz/cero-components","owner":"glrodasz","description":"Component library for Cero a Producción Project","archived":false,"fork":false,"pushed_at":"2023-04-08T06:40:07.000Z","size":1319,"stargazers_count":52,"open_issues_count":0,"forks_count":23,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-24T03:11:51.994Z","etag":null,"topics":["atomic-design","components","design-system","design-tokens","react","storybook"],"latest_commit_sha":null,"homepage":"https://cero-components.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glrodasz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-23T19:40:33.000Z","updated_at":"2025-03-05T02:02:03.000Z","dependencies_parsed_at":"2023-01-21T16:02:11.930Z","dependency_job_id":null,"html_url":"https://github.com/glrodasz/cero-components","commit_stats":null,"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glrodasz%2Fcero-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glrodasz%2Fcero-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glrodasz%2Fcero-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glrodasz%2Fcero-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glrodasz","download_url":"https://codeload.github.com/glrodasz/cero-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250733585,"owners_count":21478396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","components","design-system","design-tokens","react","storybook"],"created_at":"2024-11-10T16:05:25.768Z","updated_at":"2025-04-25T00:32:56.307Z","avatar_url":"https://github.com/glrodasz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cero Components\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/glrodasz/cero-components/release.yml?branch=master)](https://github.com/glrodasz/cero-components/actions/workflows/release.yml) [![Codecov](https://img.shields.io/codecov/c/github/glrodasz/cero-components)](https://app.codecov.io/gh/glrodasz/cero-components) [![npm](https://img.shields.io/npm/v/@glrodasz/components)](https://www.npmjs.com/package/@glrodasz/components) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n [![storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://github.com/storybookjs/storybook)\n\n\n0️⃣ 🚀 **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.\n\n## The idea behind\nThe objective of these sessions is to provide an authentic developer experience where we delve into the myriad of decisions that a typical programmer makes on a daily basis, using JavaScript and other relevant tools. Participants will observe failed tests, code refactoring, and the utilization of search engines such as Google and StackOverflow. Additionally, participants can expect to enjoy the process and witness the challenges of naming variables and functions.\n\nCheck the video sessions of this product [here](https://glrz.me/youtube-cero) and follow me on [![Twitch Status](https://img.shields.io/twitch/status/guillermorodas?style=social)](https://glrz.me/stream)\n\n## Table of Contents\n\n- [Getting Started](#Getting-Started)\n- [Storybook](#Storybook)\n- [Running the project locally](#Running-the-project-locally)\n- [Running the tests](#Running-the-tests)\n- [Methodologies](#Methodologies)\n  - [Atomic Design](#Atomic-Design)\n  - [Molecules definition](#Molecules-definition)\n\n## Getting Started\n\n\u003e You must have `react and react-dom installed` those are peer dependencies of this project.\n\n#### 1. Installation\n\n_Using NPM_\n```bash\nnpm install @glrodasz/components\n```\n_Using Yarn_\n```bash\nyarn add @glrodasz/components\n```\n\n#### 2. Using the library\n\n- Import component\n\n```jsx\nimport { Icon, ButtonIcon } from '@glrodasz/components'\n```\n\n- Use component\n\n```js\n\u003cButtonIcon icon=\"arrowRight\" type=\"primary\"\u003e\n  Cowards Agreed\n\u003c/ButtonIcon\u003e\n```\n## Storybook\nCheck the rest of the available components in our [Storybook](https://cero-components.vercel.app)\n\n## Running the project locally\n\nFollow these steps to `start the project` in development\n\n1. Clone repository. `git clone https://github.com/glrodasz/cero-components.git`\n2. Install dependencies in the project folder running `yarn` or `npm install`\n3. Run Storybook with `yarn dev` or `npm run dev`, this command will build the tokens and open Storybook.\n\n## Running the tests\n\n1. Run `yarn run test`or `npm run test`\n2. To keep the tests running, run `yarn run test:watch`\n\n## Methodologies\n\n### Atomic Design\n\nFor this project will be using the methodology to create componentes called [Atomic Design](https://shop.bradfrost.com/products/atomic-design-ebook). The component library will be creating just **Atoms** and **Molecules** with the following definitions:\n\n#### Atoms definition\n\nFor this project an atom will be a component that is composed by an unique Atom with or without HTML tags, or just HTML tags.\n\n#### Molecules definition\n\nFor this project a molecule is a component that is composed by at least 2 different atoms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglrodasz%2Fcero-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglrodasz%2Fcero-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglrodasz%2Fcero-components/lists"}