@pautena/react-design-system 0.11.2 → 0.12.1

package/src/components/placeholders/skeleton-grid/skeleton-grid.stories.tsx

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { SkeletonGrid } from "./skeleton-grid";
-
-export default {
-  title: "Components/Placeholders/SkeletonGrid",
-  component: SkeletonGrid,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof SkeletonGrid>;
-type Story = StoryObj<typeof SkeletonGrid>;
-
-export const Default: Story = {};

package/src/components/placeholders/skeleton-grid/skeleton-grid.tsx

@@ -1,20 +0,0 @@
-import { Grid } from "@mui/material";
-import React from "react";
-import { newArrayWithSize } from "~/utils";
-import { SkeletonCard } from "../skeleton-card";
-
-export interface SkeletonGridProps {
-  size?: number;
-}
-
-export const SkeletonGrid = ({ size = 20 }: SkeletonGridProps) => {
-  return (
-    <Grid container spacing={2}>
-      {newArrayWithSize(size, 0).map((_, i) => (
-        <Grid item key={i} xs={4}>
-          <SkeletonCard width={1} />
-        </Grid>
-      ))}
-    </Grid>
-  );
-};

package/src/components/tables/enhanced-remote-table/enhanced-remote-table.mock.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { TableCell, TableRow } from "@mui/material";
-import { EnhancedRemoteTable } from "./enhanced-remote-table";
-import { HeadCell, Order } from "../enhanced-table/enhanced-table-head";
-import { Data } from "../enhanced-table/enhanced-table.mock";
-
-export interface EnhancedRemoteDummyTableProps {
-  data: Data[];
-  loading: boolean;
-  defaultSort: keyof Data;
-  defaultOrder?: Order;
-  columns: HeadCell<Data>[];
-  onRequestSort: (col: string, orderBy: Order) => void;
-}
-
-export function EnhancedRemoteDummyTable(props: EnhancedRemoteDummyTableProps) {
-  return (
-    <EnhancedRemoteTable {...props}>
-      {(d: Data) => (
-        <TableRow key={d.id}>
-          <TableCell>{d.name}</TableCell>
-          <TableCell>{d.id}</TableCell>
-          <TableCell>{d.startDate}</TableCell>
-        </TableRow>
-      )}
-    </EnhancedRemoteTable>
-  );
-}

package/src/components/tables/enhanced-remote-table/enhanced-remote-table.stories.tsx

@@ -1,22 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { columns, data } from "../enhanced-table/enhanced-table.mock";
-import { EnhancedRemoteDummyTable } from "./enhanced-remote-table.mock";
-
-export default {
-  title: "Components/Tables/EnhancedRemoteTable",
-  component: EnhancedRemoteDummyTable,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof EnhancedRemoteDummyTable>;
-type Story = StoryObj<typeof EnhancedRemoteDummyTable>;
-
-export const Default: Story = {
-  args: {
-    columns,
-    data,
-    loading: false,
-    defaultSort: "startDate",
-    defaultOrder: "asc",
-  },
-};

package/src/components/tables/enhanced-remote-table/enhanced-remote-table.test.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-import { screen, render } from "@testing-library/react";
-import { EnhancedRemoteDummyTable } from "./enhanced-remote-table.mock";
-import userEvent from "@testing-library/user-event";
-import { columns, Data, data } from "../enhanced-table/enhanced-table.mock";
-import { expectProgressIndicator } from "~/tests/assertions";
-import { vi } from "vitest";
-
-function renderInstance({
-  defaultSort = "startDate",
-  loading = false,
-}: { defaultSort?: keyof Data; loading?: boolean } = {}) {
-  const onRequestSort = vi.fn();
-  render(
-    <EnhancedRemoteDummyTable
-      data={data}
-      columns={columns}
-      defaultSort={defaultSort}
-      defaultOrder="asc"
-      loading={loading}
-      onRequestSort={onRequestSort}
-    />,
-  );
-  return { onRequestSort };
-}
-
-describe("Table", () => {
-  it("all items are rendered in the correct", async () => {
-    renderInstance();
-
-    expect(screen.getByText("Tabata")).toBeInTheDocument();
-    expect(screen.getByText("AMRAPx2")).toBeInTheDocument();
-    expect(screen.getByText("HIIT")).toBeInTheDocument();
-    expect(screen.getByText("on/off x 1")).toBeInTheDocument();
-    expect(screen.getByText("EMOM 30'")).toBeInTheDocument();
-  });
-
-  it("loading is true a loading indicator is displayed", () => {
-    renderInstance({ loading: true });
-
-    expectProgressIndicator();
-  });
-
-  it("the defaultSort is indicated", () => {
-    renderInstance();
-
-    expect(screen.getByText(/date/i)).toHaveTextContent(/datesorted ascending/i);
-    expect(screen.getByText(/name/i)).toHaveTextContent(/name/i);
-    expect(screen.getByText(/garmin/i)).toHaveTextContent(/garmin/i);
-  });
-
-  describe("clicks 'Name'", () => {
-    it("once onRequestSort will be called to sort by name in ascendent order", async () => {
-      const { onRequestSort } = renderInstance();
-
-      await userEvent.click(screen.getByText(/name/i));
-
-      expect(screen.getByText(/date/i)).toHaveTextContent(/date/i);
-      expect(screen.getByText(/name/i)).toHaveTextContent(/namesorted ascending/i);
-      expect(screen.getByText(/garmin/i)).toHaveTextContent(/garmin/i);
-      expect(onRequestSort).toHaveBeenCalledWith("name", "asc");
-    });
-
-    it("twice onRequestSort will be called twice to sort by name in ascendent and descendent order", async () => {
-      const { onRequestSort } = renderInstance();
-
-      await userEvent.click(screen.getByText(/name/i));
-      await userEvent.click(screen.getByText(/name/i));
-
-      expect(screen.getByText(/date/i)).toHaveTextContent(/date/i);
-      expect(screen.getByText(/name/i)).toHaveTextContent(/namesorted descending/i);
-      expect(screen.getByText(/garmin/i)).toHaveTextContent(/garmin/i);
-      expect(onRequestSort).toHaveBeenCalledTimes(2);
-      expect(onRequestSort).toHaveBeenCalledWith("name", "asc");
-      expect(onRequestSort).toHaveBeenCalledWith("name", "desc");
-    });
-  });
-});

package/src/components/tables/enhanced-remote-table/enhanced-remote-table.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import { ReactNode, useState } from "react";
-import {
-  TableContainer,
-  TableBody,
-  Table,
-  TableRow,
-  CircularProgress,
-  TableCell,
-} from "@mui/material";
-import { EnhancedTableHead, HeadCell, Order } from "../enhanced-table";
-
-export interface EnhancedRemoteTableProps<T> {
-  data: T[];
-  loading: boolean;
-  defaultSort: keyof T;
-  defaultOrder?: Order;
-  columns: HeadCell<T>[];
-  children: (data: T, index: number) => ReactNode;
-  onRequestSort: (col: keyof T, orderBy: "asc" | "desc") => void;
-}
-
-export const EnhancedRemoteTable = <T,>({
-  children,
-  data,
-  loading,
-  columns,
-  defaultSort,
-  defaultOrder,
-  onRequestSort,
-}: EnhancedRemoteTableProps<T>) => {
-  const [order, setOrder] = useState({
-    orderBy: defaultSort,
-    order: defaultOrder || "asc",
-  });
-
-  const handleRequestSort = (property: keyof T) => {
-    setOrder(({ orderBy, order }) => {
-      const newOrder = orderBy === property && order === "asc" ? "desc" : "asc";
-      onRequestSort(property, newOrder);
-
-      return {
-        orderBy: property,
-        order: newOrder,
-      };
-    });
-  };
-
-  return (
-    <>
-      <TableContainer>
-        <Table>
-          <EnhancedTableHead
-            order={order.order}
-            orderBy={order.orderBy}
-            headCells={columns}
-            onRequestSort={handleRequestSort}
-          />
-          <TableBody>
-            {loading ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} sx={{ textAlign: "center" }}>
-                  <CircularProgress />
-                </TableCell>
-              </TableRow>
-            ) : (
-              data.map((d, i) => children(d, i))
-            )}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </>
-  );
-};

