chernobyl-react-ui v1.1.3
Chernobyl React UI
Este proyecto contiene el KIT de UI de la cΓ©lula Chernobyl, este KIT emplea componentes para libreria REACT, esta librerΓa tiene una particularidad que es configurable para cada proyecto en el cual se va a utilizar.
Comenzando π
Las siguientes instrucciones te permitirΓ‘n hacer uso de esta librerΓa de forma correcta e instrucciones para hacer uso o expansiΓ³n de esta.
Estructura de proyecto
chernobyl-react-ui
βββ jest.config.js
βββ package-lock.json
βββ package.json
βββ README.md
βββ src
| βββ common
| | βββ colors
| | | βββ background-ctrl.tsx
| | | βββ background-for-components-ctrl.tsx
| | | βββ hover-background-ctrl.tsx
| | | βββ text-ctrl.tsx
| | βββ index.tsx
| | βββ sizes
| | βββ font-ctrl.tsx
| βββ components
| | βββ Buttons
| | | βββ Button
| | | βββ Button.stories.tsx
| | | βββ Button.test.tsx
| | | βββ Button.tsx
| | | βββ index.tsx
| | | βββ styled
| | | βββ StyledButton.tsx
| | βββ index.tsx
| βββ index.tsx
| βββ theme
| | βββ Default
| | | βββ themeDefault.tsx
| | βββ index.tsx
| | βββ Interfaces
| | βββ GenericInterface.tsx
| | βββ ModeInterface.tsx
| | βββ SizesInterface.tsx
| | βββ ThemeInterface.tsx
| βββ utils
| βββ styled-components.ts
| βββ validation.tsx
βββ tsconfig.json
βββ tslint.json
InstalaciΓ³n de la libreria en Proyecto REACT π§
npm install styled-components@4.4.1
npm install chernobyl-react-ui
Advertencia: -> La libreria de chernobyl-react-ui utiliza styled-components en su versiΓ³n "4.4.1" por ende el Proyecto REACT debe tener esta misma versiΓ³n para su uso.
InstalaciΓ³n de packetes e iniciaciΓ³n de Storybook π§
npm install
npm run storybook
http://localhost:6006 -> Storybook disponibiliza esta ruta para acceder a la vista previa de los componentes que contiene.
Como agregar componentes nuevos π οΈ
Para agregar componentes nuevos debes seguir la misma estructura de los otros componentes.
Ejemplo: -> Button
./src/components <- En esta carpeta encontraras todos los componentes.
src\components
βββ Buttons
| βββ Button
| βββ Button.stories.tsx
| βββ Button.test.tsx
| βββ Button.tsx
| βββ index.tsx
| βββ styled
| βββ StyledButton.tsx
βββ index.tsx
Generar Componentes Y Publicarlos:
npm run compile
npm version major | minor | patch
npm publish
- npm run compile -> Compila todos los archivos de la libreria y GENERA la carpeta BUILD
- npm version -> Como funciona esto?
- npm publish -> Toma la carpeta BUILD ya generada y "ESTA CARPETA" es la que se publica en NPM
Actualizar el repositorio despues de agregar algun componente:
npm run build-storybook
git status
git add .
git commit -m "mensaje" <- favor describir el commit
git push
Autor βοΈ
- Sergio AndrΓ©s Orellana Roa - Edhine - Desarrollador Full Stack - Github
Pendientes π
- Generar componentes con CLI.
- Test de componentes.
RetroalimentaciΓ³n
Todo comentario y correcciones, no dudes en mencionarlas π’, ayudas a mejorar este proyecto β€.
β¨οΈ con β€οΈ por Edhine π
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago