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

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

@@ -0,0 +1,580 @@
+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>
+    );
+`