package/src/components/tables/enhanced-remote-table/index.ts

@@ -1 +0,0 @@
-export * from "./enhanced-remote-table";

package/src/components/tables/enhanced-table/enhanced-table-head.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { TableSortLabel, TableRow, Box, TableCell, TableHead } from "@mui/material";
-import { visuallyHidden } from "@mui/utils";
-
-export type Order = "asc" | "desc";
-export interface HeadCell<T> {
-  disablePadding: boolean;
-  id: keyof T;
-  label: string;
-  numeric: boolean;
-  sort: boolean;
-}
-
-interface EnhancedTableHeadProps<T> {
-  onRequestSort: (property: keyof T) => void;
-  order: Order;
-  orderBy: keyof T;
-  headCells: HeadCell<T>[];
-}
-
-export const EnhancedTableHead = <T,>({
-  order,
-  orderBy,
-  headCells,
-  onRequestSort,
-}: EnhancedTableHeadProps<T>) => {
-  const createSortHandler = (property: keyof T) => () => {
-    onRequestSort(property);
-  };
-
-  return (
-    <TableHead>
-      <TableRow>
-        {headCells.map((headCell) => (
-          <TableCell
-            variant="head"
-            key={String(headCell.id)}
-            padding={headCell.disablePadding ? "none" : "normal"}
-            sortDirection={orderBy === headCell.id ? order : false}
-            sx={{ fontWeight: "bold" }}
-          >
-            {headCell.sort ? (
-              <TableSortLabel
-                active={orderBy === headCell.id}
-                direction={orderBy === headCell.id ? order : "asc"}
-                onClick={createSortHandler(headCell.id)}
-              >
-                {headCell.label}
-                {orderBy === headCell.id ? (
-                  <Box component="span" sx={visuallyHidden}>
-                    {order === "desc" ? "sorted descending" : "sorted ascending"}
-                  </Box>
-                ) : null}
-              </TableSortLabel>
-            ) : (
-              headCell.label
-            )}
-          </TableCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  );
-};

package/src/components/tables/enhanced-table/enhanced-table.mock.tsx

@@ -1,99 +0,0 @@
-import React from "react";
-import { EnhancedTable } from ".";
-import { TableCell, TableRow } from "@mui/material";
-import { HeadCell, Order } from "./enhanced-table-head";
-
-export const columns: HeadCell<Data>[] = [
-  {
-    id: "name",
-    numeric: false,
-    disablePadding: false,
-    label: "Name",
-    sort: true,
-  },
-  {
-    id: "id",
-    numeric: true,
-    disablePadding: false,
-    label: "Garmin ID",
-    sort: true,
-  },
-  {
-    id: "startDate",
-    numeric: false,
-    disablePadding: false,
-    label: "Date",
-    sort: true,
-  },
-];
-
-export interface Data {
-  id: number;
-  name: string;
-  startDate: string;
-}
-
-export const data: Data[] = [
-  {
-    id: 2,
-    name: "HIIT",
-    startDate: "11/04/2022",
-  },
-  {
-    id: 1,
-    name: "on/off x 1",
-    startDate: "05/04/2022",
-  },
-  {
-    id: 3,
-    name: "EMOM 30'",
-    startDate: "07/04/2022",
-  },
-  {
-    id: 4,
-    name: "Tabata",
-    startDate: "09/04/2022",
-  },
-  {
-    id: 5,
-    name: "AMRAPx2",
-    startDate: "10/04/2022",
-  },
-];
-
-export interface TestTableProps {
-  data: Data[];
-  columns: HeadCell<Data>[];
-  defaultSort: keyof Data;
-  defaultOrder: Order;
-  loading: boolean;
-}
-
-export const TestTable = ({
-  data,
-  columns,
-  defaultOrder,
-  defaultSort,
-  loading,
-}: TestTableProps) => {
-  return (
-    <EnhancedTable
-      search
-      data={data}
-      columns={columns}
-      defaultSort={defaultSort}
-      defaultOrder={defaultOrder}
-      loading={loading}
-    >
-      {(data) =>
-        data.map((d) => (
-          <TableRow key={d.id}>
-            <TableCell>{d.name}</TableCell>
-            <TableCell>{d.id}</TableCell>
-            <TableCell>{d.startDate}</TableCell>
-          </TableRow>
-        ))
-      }
-    </EnhancedTable>
-  );
-};

package/src/components/tables/enhanced-table/enhanced-table.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { TestTable, columns, data } from "./enhanced-table.mock";
-
-export default {
-  title: "Components/Tables/EnhancedTable",
-  component: TestTable,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof TestTable>;
-type Story = StoryObj<typeof TestTable>;
-
-export const Default: Story = {
-  args: {
-    columns,
-    data,
-    defaultSort: "startDate",
-    defaultOrder: "asc",
-  },
-};

package/src/components/tables/enhanced-table/enhanced-table.test.tsx

@@ -1,108 +0,0 @@
-import React from "react";
-import { render } from "~/tests/testing-library";
-import { screen } from "@testing-library/react";
-import userEvents from "@testing-library/user-event";
-import { TestTable, columns, data, Data } from "./enhanced-table.mock";
-import { expectProgressIndicator } from "~/tests/assertions";
-
-const renderInstance = ({
-  defaultSort = "startDate",
-  loading = false,
-}: { defaultSort?: keyof Data; loading?: boolean } = {}) => {
-  return render(
-    <TestTable
-      data={data}
-      columns={columns}
-      defaultSort={defaultSort}
-      defaultOrder="asc"
-      loading={loading}
-    />,
-  );
-};
-
-describe("EnhancedTable", () => {
-  it("all items are rendered in the correct order", async () => {
-    renderInstance();
-
-    expect(screen.getByText("Tabata")).toBeInTheDocument();
-    expect(screen.getByText("AMRAPx2")).toBeInTheDocument();
-    expect(screen.getByText("HIIT")).toBeInTheDocument();
-    expect(screen.getByText("on/off x 1")).toBeInTheDocument();
-    expect(screen.getByText("EMOM 30'")).toBeInTheDocument();
-  });
-
-  it("loading is true a loading indicator is displayed", () => {
-    renderInstance({ loading: true });
-
-    expectProgressIndicator();
-  });
-
-  it("all items are sorted by the default sort field", () => {
-    renderInstance({ defaultSort: "startDate" });
-
-    const rows = screen.queryAllByRole("row");
-    expect(rows[1]).toHaveTextContent("on/off x 1105/04/2022");
-    expect(rows[2]).toHaveTextContent("EMOM 30'307/04/2022");
-    expect(rows[3]).toHaveTextContent("Tabata409/04/2022");
-    expect(rows[4]).toHaveTextContent("AMRAPx2510/04/2022");
-    expect(rows[5]).toHaveTextContent("HIIT211/04/2022");
-  });
-
-  describe("if I search an 'a'", () => {
-    it("only the Tabata and AMRAPx2 items appear", async () => {
-      renderInstance();
-
-      await userEvents.type(screen.getByPlaceholderText(/search/i), "a");
-
-      expect(screen.getByText("Tabata")).toBeInTheDocument();
-      expect(screen.getByText("AMRAPx2")).toBeInTheDocument();
-
-      expect(screen.queryByText("HIIT")).not.toBeInTheDocument();
-      expect(screen.queryByText("on/off x 1")).not.toBeInTheDocument();
-      expect(screen.queryByText("EMOM 30'")).not.toBeInTheDocument();
-    });
-
-    it("and remove the search all items appear", async () => {
-      renderInstance();
-
-      const search = screen.getByPlaceholderText(/search/i);
-      await userEvents.type(search, "a");
-      await userEvents.clear(search);
-
-      expect(screen.getByText("Tabata")).toBeInTheDocument();
-      expect(screen.getByText("AMRAPx2")).toBeInTheDocument();
-      expect(screen.getByText("HIIT")).toBeInTheDocument();
-      expect(screen.getByText("on/off x 1")).toBeInTheDocument();
-      expect(screen.getByText("EMOM 30'")).toBeInTheDocument();
-    });
-  });
-
-  describe("If I click 'Garmin ID'", () => {
-    it("once it will be asc sorted", async () => {
-      renderInstance();
-
-      await userEvents.click(screen.getByText(/garmin id/i));
-
-      const rows = screen.queryAllByRole("row");
-      expect(rows[1]).toHaveTextContent("on/off x 1105/04/2022");
-      expect(rows[2]).toHaveTextContent("HIIT211/04/2022");
-      expect(rows[3]).toHaveTextContent("EMOM 30'307/04/2022");
-      expect(rows[4]).toHaveTextContent("Tabata409/04/2022");
-      expect(rows[5]).toHaveTextContent("AMRAPx2510/04/2022");
-    });
-
-    it("two times it will be desc sorted", async () => {
-      renderInstance();
-
-      await userEvents.click(screen.getByText(/garmin id/i));
-      await userEvents.click(screen.getByText(/garmin id/i));
-
-      const rows = screen.queryAllByRole("row");
-      expect(rows[1]).toHaveTextContent("AMRAPx2510/04/2022");
-      expect(rows[2]).toHaveTextContent("Tabata409/04/2022");
-      expect(rows[3]).toHaveTextContent("EMOM 30'307/04/2022");
-      expect(rows[4]).toHaveTextContent("HIIT211/04/2022");
-      expect(rows[5]).toHaveTextContent("on/off x 1105/04/2022");
-    });
-  });
-});

package/src/components/tables/enhanced-table/enhanced-table.tsx

@@ -1,136 +0,0 @@
-import React, { ChangeEvent } from "react";
-import { ReactNode, useState } from "react";
-import {
-  Box,
-  TableContainer,
-  TextField,
-  TableBody,
-  InputAdornment,
-  Table,
-  CircularProgress,
-  TableCell,
-  TableRow,
-} from "@mui/material";
-import Search from "@mui/icons-material/Search";
-import { EnhancedTableHead, HeadCell, Order } from "./enhanced-table-head";
-
-function getFilter<T>(columns: HeadCell<T>[], search: string) {
-  return (d: T) => {
-    return (
-      !search ||
-      columns.some((col) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let value = (d as any)[col.id];
-        if (value?.toLowerCase) {
-          value = value.toLowerCase();
-        }
-        return value?.toString().includes(search.toLowerCase());
-      })
-    );
-  };
-}
-
-function getComparator<T>(order: Order, orderBy: keyof T): (a: T, b: T) => number {
-  return order === "desc"
-    ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
-}
-function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
-  if (b[orderBy] < a[orderBy]) {
-    return -1;
-  }
-  if (b[orderBy] > a[orderBy]) {
-    return 1;
-  }
-  return 0;
-}
-
-interface Props<T> {
-  readonly data: T[];
-  search?: boolean;
-  defaultSort: keyof T;
-  defaultOrder?: Order;
-  loading?: boolean;
-  columns: HeadCell<T>[];
-  children: (data: T[]) => ReactNode;
-}
-
-export const EnhancedTable = <T,>({
-  children,
-  data,
-  search,
-  columns,
-  defaultSort,
-  defaultOrder = "asc",
-  loading = false,
-}: Props<T>) => {
-  const [searchFilter, setSearchFilter] = useState<string>("");
-  const [order, setOrder] = useState<Order>(defaultOrder);
-  const [orderBy, setOrderBy] = useState<keyof T>(defaultSort);
-
-  const handleRequestSort = (property: keyof T) => {
-    const isAsc = orderBy === property && order === "asc";
-    setOrder(isAsc ? "desc" : "asc");
-    setOrderBy(property);
-  };
-
-  const filteredData = data
-    .slice()
-    .filter(getFilter<T>(columns, searchFilter))
-    .sort(getComparator(order, orderBy));
-
-  return (
-    <>
-      <Box sx={{ paddingX: 1, paddingBottom: 2 }}>
-        {search && (
-          <Box paddingY={2}>
-            <TextField
-              fullWidth
-              placeholder="Search"
-              InputProps={{
-                role: "search",
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <Search />
-                  </InputAdornment>
-                ),
-              }}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchFilter(e.target.value)}
-            />
-          </Box>
-        )}
-        <TableContainer>
-          <Table>
-            <EnhancedTableHead
-              order={order}
-              orderBy={orderBy}
-              headCells={columns}
-              onRequestSort={handleRequestSort}
-            />
-            <TableBody>
-              {loading ? (
-                <TableRow>
-                  <TableCell colSpan={columns.length} sx={{ textAlign: "center" }}>
-                    <CircularProgress />
-                  </TableCell>
-                </TableRow>
-              ) : filteredData.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={columns.length} sx={{ textAlign: "center" }}>
-                    No data
-                  </TableCell>
-                </TableRow>
-              ) : (
-                children(filteredData)
-              )}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Box>
-    </>
-  );
-};
-
-EnhancedTable.defaultProps = {
-  defaultOrder: "asc",
-};

package/src/components/tables/enhanced-table/index.ts

@@ -1,2 +0,0 @@
-export * from "./enhanced-table";
-export * from "./enhanced-table-head";

package/src/components/tables/index.ts

@@ -1,2 +0,0 @@
-export * from "./enhanced-table";
-export * from "./enhanced-remote-table";

package/src/components/tables/table.stories.mdx

@@ -1,11 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Components/Tables/Introduction" />
-
-# Tables
-
-<ul>
-  <li><LinkTo kind="Components/Tables/EnhancedRemoteTable">EnhancedRemoteTable</LinkTo></li>
-  <li><LinkTo kind="Components/Tables/EnhancedTable">EnhancedTable</LinkTo></li>
-</ul>