# sp-front-design-lib > **sp-front-design-lib** es una biblioteca de diseño y estilos frontend altamente modular y reutilizable, creada para facilitar el desarrollo y mejorar la consistencia visual de aplicaciones web. Esta biblioteca contiene una amplia gama de componentes reut Latest version **1.1.2** (published 2023-07-21) · 0 weekly downloads ## Install ```sh npm install sp-front-design-lib pnpm add sp-front-design-lib yarn add sp-front-design-lib bun add sp-front-design-lib ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.2 | | Published | 2023-07-21 | | First published | 2023-07-20 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 20 | | Unpacked size | 242.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | nicolas.pr1992 | ## Links - npm: https://www.npmjs.com/package/sp-front-design-lib - npm.io page: https://npm.io/package/sp-front-design-lib ## Dependencies (20) - [jest](https://npm.io/package/jest.md) ^29.5.0 - [react](https://npm.io/package/react.md) ^18.2.0 - [@mdi/js](https://npm.io/package/@mdi/js.md) ^7.2.96 - [ts-jest](https://npm.io/package/ts-jest.md) ^29.1.1 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [@mdi/react](https://npm.io/package/@mdi/react.md) ^1.6.1 - [babel-jest](https://npm.io/package/babel-jest.md) ^29.6.1 - [typescript](https://npm.io/package/typescript.md) ^4.9.5 - [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4 - [@types/jest](https://npm.io/package/@types/jest.md) ^29.5.2 - [@types/node](https://npm.io/package/@types/node.md) ^20.3.3 - [@types/react](https://npm.io/package/@types/react.md) ^18.2.14 - [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.6 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.22.5 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^14.0.0 - [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^29.6.1 - [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.22.5 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^14.4.3 ## Recent versions - 1.1.2 (latest) — 2023-07-21 - 1.1.1 — 2023-07-21 - 1.1.0 — 2023-07-21 - 1.0.9 — 2023-07-21 - 1.0.8 — 2023-07-21 - 1.0.7 — 2023-07-21 - 1.0.6 — 2023-07-21 - 1.0.5 — 2023-07-21 - 1.0.4 — 2023-07-21 - 1.0.3 — 2023-07-20 - 1.0.2 — 2023-07-20 - 1.0.1 — 2023-07-20 - 1.0.0 — 2023-07-20 ## README # sp-front-design-lib **sp-front-design-lib** es una biblioteca de diseño y estilos frontend altamente modular y reutilizable, creada para facilitar el desarrollo y mejorar la consistencia visual de aplicaciones web. Esta biblioteca contiene una amplia gama de componentes reutilizables, estilos predefinidos y variables configurables que pueden ser fácilmente integrados en cualquier proyecto. ### ### Estructura de carpetas ⚙️ --- ``` root |-- export | |-- components | | |-- Button | | | |-- Button.tsx | | | |-- Button.css | | | |-- index.ts | | |-- Select | | | |-- Select.tsx | | | |-- Select.css | | |-- index.ts | |-- styles | | |-- index.css | |--index.ts |-- test | |-- components | | |-- Button | | | |-- Button.test.js | | |-- Select | | | |-- Select.test.js ``` ### #### Organización de Componentes Dentro de la carpeta `export`, encontraremos otra carpeta llamada `components`, que es donde almacenaremos todos los componentes que conforman nuestro diseño. La idea detrás de esta estructura es que cada componente tenga su propio directorio, lo que hace que el código sea más modular y mantenible. Por ejemplo, si se cre un nuevo componente llamado `Button`, debe seguir estos pasos: - Crear una nueva carpeta dentro de `export/components` con el nombre `Button`. Dentro de la carpeta `Button`, se deben incluir los siguientes archivos: - `Button.tsx`: Aquí se implementaría la lógica del componente en formato **TSX**. - `Button.css`: Contendrá los estilos específicos del componente Button. - `index.ts`: En este archivo, se exportará el componente para que otros módulos puedan importarlo fácilmente. Dentro de la carpeta `test` encontraremos **TODOS** los test de los componentes/hooks/funciones etc de toda nuestra librería. Se debe `MANTENER LA MISMA ESTRUCTURA DE CARPETAS QUE SE ESTRUCTURÓ EN EXPORT`. ### #### Estilos Globales Los estilos globales, como `variables CSS` y `estilos` que se aplican en toda la aplicación, se encuentran en la carpeta `styles`. Aquí, se puede tener un archivo `index.css` que centralice todos los estilos globales utilizados en el proyecto, `variables CSS` etc. ### ### Estilos globales y variables CSS ✅ --- ### ``` :root { --font-family: 'Open Sans', sans-serif; /* Primary Colors */ --color-primary-white: #ffffff; --color-primary-gray-5: #f5f5f5; --color-primary-gray-4: #ebebeb; --color-primary-gray-3: #d0d0d0; --color-primary-gray-2: #6a6a6a; --color-primary-gray-1: #222222; --color-primary-black: #000000; --color-primary-light-blue: #d4f7ff; --color-primary-institutional-blue: #0097a9; --color-primary-dark-blue: #006274; /* Secondary Colors */ --color-secondary-light-red: #ffd4d4; --color-secondary-institutional-red: #da291c; --color-secondary-base-red: #b50000; --color-secondary-dark-red: #8b0000; /* State Colors */ --color-state-light-green: #cee6c6; --color-state-base-green: #0b7329; --color-state-light-orange: #fffce0; --color-state-base-orange: #fab400; } /* Typography Classes */ .title-1 { font-family: var(--font-family); font-weight: 600; font-size: 18px; line-height: 120%; letter-spacing: 0; } .body-1 { font-family: var(--font-family); font-weight: 600; font-size: 16px; line-height: 120%; letter-spacing: 0; } .body-2 { font-family: var(--font-family); font-weight: 400; font-size: 14px; line-height: 120%; letter-spacing: 0; } .body-2-bold { font-family: var(--font-family); font-weight: 600; font-size: 14px; line-height: 120%; letter-spacing: 0; } .body-3 { font-family: var(--font-family); font-weight: 400; font-size: 12px; line-height: 120%; letter-spacing: 0; } .acronyms { font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 120%; letter-spacing: 0; } ``` ### ### Componentes ✅ --- ### ### Table ### | Propiedad | Tipo | Descripción | | ----------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `headers` | `Header[]` | **Requerido** Array de encabezados de la **tabla** de Tipo **Header**. `ATENCIÓN`, el orden en cómo se construye el array va hacer el posicionamiento de las columnas resultantes en la Tabla. Ejemplo, el primer elemento de `Header[]` va a posicionarse en la **primer columna** de la Tabla, etc. El `Label` de cada item del **Header** debe coincidir con la key del array de `Data`. | | `data` | `T[]` | **Requerido** Array de datos para completar la **tabla**. Tipo genérico. Las keys de cada item del `Data` debe coincidir con las keys del array de `Header` de esta forma se sincronizarán de forma correcta. `ATENCIÓN` cada item debe tener un `ID` único para identificar cada uno. | | `itemsPerPage?` | `number / undefined` | **Opcional** Número de elementos por página.**Valor predeterminado: 5**. | | `showPagination?` | `boolean / undefined` | **Opcional** Indica si se muestra la paginación (**default false**) | | `alternateRowColor?` | `boolean / undefined` | **Opcional** Indica si se utiliza un color de fila alternando | | `classHeaderGrid?` | `CSSProperties / undefined` | **Opcional** Estilos **Grid CSS** para la fila de la cabezera de la tabla (ajusta las dimensiones de la fila de la cabecera). | | `classRowGrid?` | `CSSProperties / undefined` | **Opcional** Estilos **Grid CSS** para las filas de la tabla (ajusta las dimensiones de las filas). | | `height?` | `HeightValue / undefined` | **Opcional** Altura de la tabla **(px, em, rem, %, vh)** | | `footer?` | `ReactElement / undefined` | **Opcional** Componente para el pie de la tabla | | `filters?` | `Filter[] / undefined` | **Opcional** Array de Filter que contiene el nombre de la columna a quien va a ser aplicado el filtro y la función del filtro. El **nombre de la columna** según el tipo `Filter` para que filtro sea aplicado de forma correcta tiene que coindicir el nombre con el de la columna de quien va hacer aplicado. | | `ref?` | `React.Ref / undefined` | **Opcional** `ref` para tener acceso a funciones proporcionadas dentro de Table. Una de las funciones expuestas es `resetTable`. | | `bordered?` | `boolean / undefined` | **Opcional** `borde` para la tabla. | | `classCell?` | `CSSProperties / undefined` | **Opcional** estilos para las celdas de la tabla. | | `isLoading?` | `Boolean / undefined` | **Opcional** para mostrar un componente de cargando. `ATENCIÓN` si `isLoading` está marcada como **true** se debe proporcionar la **prop** `componentLoading`. | | `componentLoading?` | `ReactElement / undefined` | **Opcional** Componente personalizado para mostrar el cargando. | | `triggerData?` | `Boolean / undefined` | **Opcional** Detecta una acción que interactúa con la Tabla. Si es `true` mostrará la infomación de la Tabla, caso contrario muestra el componente que se proporcionó en `componentWithoutData`. | | `componentWithoutData?` | `ReactElement / undefined` | **Opcional** Componente personalizado cuando aún no se realizo ninguna acción para mostrar la información de la Tabla. La **acción** es cuando cambia `triggerData`. Si `TriggerData` está cómo `true` y se proporcionó un componente para un estado vacío se visualizará. | | `hoveredRow?` | `Boolean / undefined` | **Opcional** para agregar un borde a cada fila al hacer hover. | | `headerFixed?` | `Boolean / undefined` | **Opcional** para dejar fijado el header de la tabla al hacer scroll. | | `generateScroll?` | `Boolean / undefined` | **Opcional** para generar scroll en la tabla. | | `clickeableRow?` | `(row: T) => void / undefined` | **Opcional** función que al clickear sobre una fila se obtiene dicha `Row`. | | `selectableRows?` | `Boolean / undefined` | **Opcional** para seleccionar multiples filas. `Advertencia`, al colocar `selectableRows` como `true`, debe agregarse un campo extra al array de `Header[]` cómo: `{value: "Selectable", label: "Selectable"}`. **Recordar** que el orden en el array de **Header** importa ya que según el ordenamiento que tenga es cómo se construirá los **headers** de la tabla. | | `onSelectedRowsChange?` | `(rows: RowOnSelected) => (void) / undefined` | **Opcional** función que recibe las `rows` que fueron seleccionadas de la tabla. Funciona en conjunto con la prop `selectableRows`. | ### Props Header ### | Propiedad | Tipo | Descripción | | ------------------ | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `string` | Un **string** que se mostrará en el header de la **Tabla**. | | `label` | `keyof T` | **keyof T** tomará todas las keys del tipo T que se pase al tipo **Header** `ADVERTENCIA`: Deben coincidir el valor de **label** con la key de **Data** para que funcione correctamente sino arrojará un `Error de tipado`. | | `Tooltip?` | `(valueRow) => (ReactElement) / undefined` | **Opcional** recibe el valor del header de la columna y retorna un ReactElement. | `renderComponent?` | `(params: Render) => JSX.Element / undefined` | **Opcional** Una función que recibe parámetros tipo **Render** y retorna un JSX. `ADVERTENCIA` el objeto del header que contiene renderComponent debe tener un **label** y **value** con el valor de `"Action"` para que sepa que el componente que agrega es una acción en la **Tabla**. | | `valueGetter?` | `(row: T) => (string / ReactElement / number) / undefined` | **Opcional** Una función que recibe la **fila** actual. Se utiliza por ejemplo cuándo el valor de la celda es calculable. | | `ariaGetter?` | `(row: T) => (string) / undefined` | Opcional función que recibe la `Row`, se puede modificar la accesibilidad modificando el `aria-label` de la celda. | ### Interfaces ### ``` interface Header { value: string; label: keyof T | ActionRow; tooltip?: (valueRow: string) => React.ReactNode; renderComponent?: (params: Render) => JSX.Element; valueGetter?: (row: T) => string | React.ReactNode | number; ariaGetter?: (row: T) => string; } ``` ``` export interface Header { value: string; label: keyof T | ActionRow; tooltip?: (valueRow: string) => React.ReactNode; renderComponent?: (params: Render) => JSX.Element; valueGetter?: (row: T) => string | React.ReactNode | number; ariaGetter?: (row: T) => string; } export interface Render { row: T; rows: T[]; rowIndex: number; id: string; } export interface TableProps { headers: Header[]; data: T[]; bordered?: boolean; itemsPerPage?: number; showPagination?: boolean; alternateRowColor?: boolean; classHeaderGrid?: CSSProperties; classRowGrid?: CSSProperties; heigth?: HeightValue; footer?: React.ReactElement; filters?: Filter[]; classCell?: CSSProperties; selectableRows?: boolean; clickeableRow?: (row: T) => void; onSelectedRowsChange?: (rows: RowOnSelected) => void; isLoading?: boolean; triggerData?: boolean; generateScroll?: boolean; headerFixed?: boolean; componentLoading?: React.ReactElement; componentWithoutData?: React.ReactElement; hoveredRow?: boolean; } export interface RowOnSelected { selectedRows: T[]; } export interface PaginationResult { currentItems: T[]; totalPages: number; handlePageChange: (pageNumber: number) => void; currentPage: number; canGoPrevious: boolean; canGoNext: boolean; setCurrentItemsPerPage: Dispatch>; currentItemsPerPage: number; setCurrentPage: Dispatch>; } ``` ``` type HeightValue = ${number}px | ${number}% | ${number}vh | ${number}rem ${number}em` | "auto"; ``` ``` type Filter = { column: keyof T; filter: (...args: any[] | any) => any; }; ``` ### Código de ejemplo renderComponent, valueGetter, ariaGetter, Selectable, Tooltip ### ``` const data: TableData[] = [ { NamePropertyDataOne: "value NamePropertyDataOne", NamePropertyDataTwo: "value NamePropertyDataTwo", }, { NamePropertyDataOne: "value NamePropertyDataOne", NamePropertyDataTwo: "value NamePropertyDataTwo", }, ... ] const headers: Header[] = [ { value: "ValueColumnOne", label: "NamePropertyDataOne" }, { value: "ValueColumnTwo", label: "NamePropertyDataTwo", valueGetter: (row) => { return row.NamePropertyData === "" ? "-" : row.NamePropertyData; } }, { value: "Action", label: "Action", renderComponent: (params) => { return ( ); }, valueGetter: (row) => { return ( ); }, ariaGetter: (row) => { return `Value aria-label custom`; }, tooltip: (value) => { return (

