@pautena/react-design-system 0.5.1 → 0.6.0

package/src/components/inputs/search-input/search-input.stories.tsx

@@ -1,5 +1,5 @@
 import { grey } from "@mui/material/colors";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { withContainer, withLocalizationProvider } from "~/storybook";
 import { SearchInput } from "./search-input";
@@ -14,44 +14,48 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof SearchInput>;
+} satisfies Meta<typeof SearchInput>;
+type Story = StoryObj<typeof SearchInput>;
 
-const Template: ComponentStory<typeof SearchInput> = (args) => <SearchInput {...args} />;
-
-export const Label = Template.bind({});
-Label.args = {
-  label: "Lorem ipsum",
-  fullWidth: true,
+export const Label: Story = {
+  args: {
+    label: "Lorem ipsum",
+    fullWidth: true,
+  },
 };
 
-export const Placeholder = Template.bind({});
-Placeholder.args = {
-  placeholder: "Lorem ipsum",
-  fullWidth: true,
+export const Placeholder: Story = {
+  args: {
+    placeholder: "Lorem ipsum",
+    fullWidth: true,
+  },
 };
 
-export const HelperText = Template.bind({});
-HelperText.args = {
-  placeholder: "Lorem ipsum",
-  fullWidth: true,
-  helperText: "this is a helper text",
+export const HelperText: Story = {
+  args: {
+    placeholder: "Lorem ipsum",
+    fullWidth: true,
+    helperText: "this is a helper text",
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  placeholder: "Lorem ipsum",
-  fullWidth: true,
-  size: "small",
+export const Small: Story = {
+  args: {
+    placeholder: "Lorem ipsum",
+    fullWidth: true,
+    size: "small",
+  },
 };
 
-export const WithFilters = Template.bind({});
-WithFilters.args = {
-  placeholder: "Lorem ipsum",
-  fullWidth: true,
-  filters: [
-    { id: "subject", type: "text", label: "Subject" },
-    { id: "amount", type: "number", label: "Amount" },
-    { id: "hasSomething", type: "boolean", label: "Has something" },
-    { id: "createdBefore", type: "datetime", label: "Created before" },
-  ],
+export const WithFilters: Story = {
+  args: {
+    placeholder: "Lorem ipsum",
+    fullWidth: true,
+    filters: [
+      { id: "subject", type: "text", label: "Subject" },
+      { id: "amount", type: "number", label: "Amount" },
+      { id: "hasSomething", type: "boolean", label: "Has something" },
+      { id: "createdBefore", type: "datetime", label: "Created before" },
+    ],
+  },
 };

package/src/components/inputs/search-input/search-input.test.tsx

@@ -4,6 +4,7 @@ import { SearchInput } from "./search-input";
 import userEvent from "@testing-library/user-event";
 import { pickDatetime, typeNumericInput } from "~/tests/actions";
 import { assertCloseDate, AssertCloseDateUpTo } from "~/tests/assertions";
+import { vi } from "vitest";
 
 const datetimeFormat = "dd-MM-yyyy HH:mm:ss.SSS";
 const createdBefore = new Date(2022, 2, 17, 12, 42);
@@ -26,7 +27,7 @@ describe("SearchInput", () => {
     label = "search",
     placeholder,
   }: { label?: string; placeholder?: string } = {}) => {
-    const onSearch = jest.fn();
+    const onSearch = vi.fn();
     render(
       <SearchInput
         label={label}

package/src/components/inputs/select/index.ts

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

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

@@ -0,0 +1,107 @@
+import { Box, MenuItem, useTheme } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React, { ReactNode } from "react";
+import { withContainer } from "../../../storybook";
+import { Select, SelectProps, SelectSize } from "./select";
+import { faker } from "@faker-js/faker";
+
+const baseArgs = {
+  label: "Car model",
+  value: faker.vehicle.model(),
+  size: "medium" as SelectSize,
+  fetching: false,
+  loading: false,
+  fullWidth: true,
+  options: faker.definitions.vehicle?.model || [],
+};
+
+interface TemplateProps<T extends ReactNode> extends SelectProps<T> {
+  options: T[];
+}
+
+const DemoSelect = ({ options, ...rest }: TemplateProps<string>) => {
+  return (
+    <Select {...rest}>
+      {options.map((option) => (
+        <MenuItem key={option} value={option}>
+          {option}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
+
+export default {
+  title: "Components/Inputs/Select",
+  component: DemoSelect,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof DemoSelect>;
+type Story = StoryObj<typeof DemoSelect>;
+
+export const WithoutFullWidth: Story = {
+  args: {
+    ...baseArgs,
+    fullWidth: false,
+  },
+};
+
+export const SelectLoaded: Story = {
+  args: {
+    ...baseArgs,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    ...baseArgs,
+    loading: true,
+  },
+};
+
+export const Fetching: Story = {
+  args: {
+    ...baseArgs,
+    fetching: true,
+  },
+};
+
+export const SizeSmall: Story = {
+  args: {
+    ...baseArgs,
+    size: "small",
+  },
+};
+
+type WithBackgroundProps = TemplateProps<string> & { bgcolor: "primary" | "secondary" };
+
+export const WithBackground = {
+  render: ({ options, bgcolor: bgcolorProp, ...rest }: WithBackgroundProps) => {
+    const { palette } = useTheme();
+    const BackgroundColors: Record<"primary" | "secondary", string> = {
+      primary: palette.primary.main,
+      secondary: palette.secondary.main,
+    };
+    const bgcolor = BackgroundColors[bgcolorProp];
+    const selectColor = palette.getContrastText(bgcolor);
+
+    return (
+      <Box bgcolor={bgcolor} padding={3}>
+        <Select {...rest} color={selectColor}>
+          {options.map((option) => (
+            <MenuItem key={option} value={option}>
+              {option}
+            </MenuItem>
+          ))}
+        </Select>
+      </Box>
+    );
+  },
+
+  args: {
+    bgcolor: "secondary",
+    ...baseArgs,
+  },
+};

package/src/components/inputs/{enhanced-select/enhanced-select.test.tsx → select/select.test.tsx}

@@ -1,26 +1,27 @@
 import React from "react";
-import { EnhancedSelectLoaded } from "./enhanced-select.stories";
+import { SelectLoaded } from "./select.stories";
 import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
+import { Select } from "./select";
+import { MenuItem } from "@mui/material";
 
-describe("EnhancedSelect", () => {
+describe("Select", () => {
   const renderComponent = ({
-    label = EnhancedSelectLoaded.args?.label || "invalid",
+    label = SelectLoaded.args?.label || "invalid",
     loading = false,
     fetching = false,
   } = {}) => {
-    const options = (EnhancedSelectLoaded.args?.options as string[]) || [];
-    const value = EnhancedSelectLoaded.args?.value as string;
+    const options = (SelectLoaded.args?.options as string[]) || [];
+    const value = SelectLoaded.args?.value as string;
 
     render(
-      <EnhancedSelectLoaded
-        {...EnhancedSelectLoaded.args}
-        options={options}
-        value={value}
-        label={label}
-        loading={loading}
-        fetching={fetching}
-      />,
+      <Select value={value} label={label} loading={loading} fetching={fetching}>
+        {options.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>,
     );
 
     return {

package/src/components/inputs/{enhanced-select/enhanced-select.tsx → select/select.tsx}

@@ -5,32 +5,32 @@ import {
   FormControl,
   InputLabel,
   LinearProgress,
-  Select,
+  Select as MuiSelect,
   styled,
 } from "@mui/material";
 import { CenterContainer } from "../../containers/center-container";
 import { SelectInputProps } from "@mui/material/Select/SelectInput";
 
-export type EnhancedSelectSize = "small" | "medium";
+export type SelectSize = "small" | "medium";
 
-export interface EnhancedSelectProps<T> {
+export interface SelectProps<T> {
   label: string;
   value: T;
   loading?: boolean;
   fetching?: boolean;
-  size?: EnhancedSelectSize;
+  size?: SelectSize;
   color?: string;
   fullWidth?: boolean;
   children?: ReactNode;
   onChange?: SelectInputProps<T>["onChange"];
 }
 
-const ProgressSize: Record<EnhancedSelectSize, number> = {
+const ProgressSize: Record<SelectSize, number> = {
   small: 15,
   medium: 20,
 };
 
-export const EnhancedSelect = <T extends ReactNode>({
+export const Select = <T extends ReactNode>({
   label,
   value,
   loading = false,
@@ -40,7 +40,7 @@ export const EnhancedSelect = <T extends ReactNode>({
   color,
   children,
   onChange,
-}: EnhancedSelectProps<T>) => {
+}: SelectProps<T>) => {
   const id = useId();
 
   const renderValue = (value: T): ReactNode => {
@@ -91,7 +91,7 @@ export const EnhancedSelect = <T extends ReactNode>({
   return (
     <StyledFormControl fullWidth={fullWidth}>
       <InputLabel id={id}>{label}</InputLabel>
-      <Select
+      <MuiSelect
         labelId={id}
         id={id}
         value={value}
@@ -102,7 +102,7 @@ export const EnhancedSelect = <T extends ReactNode>({
         renderValue={renderValue}
       >
         {children}
-      </Select>
+      </MuiSelect>
     </StyledFormControl>
   );
 };

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

@@ -1,6 +1,5 @@
-import { ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { SignIn } from "./sign-in";
-import { createTemplate } from "../../../storybook";
 
 export default {
   title: "Components/Inputs/Sign In",
@@ -8,29 +7,31 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof SignIn>;
+} satisfies Meta<typeof SignIn>;
+type Story = StoryObj<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 Default: Story = {
+  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 Error: Story = {
+  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,
+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

@@ -3,6 +3,7 @@ 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));
@@ -22,7 +23,7 @@ describe("SignIn", () => {
   });
 
   it("if I enter an email and a password and I submit onSubmitSignIn is called", async () => {
-    const onSubmitSignIn = jest.fn();
+    const onSubmitSignIn = vi.fn();
     render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
 
     await submitSignIn("test@example.com", "password1");
@@ -32,7 +33,7 @@ describe("SignIn", () => {
   });
 
   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();
+    const onSubmitSignIn = vi.fn();
     render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
 
     await submitSignIn(null, "password1");
@@ -42,7 +43,7 @@ describe("SignIn", () => {
   });
 
   it("if I don't enter a valid email and I submit onSubmitSignIn is not called", async () => {
-    const onSubmitSignIn = jest.fn();
+    const onSubmitSignIn = vi.fn();
     render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
 
     await submitSignIn("invalid.com", "password1");
@@ -51,7 +52,7 @@ describe("SignIn", () => {
   });
 
   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();
+    const onSubmitSignIn = vi.fn();
     render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
 
     await submitSignIn("test@example.com", null);
@@ -61,7 +62,7 @@ describe("SignIn", () => {
   });
 
   it("if I have an error and I enter the fields the errors are removed when I submit", async () => {
-    const onSubmitSignIn = jest.fn();
+    const onSubmitSignIn = vi.fn();
     render(<SignIn title="Lorem ipsum" subtitle="Sit amet" onSubmitSignIn={onSubmitSignIn} />);
 
     await userEvent.click(screen.getByRole("button", { name: /sign in/i }));

package/src/components/inputs/text-field/index.ts

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

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

@@ -0,0 +1,128 @@
+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: string[] = 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 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/{enhanced-text-field/enhanced-text-field.test.tsx → text-field/text-field.test.tsx}

@@ -1,21 +1,22 @@
 import { render, screen } from "~/tests/testing-library";
-import { EnhancedTextField } from "./enhanced-text-field";
+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: string[] = faker.definitions.vehicle?.model || [];
 
-describe("EnhancedAutocomplete", () => {
+describe("TextField", () => {
   const renderComponent = ({
     value,
     loading,
     fetching,
   }: { value?: string; loading?: boolean; fetching?: boolean } = {}) => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     render(
-      <EnhancedTextField
+      <TextField
         label="Car model"
         loading={loading}
         fetching={fetching}

package/src/components/inputs/{enhanced-text-field/enhanced-text-field.tsx → text-field/text-field.tsx}

@@ -12,18 +12,18 @@ import {
   linearProgressClasses,
   OutlinedInput,
   outlinedInputClasses,
-  TextFieldProps,
+  TextFieldProps as MuiTextFieldProps,
 } from "@mui/material";
 import { unstable_useId as useId } from "@mui/utils";
 import React from "react";
 
-export type EnhancedTextFieldProps = TextFieldProps & {
+export type TextFieldProps = MuiTextFieldProps & {
   fetching?: boolean;
   loading?: boolean;
   hexColor?: string;
 };
 
-export const EnhancedTextField = ({
+export const TextField = ({
   id: overrideId,
   label,
   InputLabelProps,
@@ -36,7 +36,7 @@ export const EnhancedTextField = ({
   fullWidth,
   sx,
   ...rest
-}: EnhancedTextFieldProps) => {
+}: TextFieldProps) => {
   const id = useId(overrideId);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;

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

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

package/src/components/placeholders/content-placeholder/content-placeholder.stories.tsx

@@ -1,5 +1,4 @@
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
 import { ContentPlaceholder } from "./content-placeholder";
 
 export default {
@@ -8,8 +7,7 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof ContentPlaceholder>;
+} satisfies Meta<typeof ContentPlaceholder>;
+type Story = StoryObj<typeof ContentPlaceholder>;
 
-const Template = createTemplate(ContentPlaceholder);
-
-export const Default = Template.bind({});
+export const Default: Story = {};