Buwipro NPM | npm.io

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:

Define el Tipo de Componente:
- Antes de crear un componente, es importante determinar si será un átomo, molécula u organismo.
Crea la Carpeta del Componente:
- Navega a components/(tipo de componente) y crea una carpeta con el nombre del componente.
- Ejemplo: components/atoms/Button
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
Crea la Historia del Componente:
- En la carpeta stories/(tipo de componente) crea el archivo de historia
- Ejemplo: Button.stories.ts
Ejecuta el proyecto Storybook:
```
npm run storybook
```

Ejemplo

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;