@soyfri/shared-library 3.3.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{Modal-C_QY7ZzY.js → Modal-BqW0Nk3l.js} +12 -2
- package/{Modal-C_QY7ZzY.js.map → Modal-BqW0Nk3l.js.map} +1 -1
- package/{Modal-D_6ZdSzw.cjs → Modal-Cfyr-RsW.cjs} +12 -2
- package/{Modal-D_6ZdSzw.cjs.map → Modal-Cfyr-RsW.cjs.map} +1 -1
- package/{Table-DaNgX7PO.cjs → Table-BpnAkCgd.cjs} +4 -3
- package/Table-BpnAkCgd.cjs.map +1 -0
- package/{Table-aNFAOuQk.js → Table-BuALBQWX.js} +4 -3
- package/Table-BuALBQWX.js.map +1 -0
- package/{Tooltip-BB77JBcg.js → Tooltip-B15a34_o.js} +4 -6
- package/Tooltip-B15a34_o.js.map +1 -0
- package/{Tooltip-DpAsWGpN.cjs → Tooltip-CEEDkwds.cjs} +4 -6
- package/Tooltip-CEEDkwds.cjs.map +1 -0
- package/components/Modal/Modal.cjs +1 -1
- package/components/Modal/Modal.js +1 -1
- package/components/Table/Table.cjs +1 -1
- package/components/Table/Table.d.ts +10 -1
- package/components/Table/Table.js +1 -1
- package/components/Tooltip/Tooltip.cjs +1 -1
- package/components/Tooltip/Tooltip.js +1 -1
- package/demos/themes.d.ts +29 -0
- package/index.cjs +3 -3
- package/index.js +3 -3
- package/package.json +1 -1
- package/Table-DaNgX7PO.cjs.map +0 -1
- package/Table-aNFAOuQk.js.map +0 -1
- package/Tooltip-BB77JBcg.js.map +0 -1
- package/Tooltip-DpAsWGpN.cjs.map +0 -1
- package/components/Autocomplete/Autocomplete.definitions.d.ts +0 -15
- package/components/Avatar/Avatar.definitions.d.ts +0 -11
- package/components/Button/Button.definition.d.ts +0 -11
- package/components/Card/Card.definition.d.ts +0 -1
- package/components/Chip/Chip.definitions.d.ts +0 -10
- package/components/DatePicker/DatePicker.definitions.d.ts +0 -8
- package/components/DateTimePicker/DateTimePicker.definitions.d.ts +0 -12
- package/components/Input/Input.definitions.d.ts +0 -15
- package/components/InputGroup/InputGroup.definitions.d.ts +0 -6
- package/components/RadioGroup/RadioGroup.definitions.d.ts +0 -6
- package/components/Stepper/Stepper.definition.d.ts +0 -2
- package/components/Switch/Switch.definitions.d.ts +0 -7
- package/components/Table/Table.definition.d.ts +0 -14
- package/components/Tabs/Tab.definition.d.ts +0 -3
- package/components/Timeline/Timeline.definition.d.ts +0 -3
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export declare const BasicDatePickerDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const BasicDatePickerExample = () => {\n const [selectedDate, setSelectedDate] = useState(dayjs());\n return (\n <Box sx={{ width: 300 }}>\n <DatePicker\n label=\"Seleccionar Fecha\"\n selectedDate={selectedDate}\n onDateChange={setSelectedDate}\n />\n <Typography sx={{ mt: 2 }}>\n Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
2
|
-
export declare const DatePickerWithMinMaxDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DatePickerWithMinMaxExample = () => {\n const [selectedDate, setSelectedDate] = useState(dayjs('2023-06-15'));\n const minDate = dayjs('2023-06-01');\n const maxDate = dayjs('2023-06-30');\n return (\n <Box sx={{ width: 300 }}>\n <DatePicker\n label=\"Fecha en Junio\"\n selectedDate={selectedDate}\n onDateChange={setSelectedDate}\n minDate={minDate}\n maxDate={maxDate}\n />\n <Typography sx={{ mt: 2 }}>\n Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n </Typography>\n <Typography variant=\"caption\" color=\"text.secondary\">\n (Rango: ${minDate.format('YYYY-MM-DD')} a ${maxDate.format('YYYY-MM-DD')})\n </Typography>\n </Box>\n );\n};\n";
|
|
3
|
-
export declare const DateRangePickerDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateRangePickerExample = () => {\n const [startDate, setStartDate] = useState(dayjs('2023-01-01'));\n const [endDate, setEndDate] = useState(dayjs('2023-01-31'));\n\n const handleStartDateChange = (date) => {\n setStartDate(date);\n if (date && endDate && date.isAfter(endDate)) {\n setEndDate(date);\n }\n };\n\n const handleEndDateChange = (date) => {\n setEndDate(date);\n if (date && startDate && date.isBefore(startDate)) {\n setStartDate(date);\n }\n };\n\n return (\n <Box sx={{ display: 'flex', gap: 3, flexDirection: 'column' }}>\n <DatePicker\n label=\"Fecha de Inicio\"\n selectedDate={startDate}\n onDateChange={handleStartDateChange}\n maxDate={endDate || undefined}\n />\n <DatePicker\n label=\"Fecha de Fin\"\n selectedDate={endDate}\n onDateChange={handleEndDateChange}\n minDate={startDate || undefined}\n />\n <Typography>\n Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |\n Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}\n </Typography>\n </Box>\n );\n};\n";
|
|
4
|
-
export declare const DatePickerWithErrorDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DatePickerWithErrorExample = () => {\n const [selectedDate, setSelectedDate] = useState(dayjs('2023-01-01'));\n // Intentamos establecer una fecha fuera de un rango muy restringido para forzar un error\n const minDate = dayjs('2023-01-05');\n const maxDate = dayjs('2023-01-10');\n\n return (\n <Box sx={{ width: 300 }}>\n <DatePicker\n label=\"Fecha (con error de rango)\"\n selectedDate={selectedDate}\n onDateChange={setSelectedDate}\n minDate={minDate}\n maxDate={maxDate}\n />\n <Typography sx={{ mt: 2 }}>\n Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n </Typography>\n <Typography variant=\"caption\" color=\"error\">\n (Intenta seleccionar una fecha fuera de ${minDate.format('YYYY-MM-DD')} - ${maxDate.format('YYYY-MM-DD')})\n </Typography>\n </Box>\n );\n};\n";
|
|
5
|
-
export declare const DatePickerSmallSizeDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DatePickerSmallSizeExample = () => {\n const [selectedDate, setSelectedDate] = useState(dayjs());\n return (\n <Box sx={{ width: 250 }}>\n <DatePicker\n label=\"Fecha (Peque\u00F1o)\"\n selectedDate={selectedDate}\n onDateChange={setSelectedDate}\n slotProps={{ textField: { size: 'small' } }} // Prop para hacer el TextField peque\u00F1o\n />\n <Typography sx={{ mt: 2 }}>\n Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
6
|
-
export declare const DatePickerDisabledDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DatePickerDisabledExample = () => {\n const [selectedDate, setSelectedDate] = useState(dayjs());\n return (\n <Box sx={{ width: 300 }}>\n <DatePicker\n label=\"Fecha (Deshabilitado)\"\n selectedDate={selectedDate}\n onDateChange={setSelectedDate}\n disabled\n />\n <Typography sx={{ mt: 2 }}>\n Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
7
|
-
export declare const DatePickerReadOnlyDefinition = "\n import React, { useState } from 'react';\n import { DatePicker } from '@soyfri/shared-library/DatePicker';\n import dayjs from 'dayjs';\n import { Box, Typography } from '@mui/material';\n\n export const DatePickerReadOnlyDefinition = () => {\n const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2024-07-24'));\n return (\n <Box sx={{ width: 300 }}>\n <DatePicker\n label=\"Fecha (Solo Lectura)\"\n selectedDate={selectedDate}\n onDateChange={() => {}} // No permite cambios\n readOnly\n />\n <Typography sx={{ mt: 2 }}>\n Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
8
|
-
export declare const DatePickerEmptyWithMaskDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport { Dayjs } from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DatePickerEmptyWithMaskExample = () => {\n const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);\n return (\n <Box sx={{ width: 300 }}>\n <DatePicker\n label=\"Fecha\"\n selectedDate={selectedDate}\n onDateChange={setSelectedDate}\n format=\"DD/MM/YY\"\n />\n <Typography sx={{ mt: 2 }} variant=\"caption\" color=\"text.secondary\">\n Al estar vac\u00EDo, el campo muestra la m\u00E1scara del formato (DD/MM/AA).\n </Typography>\n </Box>\n );\n};\n";
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export declare const BasicDateTimePickerDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const BasicDateTimePickerExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Seleccionar Fecha y Hora\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
2
|
-
export declare const DateTimePickerWithMinMaxDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithMinMaxExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2023-06-15T10:00'));\n const minDateTime = dayjs('2023-06-01T09:00');\n const maxDateTime = dayjs('2023-06-30T17:00');\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora en Junio\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n <Typography variant=\"caption\" color=\"text.secondary\">\n (Rango: ${minDateTime.format('YYYY-MM-DD HH:mm')} a ${maxDateTime.format('YYYY-MM-DD HH:mm')})\n </Typography>\n </Box>\n );\n};\n";
|
|
3
|
-
export declare const DateTimePickerDisabledDefinition = "\nimport React, { useState } => from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerDisabledExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Deshabilitado)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n disabled\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
4
|
-
export declare const DateTimePickerReadOnlyDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerReadOnlyExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2024-07-24T14:30'));\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Solo Lectura)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={() => {}} // No permite cambios\n readOnly\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
5
|
-
export declare const DateTimePickerWithInitialNullDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithInitialNullExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(null);\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Sin Selecci\u00F3n Inicial)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
6
|
-
export declare const DateTimePickerSmallSizeDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerSmallSizeExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n return (\n <Box sx={{ width: 250 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Peque\u00F1o)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n slotProps={{ textField: { size: 'small' } }}\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
7
|
-
export declare const DateTimePickerWithButtonsDefinition = "\nimport React, { useState } => from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithButtonsExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Con Botones por Defecto)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n slotProps={{\n actionBar: {\n actions: ['clear', 'cancel', 'accept'],\n },\n }}\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
8
|
-
export declare const DateTimePickerWithCustomButtonTextDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithCustomButtonTextExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Botones Personalizados)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n clearButtonText=\"Limpiar Todo\"\n cancelButtonText=\"Descartar\"\n acceptButtonText=\"Confirmar Selecci\u00F3n\"\n slotProps={{\n actionBar: {\n actions: ['clear', 'cancel', 'accept'],\n },\n }}\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
9
|
-
export declare const DateTimePickerEmptyWithMaskDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport { Dayjs } from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerEmptyWithMaskExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n inputFormat=\"DD/MM/YY HH:mm\"\n />\n <Typography sx={{ mt: 2 }} variant=\"caption\" color=\"text.secondary\">\n Al estar vac\u00EDo, el campo muestra la m\u00E1scara del formato (DD/MM/AA HH:MM).\n </Typography>\n </Box>\n );\n};\n";
|
|
10
|
-
export declare const DateTimePickerWithAllMinutesDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithAllMinutesExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2023-06-15T10:00'));\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Todos los minutos)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n viewRenderers={{\n hours: renderMultiSectionDigitalClockTimeView,\n minutes: renderMultiSectionDigitalClockTimeView,\n }}\n minutesStep={1}\n timeSteps={{ minutes: 1 }}\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
11
|
-
export declare const DateTimePicker24hDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePicker24hExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2023-06-15T10:00'));\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Formato 24h)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n viewRenderers={{\n hours: renderMultiSectionDigitalClockTimeView,\n minutes: renderMultiSectionDigitalClockTimeView,\n }}\n minutesStep={1}\n timeSteps={{ minutes: 1 }}\n ampm={false}\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
12
|
-
export declare const DateTimePickerWithCustomInputFormatDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithCustomInputFormatExample = () => {\n const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n return (\n <Box sx={{ width: 300 }}>\n <DateTimePicker\n label=\"Fecha y Hora (Formato dd/MM/YYYY)\"\n selectedDateTime={selectedDateTime}\n onDateTimeChange={setSelectedDateTime}\n inputFormat=\"DD/MM/YYYY HH:mm\" // Formato de fecha personalizado\n />\n <Typography sx={{ mt: 2 }}>\n Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n </Typography>\n </Box>\n );\n};\n";
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const BasicTextInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const BasicTextInputExample = () => {\n const [value, setValue] = useState('Texto de ejemplo');\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"Nombre\"\n value={value}\n onChange={setValue}\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
2
|
-
export declare const NumberInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const NumberInputExample = () => {\n const [value, setValue] = useState(123);\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"Cantidad\"\n type=\"number\"\n value={value}\n onChange={setValue}\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
3
|
-
export declare const EmailInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const EmailInputExample = () => {\n const [value, setValue] = useState('ejemplo@dominio.com');\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"Correo Electr\u00F3nico\"\n type=\"email\"\n value={value}\n onChange={setValue}\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
4
|
-
export declare const PasswordInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const PasswordInputExample = () => {\n const [value, setValue] = useState('micontrase\u00F1a');\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"Contrase\u00F1a\"\n type=\"password\"\n value={value}\n onChange={setValue}\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
5
|
-
export declare const InputWithPlaceholderDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const InputWithPlaceholderExample = () => {\n const [value, setValue] = useState('');\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"B\u00FAsqueda\"\n placeholder=\"Escribe tu t\u00E9rmino de b\u00FAsqueda...\"\n value={value}\n onChange={setValue}\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value || 'Vac\u00EDo'}</Typography>\n </Box>\n );\n};\n";
|
|
6
|
-
export declare const InputWithErrorDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const InputWithErrorExample = () => {\n const [value, setValue] = useState('invalido');\n const hasError = value.length < 5 && value.length > 0;\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"Nombre de usuario\"\n value={value}\n onChange={setValue}\n error={hasError}\n helperText={hasError ? 'M\u00EDnimo 5 caracteres' : ''}\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
7
|
-
export declare const DisabledInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const DisabledInputExample = () => {\n const [value, setValue] = useState('Campo deshabilitado');\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"Estado\"\n value={value}\n onChange={setValue}\n disabled\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
8
|
-
export declare const ReadOnlyInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const ReadOnlyInputExample = () => {\n const [value, setValue] = useState('Valor de solo lectura');\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"Informaci\u00F3n\"\n value={value}\n onChange={setValue}\n readOnly\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
9
|
-
export declare const InputVariantsDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const InputVariantsExample = () => {\n const [valueOutlined, setValueOutlined] = useState('Outlined');\n const [valueFilled, setValueFilled] = useState('Filled');\n const [valueStandard, setValueStandard] = useState('Standard');\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>\n <Input\n label=\"Esquema Outlined\"\n value={valueOutlined}\n onChange={setValueOutlined}\n variant=\"outlined\"\n />\n <Input\n label=\"Esquema Filled\"\n value={valueFilled}\n onChange={setValueFilled}\n variant=\"filled\"\n />\n <Input\n label=\"Esquema Standard\"\n value={valueStandard}\n onChange={setValueStandard}\n variant=\"standard\"\n />\n </Box>\n );\n};\n";
|
|
10
|
-
export declare const InputSizesDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const InputSizesExample = () => {\n const [valueMedium, setValueMedium] = useState('Tama\u00F1o Mediano');\n const [valueSmall, setValueSmall] = useState('Tama\u00F1o Peque\u00F1o');\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>\n <Input\n label=\"Input Mediano\"\n value={valueMedium}\n onChange={setValueMedium}\n size=\"medium\"\n />\n <Input\n label=\"Input Peque\u00F1o\"\n value={valueSmall}\n onChange={setValueSmall}\n size=\"small\"\n />\n </Box>\n );\n};\n";
|
|
11
|
-
export declare const FullWidthInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const FullWidthInputExample = () => {\n const [value, setValue] = useState('Ocupa todo el ancho');\n return (\n <Box sx={{ width: '100%' }}>\n <Input\n label=\"Input de Ancho Completo\"\n value={value}\n onChange={setValue}\n fullWidth\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
12
|
-
export declare const LabelPositionFloatingDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box } from '@mui/material';\n\nexport const LabelPositionExample = () => {\n const [outside, setOutside] = useState('Outside (default)');\n const [floating, setFloating] = useState('Floating');\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>\n <Input\n label=\"Label outside\"\n value={outside}\n onChange={setOutside}\n labelPosition=\"outside\"\n />\n <Input\n label=\"Label floating (MUI cl\u00E1sico)\"\n value={floating}\n onChange={setFloating}\n labelPosition=\"floating\"\n />\n </Box>\n );\n};\n";
|
|
13
|
-
export declare const CustomBorderRadiusDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box } from '@mui/material';\n\nexport const CustomBorderRadiusExample = () => {\n const [v, setV] = useState('Texto');\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>\n <Input label=\"Sin radius\" value={v} onChange={setV} borderRadius={0} />\n <Input label=\"Radius 4px\" value={v} onChange={setV} borderRadius={4} />\n <Input label=\"Default (10px)\" value={v} onChange={setV} />\n <Input label=\"Pill (24px)\" value={v} onChange={setV} borderRadius={24} />\n </Box>\n );\n};\n";
|
|
14
|
-
export declare const CustomStylingDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box } from '@mui/material';\n\nexport const CustomStylingExample = () => {\n const [v, setV] = useState('Custom completo');\n return (\n <Box sx={{ width: 300 }}>\n <Input\n label=\"Combinado: bg + borderColor + label color\"\n value={v}\n onChange={setV}\n sx={{\n '& .MuiInputLabel-root': { color: 'primary.main' },\n '& .MuiOutlinedInput-root': { bgcolor: '#fff7e6' },\n '& .MuiOutlinedInput-notchedOutline': {\n borderColor: 'warning.main',\n borderWidth: 2,\n },\n }}\n />\n </Box>\n );\n};\n";
|
|
15
|
-
export declare const MultilineInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input';\nimport { Box, Typography } from '@mui/material';\n\nexport const MultilineInputExample = () => {\n const [value, setValue] = useState('Escribe un comentario en varias l\u00EDneas...');\n return (\n <Box sx={{ width: 400 }}>\n <Input\n label=\"Comentario\"\n value={value}\n onChange={(v) => setValue(v.toString())}\n multiline\n minRows={3}\n maxRows={6}\n fullWidth\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export declare const BasicInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\nimport { Button } from '../Button';\n\nexport const BasicInputGroupExample = () => {\n const [text, setText] = useState('');\n return (\n <Box>\n <Typography variant=\"h6\" sx={{ mb: 2 }}>\n Grupo de entrada b\u00E1sico\n </Typography>\n <InputGroup>\n <Input label=\"Buscar\" value={text} onChange={(val) => setText(val as string)} />\n <Button variant=\"outlined\">Buscar</Button>\n </InputGroup>\n </Box>\n );\n};\n";
|
|
2
|
-
export declare const CombinedInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\nimport Select, { SelectOption } from '../Select/Select';\nimport { Button } from '../Button';\n\nconst basicOptions: SelectOption[] = [\n { value: '10', label: '10' },\n { value: '25', label: '25' },\n { value: '50', label: '50' },\n { value: '100', label: '100' },\n];\n\nexport const CombinedInputGroupExample = () => {\n const [text, setText] = useState('');\n const [selectValue, setSelectValue] = useState('25');\n\n return (\n <Box>\n <Typography variant=\"h6\" sx={{ mb: 2 }}>\n Grupo de entrada combinado\n </Typography>\n <InputGroup>\n <Select\n label=\"Registros\"\n options={basicOptions}\n value={selectValue}\n onChange={(val) => setSelectValue(val as string)}\n />\n <Input\n label=\"Filtrar por nombre\"\n value={text}\n onChange={(val) => setText(val as string)}\n />\n <Button variant=\"contained\">Aplicar</Button>\n </InputGroup>\n </Box>\n );\n};\n";
|
|
3
|
-
export declare const DatePickerInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport dayjs, { Dayjs } from 'dayjs';\nimport InputGroup from './InputGroup';\nimport { DatePicker } from '../DatePicker';\nimport { Button } from '../Button';\n\nexport const DatePickerInputGroupExample = () => {\n const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());\n\n return (\n <Box>\n <Typography variant=\"h6\" sx={{ mb: 2 }}>\n Grupo de entrada con DatePicker\n </Typography>\n <InputGroup>\n <DatePicker\n label=\"Fecha de inicio\"\n selectedDate={selectedDate}\n onDateChange={(date) => setSelectedDate(date)}\n />\n <Button variant=\"contained\">Ver calendario</Button>\n </InputGroup>\n </Box>\n );\n};\n";
|
|
4
|
-
export declare const VerticalInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\n\nexport const VerticalInputGroupExample = () => {\n const [nombre, setNombre] = useState('');\n const [email, setEmail] = useState('');\n\n return (\n <Box sx={{ width: 320 }}>\n <InputGroup orientation=\"vertical\">\n <Input label=\"Nombre\" value={nombre} onChange={(val) => setNombre(val as string)} />\n <Input label=\"Email\" value={email} onChange={(val) => setEmail(val as string)} />\n </InputGroup>\n </Box>\n );\n};\n";
|
|
5
|
-
export declare const CustomStylingInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\nimport { Button } from '../Button';\n\nexport const CustomStylingInputGroupExample = () => {\n const [q, setQ] = useState('');\n\n return (\n <Box sx={{ width: 500 }}>\n <InputGroup\n borderRadius={999}\n sx={{\n bgcolor: 'action.hover',\n borderColor: 'primary.main',\n }}\n >\n <Input label=\"B\u00FAsqueda avanzada\" value={q} onChange={(val) => setQ(val as string)} />\n <Button variant=\"contained\" color=\"primary\">Buscar</Button>\n </InputGroup>\n </Box>\n );\n};\n";
|
|
6
|
-
export declare const DisabledInputGroupDefinition = "\nimport { Box } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\nimport { Button } from '../Button';\n\nexport const DisabledInputGroupExample = () => (\n <Box sx={{ width: 400 }}>\n <InputGroup disabled>\n <Input label=\"B\u00FAsqueda\" value=\"\" onChange={() => {}} disabled />\n <Button variant=\"outlined\" disabled>Buscar</Button>\n </InputGroup>\n </Box>\n);\n";
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export declare const BasicRadioGroupDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box, Typography } from '@mui/material';\n\nconst options = [\n { value: 'a', label: 'Opci\u00F3n A' },\n { value: 'b', label: 'Opci\u00F3n B' },\n { value: 'c', label: 'Opci\u00F3n C' },\n];\n\nexport const BasicRadioGroupExample = () => {\n const [value, setValue] = useState('a');\n return (\n <Box sx={{ width: 360 }}>\n <RadioGroup\n label=\"Selecciona una opci\u00F3n\"\n options={options}\n value={value}\n onChange={setValue}\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
2
|
-
export declare const ColumnRadioGroupDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'sm', label: 'Peque\u00F1o' },\n { value: 'md', label: 'Mediano' },\n { value: 'lg', label: 'Grande' },\n];\n\nexport const ColumnRadioGroupExample = () => {\n const [value, setValue] = useState('md');\n return (\n <Box sx={{ width: 360 }}>\n <RadioGroup\n label=\"Tama\u00F1o\"\n options={options}\n value={value}\n onChange={setValue}\n row={false}\n />\n </Box>\n );\n};\n";
|
|
3
|
-
export declare const RadioGroupWithErrorDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'yes', label: 'S\u00ED' },\n { value: 'no', label: 'No' },\n];\n\nexport const RadioGroupWithErrorExample = () => {\n const [value, setValue] = useState('');\n const hasError = !value;\n return (\n <Box sx={{ width: 360 }}>\n <RadioGroup\n label=\"\u00BFAceptas los t\u00E9rminos?\"\n options={options}\n value={value}\n onChange={setValue}\n error={hasError}\n helperText={hasError ? 'Este campo es obligatorio' : ''}\n />\n </Box>\n );\n};\n";
|
|
4
|
-
export declare const DisabledRadioGroupDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'a', label: 'Opci\u00F3n A' },\n { value: 'b', label: 'Opci\u00F3n B', disabled: true },\n { value: 'c', label: 'Opci\u00F3n C' },\n];\n\nexport const DisabledRadioGroupExample = () => {\n const [value, setValue] = useState('a');\n return (\n <Box sx={{ width: 360 }}>\n {/* Bloqueo total */}\n <RadioGroup\n label=\"Grupo deshabilitado\"\n options={options}\n value={value}\n onChange={setValue}\n disabled\n />\n {/* Bloqueo por opci\u00F3n */}\n <RadioGroup\n label=\"Opci\u00F3n B deshabilitada\"\n options={options}\n value={value}\n onChange={setValue}\n sx={{ mt: 3 }}\n />\n </Box>\n );\n};\n";
|
|
5
|
-
export declare const UnborderedRadioGroupDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'a', label: 'Opci\u00F3n A' },\n { value: 'b', label: 'Opci\u00F3n B' },\n];\n\nexport const UnborderedRadioGroupExample = () => {\n const [value, setValue] = useState('a');\n return (\n <Box sx={{ width: 360 }}>\n <RadioGroup\n options={options}\n value={value}\n onChange={setValue}\n bordered={false}\n />\n </Box>\n );\n};\n";
|
|
6
|
-
export declare const RHFRadioGroupDefinition = "\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { RadioGroup } from './RadioGroup';\nimport { Box, Button, Typography } from '@mui/material';\n\nconst options = [\n { value: 'paypal', label: 'PayPal' },\n { value: 'card', label: 'Tarjeta' },\n { value: 'transfer', label: 'Transferencia' },\n];\n\nexport const RHFRadioGroupExample = () => {\n const { control, handleSubmit, watch } = useForm({\n defaultValues: { paymentMethod: 'card' },\n });\n const value = watch('paymentMethod');\n return (\n <Box sx={{ width: 360 }} component=\"form\" onSubmit={handleSubmit(console.log)}>\n <RadioGroup\n label=\"M\u00E9todo de pago\"\n options={options}\n name=\"paymentMethod\"\n control={control}\n validation={{ required: 'Selecciona un m\u00E9todo' }}\n />\n <Typography sx={{ mt: 2 }}>Valor en el form: {value}</Typography>\n <Button type=\"submit\" sx={{ mt: 1 }}>Enviar</Button>\n </Box>\n );\n};\n";
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export declare const BasicSwitchDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box, Typography } from '@mui/material';\n\nexport const BasicSwitchExample = () => {\n const [checked, setChecked] = useState(false);\n return (\n <Box sx={{ width: 280 }}>\n <Switch checked={checked} onChange={setChecked} />\n <Typography sx={{ mt: 2 }}>Estado: {checked ? 'ON' : 'OFF'}</Typography>\n </Box>\n );\n};\n";
|
|
2
|
-
export declare const SwitchWithLabelDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchWithLabelExample = () => {\n const [checked, setChecked] = useState(true);\n return (\n <Box sx={{ width: 280 }}>\n <Switch\n label=\"Notificaciones por email\"\n checked={checked}\n onChange={setChecked}\n />\n </Box>\n );\n};\n";
|
|
3
|
-
export declare const BorderedSwitchDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const BorderedSwitchExample = () => {\n const [checked, setChecked] = useState(true);\n return (\n <Box sx={{ width: 360 }}>\n <Switch\n label=\"Recibir reportes diarios\"\n checked={checked}\n onChange={setChecked}\n bordered\n />\n </Box>\n );\n};\n";
|
|
4
|
-
export declare const SwitchSizesDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchSizesExample = () => {\n const [a, setA] = useState(false);\n const [b, setB] = useState(true);\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>\n <Switch label=\"Peque\u00F1o\" size=\"small\" checked={a} onChange={setA} />\n <Switch label=\"Mediano (default)\" size=\"medium\" checked={b} onChange={setB} />\n </Box>\n );\n};\n";
|
|
5
|
-
export declare const SwitchWithErrorDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchWithErrorExample = () => {\n const [checked, setChecked] = useState(false);\n const hasError = !checked;\n return (\n <Box sx={{ width: 320 }}>\n <Switch\n label=\"Aceptar t\u00E9rminos y condiciones\"\n checked={checked}\n onChange={setChecked}\n error={hasError}\n helperText={hasError ? 'Debes aceptar los t\u00E9rminos para continuar' : ''}\n />\n </Box>\n );\n};\n";
|
|
6
|
-
export declare const DisabledSwitchDefinition = "\nimport React from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const DisabledSwitchExample = () => (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>\n <Switch label=\"Off bloqueado\" checked={false} onChange={() => {}} disabled />\n <Switch label=\"On bloqueado\" checked={true} onChange={() => {}} disabled />\n </Box>\n);\n";
|
|
7
|
-
export declare const RHFSwitchDefinition = "\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { Switch } from './Switch';\nimport { Box, Button, Typography } from '@mui/material';\n\nexport const RHFSwitchExample = () => {\n const { control, handleSubmit, watch } = useForm({\n defaultValues: { darkMode: false },\n });\n const value = watch('darkMode');\n return (\n <Box sx={{ width: 320 }} component=\"form\" onSubmit={handleSubmit(console.log)}>\n <Switch\n label=\"Modo oscuro\"\n name=\"darkMode\"\n control={control}\n bordered\n />\n <Typography sx={{ mt: 2 }}>Valor en el form: {String(value)}</Typography>\n <Button type=\"submit\" sx={{ mt: 1 }}>Enviar</Button>\n </Box>\n );\n};\n";
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export declare const BasicTableCode = "\n <Table data={data} visiblePageNumbers={5} pageSizeSelectorValue={1} pageSize={1}>\n <Column name=\"Nombre\" field=\"nombre\">\n {({ nombre }) => <Typography variant=\"body2\">{nombre}</Typography>}\n </Column>\n <Column name=\"Email\" field=\"email\">\n {({ email }) => <Typography variant=\"body2\" color=\"text.secondary\">{email}</Typography>}\n </Column>\n <Column name=\"Edad\" field=\"edad\">\n {({ edad }) => <Typography variant=\"body2\">{edad} a\u00F1os</Typography>}\n </Column>\n </Table>\n";
|
|
2
|
-
export declare const ComplexComponentsCode = "\n <Table data={data}>\n <Column name=\"Usuario\" field={['avatar', 'nombre']}>\n {({ avatar, nombre }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n <Avatar src={avatar} alt={nombre} sx={{ width: 40, height: 40 }} />\n <Typography variant=\"body2\" fontWeight=\"medium\">{nombre}</Typography>\n </Box>\n )}\n </Column>\n <Column name=\"Estado\" field=\"activo\">\n {({ activo }) => (\n <Chip\n label={activo ? 'Activo' : 'Inactivo'}\n color={activo ? 'success' : 'default'}\n size=\"small\"\n />\n )}\n </Column>\n <Column name=\"Rol\" field=\"rol\">\n {({ rol }) => (\n <Chip\n label={rol!.charAt(0).toUpperCase() + rol!.slice(1)}\n color={rol === 'admin' ? 'primary' : rol === 'moderador' ? 'secondary' : 'default'}\n variant=\"outlined\"\n size=\"small\"\n />\n )}\n </Column>\n <Column name=\"Puntuaci\u00F3n\" field=\"puntuacion\">\n {({ puntuacion }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Rating value={puntuacion} max={5} precision={0.1} size=\"small\" readOnly />\n <Typography variant=\"caption\" color=\"text.secondary\">\n {puntuacion}\n </Typography>\n </Box>\n )}\n </Column>\n </Table>\n ";
|
|
3
|
-
export declare const WithExternalPaginationControlCode = "\n const [currentPage, setCurrentPage] = useState(1);\n const [pageSize, setPageSize] = useState(2);\n const totalItems = usuarios.length;\n const totalPages = Math.ceil(totalItems / pageSize);\n\n const startIndex = (currentPage - 1) * pageSize;\n const currentData = usuarios.slice(startIndex, startIndex + pageSize);\n\n const previousPageNum = currentPage > 1 ? currentPage - 1 : 1;\n const nextPageNum = currentPage < totalPages ? currentPage + 1 : totalPages;\n\n return (\n <Table\n data={currentData} // Pasa solo los datos de la p\u00E1gina actual\n currentPage={currentPage}\n pageSize={pageSize}\n totalPages={totalPages}\n previousPage={previousPageNum}\n nextPage={nextPageNum}\n onPageChange={setCurrentPage}\n onPageSizeChange={setPageSize}\n >\n <Column name=\"Nombre\" field=\"nombre\">\n {({ nombre }) => <Typography variant=\"body2\" fontWeight=\"medium\">{nombre}</Typography>}\n </Column>\n <Column name=\"Email\" field=\"email\">\n {({ email }) => <Typography variant=\"body2\" color=\"text.secondary\">{email}</Typography>}\n </Column>\n <Column name=\"Estado\" field=\"activo\">\n {({ activo }) => (\n <Chip\n label={activo ? 'Activo' : 'Inactivo'}\n color={activo ? 'success' : 'default'}\n size=\"small\"\n />\n )}\n </Column>\n <Column name=\"Fecha de Registro\" field=\"fechaRegistro\">\n {({ fechaRegistro }) => (\n <Typography variant=\"body2\">\n {new Date(fechaRegistro!).toLocaleDateString('es-ES')}\n </Typography>\n )}\n </Column>\n </Table>\n );\n ";
|
|
4
|
-
export declare const ProductTableCode = "\n <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>\n <Column name=\"Producto\" field={['imagen', 'nombre']}>\n {({ imagen, nombre }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n <Box\n component=\"img\"\n src={imagen}\n alt={nombre}\n sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}\n />\n <Typography variant=\"body2\" fontWeight=\"medium\">{nombre}</Typography>\n </Box>\n )}\n </Column>\n <Column name=\"Precio\" field={['precio', 'enOferta']}>\n {({ precio, enOferta }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Typography\n variant=\"body2\"\n color={enOferta ? 'error.main' : 'text.primary'}\n fontWeight={enOferta ? 'bold' : 'normal'}\n >\n ${precio!.toLocaleString()}\n </Typography>\n {enOferta && (\n <Chip label=\"OFERTA\" color=\"error\" size=\"small\" />\n )}\n </Box>\n )}\n </Column>\n <Column name=\"Stock\" field=\"stock\">\n {({ stock }) => (\n <Chip\n label={stock! > 0 ? `${stock} unidades` : 'Sin stock'}\n color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}\n size=\"small\"\n />\n )}\n </Column>\n <Column name=\"Categor\u00EDa\" field=\"categoria\">\n {({ categoria }) => (\n <Typography variant=\"body2\">{categoria}</Typography>\n )}\n </Column>\n <Column name=\"Rating\" field=\"rating\">\n {({ rating }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Rating value={rating} max={5} precision={0.1} size=\"small\" readOnly />\n <Typography variant=\"caption\">({rating})</Typography>\n </Box>\n )}\n </Column>\n </Table>\n ";
|
|
5
|
-
export declare const EmployeeTableCode = "\n <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>\n <Column name=\"Empleado\" field={['avatar', 'nombre', 'apellido']}>\n {({ avatar, nombre, apellido }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n <Avatar src={avatar} sx={{ width: 40, height: 40 }}>\n {avatar ? '' : `${nombre!.charAt(0)}${apellido!.charAt(0)}`}\n </Avatar>\n <Typography variant=\"body2\" fontWeight=\"medium\">\n {nombre} {apellido}\n </Typography>\n </Box>\n )}\n </Column>\n <Column name=\"Departamento\" field=\"departamento\">\n {({ departamento }) => (\n <Chip\n label={departamento}\n color=\"info\"\n variant=\"filled\"\n size=\"small\"\n />\n )}\n </Column>\n <Column name=\"Salario\" field=\"salario\">\n {({ salario }) => (\n <Typography variant=\"body2\" fontWeight=\"bold\" color=\"success.dark\">\n ${salario!.toLocaleString('es-ES')}\n </Typography>\n )}\n </Column>\n <Column name=\"Estado\" field={['activo', 'fechaIngreso']}>\n {({ activo, fechaIngreso }) => (\n <Box>\n <Chip\n label={activo ? 'Contratado' : 'Inactivo'}\n color={activo ? 'success' : 'error'}\n size=\"small\"\n />\n <Typography variant=\"caption\" display=\"block\" color=\"text.secondary\" sx={{ mt: 0.5 }}>\n Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}\n </Typography>\n </Box>\n )}\n </Column>\n </Table>\n ";
|
|
6
|
-
export declare const EmptyTableCode = "\n <Table data={data}>\n <Column name=\"Nombre\" field=\"nombre\">\n {({ nombre }) => <Typography variant=\"body2\">{nombre}</Typography>}\n </Column>\n <Column name=\"Email\" field=\"email\">\n {({ email }) => <Typography variant=\"body2\">{email}</Typography>}\n </Column>\n <Column name=\"Estado\" field=\"activo\">\n {({ activo }) => <Chip label={activo ? 'Activo' : 'Inactivo'} size=\"small\" />}\n </Column>\n </Table>\n ";
|
|
7
|
-
export declare const SingleRowCode = "\n <Table data={data}>\n <Column name=\"Usuario\" field={['avatar', 'nombre', 'email']}>\n {({ avatar, nombre, email }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n <Avatar src={avatar} alt={nombre} />\n <Box>\n <Typography variant=\"body2\" fontWeight=\"medium\">{nombre}</Typography>\n <Typography variant=\"caption\" color=\"text.secondary\">{email}</Typography>\n </Box>\n </Box>\n )}\n </Column>\n <Column<Usuario> name=\"Informaci\u00F3n\" field={[]}>\n {(user) => (\n <>\n <Typography variant=\"body2\">{user.edad} a\u00F1os</Typography>\n <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>\n <Chip label={user.rol} size=\"small\" color=\"primary\" variant=\"outlined\" />\n <Chip\n label={user.activo ? 'Activo' : 'Inactivo'}\n size=\"small\"\n color={user.activo ? 'success' : 'default'}\n />\n </Box>\n </>\n )}\n </Column>\n </Table>\n ";
|
|
8
|
-
export declare const ProductTableWithZeroStockHighlightedCode = "\n <Table data={data}>\n <Column name=\"Producto\" field={['imagen', 'nombre']}>\n {({ imagen, nombre }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n <Box\n component=\"img\"\n src={imagen}\n alt={nombre}\n sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}\n />\n <Typography variant=\"body2\" fontWeight=\"medium\">{nombre}</Typography>\n </Box>\n )}\n </Column>\n <Column name=\"Precio\" field={['precio', 'enOferta']}>\n {({ precio, enOferta }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Typography\n variant=\"body2\"\n color={enOferta ? 'error.main' : 'text.primary'}\n fontWeight={enOferta ? 'bold' : 'normal'}\n >\n ${precio!.toLocaleString()}\n </Typography>\n {enOferta && (\n <Chip label=\"OFERTA\" color=\"error\" size=\"small\" />\n )}\n </Box>\n )}\n </Column>\n <Column name=\"Stock\" field=\"stock\">\n {({ stock }) => (\n <Chip\n label={stock! > 0 ? `${stock} unidades` : 'Sin stock'}\n color={stock!> 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}\n size=\"small\"\n sx={{ backgroundColor: stock === 0 ? 'rgba(255, 0, 0, 0.1)' : undefined }}\n />\n )}\n </Column>\n <Column name=\"Rating\" field=\"rating\">\n {({ rating }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Rating value={rating} max={5} precision={0.1} size=\"small\" readOnly />\n <Typography variant=\"caption\">({rating})</Typography>\n </Box>\n )}\n </Column>\n </Table>\n ";
|
|
9
|
-
export declare const UserTableSortedByAgeCode = "\n const sortedUsers = [...usuarios].sort((a, b) => a.edad - b.edad);\n return (\n <Table {...args} data={sortedUsers.slice(0, 4)}>\n <Column name=\"Nombre\" field=\"nombre\">\n {({ nombre }) => <Typography variant=\"body2\">{nombre}</Typography>}\n </Column>\n <Column name=\"Edad\" field=\"edad\">\n {({ edad }) => <Typography variant=\"body2\" fontWeight=\"medium\">{edad} a\u00F1os</Typography>}\n </Column>\n <Column name=\"Rol\" field=\"rol\">\n {({ rol }) => (\n <Chip\n label={rol!.charAt(0).toUpperCase() + rol!.slice(1)}\n color={rol === 'admin' ? 'primary' : rol === 'moderador' ? 'secondary' : 'default'}\n variant=\"outlined\"\n size=\"small\"\n />\n )}\n </Column>\n <Column name=\"Puntuaci\u00F3n\" field=\"puntuacion\">\n {({ puntuacion }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Rating value={puntuacion} max={5} precision={0.1} size=\"small\" readOnly />\n <Typography variant=\"caption\" color=\"text.secondary\">\n {puntuacion!.toFixed(1)}\n </Typography>\n </Box>\n )}\n </Column>\n </Table>\n );\n ";
|
|
10
|
-
export declare const EmployeeDetailedStatusCode = "\n<Table data={data}>\n<Column name=\"Empleado\" field={['nombre', 'apellido', 'avatar']}>\n {({ nombre, apellido, avatar }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n <Avatar src={avatar} sx={{ width: 40, height: 40 }}>\n {avatar ? '' : `${nombre!.charAt(0)}${apellido!.charAt(0)}`}\n </Avatar>\n <Typography variant=\"body2\" fontWeight=\"medium\">\n {nombre} {apellido}\n </Typography>\n </Box>\n )}\n</Column>\n<Column name=\"Departamento\" field=\"departamento\">\n {({ departamento }) => (\n <Chip\n label={departamento}\n color=\"info\"\n variant=\"filled\"\n size=\"small\"\n />\n )}\n</Column>\n<Column name=\"Salario\" field=\"salario\">\n {({ salario }) => (\n <Typography variant=\"body2\" fontWeight=\"bold\" color=\"success.dark\">\n ${salario!.toLocaleString('es-ES')}\n </Typography>\n )}\n</Column>\n<Column name=\"Estado de Contrataci\u00F3n\" field={['activo', 'fechaIngreso']}>\n {({ activo, fechaIngreso }) => (\n <Box>\n <Chip\n label={activo ? 'Contratado' : 'Inactivo'}\n color={activo ? 'success' : 'error'}\n size=\"small\"\n />\n <Typography variant=\"caption\" display=\"block\" color=\"text.secondary\" sx={{ mt: 0.5 }}>\n Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}\n </Typography>\n </Box>\n )}\n</Column>\n</Table>\n";
|
|
11
|
-
export declare const ActionsColumnCode = "\n <Table data={data}>\n <Column name=\"Nombre\" field=\"nombre\">\n {({ nombre }) => <Typography variant=\"body2\">{nombre}</Typography>}\n </Column>\n <Column name=\"Email\" field=\"email\">\n {({ email }) => <Typography variant=\"body2\" color=\"text.secondary\">{email}</Typography>}\n </Column>\n <Column name=\"Acciones\" field=\"id\"> \n {({ id }) => (\n <Button\n variant=\"contained\"\n color=\"primary\"\n size=\"small\"\n onClick={() => alert('ID del usuario: '+id )} // Log al hacer clic\n >\n Ver Detalles ({id})\n </Button>\n )}\n </Column>\n </Table>\n ";
|
|
12
|
-
export declare const TableWithExportCode = "\n <Table<Usuario>\n data={usuarios}\n enableExport={enableExport}\n exportFileName={exportFileName}\n exportButtonText={exportButtonText}\n exportColumns={exportColumns}\n >\n <Column<Usuario> name=\"ID\" field=\"id\">\n {(row) => <Typography>{row.id}</Typography>}\n </Column>\n <Column<Usuario> name=\"Nombre\" field=\"nombre\">\n {(row) => <Typography>{row.nombre}</Typography>}\n </Column>\n <Column<Usuario> name=\"Email\" field=\"email\">\n {({ email }) => <Link href={`mailto:${email}`}>{email}</Link>}\n </Column>\n <Column<Usuario> name=\"Edad\" field=\"edad\">\n {(row) => <Typography>{row.edad}</Typography>}\n </Column>\n <Column<Usuario> name=\"Rol\" field=\"rol\">\n {({ rol }) => <Chip label={rol} size=\"small\" />}\n </Column>\n <Column<Usuario> name=\"Acciones\" field=\"id\">\n {({ id }) => (\n <Button variant=\"outlined\" size=\"small\" onClick={() => alert(`Ver detalles de usuario ${id}`)}>\n Ver\n </Button>\n )}\n </Column>\n </Table>\n ";
|
|
13
|
-
export declare const WithRowSelectionCode = "\n\n const [selectedItems, setSelectedItems] = useState<UserData[]>([]);\n\n const handleSelectionChange = (items: UserData[]) => {\n setSelectedItems(items);\n args.onSelectionChange?.(items);\n };\n\n const handleBulkDelete = () => {\n if (selectedItems.length > 0) {\n alert(`Eliminando ${selectedItems.length} usuarios: ${selectedItems.map(item => item.nombre).join(', ')}`);\n setSelectedItems([]);\n } else {\n alert('No hay elementos seleccionados para eliminar.');\n }\n };\n\n const handleBulkUpdateCity = () => {\n if (selectedItems.length > 0) {\n const newCity = prompt('Ingresa la nueva ciudad para los seleccionados:');\n if (newCity) {\n alert(`Actualizando ciudad de ${selectedItems.length} usuarios a ${newCity}`);\n setSelectedItems([]);\n }\n } else {\n alert('No hay elementos seleccionados para actualizar.');\n }\n };\n\n return (\n <Box>\n <Typography variant=\"h6\" gutterBottom>\n Tabla con Selecci\u00F3n de Filas\n </Typography>\n {selectedItems.length > 0 && (\n <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>\n <Button variant=\"contained\" color=\"error\" onClick={handleBulkDelete}>\n Eliminar ({selectedItems.length})\n </Button>\n <Button variant=\"contained\" color=\"primary\" onClick={handleBulkUpdateCity}>\n Actualizar Ciudad ({selectedItems.length})\n </Button>\n <Typography variant=\"body2\" sx={{ alignSelf: 'center', ml: 2 }}>\n Elementos seleccionados: {selectedItems.length}\n </Typography>\n </Box>\n )}\n <Table<UserData>\n {...args}\n data={sampleData} // Usamos sampleData para esta historia\n enableRowSelection={true}\n rowIdentifier=\"id\" // Es crucial que coincida con una clave \u00FAnica en tus datos\n onSelectionChange={handleSelectionChange}\n pageSizeSelectorValue={5}\n >\n <Column<UserData>\n name=\"ID\"\n field=\"id\"\n children={(row) => <Typography>{row.id}</Typography>}\n />\n <Column<UserData>\n name=\"Nombre\"\n field=\"name\"\n children={(row) => <Typography>{row.name}</Typography>}\n />\n <Column<UserData>\n name=\"Email\"\n field=\"email\"\n children={(row) => <Typography>{row.email}</Typography>}\n />\n <Column<UserData>\n name=\"Ciudad\"\n field=\"city\"\n children={(row) => <Typography>{row.city}</Typography>}\n />\n </Table>\n </Box>\n );\n\n";
|
|
14
|
-
export declare const WithExportAndSelectionCode = "\n const [selectedItems, setSelectedItems] = useState<UserData[]>([]);\n\n const handleSelectionChange = (items: UserData[]) => {\n setSelectedItems(items);\n args.onSelectionChange?.(items);\n };\n\n return (\n <Box>\n <Typography variant=\"h6\" gutterBottom>\n Tabla con Exportaci\u00F3n y Selecci\u00F3n de Filas\n </Typography>\n {selectedItems.length > 0 && (\n <Box sx={{ mb: 2 }}>\n <Typography variant=\"body2\">\n Elementos seleccionados: {selectedItems.length}\n </Typography>\n </Box>\n )}\n <Table<UserData>\n {...args}\n data={sampleData} // Usamos sampleData para esta historia\n enableRowSelection={true}\n rowIdentifier=\"id\"\n onSelectionChange={handleSelectionChange}\n pageSizeSelectorValue={5}\n enableCSVExport={true}\n csvExportFileName=\"users_data_with_selection\"\n enableExcelExport={true}\n excelExportFileName=\"users_data_with_selection\"\n >\n <Column<UserData>\n name=\"ID\"\n field=\"id\"\n children={(row) => <Typography>{row.id}</Typography>}\n />\n <Column<UserData>\n name=\"Nombre\"\n field=\"name\"\n children={(row) => <Typography>{row.name}</Typography>}\n />\n <Column<UserData>\n name=\"Email\"\n field=\"email\"\n children={(row) => <Typography>{row.email}</Typography>}\n />\n <Column<UserData>\n name=\"Ciudad\"\n field=\"city\"\n children={(row) => <Typography>{row.city}</Typography>}\n />\n </Table>\n </Box>\n );\n";
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
export declare const DefaultTabDefinition: string;
|
|
2
|
-
export declare const ScrollTabDefinition: string;
|
|
3
|
-
export declare const VeriticalTabDefinition = "\n <Tabs orientation=\"vertical\">\n <Tab label=\"Home\" >\n <div>\n hola 1\n </div>\n </Tab>\n <Tab label=\"Settings\" >\n <div>\n hola 2\n </div>\n </Tab>\n <Tab label=\"Profile\" >\n <div>\n hola 3\n </div>\n </Tab>\n </Tabs>\n";
|