@symlab/react-ui

REACT-UI

Componentes customizados

El objetivo de este repositorio con componentes customizados es facilitar el desarrollo de aplicaciones web/movil en un corto periodo de tiempo.

Tabla de Contenido

1. Requisitos
2. Instalación
3. Componentes
   • Componentes de navegación
   • Componentes de tabla
4. Uso
   • Configurar tailwind
   • Paleta de colores
   • Configurar la paleta de colores
   • Componente Loading
   • Componente logo
5. Release Actual

Requisitos

Esta librería está desarrollada con tailwind, para su correcto funcionamiento es necesario tener instalada esta librería.

   npm install tailwindcss autoprefixer postcss-cli

Instalación

Usando NPM:

npm i --save @symlab/react-ui 

Usando Yarn

yarn add @symlab/react-ui 

(back to top)

Componentes

A continuación se mencionan los componentes existentes en la actualidad:

nombre	componente	soporte formulario	soporte ligth/dark	atributos
Autocomplete	<Autocomplete/>	✅	✅	value, setValue, options, label?, disabled?, icon?, id, hasError?, errorText?, helperText?, placeholder?, onForm?, onInputChange?, className?, variant?
Button	<Button></Button>	✅	✅	className?, children?, disabled?, icon?, iconPosition?, onClick?, rounded?, size?, type?, variant?, atributos del elemento button
Checkbox	<Checkbox></Checkbox>	✅	✅	id, key?, className?, textPosition?, sizes?, variant?, disabled?, required?, rounded?, checked?, value?, atributos del elemento input
Chip	<Chip></Chip>	❌	✅	key?, className?, icon?, iconPosition?, iconSize?, variant?, children
Dropdown	<Dropdown></Dropdown>	❌	✅	className?, srLabel?, children, label?, icon?
DropdownItem	<DropdownItem></DropdownItem>	❌	✅	className?, link, disabled?, as?, children?, onClick?
HelperText	<HelperText></HelperText>	❌	✅	id, children, className?, hasError?
Input	<Input/>	✅	✅	id, type?, className?, hasError?, isValid?, showIconValid?, , atributos del elemento input
Label	<Label/>	❌	✅	text, id, disabled?, required?, hint?, hidden?, atributos del elemento label
ListBox	<Listbox/>	✅	✅	value (labelField, data), setValue, options, label?, disabled?, id, hasError?, errorText?, helperText?, placeholder?, onForm?, optionClassName?
Loading	<Loading></Loading>	❌	✅	key?, className?, children?
Modal	<Modal></Modal>	❌	✅	showModal, setShowModal, onClose?, id?, children?, className?
PasswordField	<PasswordField/>	✅	✅	label, id, className?, helperText?, hideLabel?, hasError?, isValid?, errorText?, hint?, ref?, validation? (minLength?, lowerCase?, upperCase?, number?, specialCharacter?), showValidation?, message?, atributos del elemento input
Select	<Select/>	✅	✅	id, label?, children?, className?, hasError?, isValid?, options, value, auxOption?, atributos del elemento select
Switch	<Switch/>	✅	✅	id, key?, className?, size?, hasError?, variant?, disabled?, toggle?, onClick, iconLeft?, iconRight?, atributos del elemento button
TextArea	<Textarea></Textarea>	✅	✅	id, hideLabel?, className?, hasError?, isValid?, children?, minRows?, errorText?, helperText?, atributos del elemento textArea
TextField	<TextField></TextField>	✅	✅	label?, id, type?, className?, helperText?, hideLabel?, hasError?, isValid?, errorText?, hint?, ref?, atributos del elemento input
Timeline	<Timeline></Timeline>	❌	✅	id?, className?, icon?, items (title, date?, description?, icon?)

(back to top)

Componentes de navegación

A continuación se mencionan los componentes existentes en la actualidad:

nombre	componente	soporte ligth/dark	atributos
Logo	<Logo></Logo>	✅	src, className?, classNameMobile?, href?, alt?, title?, srcMobile?, altMobile?
NavBar	<NavBar></NavBar>	✅	logo, leftItems?, rightItems?, itemsMobile? (label, link, current?)
SubMenu	<SubMenu></SubMenu>	✅	className?, items?(name, link, className?, current?, icon?), as?, currentPath?, classNameItem?, userData? (img, lastSesion, name, label?)
TopMenu	<TopMenu/>	✅	className?, items(label, link, className', current?), as?, currentPath?
TopMenuItem	<TopMenuItem/>	✅	label, link, className', current?

(back to top)

Componentes de tabla

A continuación se mencionan los componentes existentes en la actualidad con soporte de formulario:

nombre	componente	soporte ligth/dark	atributos
Table	<Table></Table>	✅	Mas información abajo
TableFilterRow	<TableFilterRow></TableFilterRow>	✅	logopropsInput? (type?, className?, placeholder?), column
EditableCell	<EditableCell></EditableCell>	✅	getValue, row, column, recordValue, editable?)
IndeterminateCheckbox	<IndeterminateCheckbox/>	✅	className?, indeterminate?, atributos del elemento input