{value}

 ); } }, { value: "Selectable", label: "Selectable" } ]; bordered heigth={"400px"} headers={headers} data={data} .... /> ``` ### Código de ejemplo Filters ### ``` const sortByProperty = ( data: T[], property: K ) => { const sortedData = [...data].sort((a, b) => { const valueA = (a[property] as string).toLowerCase(); const valueB = (b[property] as string).toLowerCase(); if (valueA < valueB) { return -1; } else if (valueA > valueB) { return 1; } else { return 0; } }); return sortedData; }; const filters: Filter[] = [ { column: "NamePropertyDataOne", filter: sortByProperty }, ]; bordered heigth={"400px"} headers={headers} data={data} filters={filters} .... /> ``` Aplicará el filtro `**sortByProperty**` a la columna `**NamePropertyDataOne**`, siempre colocando el mismo nombre que contiene la propiedad `label` del **Header**. ### Código de ejemplo para resetar valores por defecto de la Tabla ### ``` interface TableRef { resetTable: () => void | null; } const refTable = useRef(null); const handleOnFocusResetTable = (event: React.FocusEvent) =>{ if (refTable.current && refTable.current.resetTable) { refTable.current.resetTable(); } ... ... };
ref={refTable} bordered heigth={"400px"} headers={headers} data={data} .... />
``` ### Alert ### | Propiedad | Tipo | Descripción . | | ------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `ref` | `React.Ref` | `ref` es **requerido** para tener acceso a la función `addAlert(message:string, description?:string`). | | `position?` | `Position / undefined` | **Opcional** Position, define la posición de donde aparece la alerta en la pantalla, los valores son: `'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'`. * El valor por defecto si no se proporciana `Position`es`"top-right"` | | `variant?` | `Variant / undefined` | **Opcional** Variant, define la variante de la alerta, las variantes son: `'error' / 'info' / 'success' / 'alert'`. \* El valor por defecto si no se proporciona `variant` es `info`. | | `styles?` | `CSSProperties / undefined` | **Opcional** styles, define un estilo personalizado al contenedor de la alerta. | ### Código ``` interface AlertHandle { addAlert: (message: string, description?: string) => void; } function Component() { const refAlert = useRef({ addAlert: () => {} }); return (
) } ``` ### ### Drawer ### | Propiedad | Tipo | Descripción | | ----------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | `isOpen` | `Boolean` | `isOpen` es **requerido** para mostrar/ocultar el Drawer. | | `width` | `Number` | `width` **requerido**, define el ancho del Drawer. | | `position` | `left / right` | `position` **requerido**, define de que lado se desplazará el Drawer. | | `onClose` | `() => void` | `onClose` **requerido**, recibe una función para cerrar el Drawer. | | `title?` | `String / undefined ` | `title` **opcional**, define el título del drawer. | | `subTitle?` | `String / undefined` | `subTitle` **opcional**, define el subtitulo del drawer. | | `classes?` | `CSSProperties / undefined` | `classes` **opcional**, define un estilo personalizado al contenedor del Drawer. | | `divide?` | `Boolean / undefined` | `divide` **opcional**, define si en el header del modal se le agrega una división entre el titulo y el contenido del Drawer. | | `children` | `ReactNode` | `children` **requerido**, recibe el contenido del Drawer. | | `id` | `String ` | `id` **requerido**, define en donde se va a colocar el Drawer en la estructura HTML. | ### ### Código ### ``` function Component() { const [modalOpenRight, setModalOpenRight] = useState(false); const handleOpenModalRight = () => { setModalOpenRight(true); }; return (
) } ``` \*El `id` **drawer** debe estar colocado en el árbol **HTML**: ```
``` ### ### Tab El componente Tab se utilizó el Patrón de **composición** para construirlo. En el cual está compuesto por `Tab, Tab.List, Tab.Item, Tab.Panel`. Veremos las Props que recibe cada uno de estos. ### | Propiedad | Tipo | Descripción . | | -------------- | ------------------------------- | ----------------------------------------------------------------------------------------- | | `st?` | `CSSProperties / undefined` | `st` **opcional**, aplica estilos al componente Tab que contiene todos sus SubComponents. | | `activeColor?` | `string / undefined` | `activeColor` **opcional**, define el ancho del Drawer. | | `value` | `string` | `value` **requerido**, define en que tab se encuentra. | | `children` | `ReactElement[] / ReactElement` | `children` **requerido**, define el contenido del Tab. | ### ### Tab.List ### | Propiedad | Tipo | Descripción . | | ------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `handleClick` | `(value: string) => void` | `handleClick` **requerido**, aplica el evento `onClick` a cada item de la **Tab.List**. El **value** que recibe la función es el valor actual del **Tab** que se hizo click. | | `children` | `ReactElement[] / ReactElement` | `children` **requerido**, define el contenido de **Tab.List**. | | `aria-label` | `string` | `aria-label` **requerido**, define el aria-label para la lista. | ### ### Tab.Item ### | Propiedad | Tipo | Descripción . | | ------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `disabled?` | `Boolean / undefined` | `disabled` **opcional**, desabilita el item | | `onClick?` | `() => void / undefined` | `onClick` **opcional**, función para ejecutar cuando se da click sobre algun item del Tab. | | `label` | `string` | `label` **requerido**, define cuál es el tab que se seleccionó. `ATENCIÓN` cada label de `Tab.Item` debe ser único para detectar cuál es el tab que se debe mostrar. | | `icon?` | `ReactElement | string | null | undefined` | `icon` **opcional**, define si se agrega un Icono a los tabs. | | `aria-controls?` | `string / undefined` | `aria-controls` **opcional**, sincroniza el tab seleccionado con el contenido de dicho tab. El valor de `aria-controls` debe ser **único** y debe coincidir con el `id` que se proporciona a `Tab.Panel`. | | `aria-labelledby?` | `string / undefined` | `aria-labelledby` **opcional**, sincroniza el tab seleccionado con el contenido de dicho tab. El valor de `aria-labelledby` debe ser el mismo que se colocó en el `id` de `Tab.Panel`. | ### ### Tab.Panel ### | Propiedad | Tipo | Descripción . | | ----------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `st?` | `CSSProperties / undefined` | `st` **opcional**, aplica estilos al contenedor del panel. | | `children?` | `ReactElement[] / ReactElement / undefined` | `children` **opcional**, define el contenido del Panel. | | `id` | `String` | `id` **requerido**, define un id **único** para cada Panel. Este id es requerido ya que es controlado por `aria-controls` de **Tab.Item**. | | `value` | `String` | `value` **requerido**, el valor proporcionado en la prop `value` debe coincidir con algun `label` que se colocó en el componente `Tab.Item` de este modo identificará que Panel debe mostrarse. | ### Código ``` function Component(){ const [valueTab, setValueTab] = useState('Tab one'); const handleClick = (label: string) => { setValueTab(label); }; return( ) } ``` ### ### Select ### | Propiedad | Tipo | Descripción . | | ----------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `options` | `SelectOption[]` | `options` **requerido**, las options del Select se conforma de un objeto que contiene 2 propiedades, **label** y **value**. El `value` es el valor del option y el `label` es el valor que va hacer visibile el el Select. | | `value` | `String` | `value` **requerido**, define el actual valor seleccionado. | | `onChange` | `({ value, name }: onChangeProps) => void` | onChange **requerido**, cuándo se selecciona un elemento del Select se ejecuta la función proporcionada en la prop `onChange` y dicha función recibe un **objeto** con 2 propiedades, el `valor` seleccionado y el `name` que se proporciono del select para indentificarlo. | | `onErrorChange` | `({ error, name }: onErrorChangeProps) => void` | `onErrorChange` **requerido**, función que recibe un objeto que contiene 2 propiedades, el `error` y el ``name`. | | `error?` | `String / undefined` | `error` **opcional**, define un mensaje de error personalizado. | | `label?` | `String / undefined` | `label` **opcional**, define el Label para el Select. | | `placeHolder?` | `String / undefined` | `placeHolder` **opcional**, define el valor que se visualizará por defecto cuando no se selecciona ningun elemento del Select. Si no se proporciona un `placeHolder` el valor por defecto es **"Seleccione una opción"** | | `messageRequiredField?` | `String / undefined` | `messageRequiredField` **opcional**, define el valor que se visualizará cuándo no se selecciona ningun elemento del Select. | | `styles?` | `CSSProperties / undefined` | `styles` **opcional**, define estilos generales para el Select. | | `disabled?` | `Boolean / undefined` | `disabled` **opcional**, desabilita el select. | | `name` | `String` | `name` **requerido**, el name que identifica a dicho Select. | ### ### Interfaces ``` interface SelectOption { value: string; label: string; } type onChangeProps = { value: string; name: string; }; type onErrorChangeProps = { error: boolean; name: string; }; ``` ### Código ``` function Component() { const handleSelectChange = useCallback( ({ value, name }: { value: string; name: string }) => { setSelectedValue((prevState) => ({ ...prevState, [name]: value, })); }, [] ); const [selectedValue, setSelectedValue] = useState({ selectValue: '', ... }); return (