amelia-ux

Instalación amelia-ux

Para realizar la instalación de la librería amelia-ux puedes utilizar npm. Abre tu terminal y ejecuta el siguiente comando:

npm install amelia-ux

Componentes

Theme

El componente Theme ofrece la posibilidad de aplicar un tema a la interfaz. Puede ser 'dark' o 'light'.

El proveedor recibe las siguientes propiedades:

• children: (ReactNode) Elementos de React que consumen el contexto del Theme.
• theme: (string) Opcional. Especifica el tema a aplicar. Si no se proporciona, se utilizará el tema del sistema.

Este componente envuelve el contenido de la aplicación y permite aplicar un tema específico a todos los componentes hijos.

Ejemplo de uso

import { ThemeProvider } from 'amelia-ux'

<ThemeProvider theme="dark">
    <App />
</ThemeProvider>

useTheme()

El hook useTheme() proporciona acceso al tema actual de la aplicación y a una función para alternar entre los temas.

Proporciona dos datos:

• theme: (string) Representa el tema actual de la aplicación.
• toggleTheme(): (función) Una función que permite alternar entre los temas.

Este hook es útil para componentes que necesitan adaptarse al tema actual de la aplicación o para proporcionar a los usuarios la capacidad de cambiar entre temas claros y oscuros, por ejemplo.

Ejemplo de uso

import { useTheme, Button } from 'amelia-ux'

export default App = () => {
    const {theme, toggleTheme} = useTheme()
    
    return <div style={{backgroundColor: `${theme} === "dark ? #000 : #fff`}}>
        <Button 
            type="accent" 
            width="large" 
            onClick={toggleTheme}> 
            Toggle theme 
        </Button>    
    </div>
}

Toast

El componente Toast permite mostrar alertas en la interfaz.

El proveedor recibe las siguientes propiedades:

• children: (ReactNode) Elementos que consumen el contexto del Toast.
• position: (string) Opcional. Especifica la posición en la que se mostrarán las alertas. Si no se proporciona, la posición predeterminada es 'top-right'. Puede ser uno de los siguientes valores:
  • top-right
  • top-left
  • bottom-right
  • bottom-left

Este componente envuelve el contenido de la aplicación y permite mostrar alertas en diferentes posiciones de la interfaz.

Ejemplo de uso

import { Toast } from 'amelia-ux'

<Toast position="top-right">
    <App />
</Toast>

useToast()

El hook useToast() proporciona una función para crear alertas en la aplicación. Recibe un objeto con dos propiedades:

• type: (string) Indica el tipo de alerta a mostrar. Puede ser uno de los siguientes valores:
  • successinfo
  • warning
  • error
• message: (string) El mensaje que se mostrará en la alerta.

Este hook devuelve una función que permite crear una alerta con el tipo y el mensaje especificados.

Ejemplo de uso

import { useToast, Button, useTheme } from 'amelia-ux'

export default App = () => {
    const { theme } = useTheme()
    const { toast } = useToast()
    
    return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
        <Button 
            type="accent" 
            width="large" 
            onClick={() => 
            toast(
                {
                    type: "info", 
                    message: "My first toast with amelia-ux"
                })
            }> 
            Toggle theme 
        </Button>    
    </div>
}

Typography

El componente Typography estandariza los textos de la aplicación.

Recibe las siguientes propiedades:

• as: (string) El tipo de etiqueta HTML a utilizar para renderizar el texto, por ejemplo, "h1", "p", "span", etc.
• fontSize: (string) El tamaño de la letra. Puede tomar los siguientes valores:
  • xs
  • sm
  • md
  • lg
  • xl
• fontWeight: (string) El grosor de la letra. Puede tomar los siguientes valores:
  • light
  • normal
  • semi-bold
  • bold
• children: (ReactNode) El texto a mostrar dentro del componente Typography.

Ejemplo de uso

import { Typography } from 'amelia-ux'

export default App = () => {
    const { theme } = useTheme()
    
    return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
        <Typography as="h1" fontSize="xl" fontWeight="bold"> Welcome to amelia-ux !!!</Typography>  
    </div>
}

Navbar

El componente Navbar permite agregar una barra de navegación a la interfaz.

El componente consta de:

• Navbar: (Componente principal) Este es el componente padre que envuelve todo el contenido de la barra de navegación.
• NavbarLeft: (Componente interno) Contiene el contenido a mostrar en el lado izquierdo de la barra de navegación. Este componente se renderizará en el lado izquierdo de la barra de navegación.
• NavbarRight: (Componente interno) Contiene el contenido a mostrar en el lado derecho de la barra de navegación. Este componente se renderizará en el lado derecho de la barra de navegación.