Atributos del componente Table

 
    export interface TableProps {
      className?
      hasError?
      Padding?
      Size?
      title?
      columns
      data;
      localization?: {
         body?: {
          emptyDataSourceMessage?
        };
      };
      options?:{
          sorting?
          filtering?
          footer?
          hiddenColumns?
          skipPageReset?
          getSelection?
      }
    }

(back to top)

Uso

Configurar tailwind

Para configurar nuestra librería en su proyecto, debemos dirigirnos al archivo de configuración de tailwind tailwind.config

En caso de no contar con este archivo, debemos crearlo

   npx tailwindcss init

Obtendremos lo siguiente

   module.exports = {
      content: [],
      theme: {
        extend: {},
      },
      plugins: [],
   }

Dentro de esta configuración básica que nos genera tailwind, agregaremos las siguientes líneas

   module.exports = {
      content: ['./node_modules/@symlab/react-ui/dist/**/*.{vue,js,ts,jsx,tsx}'],
      theme: {
        extend: {},
      },
      plugins: [require('@tailwindcss/forms'), require('./node_modules/@symlab/react-ui/dist/tailwind.config.cjs')],
   }

Listo, ahora ya podemos trabajar con los componentes.

Paleta de colores

Los componentes se desarrollaron en base a colores predefinidos, para conocer cuáles son, existe el componente <Pallete />

Importe el componente

   import { Pallete } from "@symlab/react-ui";
   function Component() {
        return (
            <>
                <Pallete />
            </>
        );
   }
   export default Component;

(back to top)

Configurar la paleta de colores

Para realizar un cambio customizado en los colores, es necesario fijarse en la paleta de colores su brand (todos con prefijo sym-).

Por ejemplo, el brand sym-primary, su valor por defecto es el color primario de symlab. Si lo deseamos cambiar, es necesario usar este brand y sustituir su valor.

Esta configuración es posible dentro del archivo de configuración de tailwind.

Sigue estos pasos:

1. Ir al archivo docs/tailwind.config.cjs

2. Dentro de esa configuración, buscaremos el atributo extend

   theme: {
     extend: {
    ....

3. Sobreescribir el valor del brand sym-primary

   module.exports = {
      content: ['./node_modules/@symlab/react-ui/dist/**/*.{vue,js,ts,jsx,tsx}'],
      theme: {
        extend: {
          colors: {
            'sym-primary': '#9474ff',   // <-- actualizamos el valor del brand sym-primary
          }
        },
      },
      plugins: [require('@tailwindcss/forms'), require('./node_modules/@symlab/react-ui/dist/tailwind.config.cjs')],
   }

Listo!

(back to top)

Componente Loading

Importaremos el componente desde nuestro archivo

   import { Loading } from '@symlab/react-ui';

Mandaremos por el children lo que se mostrará dentro del Loading

   import { Loading } from '@symlab/react-ui';

   export default function LoadingPage() {
      return (
        <>
          <Loading>
            <svg>
              ....
            </svg>
          </Loading>
        </>
      );
   }

Si lo que buscamos es cambiar el fondo de nuestro loading a un color rojo, lo podremos hacer de la siguiente manera:

Agregaremos el atributo className en Loading

<Loading className="bg-red-500">
  Nuevo loading
</Loading>

   import { Loading } from '@symlab/react-ui';

   export default function LoadingPage() {
      return (
        <>
          <Loading className="bg-red-500"> // <-- atributo className 
            <svg>
              ....
            </svg>
          </Loading>
        </>
      );
   }

Y listo!

(back to top)

Componente logo

Este componente se encuentra dentro de los componentes de navegación, lo usaremos dentro del componente <Navbar /> para mayor ilustración

1. Importar los componentes

      import { Logo, NavBar} from '@symlab/react-ui';

2. Trabajaremos con Navbar para mostrar la barra de navegación y dentro de sus atributos enviaremos al logo

      import { Logo, NavBar} from '@symlab/react-ui';
      
      const LogoElement = () => (
        <Logo src="https://symlab.io/foot-icon.svg" alt="SymLab" href="/" title="Go to home page" />
      );
   
      export default function Navbar() {
         return (
           <>
             <NavBar
                logo={<LogoElement />}
              >
           </>
         );
      }

Y listo!

(back to top)

Release Actual

• v0.0.7