@pautena/react-design-system 0.0.1

package/src/components/placeholder/placeholder.test.tsx

@@ -0,0 +1,76 @@
+import React, { ReactElement } from "react";
+import { render, screen } from "../../tests";
+import userEvent from "@testing-library/user-event";
+import { Placeholder, PlaceholderAction } from "./placeholder";
+import { actions as actionData } from "./placeholder.mock";
+import SearchIcon from "@mui/icons-material/Search";
+
+const actions = actionData.map((a) => ({ ...a, onClick: jest.fn() }));
+
+describe("Placeholder", () => {
+  const renderComponent = ({
+    actions = undefined,
+    icon = undefined,
+  }: { actions?: PlaceholderAction[]; icon?: ReactElement } = {}) => {
+    return render(
+      <Placeholder
+        title="Lorem ipsum"
+        subtitle="Lorem ipsum sit amet"
+        actions={actions}
+        icon={() => icon}
+      />,
+    );
+  };
+
+  it("would render the title", () => {
+    renderComponent();
+
+    expect(screen.getByRole("heading", { name: /lorem ipsum/i, level: 1 })).toBeInTheDocument();
+  });
+
+  it("would render the subtitle", () => {
+    renderComponent();
+
+    expect(
+      screen.getByRole("heading", { name: /lorem ipsum sit amet/i, level: 2 }),
+    ).toBeInTheDocument();
+  });
+
+  describe("icon", () => {
+    it("wouldn't render an icon if it's not set", () => {
+      renderComponent({ icon: undefined });
+
+      expect(screen.queryByTestId("SearchIcon")).not.toBeInTheDocument();
+    });
+
+    it("would render an icon if it's set", () => {
+      renderComponent({ icon: <SearchIcon /> });
+
+      expect(screen.queryByTestId("SearchIcon")).toBeInTheDocument();
+    });
+  });
+
+  describe("actions", () => {
+    it("wouldn't render an action if they are not set", () => {
+      renderComponent({ actions: undefined });
+
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("would render a button for each action", () => {
+      renderComponent({ actions });
+
+      expect(screen.queryAllByRole("button")).toHaveLength(actions.length);
+      expect(screen.queryByRole("button", { name: /add/i })).toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: /edit/i })).toBeInTheDocument();
+    });
+
+    it("would call onClick if a button is clicked", async () => {
+      renderComponent({ actions });
+
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+
+      expect(actions[1].onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/placeholder/placeholder.tsx

@@ -0,0 +1,75 @@
+import React, { ReactElement } from "react";
+import { Box, Typography, Button } from "@mui/material";
+
+type IconColor =
+  | "inherit"
+  | "action"
+  | "disabled"
+  | "primary"
+  | "secondary"
+  | "error"
+  | "info"
+  | "success"
+  | "warning";
+
+export interface PlaceholderAction {
+  id: string;
+  text: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface PlaceholderIconArgs {
+  size: number;
+  color: IconColor;
+}
+
+export interface PlaceholderProps {
+  title: string;
+  subtitle: string;
+  iconSize?: number;
+  icon?: ({ size, color }: PlaceholderIconArgs) => ReactElement;
+  actions?: PlaceholderAction[];
+}
+
+export const Placeholder = ({
+  title,
+  subtitle,
+  icon,
+  iconSize = 200,
+  actions,
+}: PlaceholderProps) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      textAlign="center"
+    >
+      {icon && icon({ size: iconSize, color: "primary" })}
+      <Typography variant="h4" role="heading" aria-level={1}>
+        {title}
+      </Typography>
+      <Typography variant="subtitle1" role="heading" aria-level={2} sx={{ mt: 2 }}>
+        {subtitle}
+      </Typography>
+      {actions && (
+        <Box sx={{ pt: 2 }}>
+          {actions.map(({ id, text, href, onClick }, index) => (
+            <Button
+              key={id}
+              role="button"
+              variant="contained"
+              href={href}
+              onClick={onClick}
+              sx={{ mr: index < actions.length - 1 ? 2 : 0 }}
+            >
+              {text}
+            </Button>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/query-container/index.ts

@@ -0,0 +1 @@
+export * from "./query-container";

package/src/components/query-container/query-container.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate, withPadding } from "../../storybook";
+import { QueryContainer, QueryContainerProps } from "./query-container";
+import { Typography, Box } from "@mui/material";
+
+export default {
+  title: "Components/QueryContainer",
+  component: QueryContainer,
+  decorators: [withPadding()],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof QueryContainer>;
+
+const Template = createTemplate((args: QueryContainerProps) => {
+  return (
+    <Box height={300}>
+      <QueryContainer {...args}>
+        <Typography>Children content</Typography>
+      </QueryContainer>
+    </Box>
+  );
+});
+
+export const Fetching = Template.bind({});
+Fetching.args = {
+  isFetching: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  isFetching: false,
+  error: {
+    name: "Sign in error",
+    message: "User and password doesn't match",
+  },
+};
+
+export const ErrorWithOnlyMessage = Template.bind({});
+ErrorWithOnlyMessage.args = {
+  isFetching: false,
+  error: {
+    message: "Internal error",
+  },
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  isFetching: false,
+  success: {
+    name: "Item added",
+    message: "The new item has been created with id 1",
+  },
+};
+
+export const SuccessWithOnlyMessage = Template.bind({});
+SuccessWithOnlyMessage.args = {
+  isFetching: false,
+  success: {
+    message: "The new item has been created with id 1",
+  },
+};
+
+export const Content = Template.bind({});
+Content.args = {
+  isFetching: false,
+};

package/src/components/query-container/query-container.test.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { QueryContainer, QueryContainerError, QueryContainerSuccess } from "./query-container";
+import { expectProgressIndicator, render, screen } from "../../tests";
+import { Typography } from "@mui/material";
+
+describe("QueryContainer", () => {
+  const renderComponent = ({
+    isFetching = false,
+    error = undefined,
+    success = undefined,
+  }: {
+    isFetching?: boolean;
+    error?: QueryContainerError;
+    success?: QueryContainerSuccess;
+  } = {}) => {
+    return render(
+      <QueryContainer isFetching={isFetching} error={error} success={success}>
+        <Typography>children content</Typography>
+      </QueryContainer>,
+    );
+  };
+
+  it("would render a loading indicator if isFetching is true", () => {
+    renderComponent({ isFetching: true });
+
+    expectProgressIndicator();
+  });
+
+  describe("error", () => {
+    it("would render an error alert", () => {
+      renderComponent({ error: { message: "Internal error" } });
+
+      expect(screen.getByRole("alert")).toHaveAttribute("aria-describedby", "error");
+    });
+
+    it("would render the error message if error is defined", () => {
+      renderComponent({ error: { message: "Internal error" } });
+
+      expect(screen.getByText(/internal error/i)).toBeInTheDocument();
+    });
+
+    it("would render the error title if error.name is defined", () => {
+      renderComponent({ error: { name: "Internal error", message: "There was an error" } });
+
+      expect(screen.getByRole("heading", { name: /internal error/i })).toBeInTheDocument();
+    });
+
+    it("wouldn't render the error title if error is defined but the error.name not", () => {
+      renderComponent({ error: { message: "Internal error" } });
+
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("success", () => {
+    it("would render a success alert", () => {
+      renderComponent({ success: { message: "Item added" } });
+
+      expect(screen.getByRole("alert")).toHaveAttribute("aria-describedby", "success");
+    });
+
+    it("would render the success message if success is defined", () => {
+      renderComponent({ success: { message: "Item added" } });
+
+      expect(screen.getByText(/item added/i)).toBeInTheDocument();
+    });
+
+    it("would render the success title if success.name is defined", () => {
+      renderComponent({
+        success: { name: "Item added", message: "The item has been added successfully" },
+      });
+
+      expect(screen.getByRole("heading", { name: /item added/i })).toBeInTheDocument();
+    });
+
+    it("wouldn't render the error title if success is defined but the success.name not", () => {
+      renderComponent({ success: { message: "Item added" } });
+
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+    });
+    //TODO validate the severity of the alert
+
+    it("would render the content", () => {
+      renderComponent({ success: { message: "Item added" } });
+
+      expect(screen.getByText(/children content/i)).toBeInTheDocument();
+    });
+  });
+
+  it("would render the children if isFetching is false and there is no defined error", () => {
+    renderComponent({ isFetching: false, error: undefined });
+
+    expect(screen.getByText(/children content/i)).toBeInTheDocument();
+  });
+});

package/src/components/query-container/query-container.tsx

@@ -0,0 +1,71 @@
+import { Alert, AlertTitle, Box } from "@mui/material";
+import React from "react";
+import { PropsWithChildren } from "react";
+import { LoadingArea } from "../loading-area";
+
+export interface QueryContainerError {
+  /**
+   * The error title
+   */
+  name?: string;
+  /**
+   * The description of the error
+   */
+  message: string;
+}
+
+export interface QueryContainerSuccess {
+  /**
+   * The success title
+   */
+  name?: string;
+  /**
+   * The success text
+   */
+  message: string;
+}
+
+export type QueryContainerProps = PropsWithChildren<{
+  /**
+   * There is a query in progress
+   */
+  isFetching: boolean;
+  /**
+   * The query has returned an error
+   */
+  error?: QueryContainerError;
+  /**
+   * The query has finished successfully
+   */
+  success?: QueryContainerSuccess;
+}>;
+
+/**
+ * Component to show different indicators based on the usual api query statuses
+ */
+export function QueryContainer({ isFetching, error, success, children }: QueryContainerProps) {
+  if (isFetching) {
+    return <LoadingArea />;
+  }
+
+  if (error) {
+    return (
+      <Alert severity="error" role="alert" aria-describedby="error">
+        {error.name && <AlertTitle role="heading">{error.name}</AlertTitle>}
+        {error.message}
+      </Alert>
+    );
+  }
+
+  return (
+    <Box>
+      {success && (
+        <Alert severity="success" role="alert" aria-describedby="success" sx={{ mb: 2 }}>
+          {success.name && <AlertTitle role="heading">{success.name}</AlertTitle>}
+          {success.message}
+        </Alert>
+      )}
+      {children}
+    </Box>
+  );
+}

package/src/components/sign-in/index.ts

@@ -0,0 +1 @@
+export * from "./sign-in";

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

@@ -0,0 +1,36 @@
+import { ComponentMeta } from "@storybook/react";
+import { SignIn } from "./sign-in";
+import { createTemplate } from "../../storybook";
+
+export default {
+  title: "Forms/Sign In",
+  component: SignIn,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof SignIn>;
+
+const Template = createTemplate(SignIn);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Sign in into Garmin Workouts",
+  subtitle: "Enter your details below",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  title: "Sign in into Garmin Workouts",
+  subtitle: "Enter your details below",
+  error: {
+    name: "InvalidCredentials",
+    message: "Invalid user credentials",
+  },
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  title: "Sign in into Garmin Workouts",
+  subtitle: "Enter your details below",
+  loading: true,
+};

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { SignIn } from "./sign-in";
+import { expectProgressIndicator, render, screen } from "../../tests";
+import userEvent from "@testing-library/user-event";
+
+async function submitSignIn(email: string | null, password: string | null) {
+  email && (await userEvent.type(screen.getByRole("input", { name: /email/i }), email));
+  password && (await userEvent.type(screen.getByRole("input", { name: /password/i }), password));
+  await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+}
+
+describe("SignIn", () => {
+  it("the title is displayed", () => {
+    render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={() => null} />);
+    expect(screen.getByText("Lorem ipsum")).toBeInTheDocument();
+  });
+
+  it("the subtitle is displayed", () => {
+    render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={() => null} />);
+    expect(screen.getByText("Sit amet")).toBeInTheDocument();
+  });
+
+  it("if I enter an email and a password and I submit onSubmitSignIn is called", async () => {
+    const onSubmitSignIn = jest.fn();
+    render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
+
+    await submitSignIn("test@example.com", "password1");
+
+    expect(onSubmitSignIn).toHaveBeenCalledTimes(1);
+    expect(onSubmitSignIn).toHaveBeenCalledWith("test@example.com", "password1");
+  });
+
+  it("if I don't enter an email and I submit an error is shown and onSubmitSignIn is not called", async () => {
+    const onSubmitSignIn = jest.fn();
+    render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
+
+    await submitSignIn(null, "password1");
+
+    expect(screen.getByText(/please fill out this field/i)).toBeInTheDocument();
+    expect(onSubmitSignIn).not.toHaveBeenCalled();
+  });
+
+  it("if I don't enter a valid email and I submit onSubmitSignIn is not called", async () => {
+    const onSubmitSignIn = jest.fn();
+    render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
+
+    await submitSignIn("invalid.com", "password1");
+
+    expect(onSubmitSignIn).not.toHaveBeenCalled();
+  });
+
+  it("if I don't enter an password and I submit an error is shown and onSubmitSignIn is not called", async () => {
+    const onSubmitSignIn = jest.fn();
+    render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
+
+    await submitSignIn("test@example.com", null);
+
+    expect(screen.getByText(/please fill out this field/i)).toBeInTheDocument();
+    expect(onSubmitSignIn).not.toHaveBeenCalled();
+  });
+
+  it("if I have an error and I enter the fields the errors are removed when I submit", async () => {
+    const onSubmitSignIn = jest.fn();
+    render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
+
+    await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+    expect(screen.getAllByText(/please fill out this field/i)).toBeTruthy();
+
+    await submitSignIn("test@example.com", "password1");
+
+    expect(screen.queryByText(/please fill out this field/i)).not.toBeInTheDocument();
+    expect(onSubmitSignIn).toHaveBeenCalledTimes(1);
+    expect(onSubmitSignIn).toHaveBeenCalledWith("test@example.com", "password1");
+  });
+
+  describe("if loading is true", () => {
+    it("the inputs and buttons are disabled", () => {
+      render(
+        <SignIn loading title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={() => null} />,
+      );
+
+      expect(screen.getByRole("input", { name: /email/i })).toBeDisabled();
+      expect(screen.getByRole("input", { name: /password/i })).toBeDisabled();
+      expect(screen.getByRole("button", { name: /sign in/i })).toBeDisabled();
+    });
+
+    it("a loading spinner appears", () => {
+      render(
+        <SignIn loading title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={() => null} />,
+      );
+
+      expectProgressIndicator();
+    });
+  });
+});

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

@@ -0,0 +1,97 @@
+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

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

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

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

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { TabCard } from "./tab-card";
+import { TabPanel } from "../tab-panel";
+import { Typography } from "@mui/material";
+
+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 (
+    <TabCard tabs={tabs} initialTab={initialTab}>
+      <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>
+  );
+}

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

@@ -0,0 +1,22 @@
+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,
+};