Buwipro UI Library

Una librería de componentes React moderna y personalizable para construir interfaces de usuario.

Requisitos

• Node.js 20.x o superior
• React 18.x
• Styled Components 6.x

Instalación

npm install @bewe/buwipro
# o
yarn add @bewe/buwipro

Uso Básico

import React from 'react';
import { AtomButtonGeneral, LibraryProvider } from '@bewe/buwipro';

const App = () => {
  return (
    <LibraryProvider>
      <AtomButtonGeneral>Click me</AtomButtonGeneral>
    </LibraryProvider>
  );
};

export default App;

Storybook

Para agilizar el proceso de desarrollo de componentes y proporcionar una interfaz visual, utilizamos Storybook. A continuación se detallan los pasos para crear y organizar componentes en Storybook:

1. Define el Tipo de Componente:

   • Antes de crear un componente, es importante determinar si será un átomo, molécula u organismo.

2. Crea la Carpeta del Componente:

   • Navega a components/(tipo de componente) y crea una carpeta con el nombre del componente.
   • Ejemplo: components/atoms/Button

3. Archivos del Componente:

   • Dentro de la carpeta del componente, crea:
     • styles.ts: Estilos del componente usando styled-components
     • index.tsx: Lógica y estructura del componente

4. Crea la Historia del Componente:

   • En la carpeta stories/(tipo de componente) crea el archivo de historia
   • Ejemplo: Button.stories.ts

5. Ejecuta el proyecto Storybook:

   npm run storybook

Build

npm run build

Publicar

npm publish --access=public

Tema

Tema por Defecto

La librería viene con un tema predeterminado:

import React from "react";
import { AtomTextArea } from "@bewe/buwipro";

const App = () => {
  return <AtomTextArea placeholder="Escribe tu mensaje..." />;
};

export default App;

Tema Personalizado

Puedes personalizar el tema usando LibraryProvider:

import React from "react";
import { LibraryProvider, AtomTextArea } from "@bewe/buwipro";

const customTheme = {
  colors: {
    primary: "#FF5733",
    secondary: "#FFC300",
    background: "#f5f5f5",
    grey300: "#d3d3d3",
    // Agrega otras propiedades de color según necesites
  },
};

const App = () => {
  return (
    <LibraryProvider theme={customTheme}>
      <AtomTextArea placeholder="Textarea con tema personalizado" />
    </LibraryProvider>
  );
};

export default App;

Estructura del Tema

Tu objeto de tema personalizado debe coincidir con esta estructura:

export type Colors = {
  primary: string;
  primary100: string;
  primary200: string;
  primary300: string;
  secondary: string;
  secondary100: string;
  secondary200: string;
  grey: string;
  grey100: string;
  grey200: string;
  grey300: string;
  light: string;
  black: string;
  white: string;
  background: string;
  alert: string;
};

Uso Avanzado

Uso con un ThemeProvider Existente

import React from "react";
import { ThemeProvider } from "styled-components";
import { LibraryProvider, AtomTextArea } from "@bewe/buwipro";

const existingTheme = {
  colors: {
    primary: "#00bcd4",
    secondary: "#8bc34a",
    // Define otros colores según necesites
  },
};

const App = () => {
  return (
    <ThemeProvider theme={existingTheme}>
      <LibraryProvider>
        <AtomTextArea placeholder="Escribe tu mensaje..." />
      </LibraryProvider>
    </ThemeProvider>
  );
};

export default App;

Componentes Disponibles

Atoms

• AtomButtonGeneral - Botón principal
• AtomButtonGhost - Botón fantasma
• AtomButtonIcon - Botón con icono
• AtomButtonOutline - Botón con borde
• AtomButtonSelect - Botón seleccionable
• AtomCard - Tarjeta básica
• AtomCardMobile - Tarjeta para móvil
• AtomCheckBox - Casilla de verificación
• AtomInput - Campo de entrada
• AtomInputForm - Campo de formulario
• AtomInputAction - Campo de entrada con acción
• AtomOptions - Opciones
• AtomRadioButton - Botón de radio
• AtomSelect - Selector
• AtomTextArea - Área de texto
• AtomToggle - Interruptor
• AtomLoader - Cargador
• AtomDivisor - Divisor
• AtomDocumentItem - Item de documento

Molecules

• MoleculeAlertMobile - Alerta móvil
• MoleculeCardEditInfo - Tarjeta de edición
• MoleculeCardMobile - Tarjeta móvil
• MoleculeExcelDownload - Descarga de Excel
• MoleculeHeader - Encabezado
• MoleculeInput - Input compuesto
• MoleculeInputPhone - Input para teléfono
• MoleculeMessage - Mensaje
• MoleculeSelect - Selector compuesto
• MoleculeTextArea - Área de texto compuesta
• MoleculeUploadDocument - Carga de documentos

Tokens

• TokenError - Mensaje de error
• TokenLabel - Etiqueta
• TokenLink - Enlace
• TokenParagraph - Párrafo
• TokenSubTitle - Subtítulo
• TokenText - Texto
• TokenTitle - Título