@pautena/react-design-system 0.1.1 → 0.1.2

package/src/components/sign-in/sign-in.tsx

@@ -1,97 +0,0 @@
-import React, { FormEvent, useState } from "react";
-import { Stack, Box, TextField, Typography, Alert } from "@mui/material";
-import { LoadingButton } from "@mui/lab";
-
-interface Props {
-  title: string;
-  subtitle: string;
-  error?: Error;
-  loading?: boolean;
-  onSubmitSignIn: (email: string, password: string) => void;
-}
-
-export function SignIn({ title, subtitle, loading, error, onSubmitSignIn }: Props) {
-  const [emailError, setEmailError] = useState("");
-  const [passwordError, setPasswordError] = useState("");
-
-  function handleSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setEmailError("");
-    setPasswordError("");
-
-    const data = new FormData(e.currentTarget);
-    const email = data.get("email")?.toString();
-    const password = data.get("password")?.toString();
-
-    if (!email) {
-      setEmailError("Please fill out this field");
-    }
-
-    if (!password) {
-      setPasswordError("Please fill out this field");
-    }
-
-    if (email && password) {
-      onSubmitSignIn(email, password);
-    }
-  }
-
-  return (
-    <>
-      <Box marginBottom={2}>
-        <Typography component="h1" variant="h4">
-          {title}
-        </Typography>
-        <Typography variant="body1">{subtitle}</Typography>
-      </Box>
-      <Box component="form" onSubmit={handleSubmit}>
-        {error && (
-          <Stack width="100%" marginTop={1}>
-            <Alert variant="filled" severity="error">
-              {error.message}
-            </Alert>
-          </Stack>
-        )}
-        <TextField
-          margin="normal"
-          fullWidth
-          id="email"
-          label="Email Address"
-          name="email"
-          autoComplete="email"
-          autoFocus
-          disabled={loading}
-          type="email"
-          inputProps={{ role: "input" }}
-          error={!!emailError}
-          helperText={emailError}
-        />
-        <TextField
-          margin="normal"
-          fullWidth
-          role="input"
-          name="password"
-          label="Password"
-          type="password"
-          id="password"
-          disabled={loading}
-          autoComplete="current-password"
-          inputProps={{ role: "input" }}
-          error={!!passwordError}
-          helperText={passwordError}
-        />
-        <LoadingButton
-          type="submit"
-          fullWidth
-          variant="contained"
-          loading={loading}
-          disabled={loading}
-          role="button"
-          sx={{ mt: 2 }}
-        >
-          Sign In
-        </LoadingButton>
-      </Box>
-    </>
-  );
-}

package/src/components/tab/index.ts

@@ -1,2 +0,0 @@
-export * from "./tab-panel";
-export * from "./tab-card";

package/src/components/tab/tab-card/index.ts

@@ -1 +0,0 @@
-export * from "./tab-card";

package/src/components/tab/tab-card/tab-card.dummy.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { TabCard } from "./tab-card";
-import { TabPanel } from "../tab-panel";
-import { Typography } from "@mui/material";
-import { TabProvider } from "../../../providers";
-
-export const DummyTabs = ["tab 1", "tab 2.1", "tab 2.2", "tab 3"];
-
-interface Props {
-  tabs: string[];
-  initialTab: number;
-}
-
-export function TabCardDummy({ tabs, initialTab }: Props) {
-  return (
-    <TabProvider initialValue={initialTab}>
-      <TabCard tabs={tabs}>
-        <TabPanel index={0}>
-          <Typography>Panel 1</Typography>
-        </TabPanel>
-        <TabPanel index={[1, 2]}>
-          <Typography>Panel 2</Typography>
-        </TabPanel>
-        <TabPanel index={3}>
-          <Typography>Panel 3</Typography>
-        </TabPanel>
-      </TabCard>
-    </TabProvider>
-  );
-}

