0.1.2 • Published 3 years ago
@luchiarq/components v0.1.2
Aplicación y gestión de productividad
Metodologia Atomic Design
- Atomo: Componente compuesto por un unico atomo, pudiendo tener o no etiquetas HTML o simplemente estar compuesto por etiquetas HTML.
- Molecula: Componente compuesto por mas de un atomo distinto.
Libreria de componentes:
Configuracion de storybook
- comenzar proyecto con npx sb init
- elegir proyecto de react
- correr proyecto con npm run storybook / yarn storybook
Diseñar tokens
- Crear archivo tokens/index.js
- Agregar colores de "brand" y "decisions"
- Agregar estilos globales
Atomos y Moleculas
Atomos:
- Button
- Heading
- Icon
- Input
Moleculas:
- ButonIcon
- DropDown
Layout:
- Spacer
NPM scripts:
- Se creo script para leer el archivo tokens/index.js y tranformar los tokens en custom properties en un archivo css (styles/tokens.css)
NPM comandos:
comando: "npm run storybook" / "yarn storybook"
- Levanta servidor local de storybook, donde se prodran observar todos los componentes de la aplicacion en sus diferentes versiones.
npm run build-tokens / yarn build-tokens:
- Ejecuta el script script/build-tokens.js