@pautena/react-design-system 0.12.0 → 0.12.2

package/src/components/inputs/select/select.tsx

@@ -1,108 +0,0 @@
-import React, { ReactNode, useId } from "react";
-import {
-  Box,
-  CircularProgress,
-  FormControl,
-  InputLabel,
-  LinearProgress,
-  Select as MuiSelect,
-  styled,
-} from "@mui/material";
-import { CenterContainer } from "../../containers/center-container";
-import { SelectInputProps } from "@mui/material/Select/SelectInput";
-
-export type SelectSize = "small" | "medium";
-
-export interface SelectProps<T> {
-  label: string;
-  value: T;
-  loading?: boolean;
-  fetching?: boolean;
-  size?: SelectSize;
-  color?: string;
-  fullWidth?: boolean;
-  children?: ReactNode;
-  onChange?: SelectInputProps<T>["onChange"];
-}
-
-const ProgressSize: Record<SelectSize, number> = {
-  small: 15,
-  medium: 20,
-};
-
-export const Select = <T extends ReactNode>({
-  label,
-  value,
-  loading = false,
-  fetching = false,
-  size = "medium",
-  fullWidth = false,
-  color,
-  children,
-  onChange,
-}: SelectProps<T>) => {
-  const id = useId();
-
-  const renderValue = (value: T): ReactNode => {
-    if (fetching) {
-      return (
-        <CenterContainer centerVertical centerHorizontal>
-          <CircularProgress color="inherit" size={ProgressSize[size]} />
-        </CenterContainer>
-      );
-    }
-
-    if (loading) {
-      return (
-        <Box display="flex" flexDirection="column">
-          {value}
-          <LinearProgress
-            color="inherit"
-            sx={{ position: "absolute", left: 0, right: 0, bottom: 0 }}
-          />
-        </Box>
-      );
-    }
-
-    return value;
-  };
-
-  const StyledFormControl = styled(FormControl)(() => {
-    if (!color) {
-      return {};
-    }
-
-    return {
-      label: {
-        color,
-      },
-      ".MuiOutlinedInput-notchedOutline": {
-        borderColor: `${color} !important`,
-      },
-      ".MuiInputBase-root": {
-        color,
-      },
-      ".MuiSelect-icon": {
-        fill: color,
-      },
-    };
-  });
-
-  return (
-    <StyledFormControl fullWidth={fullWidth}>
-      <InputLabel id={id}>{label}</InputLabel>
-      <MuiSelect
-        labelId={id}
-        id={id}
-        value={value}
-        label={label}
-        onChange={onChange}
-        disabled={fetching}
-        size={size}
-        renderValue={renderValue}
-      >
-        {children}
-      </MuiSelect>
-    </StyledFormControl>
-  );
-};

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

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

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