package/src/components/tab/tab-card/tab-card.stories.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { TabCard } from "./tab-card";
-import { createTemplate } from "../../../storybook";
-import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
-
-export default {
-  title: "Cards/Tab card",
-  component: TabCard,
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof TabCard>;
-
-const Template = createTemplate((props) => {
-  return <TabCardDummy {...props} />;
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  tabs: DummyTabs,
-};

package/src/components/tab/tab-card/tab-card.test.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
-import { screen, render } from "../../../tests";
-import userEvent from "@testing-library/user-event";
-
-describe("TabCard", () => {
-  function renderInstance(initialValue = 0) {
-    return render(<TabCardDummy tabs={DummyTabs} initialTab={initialValue} />);
-  }
-
-  it('initialTab is not set the "panel 1" is displayed', () => {
-    renderInstance();
-
-    expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
-  });
-
-  it('initialTab is set to 3 the "panel 3" is displayed', () => {
-    renderInstance(3);
-
-    expect(screen.getByText(/panel 3/i)).toBeInTheDocument();
-  });
-
-  it.each([
-    [/tab 1/i, /panel 1/i],
-    [/tab 2.1/i, /panel 2/i],
-    [/tab 2.2/i, /panel 2/i],
-    [/tab 3/i, /panel 3/i],
-  ])(
-    'click the tab "%s" the "%s" panel is displayed',
-    async (tabName: RegExp, expectedText: RegExp) => {
-      renderInstance();
-
-      const tab = screen.getByRole("tab", { name: tabName });
-      await userEvent.click(tab);
-
-      expect(screen.getByText(expectedText)).toBeInTheDocument();
-      expect(tab).toHaveAttribute("aria-selected", "true");
-    },
-  );
-
-  it('click the tab "tab 2" and click again the tab "tab 1" the "panel 1" is displayed', async () => {
-    renderInstance();
-
-    const tab1 = screen.getByRole("tab", { name: /tab 1/i });
-    const tab2 = screen.getByRole("tab", { name: /tab 2.1/i });
-    await userEvent.click(tab2);
-    await userEvent.click(tab1);
-
-    expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
-    expect(tab1).toHaveAttribute("aria-selected", "true");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-  });
-});

package/src/components/tab/tab-card/tab-card.tsx

@@ -1,27 +0,0 @@
-import { Paper, Tabs, Tab, styled, tabsClasses } from "@mui/material";
-import React, { PropsWithChildren, useState } from "react";
-import { TabProvider, useTab } from "~/providers";
-
-const StyledTabs = styled(Tabs)(({ theme }) => ({
-  [`&.${tabsClasses.root}`]: {
-    backgroundColor: theme.palette.grey[100],
-  },
-}));
-
-interface Props {
-  tabs: string[];
-}
-
-export const TabCard = ({ children, tabs }: PropsWithChildren<Props>) => {
-  const [tab, setTab] = useTab();
-  return (
-    <Paper>
-      <StyledTabs value={tab} onChange={(_, index: number) => setTab(index)}>
-        {tabs.map((tab) => (
-          <Tab key={tab} label={tab} />
-        ))}
-      </StyledTabs>
-      {children}
-    </Paper>
-  );
-};

package/src/components/tab/tab-panel/index.ts

@@ -1 +0,0 @@
-export * from "./tab-panel";

package/src/components/tab/tab-panel/tab-panel.test.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { TabPanel } from "./tab-panel";
-import { TabProvider } from "../../../providers";
-
-describe("TabPanel", () => {
-  function renderInstance(initialValue: number) {
-    render(
-      <TabProvider initialValue={initialValue}>
-        <TabPanel index={0}>Panel content</TabPanel>
-      </TabProvider>,
-    );
-  }
-
-  it("if the provider value is the index the content is displayed", () => {
-    renderInstance(0);
-
-    expect(screen.getByText(/panel content/i)).toBeInTheDocument();
-  });
-
-  it("if the provider value is not the index the content is not displayed", () => {
-    renderInstance(1);
-
-    expect(screen.queryByText(/panel content/i)).not.toBeInTheDocument();
-  });
-});

package/src/components/tab/tab-panel/tab-panel.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import { useTab } from "~/providers";
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number | number[];
-}
-
-export function TabPanel({ children, index }: TabPanelProps) {
-  const [value] = useTab();
-  let isTab = value === index;
-  if (Array.isArray(index)) {
-    isTab = index.includes(value);
-  }
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={!isTab}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-    >
-      {isTab && <Box sx={{ p: 3 }}>{children}</Box>}
-    </div>
-  );
-}

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

