{"id":20800349,"url":"https://github.com/maxtermax/react-components","last_synced_at":"2026-05-09T07:05:47.813Z","repository":{"id":73891427,"uuid":"90928469","full_name":"Maxtermax/react-components","owner":"Maxtermax","description":null,"archived":false,"fork":false,"pushed_at":"2017-05-11T02:32:36.000Z","size":3764,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-07T00:35:00.008Z","etag":null,"topics":["react-components","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/Maxtermax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-11T02:29:19.000Z","updated_at":"2017-05-11T02:34:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"280a8bc4-8d82-43f6-955f-41efd9577702","html_url":"https://github.com/Maxtermax/react-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Maxtermax/react-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxtermax%2Freact-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxtermax%2Freact-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxtermax%2Freact-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxtermax%2Freact-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Maxtermax","download_url":"https://codeload.github.com/Maxtermax/react-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxtermax%2Freact-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32810382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react-components","reactjs"],"created_at":"2024-11-17T18:13:33.650Z","updated_at":"2026-05-09T07:05:47.798Z","avatar_url":"https://github.com/Maxtermax.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Componentes ##\n\n - Gestor de tareas\n - Arquitectura de carpetas y componentes\n - Componentes\n\n\nGestor de tareas\n-------\nEl gestor de tareas tiene como objetivo principal completar 2 tareas las cuales son:\n\n 1. Transpilar el codigo es2015 a ECMAScript 5.1 y a su vez a [React](https://facebook.github.io/react/)\n 2. Transpilar el codigo sass a codigo css utlizando el framework [Foundation css](http://foundation.zurb.com/)\n\n\nArquitectura de carpetas\n-------\nPara el frontend la arquitectura de carpetas consiste en 2 carpetas principales y un archivos los cuales son **js**  y **scss** las cuales estan representadas por este árbol de archivos:\n\n - src\n   - **scss**\n     - **components**\n       - componente.scss\n     -  app.scss\n\n   - **js**\n     - **xfolder**\n       - index.js\n     - **components**\n       - componente.jsx\n\n\n##AsideList ##\nRepresenta un elemento `\u003cAsideList/\u003e` el cual puede recibir como parámetros otros elementos que va contener dentro de si mismo mediante el **atributo data** el cual es un arreglo de elementos, ejemplo:\n\n    \u003cAsideList data={[\n        \u003cli\u003e\n          \u003ca href=\"/event/add\" target=\"_blank\"\u003e\n            \u003cButton style=\"btn-add\" icon={\u003ci className=\"material-icons\"\u003e\u0026#xE02E;\u003c/i\u003e} type=\"button\" data=\"CREAR EVENTO\"/\u003e\n          \u003c/a\u003e\n        \u003c/li\u003e,\n        \u003cli\u003e\n          \u003ca href=\"/event/add\" target=\"_blank\"\u003e\n            \u003cButton style=\"btn-list-add\" icon={\u003ci className=\"material-icons\"\u003e\u0026#xE03B;\u003c/i\u003e} type=\"button\" data=\"CREAR USUARIO\"/\u003e\n          \u003c/a\u003e\n        \u003c/li\u003e\n      ]}/\u003e\n\n**Nota:** Dichos elementos pueden ser de cualquier tipo no necesariamente botones\n\nAtributos | Requerido | Posibles valores               | Tipo\n--------  | --------- | ------------------------------ | ----\ndata      | true      | [], [ elmento1, elmento2, ...] | **Array**\n\n\n## Input ##\nRepresenta un elemento `\u003cInput /\u003e` y recibe los siguientes atributos:\n\nAtributos      | Requerido | Posibles valores              | Tipo\n------------   | --------- | ------------------------------| -----\nlift           | false     | Function                      | **Function**\ntype           | true      | \"text\", \"date\", \"password\"    | **String**\ntitle          | false    | \"lo que sea\"                  | **String**\nplaceholder    | false     | \"lo que sea\"                  | **String**\ndefaultMessage | false     | \"lo que sea\"                  | **String**\nvalidateMin    | false     | 0-9                           | **Number**\nvalidateMax    | false     | 0-9                           | **Number**\npattern        | true      | Function                      | **Function**\n\nDescripción de los atributos\n\n - **lift**: Es una función que se ejecuta cuando el componente se instancia, dicha funcion sirve para que un componente padre que este contendiendo a el **Input** pueda tener control sobre los cambios de estado y las propiedades sus elementos hijos.\n\n - **title**: Agrega el atributo titulo de html al input.\n\n - **placeholder**: Agrega el atributo placeholder de html al input.\n\n - **defaultMessage**: Es un mensaje que muestra el estado de validación del input, este atributo sirve para indicar al usuario que debe de escribir.\n\n - **validateMin**: Este atributo sirve para determinar cuantos caracteres va ha validar como mínimo el input, sirve para no dejar que el usuario escriba menos de, cierta cantidad de caracteres de lo contrario se dispara un mensaje de error.\n\n - **validateMax**:Este atributo sirve para determinar cuantos caracteres va ha validar como máximo el input, sirve para no dejar que el usuario escriba mas caracteres de los que queremos de lo contrario se dispara un mensaje de error.\n\n - **pattern**:  Sirve para establecer reglas de **validación** del **input**, es una funcion que recibe el valor del **input** y **retorna** un valor **booleano**\n\n\n## Button ##\n\nRepresenta un elemento `\u003cButton /\u003e` y recibe los siguientes atributos:\n\nAtributos      | Requerido | Posibles valores | Tipo\n------------   | --------- | ---------------- | -----------\nicon           | false     | [html i elmenent](https://material.io/icons/)  | **String**\ndisabled       | false     | true, false      | **Boolean**\nlift           | false     | Function         | **Function**\ntype           | true      | \"submit\", \"button\", \"reset\" | **String**\nonClick        | false     | Function         | Function\nstyle          | false     | \"**btn-load**\", \"**btn-loadmore**\", \"**btn-cancel**\", \"**btn-confirm**\", \"**btn-search**\", \"**btn-send**\" | **String**\n\n![btn](./images/button-icon.gif)\n\n - btn-load\n   - ![btn-load](./images/button-load.gif)\n\n - btn-loadmore\n   - ![btn-loadmore](./images/button-loadmore.gif)\n\n - btn-cancel\n   - ![btn-cancel](./images/button-cancel.gif)\n\n - btn-search\n   - ![btn-search](./images/button-search.png)\n\n - btn-send\n   - ![btn-send](./images/button-send.png)\n\n\n\n\n## PopUp ##\nRepresenta un elemento `\u003cPopUp /\u003e` y recibe los siguientes atributos:\n\n\nAtributos      | Requerido | Posibles valores              | Tipo\n------------   | --------- | ------------------------------| ----------\ndisplay        | false     | false, true                   | **Boolean**\nonConfirm      | true      | Function                      | **Function**\nonClose        | true      | Function                      | **Function**\nid             | true      | \"lo que sea!\"                 | **String**\nlift           | false     | Function                      | **Function**\nstyle          | true      | \"confirm\", \"error\", \"form\", \"warning\", \"load\"| **String**\n\nDescripción de los atributos:\n\n - **lift**:\n   - Es una función que se ejecuta cuando el componente se instancia, dicha funcion sirve para que un componente padre que este contendiendo a el **PopUp** pueda tener control sobre los cambios de estado y las propiedades sus elementos hijos.\n\n - **display**\n   - Es un atributo que sirve para abri o cerrar el popup al momento de montar el popup en el DOM.\n\n - **id**\n   - Selector de html.\n\n - **style**\n   - Atributo que determina el **estilo** del popup.\n\n - **onClose**\n   - Función que se ejecuta con se cierra el popup.\n\n - **onConfirm**\n   - Función que se ejecuta con se confirma el popup de tipo confirm.\n\n\n\n\n![PopUp](./images/popup-form.gif)\n\n - confirm\n   - ![Popup confirm](./images/popup-confirm.gif)\n\n - error\n   - ![Popup error](./images/popup-error.gif)\n\n - load\n   - ![Popup load](./images/popup-load.gif)\n\n - warning\n   - ![Popup warning](./images/popup-warning.gif)\n\n - form\n   - ![Popup form](./images/popup-formulario.gif)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxtermax%2Freact-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxtermax%2Freact-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxtermax%2Freact-components/lists"}