@@ -1,37 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { SignIn } from "./sign-in";
-
-export default {
-  title: "Components/Inputs/Sign In",
-  component: SignIn,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof SignIn>;
-type Story = StoryObj<typeof SignIn>;
-
-export const Default: Story = {
-  args: {
-    title: "Sign in into Garmin Workouts",
-    subtitle: "Enter your details below",
-  },
-};
-
-export const Error: Story = {
-  args: {
-    title: "Sign in into Garmin Workouts",
-    subtitle: "Enter your details below",
-    error: {
-      name: "InvalidCredentials",
-      message: "Invalid user credentials",
-    },
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    title: "Sign in into Garmin Workouts",
-    subtitle: "Enter your details below",
-    loading: true,
-  },
-};

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

@@ -1,97 +0,0 @@
-import React from "react";
-import { SignIn } from "./sign-in";
-import { render, screen } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-import { expectProgressIndicator } from "~/tests/assertions";
-import { vi } from "vitest";
-
-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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.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/inputs/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";
-
-export interface SignInProps {
-  title: string;
-  subtitle: string;
-  error?: Error;
-  loading?: boolean;
-  onSubmitSignIn: (email: string, password: string) => void;
-}
-
-export const SignIn = ({ title, subtitle, loading, error, onSubmitSignIn }: SignInProps) => {
-  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/inputs/text-field/index.ts

@@ -1 +0,0 @@
-export * from "./text-field";

package/src/components/inputs/text-field/text-field.stories.tsx

@@ -1,136 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withContainer } from "../../../storybook";
-import { TextField } from "./text-field";
-import { faker } from "@faker-js/faker";
-import { Box, IconButton, useTheme } from "@mui/material";
-import ClearIcon from "@mui/icons-material/Clear";
-import React from "react";
-
-export default {
-  title: "Components/Inputs/TextField",
-  component: TextField,
-  decorators: [withContainer({ width: 200 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof TextField>;
-type Story = StoryObj<typeof TextField>;
-
-const options = faker.definitions.vehicle?.model || [];
-
-export const Default: Story = {
-  args: {
-    label: "Car model",
-  },
-};
-
-export const HelperText: Story = {
-  args: {
-    ...Default.args,
-    helperText: "This is a helper text",
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    ...Default.args,
-    loading: true,
-  },
-};
-
-export const LoadingWithValue: Story = {
-  args: {
-    ...Default.args,
-    loading: true,
-    value: options[0],
-  },
-};
-
-export const Fetching: Story = {
-  args: {
-    ...Default.args,
-    fetching: true,
-  },
-};
-
-export const LoadingAndFetching: Story = {
-  args: {
-    ...Default.args,
-    fetching: true,
-    loading: true,
-  },
-};
-
-export const FetchingWithEndAdornment: Story = {
-  args: {
-    ...Default.args,
-    fetching: true,
-    InputProps: {
-      endAdornment: (
-        <IconButton>
-          <ClearIcon />
-        </IconButton>
-      ),
-    },
-  },
-};
-
-export const SizeSmall: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-  },
-};
-
-export const SizeSmallFetching: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-    fetching: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-};
-
-export const SizeSmallLoading: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-    loading: true,
-  },
-};
-
-type WithBackgroundProps = {
-  bgcolor: "primary" | "secondary";
-  fetching?: boolean;
-  loading?: boolean;
-};
-
-export const WithBackground = {
-  render: ({ bgcolor: bgcolorProp, fetching, loading }: WithBackgroundProps) => {
-    const { palette } = useTheme();
-    const BackgroundColors: Record<"primary" | "secondary", string> = {
-      primary: palette.primary.main,
-      secondary: palette.secondary.main,
-    };
-    const bgcolor = BackgroundColors[bgcolorProp];
-    const color = palette.getContrastText(bgcolor);
-
-    return (
-      <Box bgcolor={bgcolor} padding={3}>
-        <TextField label="Car model" hexColor={color} fetching={fetching} loading={loading} />
-      </Box>
-    );
-  },
-
-  args: {
-    bgcolor: "secondary",
-    loading: true,
-    fetching: true,
-  },
-};

package/src/components/inputs/text-field/text-field.test.tsx

@@ -1,64 +0,0 @@
-import { render, screen } from "~/tests/testing-library";
-import { TextField } from "./text-field";
-import { faker } from "@faker-js/faker";
-import React from "react";
-import userEvent from "@testing-library/user-event";
-import { expectProgressIndicator } from "~/tests/assertions";
-import { vi } from "vitest";
-
-const options = faker.definitions.vehicle?.model || [];
-
-describe("TextField", () => {
-  const renderComponent = ({
-    value,
-    loading,
-    fetching,
-  }: { value?: string; loading?: boolean; fetching?: boolean } = {}) => {
-    const onChange = vi.fn();
-    render(
-      <TextField
-        label="Car model"
-        loading={loading}
-        fetching={fetching}
-        value={value}
-        onChange={onChange}
-      />,
-    );
-
-    return { onChange };
-  };
-
-  it("should render a label", () => {
-    renderComponent();
-
-    expect(screen.getByRole("textbox", { name: /car model/i })).toBeVisible();
-  });
-
-  it("should render the value if is defined", () => {
-    const value = options[3];
-    renderComponent({ value });
-
-    expect(screen.getByRole("textbox")).toHaveValue(value);
-  });
-
-  it("should call onChange when we type something", async () => {
-    const { onChange } = renderComponent();
-
-    await userEvent.type(screen.getByRole("textbox"), "Model T");
-
-    expect(onChange).toHaveBeenCalledTimes(7);
-    expect(onChange.mock.calls[6][0].target.value).toBe("Model T");
-  });
-
-  it("should render a loading indicator if is fetching", () => {
-    renderComponent({ loading: true });
-
-    expectProgressIndicator();
-  });
-
-  it("should render a loading indicator if is loading", () => {
-    renderComponent({ fetching: true });
-
-    expectProgressIndicator();
-  });
-});

