react-acomponentes

Librería de componentes basados en react para proyectos de Antares

Documentación

Documentación de react-acomponentes (Click aquí)

Invitame a un café

Motivación

Este tipo de componentes se inicia con la idea de crear una librería 100% en español, con la finalidad de que cualquier persona "latinoamericana" pueda utilizarlos sin tener que leer la documentación en inglés y tratar de entender que hacer con los componentes mientras escriben código, al mismo tiempo trabajar con componentes que no necesitan mucha configuración y menos código a la hora de implementar funciones complejas como por ejemplo filtrar, ordenar, generar hojas de cálculo, etc.

:warning: Atención: La versión actual necesita afinarse más, ya que no soy un expeto en frontend, pero agradecería cualquier sugerencia para hacer de este proyecto una librería potente para latinoamerica.

:info: Nota: Este proyecto se ira actualizando conforme se vayan necesitando más componentes, por lo que se recomienda estar pendiente de las actualizaciones.

Instalación

npm

npm install react-acomponentes

yarn

yarn add react-acomponentes

Comandos de uso

Este comando empaqueta el proyecto

yarn compilar

Este comando abre la documentación para una previsualización

yarn des

Este comando empaqueta la documentación para subir a un sitio

yarn doc

Uso

Componentes

import { ABoton } from 'react-acomponentes';

const App = () => (
  <ABoton>
    Hola mundo
  </ABoton>
);

Dependencias del proyecto

| Dependencia | Link Documentación | Propósito | Tipo dependencia | |:----|:----|:----|:----| | react | https://es.reactjs.org/docs/getting-started.html | Biblioteca de componentes para construir interfaces | Dependencia compartida | | react-dom | https://es.reactjs.org/docs/react-dom.html | Renderiza componentes React en un navegador | Dependencia compartida | | prop-types | https://www.npmjs.com/package/prop-types | Validación de props para componentes React | Producción | | typescript | https://www.typescriptlang.org/docs/ | Lenguaje de programación tipado | Desarrollo | | @babel/core | https://babeljs.io/docs/en/babel-core | Transpilador de código JavaScript | Desarrollo | | @babel/preset-env | https://babeljs.io/docs/en/babel-preset-env | Configuración de Babel para la última versión de JS | Desarrollo | | @babel/preset-react | https://babeljs.io/docs/en/babel-preset-react | Configuración de Babel para React | Desarrollo | | @babel/preset-typescript | https://babeljs.io/docs/en/babel-preset-typescript | Configuración de Babel para TypeScript | Desarrollo | | rollup | https://rollupjs.org/guide/en/ | Empaquetador de módulos JavaScript | Desarrollo | | @rollup/plugin-commonjs | https://github.com/rollup/plugins/tree/master/packages/commonjs | Convertidor de módulos CommonJS a ES6 | Desarrollo | | @rollup/plugin-node-resolve | https://github.com/rollup/plugins/tree/master/packages/node-resolve | Resuelve módulos npm en Rollup | Desarrollo | | @rollup/plugin-typescript | https://github.com/rollup/plugins/tree/master/packages/typescript | Compila TypeScript con Rollup | Desarrollo | | @storybook/addon-essentials | https://storybook.js.org/docs/react/essentials/introduction | Addon para Storybook que incluye varios addons esenciales | Desarrollo | | @storybook/addon-interactions | https://storybook.js.org/docs/react/essentials/actions | Addon para Storybook que permite crear interacciones con componentes | Desarrollo | | @storybook/addon-links | https://storybook.js.org/docs/react/essentials/navigation | Addon para Storybook que permite crear links entre componentes | Desarrollo | | @storybook/blocks | https://storybook.js.org/docs/react/api/blocks | Componentes predefinidos para Storybook | Desarrollo | | @storybook/react | https://storybook.js.org/docs/react/get-started/introduction | Herramienta de desarrollo para componentes React | Desarrollo | | @storybook/react-webpack5 | https://storybook.js.org/docs/react/configure/webpack5 | Configuración para usar Webpack 5 con Storybook | Desarrollo | | @storybook/testing-library | https://www.npmjs.com/package/@storybook/testing-library | Utilidades de testing para componentes Storybook | Desarrollo | | @types/react | https://www.npmjs.com/package/@types/react | Tipos de TypeScript para React | Desarrollo | | postcss-import | https://www.npmjs.com/package/postcss-import | Convierte todos los CSS en un solo archivo | Desarrollo |