@pautena/react-design-system 0.5.1 → 0.6.1

package/src/components/data-display/label/label.stories.tsx

@@ -1,5 +1,4 @@
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
 import { Label } from "./label";
 
 export default {
@@ -8,42 +7,47 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof Label>;
+} satisfies Meta<typeof Label>;
+type Story = StoryObj<typeof Label>;
 
-const Template = createTemplate(Label);
-
-export const Default = Template.bind({});
-Default.args = {
-  text: "lorem",
-  variant: "default",
+export const Default: Story = {
+  args: {
+    text: "lorem",
+    variant: "default",
+  },
 };
 
-export const Primary = Template.bind({});
-Primary.args = {
-  text: "lorem",
-  variant: "primary",
+export const Primary: Story = {
+  args: {
+    text: "lorem",
+    variant: "primary",
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  text: "lorem",
-  variant: "secondary",
+export const Secondary: Story = {
+  args: {
+    text: "lorem",
+    variant: "secondary",
+  },
 };
 
-export const Info = Template.bind({});
-Info.args = {
-  text: "lorem",
-  variant: "info",
+export const Info: Story = {
+  args: {
+    text: "lorem",
+    variant: "info",
+  },
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  text: "lorem",
-  variant: "warning",
+export const Warning: Story = {
+  args: {
+    text: "lorem",
+    variant: "warning",
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  text: "lorem",
-  variant: "error",
+export const Error: Story = {
+  args: {
+    text: "lorem",
+    variant: "error",
+  },
 };

package/src/components/data-display/label/label.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, SxProps, Theme, Typography, useTheme } from "@mui/material";
 import React from "react";
 
 export type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
@@ -16,12 +16,17 @@ export interface LabelProps {
    * Color palette used to draw the component
    */
   variant?: LabelVariant;
+
+  /**
+   * Custom styles
+   */
+  sx?: SxProps<Theme>;
 }
 
 /**
  * Compact element to represent a text
  */
-export const Label = ({ text, variant = "default" }: LabelProps) => {
+export const Label = ({ text, variant = "default", sx }: LabelProps) => {
   const { palette } = useTheme();
 
   const backgroundColor: Record<LabelVariant, string> = {
@@ -45,7 +50,7 @@ export const Label = ({ text, variant = "default" }: LabelProps) => {
   return (
     <Box
       px={1}
-      sx={{ backgroundColor: backgroundColor[variant] }}
+      sx={{ backgroundColor: backgroundColor[variant], ...sx }}
       borderRadius={1}
       color={textColor[variant]}
       className={labelClasses.root}

package/src/components/data-display/link-card/link-card.stories.tsx

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { withContainer, withMemoryRouter } from "../../../storybook";
+import { LinkCard } from "./link-card";
+
+export default {
+  title: "Components/Data Display/LinkCard",
+  component: LinkCard,
+  decorators: [withContainer({ width: 400 }), withMemoryRouter()],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof LinkCard>;
+type Story = StoryObj<typeof LinkCard>;
+
+export const Primary: Story = {
+  args: {
+    title: "Lorem ipsum",
+    message:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    linkText: "Learn more",
+    variant: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    variant: "secondary",
+  },
+};
+
+export const Info: Story = {
+  args: {
+    ...Primary.args,
+    variant: "info",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    ...Primary.args,
+    variant: "warning",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Primary.args,
+    variant: "error",
+  },
+};
+
+export const WithoutLinkButton: Story = {
+  args: {
+    title: "Lorem ipsum",
+    message:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  },
+};

package/src/components/data-display/link-card/link-card.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "~/tests/testing-library";
+import { LinkCard } from "./link-card";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+describe("LinkCard", () => {
+  const renderComponent = ({ linkText }: { linkText?: string } = {}) => {
+    return render(
+      <LinkCard
+        title="Lorem ipsum"
+        message="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        href="/test"
+        linkText={linkText}
+      />,
+    );
+  };
+
+  it("should render a title", () => {
+    renderComponent();
+
+    expect(screen.getByRole("heading", { level: 6, name: /lorem ipsum/i })).toBeVisible();
+  });
+
+  it("should render a message", () => {
+    renderComponent();
+
+    expect(screen.getByText(/lorem ipsum dolor sit amet/i)).toBeVisible();
+  });
+
+  it("should render a extra text if linkText is defined", () => {
+    renderComponent({ linkText: "check more" });
+
+    expect(screen.getByText(/check more/i)).toBeVisible();
+  });
+
+  it("should navigate to the href if the card is clicked", async () => {
+    const { history } = renderComponent();
+
+    await userEvent.click(screen.getByText(/Lorem ipsum dolor sit amet/i));
+
+    expect(history.location.pathname).toBe("/test");
+  });
+});

package/src/components/data-display/link-card/link-card.tsx

@@ -0,0 +1,52 @@
+import { Paper, SxProps, Theme, Typography, useTheme } from "@mui/material";
+import { grey } from "@mui/material/colors";
+import React from "react";
+import { Link } from "~/components/navigation/link";
+
+export type LinkCardVariant = "primary" | "secondary" | "info" | "warning" | "error";
+export interface LinkCardProps {
+  variant?: LinkCardVariant;
+  href: string;
+  title: string;
+  message: string;
+  linkText?: string;
+  sx?: SxProps<Theme>;
+}
+
+export const LinkCard = ({
+  variant = "primary",
+  title,
+  message,
+  href,
+  linkText,
+  sx,
+}: LinkCardProps) => {
+  const { palette } = useTheme();
+
+  const rootSx: SxProps<Theme> = {
+    p: 3,
+    display: "flex",
+    flexDirection: "column",
+    textDecoration: "none",
+    backgroundColor: palette.mode === "light" ? grey[50] : grey[900],
+    borderColor: grey[400],
+    ":hover": {
+      borderColor: palette[variant].main,
+      backgroundColor: palette.mode === "light" ? palette.common.white : grey[800],
+    },
+  };
+
+  return (
+    <Paper component={Link} href={href} variant="outlined" sx={{ ...rootSx, ...sx }}>
+      <Typography variant="h6">{title}</Typography>
+      <Typography variant="caption" sx={{ mt: 2 }}>
+        {message}
+      </Typography>
+      {linkText && (
+        <Typography color={variant} variant="button" sx={{ mt: 2 }}>
+          {linkText}
+        </Typography>
+      )}
+    </Paper>
+  );
+};

package/src/components/data-display/markdown/markdown.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Markdown } from "./markdown";
 import mockMarkdownContentFile from "~/tests/mocks/markdown.mock.md";
 import React from "react";
@@ -10,16 +10,17 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof Markdown>;
+} satisfies Meta<typeof Markdown>;
+type Story = StoryObj<typeof Markdown>;
 
-const Template: ComponentStory<typeof Markdown> = (args) => <Markdown {...args} />;
-
-export const File = Template.bind({});
-File.args = {
-  content: mockMarkdownContentFile,
+export const File: Story = {
+  args: {
+    content: mockMarkdownContentFile,
+  },
 };
 
-export const StringVariable = Template.bind({});
-StringVariable.args = {
-  content: mockMarkdownContent,
+export const StringVariable: Story = {
+  args: {
+    content: mockMarkdownContent,
+  },
 };

package/src/components/data-display/markdown/markdown.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "~/tests/testing-library";
 import React from "react";
 import { mockMarkdownContent } from "~/tests/mocks/markdown.mock";
 
-describe("Markdown", () => {
+describe.skip("Markdown", () => {
   const renderComponent = () => {
     render(<Markdown content={mockMarkdownContent} />);
   };

package/src/components/dialogs/bootstrap-dialog/bootstrap-dialog.stories.tsx

@@ -1,5 +1,5 @@
 import { DialogContentText } from "@mui/material";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import { BootstrapDialog } from "./bootstrap-dialog";
 import { loremIpsum } from "lorem-ipsum";
@@ -14,68 +14,73 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof BootstrapDialog>;
+  render: (args) => <StoryDialogManager component={BootstrapDialog} args={args} />,
+} satisfies Meta<typeof BootstrapDialog>;
+type Story = StoryObj<typeof BootstrapDialog>;
 
-const Template: ComponentStory<typeof BootstrapDialog> = (args) => (
-  <StoryDialogManager component={BootstrapDialog} args={args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  title: "Lorem ipsum",
-  children: <DialogContentText>{loremIpsum({ count: 1, units: "paragraph" })}</DialogContentText>,
+export const Default: Story = {
+  args: {
+    title: "Lorem ipsum",
+    children: <DialogContentText>{loremIpsum({ count: 1, units: "paragraph" })}</DialogContentText>,
+  },
 };
 
-export const AcceptableAndCancelable = Template.bind({});
-AcceptableAndCancelable.args = {
-  ...Default.args,
-  acceptable: true,
-  cancelable: true,
+export const AcceptableAndCancelable: Story = {
+  args: {
+    ...Default.args,
+    acceptable: true,
+    cancelable: true,
+  },
 };
 
-export const WithExtraActions = Template.bind({});
-WithExtraActions.args = {
-  ...Default.args,
-  cancelable: true,
-  actions: [
-    {
-      id: "action1",
-      text: "Action 1",
-      color: "error",
-      onClick: onClickAction,
-    },
-    {
-      id: "action2",
-      text: "Action 2",
-      onClick: onClickAction,
-    },
-  ],
+export const WithExtraActions: Story = {
+  args: {
+    ...Default.args,
+    cancelable: true,
+    actions: [
+      {
+        id: "action1",
+        text: "Action 1",
+        color: "error",
+        onClick: onClickAction,
+      },
+      {
+        id: "action2",
+        text: "Action 2",
+        onClick: onClickAction,
+      },
+    ],
+  },
 };
 
-export const LoadingWithAcceptable = Template.bind({});
-LoadingWithAcceptable.args = {
-  ...Default.args,
-  acceptable: true,
-  loading: true,
+export const LoadingWithAcceptable: Story = {
+  args: {
+    ...Default.args,
+    acceptable: true,
+    loading: true,
+  },
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Default.args,
-  loading: true,
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    loading: true,
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...WithExtraActions.args,
-  disabled: true,
+export const Disabled: Story = {
+  args: {
+    ...WithExtraActions.args,
+    disabled: true,
+  },
 };
 
-export const CustomTexts = Template.bind({});
-CustomTexts.args = {
-  ...Default.args,
-  acceptable: true,
-  cancelable: true,
-  cancelText: "Cancel updated",
-  acceptText: "Accept updated",
+export const CustomTexts: Story = {
+  args: {
+    ...Default.args,
+    acceptable: true,
+    cancelable: true,
+    cancelText: "Cancel updated",
+    acceptText: "Accept updated",
+  },
 };

package/src/components/dialogs/bootstrap-dialog/bootstrap-dialog.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from "~/tests/testing-library";
 import { BootstrapDialog } from "./bootstrap-dialog";
 import userEvent from "@testing-library/user-event";
 import { DialogAction } from "../dialog.types";
+import { vi } from "vitest";
 
 interface DialogRenderArgs {
   open: boolean;
@@ -19,8 +20,8 @@ interface DialogRenderArgs {
 
 describe("BootstrapDialog", () => {
   const createMockActions = () => {
-    const onClickAction1 = jest.fn();
-    const onClickAction2 = jest.fn();
+    const onClickAction1 = vi.fn();
+    const onClickAction2 = vi.fn();
     const actions: DialogAction[] = [
       {
         id: "action1",
@@ -48,9 +49,9 @@ describe("BootstrapDialog", () => {
     actions,
     loading,
   }: DialogRenderArgs) => {
-    const onClose = jest.fn();
-    const onCancel = jest.fn();
-    const onAccept = jest.fn();
+    const onClose = vi.fn();
+    const onCancel = vi.fn();
+    const onAccept = vi.fn();
 
     render(
       <BootstrapDialog

package/src/components/dialogs/confirm-dialog/confirm-dialog.stories.tsx

@@ -1,5 +1,5 @@
 import { DialogContentText } from "@mui/material";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { loremIpsum } from "lorem-ipsum";
 import React from "react";
 import { StoryDialogManager } from "~/storybook";
@@ -11,33 +11,36 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof ConfirmDialog>;
+  render: (args) => <StoryDialogManager component={ConfirmDialog} args={args} />,
+} as Meta<typeof ConfirmDialog>;
+type Story = StoryObj<typeof ConfirmDialog>;
 
-const Template: ComponentStory<typeof ConfirmDialog> = (args) => (
-  <StoryDialogManager component={ConfirmDialog} args={args} />
-);
-export const Default = Template.bind({});
-Default.args = {
-  open: true,
-  title: "Lorem ipsum",
-  children: <DialogContentText>{loremIpsum({ count: 1, units: "paragraph" })}</DialogContentText>,
+export const Default: Story = {
+  args: {
+    open: true,
+    title: "Lorem ipsum",
+    children: <DialogContentText>{loremIpsum({ count: 1, units: "paragraph" })}</DialogContentText>,
+  },
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Default.args,
-  loading: true,
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    loading: true,
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
 };
 
-export const CustomButtonText = Template.bind({});
-CustomButtonText.args = {
-  ...Default.args,
-  confirmText: "Create token",
-  cancelText: "Don't create a token",
+export const CustomButtonText: Story = {
+  args: {
+    ...Default.args,
+    confirmText: "Create token",
+    cancelText: "Don't create a token",
+  },
 };

package/src/components/dialogs/confirm-dialog/confirm-dialog.test.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { render, screen } from "~/tests/testing-library";
 import { ConfirmDialog } from "./confirm-dialog";
 import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
 
 interface DialogRenderArgs {
   open: boolean;
@@ -21,8 +22,8 @@ describe("ConfirmDialog", () => {
     cancelText,
     loading,
   }: DialogRenderArgs) => {
-    const onCancel = jest.fn();
-    const onConfirm = jest.fn();
+    const onCancel = vi.fn();
+    const onConfirm = vi.fn();
 
     render(
       <ConfirmDialog

package/src/components/dialogs/dialogs.stories.mdx

@@ -1,9 +1,9 @@
 import { Meta } from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
 
-<Meta title="Components/Drawers/Introduction" />
+<Meta title="Components/Dialogs/Introduction" />
 
-# Drawers
+# Dialogs
 
 <ul>
   <li><LinkTo kind="Components/Dialogs/ConfirmDialog">ConfirmDialog</LinkTo></li>

package/src/components/dialogs/form-dialog/form-dialog.stories.tsx

@@ -1,5 +1,5 @@
 import { Grid, TextField } from "@mui/material";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { StoryDialogManager } from "~/storybook";
 import { FormDialog } from "./form-dialog";
@@ -10,43 +10,45 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof FormDialog>;
+  render: (args) => <StoryDialogManager component={FormDialog} args={args} />,
+} as Meta<typeof FormDialog>;
+type Story = StoryObj<typeof FormDialog>;
 
-const Template: ComponentStory<typeof FormDialog> = (args) => (
-  <StoryDialogManager component={FormDialog} args={args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  open: true,
-  title: "Lorem ipsum",
-  children: (
-    <Grid container spacing={2}>
-      <Grid item xs={12}>
-        <TextField name="message" label="Message" fullWidth required variant="outlined" />
-      </Grid>
-      <Grid item xs={12}>
-        <TextField name="amount" label="Amount" fullWidth required variant="outlined" />
+export const Default: Story = {
+  args: {
+    open: true,
+    title: "Lorem ipsum",
+    children: (
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <TextField name="message" label="Message" fullWidth required variant="outlined" />
+        </Grid>
+        <Grid item xs={12}>
+          <TextField name="amount" label="Amount" fullWidth required variant="outlined" />
+        </Grid>
       </Grid>
-    </Grid>
-  ),
+    ),
+  },
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Default.args,
-  loading: true,
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    loading: true,
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
 };
 
-export const CustomButtonText = Template.bind({});
-CustomButtonText.args = {
-  ...Default.args,
-  submitText: "Create token",
-  cancelText: "Don't create a token",
+export const CustomButtonText: Story = {
+  args: {
+    ...Default.args,
+    submitText: "Create token",
+    cancelText: "Don't create a token",
+  },
 };