package/src/components/inputs/text-field/text-field.tsx

@@ -1,101 +0,0 @@
-import {
-  autocompleteClasses,
-  CircularProgress,
-  circularProgressClasses,
-  FormControl,
-  FormHelperText,
-  iconButtonClasses,
-  InputAdornment,
-  InputLabel,
-  inputLabelClasses,
-  LinearProgress,
-  linearProgressClasses,
-  OutlinedInput,
-  outlinedInputClasses,
-  TextFieldProps as MuiTextFieldProps,
-} from "@mui/material";
-import { unstable_useId as useId } from "@mui/utils";
-import React from "react";
-
-export type TextFieldProps = MuiTextFieldProps & {
-  fetching?: boolean;
-  loading?: boolean;
-  hexColor?: string;
-};
-
-export const TextField = ({
-  id: overrideId,
-  label,
-  InputLabelProps,
-  InputProps,
-  fetching,
-  loading,
-  helperText,
-  hexColor,
-  size,
-  fullWidth,
-  sx,
-  ...rest
-}: TextFieldProps) => {
-  const id = useId(overrideId);
-  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
-  const inputLabelId = label && id ? `${id}-label` : undefined;
-
-  const hexColorSx = hexColor
-    ? {
-        [`& .${outlinedInputClasses.notchedOutline}`]: {
-          borderColor: `${hexColor} !important`,
-        },
-        [`& .${inputLabelClasses.root}`]: {
-          color: hexColor,
-        },
-        [`& .${outlinedInputClasses.input}`]: {
-          color: hexColor,
-        },
-        [`& .${circularProgressClasses.root}`]: {
-          color: hexColor,
-        },
-        [`& .${linearProgressClasses.bar}`]: {
-          backgroundColor: hexColor,
-        },
-        [`& .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}`]: {
-          color: hexColor,
-        },
-      }
-    : {};
-
-  return (
-    <FormControl sx={hexColorSx} fullWidth={fullWidth}>
-      <InputLabel
-        size={size === "small" ? "small" : "normal"}
-        id={inputLabelId}
-        htmlFor={id}
-        {...InputLabelProps}
-      >
-        {label}
-      </InputLabel>
-      <OutlinedInput
-        {...InputProps}
-        id={id}
-        label={label}
-        size={size}
-        fullWidth={fullWidth}
-        endAdornment={
-          <InputAdornment position="end">
-            {InputProps?.endAdornment}
-            {loading ? <CircularProgress color="inherit" size={20} sx={{ ml: 1 }} /> : null}
-          </InputAdornment>
-        }
-        sx={sx}
-        {...(rest as any)}
-      />
-      {fetching && !loading && (
-        <LinearProgress
-          color="inherit"
-          sx={{ position: "absolute", left: 0, right: 0, bottom: 0 }}
-        />
-      )}
-      {helperText && <FormHelperText id={helperTextId}>{helperText}</FormHelperText>}
-    </FormControl>
-  );
-};

package/src/components/navigation/index.ts

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

package/src/components/navigation/link/index.ts

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

package/src/components/navigation/link/link.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-dom";
-import { forwardRef } from "react";
-import { LinkProps, Link as MuiLink } from "@mui/material";
-
-/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */
-export const LinkBehaviour = forwardRef<
-  any,
-  Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
->((props, ref) => {
-  const { href, ...other } = props;
-  return <RouterLink ref={ref} to={href} {...other} />;
-});
-
-export const Link = forwardRef<any, LinkProps>((props, _1) => {
-  return <MuiLink {...props} component={LinkBehaviour} />;
-});

package/src/components/navigation/navigation.stories.mdx

@@ -1,10 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Components/Navigation/Introduction" />
-
-# Navigation
-
-<ul>
-  <li><LinkTo kind="Components/Navigation/Tab card">Tab card</LinkTo></li>
-</ul>

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

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