React UI

Tabla de Contenido

1. Acerca del Proyecto
   • Desarrollado con
   • Estructura del repositorio
2. Instalacion
3. Uso
   • Ejecutar el programa
4. Componentes
5. Estructura general de los componentes
Templates
• Login
• Register
• Recovery page
• Change password
6. Paleta de colores
   • Cambio en la paleta de colores
7. Cambio del logo
8. Cambio del loading
9. Release Actual
10. Contacto

Acerca del Proyecto

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

Puedes trabajar con estos componentes descargando esta librería desde npm.

Desarrollado con

Esta aplicación ha sido desarrollada utilizando las siguientes librerías y frameworks

Estructura del repositorio

El proyecto está compuesto por dos workspaces:

• docs/ :Contiene la documentación y uso de los componentes creados.

• library/ :Es el workspace que se encarga de crear y reconstruir los componentes customizados de symlab.

Instalacion

1. Clonar el repositorio:

   git clone https://github.com/Symmetrics-Lab/react-ui
   cd react-ui

2. Instale las dependencias NPM del repositorio

   npm install

(back to top)

Uso

Ejecutar el programa

cd react-ui/docs
npm run dev

El sistema esta listo! Ingresa al Dashboard en tu navegador, lo podrá revisar en modo light y dark.

Componentes

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

• Autocomplete
• Button
• Checkbox
• Chip
• Dropdown
• DropdownItem
• HelperText
• Input
• Label
• ListBox
• Loading
• Modal
• PasswordField
• Select
• TextArea
• TextField
• Timeline
• Navigation
  • Logo
  • NavBar
  • SubMenu
  • TopMenu
  • TopMenuItem
  • TopMenuMobile
  • TopMenuMobileItem
• Datatable
  • IndeterminateCheckbox
  • TableFilterRow
  • Table
  • EditableCell

Los componentes están desarrollados para ser usados con tema light y dark.

(back to top)

Estructura general de los componentes

Algunos componentes comparten atributos en común, variant, size, iconLeft, icon, iconPosition, rounded, isLoading, className, etc.

En cambio los componentes de formulario tendrán atributos adicionales: onForm, control, hasError, errorText, etc, e incluso sus atributos originales.

(back to top)

Template

Existen templates que hacen uso de los componentes básicos de formulario.

Estos templates están desarrollados con mocks, de esta manera es mucho mas sencillo ver la configuración necesaria para su uso en un caso real.

Para conocer el template y el comportamiento de los componentes customizados, es necesario tener corriendo el workspace docs.

cd react-ui/docs
npm run dev

Abrir el navegador con el siguiente enlace http://localhost:5173/

Login

Daremos click en Login desde el menú del dashboard o ingresando al siguiente enlace http://localhost:5173/login.

Register

Daremos click en Register desde el menú del dashboard o ingresando al siguiente enlace http://localhost:5173/register.

Recovery page

Daremos click en Login desde el menú del dashboard o ingresando al siguiente enlace http://localhost:5173/login y click en la opción de Forgot password? o ngresando al siguiente enlace http://localhost:5173/recovery-page.

Change password

Daremos click en el ícono de perfil desde el menú del dashboard, click en Profile y en la opción que nos muestra en la parte izquiera Password o ingresando al siguiente enlace http://localhost:5173/profile/password.

Listo, podemos hacer las pruebas necesarias de su comportamiento!

(back to top)

Paleta de colores

Para conocer las paleta de colores, es necesario tener corriendo el workspace docs.

cd react-ui/docs
npm run dev

Abrir el navegador con el siguiente enlace http://localhost:5173/

Seleccionar Pallete desde el menú del dashboard o ingresando al siguiente enlace http://localhost:5173/palette

Listo, allí tendremos el listado de colores configurados para los componentes.

(back to top)

Cambio en 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.

Sigue estos pasos:

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

   Encontraremos un archivo de configuración de tailwind, al final de esta configuración notaremos que esta importada la configuración de tailwind usada para el workspace de library.

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

   theme: {
     extend: {
    ....

3. Sobreescribir el valor del brand sym-primary

   theme: {
     extend: {
       "sym-primary":'#0070FF'
          ....

Listo!

(back to top)

Cambio del Loading

1. Abriremos el archivo docs/src/components/LoadingPage.tsx

   Notaremos que el componente Loading de la librería contiene un children con un svg.

   <Loading>
     <svg>
     ...
     </svg>
   </Loading>

2. Reemplazar el children por el nuevo.

   <Loading>
     Nuevo loading
   </Loading>

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

3. Agregaremos el atributo className en Loading

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

Y listo!

(back to top)

Release Actual

• v0.0.6

Project Link: https://github.com/Symmetrics-Lab/react-ui