@@ -1,27 +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";
-
-interface DummyProps<T> {
-  data: T[];
-  loading: boolean;
-  defaultSort: string;
-  defaultOrder?: Order;
-  columns: HeadCell[];
-  onRequestSort: (col: string, orderBy: Order) => void;
-}
-
-export function EnhancedRemoteDummyTable<T>(props: DummyProps<T>) {
-  return (
-    <EnhancedRemoteTable {...props}>
-      {(d: unknown) => (
-        <TableRow key={d.id}>
-          <TableCell>{d.name}</TableCell>
-          <TableCell>{d.id}</TableCell>
-          <TableCell>{d.startDate}</TableCell>
-        </TableRow>
-      )}
-    </EnhancedRemoteTable>
-  );
-}

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

@@ -1,24 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../../storybook";
-import { EnhancedRemoteTable } from "./enhanced-remote-table";
-import { columns, data } from "../enhanced-table/enhanced-table.mock";
-import { EnhancedRemoteDummyTable } from "./enhanced-remote-table.mock";
-
-export default {
-  title: "Tables/Enhanced remote table",
-  component: EnhancedRemoteTable,
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof EnhancedRemoteTable>;
-
-const Template = createTemplate(EnhancedRemoteDummyTable);
-
-export const Default = Template.bind({});
-Default.args = {
-  columns,
-  data,
-  loading: false,
-  defaultSort: "startDate",
-  defaultOrder: "asc",
-};

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

@@ -1,77 +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 } from "../enhanced-table/enhanced-table.mock";
-import { expectProgressIndicator } from "../../../tests";
-
-function renderInstance({
-  defaultSort = "startDate",
-  loading = false,
-}: { defaultSort?: string; loading?: boolean } = {}) {
-  const onRequestSort = jest.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/table/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";
-
-interface Props<T> {
-  data: T[];
-  loading: boolean;
-  defaultSort: string;
-  defaultOrder?: Order;
-  columns: HeadCell[];
-  children: (data: T, index: number) => ReactNode;
-  onRequestSort: (col: string, orderBy: "asc" | "desc") => void;
-}
-
-export const EnhancedRemoteTable = <T,>({
-  children,
-  data,
-  loading,
-  columns,
-  defaultSort,
-  defaultOrder,
-  onRequestSort,
-}: Props<T>) => {
-  const [order, setOrder] = useState({
-    orderBy: defaultSort,
-    order: defaultOrder || "asc",
-  });
-
-  const handleRequestSort = (property: string) => {
-    setOrder((prevState) => {
-      const newOrder = prevState.orderBy === property && prevState.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/table/enhanced-remote-table/index.ts

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

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

@@ -1,58 +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 {
-  disablePadding: boolean;
-  id: string;
-  label: string;
-  numeric: boolean;
-  sort: boolean;
-}
-
-interface Props {
-  onRequestSort: (property: string) => void;
-  order: Order;
-  orderBy: string;
-  headCells: HeadCell[];
-}
-
-export function EnhancedTableHead({ order, orderBy, headCells, onRequestSort }: Props) {
-  const createSortHandler = (property: string) => () => {
-    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/table/enhanced-table/enhanced-table.mock.tsx

@@ -1,93 +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[] = [
-  {
-    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,
-  },
-];
-
-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",
-  },
-];
-
-interface Props {
-  data: Data[];
-  columns: HeadCell[];
-  defaultSort: string;
-  defaultOrder: Order;
-  loading: boolean;
-}
-
-export const TestTable = ({ data, columns, defaultOrder, defaultSort, loading }: Props) => {
-  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/table/enhanced-table/enhanced-table.stories.tsx

@@ -1,21 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../../storybook";
-import { TestTable, columns, data } from "./enhanced-table.mock";
-
-export default {
-  title: "Tables/Table",
-  component: TestTable,
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof TestTable>;
-
-const Template = createTemplate(TestTable);
-
-export const Default = Template.bind({});
-Default.args = {
-  columns,
-  data,
-  defaultSort: "startDate",
-  defaultOrder: "asc",
-};