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

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 

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?) |

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? |

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

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;

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!

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!

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!

Release Actual

• v0.0.7