Todos los componentes, Navbar, NavbarLeft y NavbarRight, deben recibir un "children". Esto significa que cualquier contenido que se desee mostrar dentro de la barra de navegación debe ser proporcionado como children de estos componentes.

Ejemplo de uso

import { Navbar, NavbarLeft, NavbarRight } from 'amelia-ux'

export default App = () => {
    const { theme } = useTheme()
    
    return <div style={{ backgroundColor: theme === "dark" ? '#000' : '#fff' }}>
        <Navbar>
            <NavbarLeft>
                Este contenido se muestra a la izquierda
            </NavbarLeft>
            <NavbarRight>
                Este contenido se muestra a la derecha
            </NavbarRight>
        </Navbar>
    </div>
}

Sidebar

El componente Sidebar permite agregar una barra lateral a la interfaz.

El componente consta de:

• Sidebar: (Componente principal) Este es el componente padre que envuelve todo el contenido de la barra lateral.
• SidebarTop: (Componente interno) Contiene el contenido a mostrar en la parte superior de la barra lateral. Este componente se renderizará en la parte superior de la barra lateral.
• SidebarBottom: (Componente interno) Contiene el contenido a mostrar en la parte inferior de la barra lateral. Este componente se renderizará en la parte inferior de la barra lateral.

Todos los componentes, Sidebar, SidebarTop y SidebarBottom, deben recibir un "children". Esto significa que cualquier contenido que se desee mostrar dentro de la barra lateral debe ser proporcionado como children de estos componentes.

Ejemplo de uso

import { Sidebar, SidebarTop, SidebarBottom } from 'amelia-ux'

export default App = () => {
    const { theme } = useTheme()
    
    return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
        <Sidebar>
            <SidebarTop>
                Este contenido se muestra en la parte superior
            </SidebarTop>
            <SidebarBottom>
                Este contenido se muestra en la parte inferior
            </SidebarBottom>
        </Sidebar>
    </div>
}

Input

El componente Input permite agregar campos de entrada a la aplicación.

El componente Input hereda todas las props de la etiqueta input de HTML, lo que significa que puede aceptar cualquier prop válida de un input estándar, como value, onChange, placeholder, etc.

Además, el componente Input puede recibir opcionalmente la siguiente propiedad:

• width (opcional): (string) Indica el ancho del campo de entrada. Puede tomar los siguientes valores:
  • small
  • medium
  • large
  • w-full

Ejemplo de uso

import { useState } from 'react'
import { Input } from 'amelia-ux'

export default App = () => {
    const { theme } = useTheme()
    const [name, setName] = useState<string>("")
    
    return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
        <Input type="text" placeholder="Write your name !!!" value={name} onChange={(e) => setName(e.target.name)} />
    </div>
}

Button

El componente Button permite agregar botones a la aplicación.

El componente Button hereda todas las props de la etiqueta div, lo que significa que puede aceptar cualquier prop válida de un div estándar de HTML, como className, style, onClick, etc.

Además, el componente Button recibe de forma obligatoria las siguientes propiedades:

• size: (string) Indica el tamaño del botón. Puede tomar los siguientes valores:
  • small
  • medium
  • large
  • w-full
• type: (string) Indica el tipo de botón a utilizar. Puede tomar los siguientes valores:
  • dark
  • light
  • accent
  • danger

Ejemplo de uso

import { useState } from 'react'
import { Input, Button } from 'amelia-ux'

export default App = () => {
    const { theme } = useTheme()
    const [name, setName] = useState<string>("")

    const greeting = () => {
        alert(`Welcome ${name}`)
    }
    
    return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
        <Input type="text" placeholder="Write your name !!!" value={name} onChange={(e) => setName(e.target.name)} />
        <Button type="accent" size="w-full" onClick={greeting}> Greeting {name} </Button>
    </div>
}

Icon

El componente Icon permite renderizar imágenes de manera estandarizada en la aplicación.

Recibe las siguientes propiedades:

• width (opcional): (string) Indica el tamaño de la imagen.
• image: (string) La URL o ruta de la imagen a renderizar.
• defaultImage (opcional): (string) Por defecto, la librería proporciona algunas imágenes predefinidas.

Es importante tener en cuenta que si se utiliza la propiedad "image", no se puede utilizar la propiedad "defaultImage", y viceversa.

Ejemplo de uso

import { Navbar, NavbarLeft, NavbarRight, Icon } from 'amelia-ux'
// Images
import Logo from 'assets/logo.png'
import Logout from 'assets/logo.png'

export default App = () => {
    const { theme } = useTheme()
    
    return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
        <Navbar>
            <NavbarLeft>
                <Icon width={100} image={Logo} />
            </NavbarLeft>
            <NavbarRight>
                <Icon width={35} image={Logout} />
            </NavbarRight>
        </Navbar>
    </div>
}

