@soyfri/shared-library 2.0.0-beta.0 → 2.0.0-beta.2

package/src/components/Table/Table.definition.ts

@@ -1,580 +0,0 @@
-export const BasicTableCode = `
-        <Table data={data} visiblePageNumbers={5} pageSizeSelectorValue={1} pageSize={1}>
-      <Column name="Nombre" field="nombre">
-        {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
-      </Column>
-      <Column name="Email" field="email">
-        {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
-      </Column>
-      <Column name="Edad" field="edad">
-        {({ edad }) => <Typography variant="body2">{edad} años</Typography>}
-      </Column>
-    </Table>
-`
-
-export const ComplexComponentsCode =`
-          <Table data={data}>
-            <Column name="Usuario" field={['avatar', 'nombre']}>
-              {({ avatar, nombre }) => (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                  <Avatar src={avatar} alt={nombre} sx={{ width: 40, height: 40 }} />
-                  <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
-                </Box>
-              )}
-            </Column>
-            <Column name="Estado" field="activo">
-              {({ activo }) => (
-                <Chip
-                  label={activo ? 'Activo' : 'Inactivo'}
-                  color={activo ? 'success' : 'default'}
-                  size="small"
-                />
-              )}
-            </Column>
-            <Column name="Rol" field="rol">
-              {({ rol }) => (
-                <Chip
-                  label={rol!.charAt(0).toUpperCase() + rol!.slice(1)}
-                  color={rol === 'admin' ? 'primary' : rol === 'moderador' ? 'secondary' : 'default'}
-                  variant="outlined"
-                  size="small"
-                />
-              )}
-            </Column>
-            <Column name="Puntuación" field="puntuacion">
-              {({ puntuacion }) => (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Rating value={puntuacion} max={5} precision={0.1} size="small" readOnly />
-                  <Typography variant="caption" color="text.secondary">
-                    {puntuacion}
-                  </Typography>
-                </Box>
-              )}
-            </Column>
-          </Table>
-        `
-
-export const WithExternalPaginationControlCode = `
-          const [currentPage, setCurrentPage] = useState(1);
-          const [pageSize, setPageSize] = useState(2);
-          const totalItems = usuarios.length;
-          const totalPages = Math.ceil(totalItems / pageSize);
-
-          const startIndex = (currentPage - 1) * pageSize;
-          const currentData = usuarios.slice(startIndex, startIndex + pageSize);
-
-          const previousPageNum = currentPage > 1 ? currentPage - 1 : 1;
-          const nextPageNum = currentPage < totalPages ? currentPage + 1 : totalPages;
-
-          return (
-            <Table
-              data={currentData} // Pasa solo los datos de la página actual
-              currentPage={currentPage}
-              pageSize={pageSize}
-              totalPages={totalPages}
-              previousPage={previousPageNum}
-              nextPage={nextPageNum}
-              onPageChange={setCurrentPage}
-              onPageSizeChange={setPageSize}
-            >
-              <Column name="Nombre" field="nombre">
-                {({ nombre }) => <Typography variant="body2" fontWeight="medium">{nombre}</Typography>}
-              </Column>
-              <Column name="Email" field="email">
-                {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
-              </Column>
-              <Column name="Estado" field="activo">
-                {({ activo }) => (
-                  <Chip
-                    label={activo ? 'Activo' : 'Inactivo'}
-                    color={activo ? 'success' : 'default'}
-                    size="small"
-                  />
-                )}
-              </Column>
-              <Column name="Fecha de Registro" field="fechaRegistro">
-                {({ fechaRegistro }) => (
-                  <Typography variant="body2">
-                    {new Date(fechaRegistro!).toLocaleDateString('es-ES')}
-                  </Typography>
-                )}
-              </Column>
-            </Table>
-          );
-        `
-
-export const ProductTableCode = `
-          <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
-          <Column name="Producto" field={['imagen', 'nombre']}>
-            {({ imagen, nombre }) => (
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                <Box
-                  component="img"
-                  src={imagen}
-                  alt={nombre}
-                  sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}
-                />
-                <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
-              </Box>
-            )}
-          </Column>
-          <Column name="Precio" field={['precio', 'enOferta']}>
-            {({ precio, enOferta }) => (
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <Typography
-                  variant="body2"
-                  color={enOferta ? 'error.main' : 'text.primary'}
-                  fontWeight={enOferta ? 'bold' : 'normal'}
-                >
-                  \${precio!.toLocaleString()}
-                </Typography>
-                {enOferta && (
-                  <Chip label="OFERTA" color="error" size="small" />
-                )}
-              </Box>
-            )}
-          </Column>
-          <Column name="Stock" field="stock">
-            {({ stock }) => (
-              <Chip
-                label={stock! > 0 ? \`\${stock} unidades\` : 'Sin stock'}
-                color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}
-                size="small"
-              />
-            )}
-          </Column>
-          <Column name="Categoría" field="categoria">
-            {({ categoria }) => (
-              <Typography variant="body2">{categoria}</Typography>
-            )}
-          </Column>
-          <Column name="Rating" field="rating">
-            {({ rating }) => (
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
-                <Typography variant="caption">({rating})</Typography>
-              </Box>
-            )}
-          </Column>
-        </Table>
-        `
-
-export const EmployeeTableCode = `
-          <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
-            <Column name="Empleado" field={['avatar', 'nombre', 'apellido']}>
-              {({ avatar, nombre, apellido }) => (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                  <Avatar src={avatar} sx={{ width: 40, height: 40 }}>
-                    {avatar ? '' : \`\${nombre!.charAt(0)}\${apellido!.charAt(0)}\`}
-                  </Avatar>
-                  <Typography variant="body2" fontWeight="medium">
-                    {nombre} {apellido}
-                  </Typography>
-                </Box>
-              )}
-            </Column>
-            <Column name="Departamento" field="departamento">
-              {({ departamento }) => (
-                <Chip
-                  label={departamento}
-                  color="info"
-                  variant="filled"
-                  size="small"
-                />
-              )}
-            </Column>
-            <Column name="Salario" field="salario">
-              {({ salario }) => (
-                <Typography variant="body2" fontWeight="bold" color="success.dark">
-                  \${salario!.toLocaleString('es-ES')}
-                </Typography>
-              )}
-            </Column>
-            <Column name="Estado" field={['activo', 'fechaIngreso']}>
-              {({ activo, fechaIngreso }) => (
-                <Box>
-                  <Chip
-                    label={activo ? 'Contratado' : 'Inactivo'}
-                    color={activo ? 'success' : 'error'}
-                    size="small"
-                  />
-                  <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
-                    Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
-                  </Typography>
-                </Box>
-              )}
-            </Column>
-          </Table>
-        `
-
-export const EmptyTableCode = `
-          <Table data={data}>
-            <Column name="Nombre" field="nombre">
-              {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
-            </Column>
-            <Column name="Email" field="email">
-              {({ email }) => <Typography variant="body2">{email}</Typography>}
-            </Column>
-            <Column name="Estado" field="activo">
-              {({ activo }) => <Chip label={activo ? 'Activo' : 'Inactivo'} size="small" />}
-            </Column>
-          </Table>
-        `
-
-export const SingleRowCode = `
-          <Table data={data}>
-            <Column name="Usuario" field={['avatar', 'nombre', 'email']}>
-              {({ avatar, nombre, email }) => (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                  <Avatar src={avatar} alt={nombre} />
-                  <Box>
-                    <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
-                    <Typography variant="caption" color="text.secondary">{email}</Typography>
-                  </Box>
-                </Box>
-              )}
-            </Column>
-            <Column<Usuario> name="Información" field={[]}>
-              {(user) => (
-                <>
-                  <Typography variant="body2">{user.edad} años</Typography>
-                  <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
-                    <Chip label={user.rol} size="small" color="primary" variant="outlined" />
-                    <Chip
-                      label={user.activo ? 'Activo' : 'Inactivo'}
-                      size="small"
-                      color={user.activo ? 'success' : 'default'}
-                    />
-                  </Box>
-                </>
-              )}
-            </Column>
-          </Table>
-        `
-export const ProductTableWithZeroStockHighlightedCode =`
-          <Table data={data}>
-            <Column name="Producto" field={['imagen', 'nombre']}>
-              {({ imagen, nombre }) => (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                  <Box
-                    component="img"
-                    src={imagen}
-                    alt={nombre}
-                    sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}
-                  />
-                  <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
-                </Box>
-              )}
-            </Column>
-            <Column name="Precio" field={['precio', 'enOferta']}>
-              {({ precio, enOferta }) => (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Typography
-                    variant="body2"
-                    color={enOferta ? 'error.main' : 'text.primary'}
-                    fontWeight={enOferta ? 'bold' : 'normal'}
-                  >
-                    \${precio!.toLocaleString()}
-                  </Typography>
-                  {enOferta && (
-                    <Chip label="OFERTA" color="error" size="small" />
-                  )}
-                </Box>
-              )}
-            </Column>
-            <Column name="Stock" field="stock">
-              {({ stock }) => (
-                <Chip
-                  label={stock! > 0 ? \`\${stock} unidades\` : 'Sin stock'}
-                  color={stock!> 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}
-                  size="small"
-                  sx={{ backgroundColor: stock === 0 ? 'rgba(255, 0, 0, 0.1)' : undefined }}
-                />
-              )}
-            </Column>
-            <Column name="Rating" field="rating">
-              {({ rating }) => (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
-                  <Typography variant="caption">({rating})</Typography>
-                </Box>
-              )}
-            </Column>
-          </Table>
-        `
-
-export const UserTableSortedByAgeCode = `
-          const sortedUsers = [...usuarios].sort((a, b) => a.edad - b.edad);
-          return (
-            <Table {...args} data={sortedUsers.slice(0, 4)}>
-              <Column name="Nombre" field="nombre">
-                {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
-              </Column>
-              <Column name="Edad" field="edad">
-                {({ edad }) => <Typography variant="body2" fontWeight="medium">{edad} años</Typography>}
-              </Column>
-              <Column name="Rol" field="rol">
-                {({ rol }) => (
-                  <Chip
-                    label={rol!.charAt(0).toUpperCase() + rol!.slice(1)}
-                    color={rol === 'admin' ? 'primary' : rol === 'moderador' ? 'secondary' : 'default'}
-                    variant="outlined"
-                    size="small"
-                  />
-                )}
-              </Column>
-              <Column name="Puntuación" field="puntuacion">
-                {({ puntuacion }) => (
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Rating value={puntuacion} max={5} precision={0.1} size="small" readOnly />
-                    <Typography variant="caption" color="text.secondary">
-                      {puntuacion!.toFixed(1)}
-                    </Typography>
-                  </Box>
-                )}
-              </Column>
-            </Table>
-          );
-        `
-export const EmployeeDetailedStatusCode =  `
-<Table data={data}>
-<Column name="Empleado" field={['nombre', 'apellido', 'avatar']}>
-  {({ nombre, apellido, avatar }) => (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-      <Avatar src={avatar} sx={{ width: 40, height: 40 }}>
-        {avatar ? '' : \`\${nombre!.charAt(0)}\${apellido!.charAt(0)}\`}
-      </Avatar>
-      <Typography variant="body2" fontWeight="medium">
-        {nombre} {apellido}
-      </Typography>
-    </Box>
-  )}
-</Column>
-<Column name="Departamento" field="departamento">
-  {({ departamento }) => (
-    <Chip
-      label={departamento}
-      color="info"
-      variant="filled"
-      size="small"
-    />
-  )}
-</Column>
-<Column name="Salario" field="salario">
-  {({ salario }) => (
-    <Typography variant="body2" fontWeight="bold" color="success.dark">
-      \${salario!.toLocaleString('es-ES')}
-    </Typography>
-  )}
-</Column>
-<Column name="Estado de Contratación" field={['activo', 'fechaIngreso']}>
-  {({ activo, fechaIngreso }) => (
-    <Box>
-      <Chip
-        label={activo ? 'Contratado' : 'Inactivo'}
-        color={activo ? 'success' : 'error'}
-        size="small"
-      />
-      <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
-        Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
-      </Typography>
-    </Box>
-  )}
-</Column>
-</Table>
-`
-
-export const ActionsColumnCode = `
-          <Table data={data}>
-            <Column name="Nombre" field="nombre">
-              {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
-            </Column>
-            <Column name="Email" field="email">
-              {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
-            </Column>
-            <Column name="Acciones" field="id"> 
-              {({ id }) => (
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="small"
-                  onClick={() => alert('ID del usuario: '+id )} // Log al hacer clic
-                >
-                  Ver Detalles ({id})
-                </Button>
-              )}
-            </Column>
-          </Table>
-        `
-
-export const TableWithExportCode = `
-          <Table<Usuario>
-      data={usuarios}
-      enableExport={enableExport}
-      exportFileName={exportFileName}
-      exportButtonText={exportButtonText}
-      exportColumns={exportColumns}
-    >
-      <Column<Usuario> name="ID" field="id">
-        {(row) => <Typography>{row.id}</Typography>}
-      </Column>
-      <Column<Usuario> name="Nombre" field="nombre">
-        {(row) => <Typography>{row.nombre}</Typography>}
-      </Column>
-      <Column<Usuario> name="Email" field="email">
-        {({ email }) => <Link href={\`mailto:\${email}\`}>{email}</Link>}
-      </Column>
-      <Column<Usuario> name="Edad" field="edad">
-        {(row) => <Typography>{row.edad}</Typography>}
-      </Column>
-      <Column<Usuario> name="Rol" field="rol">
-        {({ rol }) => <Chip label={rol} size="small" />}
-      </Column>
-      <Column<Usuario> name="Acciones" field="id">
-        {({ id }) => (
-          <Button variant="outlined" size="small" onClick={() => alert(\`Ver detalles de usuario \${id}\`)}>
-            Ver
-          </Button>
-        )}
-      </Column>
-    </Table>
-        `
-
-export const WithRowSelectionCode = `
-
-  const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
-
-    const handleSelectionChange = (items: UserData[]) => {
-      setSelectedItems(items);
-      args.onSelectionChange?.(items);
-    };
-
-    const handleBulkDelete = () => {
-      if (selectedItems.length > 0) {
-        alert(\`Eliminando \${selectedItems.length} usuarios: \${selectedItems.map(item => item.nombre).join(', ')}\`);
-        setSelectedItems([]);
-      } else {
-        alert('No hay elementos seleccionados para eliminar.');
-      }
-    };
-
-    const handleBulkUpdateCity = () => {
-      if (selectedItems.length > 0) {
-        const newCity = prompt('Ingresa la nueva ciudad para los seleccionados:');
-        if (newCity) {
-          alert(\`Actualizando ciudad de \${selectedItems.length} usuarios a \${newCity}\`);
-          setSelectedItems([]);
-        }
-      } else {
-        alert('No hay elementos seleccionados para actualizar.');
-      }
-    };
-
-    return (
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Tabla con Selección de Filas
-        </Typography>
-        {selectedItems.length > 0 && (
-          <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>
-            <Button variant="contained" color="error" onClick={handleBulkDelete}>
-              Eliminar ({selectedItems.length})
-            </Button>
-            <Button variant="contained" color="primary" onClick={handleBulkUpdateCity}>
-              Actualizar Ciudad ({selectedItems.length})
-            </Button>
-            <Typography variant="body2" sx={{ alignSelf: 'center', ml: 2 }}>
-              Elementos seleccionados: {selectedItems.length}
-            </Typography>
-          </Box>
-        )}
-        <Table<UserData>
-          {...args}
-          data={sampleData} // Usamos sampleData para esta historia
-          enableRowSelection={true}
-          rowIdentifier="id" // Es crucial que coincida con una clave única en tus datos
-          onSelectionChange={handleSelectionChange}
-          pageSizeSelectorValue={5}
-        >
-          <Column<UserData>
-            name="ID"
-            field="id"
-            children={(row) => <Typography>{row.id}</Typography>}
-          />
-          <Column<UserData>
-            name="Nombre"
-            field="name"
-            children={(row) => <Typography>{row.name}</Typography>}
-          />
-          <Column<UserData>
-            name="Email"
-            field="email"
-            children={(row) => <Typography>{row.email}</Typography>}
-          />
-          <Column<UserData>
-            name="Ciudad"
-            field="city"
-            children={(row) => <Typography>{row.city}</Typography>}
-          />
-        </Table>
-      </Box>
-    );
-
-`
-
-export const WithExportAndSelectionCode = `
-  const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
-
-    const handleSelectionChange = (items: UserData[]) => {
-      setSelectedItems(items);
-      args.onSelectionChange?.(items);
-    };
-
-    return (
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Tabla con Exportación y Selección de Filas
-        </Typography>
-        {selectedItems.length > 0 && (
-          <Box sx={{ mb: 2 }}>
-            <Typography variant="body2">
-              Elementos seleccionados: {selectedItems.length}
-            </Typography>
-          </Box>
-        )}
-        <Table<UserData>
-          {...args}
-          data={sampleData} // Usamos sampleData para esta historia
-          enableRowSelection={true}
-          rowIdentifier="id"
-          onSelectionChange={handleSelectionChange}
-          pageSizeSelectorValue={5}
-          enableCSVExport={true}
-          csvExportFileName="users_data_with_selection"
-          enableExcelExport={true}
-          excelExportFileName="users_data_with_selection"
-        >
-          <Column<UserData>
-            name="ID"
-            field="id"
-            children={(row) => <Typography>{row.id}</Typography>}
-          />
-          <Column<UserData>
-            name="Nombre"
-            field="name"
-            children={(row) => <Typography>{row.name}</Typography>}
-          />
-          <Column<UserData>
-            name="Email"
-            field="email"
-            children={(row) => <Typography>{row.email}</Typography>}
-          />
-          <Column<UserData>
-            name="Ciudad"
-            field="city"
-            children={(row) => <Typography>{row.city}</Typography>}
-          />
-        </Table>
-      </Box>
-    );
-`