Tag

El componente Tag proporciona una interfaz para representar etiquetas en una aplicación. Estas etiquetas pueden ser utilizadas para categorizar o identificar elementos dentro de la interfaz.

El componente Tag acepta las siguientes propiedades:

• tag: (string) Especifica el mensaje a renderizar dentro del tag.
• selected (opcional): (boolean) Indica si el tag está seleccionado o no. Esto puede ser útil para resaltar visualmente ciertas etiquetas dentro de una lista de tags.

Ejemplo de uso

import { useState } from 'react'
import { Tag } from 'amelia-ux'

const App = () => {
    const [selectedTag, setSelectedTag] = useState<string>("")

    const handleTagClick = (tag: string) => {
        setSelectedTag(tag)
    }

    return (
        <div>
            <Tag tag="Tag 1" selected={selectedTag === "Tag 1"} onClick={() => handleTagClick("Tag 1")} />
            <Tag tag="Tag 2" selected={selectedTag === "Tag 2"} onClick={() => handleTagClick("Tag 2")} />
            <Tag tag="Tag 3" selected={selectedTag === "Tag 3"} onClick={() => handleTagClick("Tag 3")} />
        </div>
    )
}

Modal

El componente Modal permite mostrar ventanas modales en la interfaz de usuario.

El componente consta de tres partes principales:

• Modal: (Componente principal) Este es el componente padre que envuelve todo el contenido de la ventana modal.
• ModalHeader: (Componente interno) Este componente contiene el encabezado de la ventana modal, como el título u otros controles.
• ModalBody: (Componente interno) Contiene el contenido principal de la ventana modal, como formularios, texto descriptivo u otros elementos.
• ModalFooter: (Componente interno) Contiene elementos adicionales en la parte inferior de la ventana modal, como botones de acción o información adicional.

Cada uno de estos componentes es opcional y puede ser utilizado según las necesidades de la aplicación. Además, el componente Modal puede aceptar propiedades adicionales para controlar su comportamiento, como la visibilidad (isOpen), el cierre (onClose), la superposición (overlay), la clase (className) y los estilos (style).

Ejemplo de uso

import { Modal, ModalHeader, ModalBody, ModalFooter } from 'amelia-ux'

const App = () => {
    return (
        <Modal isOpen={true} onClose={() => console.log("Cerrar ventana modal")} overlay={true}>
            <ModalHeader>
                <h2>Título de la ventana modal</h2>
            </ModalHeader>
            <ModalBody>
                <p>Contenido principal de la ventana modal.</p>
            </ModalBody>
            <ModalFooter>
                <button onClick={() => console.log("Aceptar")}>Aceptar</button>
                <button onClick={() => console.log("Cancelar")}>Cancelar</button>
            </ModalFooter>
        </Modal>
    )
}

Table

El componente Table permite crear contenedores en forma de tabla.

El componente consta de tres partes principales:

• Table: (Componente principal) Este componente crea el contenedor principal en forma de tabla. Recibe la posición (fixed, float-left o float-right).
• TableUpContent: (Componente interno) Este componente ocupa el 50% del ancho del componente Table y contiene contenido para la parte superior de la tabla. Puede contener los componentes internos TableHeader, TableBody y TableFooter.
• TableDownContent: (Componente interno) Este componente también ocupa el 50% del ancho del componente Table y contiene contenido para la parte inferior de la tabla. También puede contener los componentes internos TableHeader, TableBody y TableFooter.

Los componentes internos TableHeader, TableBody y TableFooter ocupan respectivamente el 10%, 60% y 30% del espacio disponible dentro de TableUpContent o TableDownContent. Estos son los valores por defecto y se pueden modificar utilizando la propiedad flex-basis en los estilos.

Ejemplo de uso

import { Table, TableUpContent, TableDownContent, TableHeader, TableBody, TableFooter } from 'amelia-ux'

const App = () => {
    return (
        <Table position="fixed">
            <TableUpContent style={{ maxHeight: '70%' }}>
                <TableHeader> Encabezado </TableHeader>
                <TableBody> Cuerpo </TableBody>
                <TableFooter> Pie de página </TableFooter>
            </TableUpContent>
            <TableDownContent style={{ maxHeight: '30%' }}>
                <TableHeader style={{ flexBasis: '20%' }}> Encabezado </TableHeader>
                <TableBody style={{ flexBasis: '50%' }}> Cuerpo </TableBody>
                <TableFooter style={{ flexBasis: '30%' }}> Pie de página </TableFooter>
            </TableDownContent>
        </Table>
    )
}