@agregio-solutions/design-system 1.90.1 → 1.92.0

package/dist/packages/components/Drawer/doc.md

@@ -0,0 +1,338 @@
+# Drawer
+
+## Props
+
+The complete Props documentation with JS doc for this component is available at this path:
+
+node_modules/@agregio-solutions/design-system/dist/packages/components/Drawer/Drawer.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Drawer, { Props } from "./Drawer";
+import { screen, fn } from "storybook/test";
+import { useState } from "react";
+import Button from "@components/Button/Button";
+import {
+  expectNotPresent,
+  STORYBOOK_VIEWPORTS,
+} from "@internal/test-utils-storybook/test-utils-storybook";
+
+const meta: Meta<typeof Drawer> = {
+  component: Drawer,
+  argTypes: {
+    children: { control: false },
+  },
+  parameters: {
+    layout: "none",
+  },
+  render: (args) => {
+    function ParentComponent(props: Props) {
+      const [isOpen, setIsOpen] = useState(props.isOpen);
+
+      // Trick to make the drawer close on button with text "Close" (to avoid generating a lot of render stories)
+      const onPrimaryClick =
+        props.primaryLabel === "Close"
+          ? () => setIsOpen(false)
+          : props.onPrimaryClick;
+
+      const onSecondaryClick =
+        props.secondaryLabel === "Close"
+          ? () => setIsOpen(false)
+          : props.onSecondaryClick;
+
+      return (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100vh",
+          }}
+        >
+          <Drawer
+            {...props}
+            onPrimaryClick={onPrimaryClick}
+            onSecondaryClick={onSecondaryClick}
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+          >
+            {props.children}
+          </Drawer>
+
+          <div style={{ textAlign: "center" }}>
+            <Button onClick={() => setIsOpen(true)} text="Open drawer" />
+            <div style={{ marginTop: 16 }}>
+              The drawer is {isOpen ? "open" : "closed"}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return <ParentComponent {...args}>{args.children}</ParentComponent>;
+  },
+};
+export default meta;
+
+export const Playground: StoryObj<typeof Drawer> = {
+  args: {
+    title: "[Insert drawer title]",
+    children: <div>The content</div>,
+    isOpen: true,
+    primaryLabel: "Close",
+    onPrimaryClick: fn(),
+    onSecondaryClick: fn(),
+    onOpenChange: fn(),
+  },
+  play: async ({ args }) => {
+    await screen.findByText(args.title);
+    await screen.findByText("The content");
+    await screen.findByText("Close");
+    await screen.findByLabelText("Close");
+    await expectNotPresent(() => screen.queryByText("Submit"));
+  },
+};
+
+export const WithSecondaryAction: StoryObj<typeof Drawer> = {
+  args: {
+    ...Playground.args,
+    primaryLabel: "Send",
+    secondaryLabel: "Close",
+  },
+  play: async () => {
+    await screen.findByText("Send");
+    await screen.findByText("Close");
+  },
+};
+
+export const OverflowingContent: StoryObj<typeof Drawer> = {
+  args: {
+    ...Playground.args,
+    children: "The content. ".repeat(300),
+  },
+};
+
+export const Mobile: StoryObj<typeof Drawer> = {
+  parameters: {
+    ...STORYBOOK_VIEWPORTS,
+    layout: "none",
+  },
+  globals: {
+    viewport: { value: "iphone6", isRotated: false },
+  },
+  args: {
+    ...Playground.args,
+    children: "The content. ".repeat(300),
+  },
+};
+
+export const WithCustomActionsBar: StoryObj<typeof Drawer> = {
+  args: {
+    ...Playground.args,
+    customActionsBar: (
+      <>
+        <Button text="Close" mode="secondary" />
+        <Button text="Validate" isLoading />
+      </>
+    ),
+  },
+};
+```
+
+## How to test this component
+
+Here are some more advanced stories with more testing coverage and examples that you can read to understand how to test this component.
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Drawer from "../Drawer";
+import { userEvent, within, screen, expect } from "storybook/test";
+import { useState } from "react";
+import Button from "@components/Button/Button";
+import { expectNotPresent } from "@internal/test-utils-storybook/test-utils-storybook";
+import { Playground, WithSecondaryAction } from "../Drawer.stories";
+import baseMeta from "../Drawer.stories";
+import { useForm } from "react-hook-form";
+import TextInput from "@packages/components/TextInput/TextInput";
+
+const meta: Meta<typeof Drawer> = {
+  component: Drawer,
+  parameters: {
+    layout: "none",
+    chromatic: { disableSnapshot: true },
+  },
+  render: baseMeta.render,
+};
+export default meta;
+
+export const TestCloseButtonNextTitleShouldCloseDrawer: StoryObj<
+  typeof Drawer
+> = {
+  args: {
+    ...Playground.args,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await canvas.findByText("The drawer is open");
+    await screen.findByText(args.title);
+    await user.click(screen.getByLabelText("Close"));
+    await canvas.findByText("The drawer is closed");
+    await expectNotPresent(() => screen.queryByText(args.title));
+  },
+};
+
+export const TestFooterCloseButtonShouldCloseDrawer: StoryObj<typeof Drawer> = {
+  args: {
+    ...Playground.args,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await canvas.findByText("The drawer is open");
+    await screen.findByText(args.title);
+    await user.click(screen.getByText("Close"));
+    await canvas.findByText("The drawer is closed");
+    await expectNotPresent(() => screen.queryByText(args.title));
+  },
+};
+
+export const TestShouldShowASecondaryButtonIfGiven: StoryObj<typeof Drawer> = {
+  args: {
+    ...WithSecondaryAction.args,
+    secondaryLabel: "Dismiss",
+  },
+  play: async ({ args }) => {
+    const user = userEvent.setup({ delay: 50 });
+    await screen.findByText(args.title);
+    await user.click(screen.getByText("Send"));
+    await expect(args.onPrimaryClick).toHaveBeenCalledTimes(1);
+    await user.click(screen.getByText("Dismiss"));
+    await expect(args.onSecondaryClick).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const ExampleUsage: StoryObj<typeof Drawer> = {
+  render: () => {
+    function ParentComponent() {
+      const [isOpen, setIsOpen] = useState(false);
+
+      return (
+        <div>
+          <div>
+            <Button onClick={() => setIsOpen(true)} text="Open drawer" />
+          </div>
+          <Drawer
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            title="Drawer title"
+            primaryLabel="Close"
+            onPrimaryClick={() => setIsOpen(false)}
+          >
+            <div>Drawer content</div>
+          </Drawer>
+        </div>
+      );
+    }
+
+    return <ParentComponent />;
+  },
+};
+
+export const ExampleWithReactHookForm: StoryObj<typeof Drawer> = {
+  render: () => {
+    type Form = {
+      name: string;
+      email: string;
+    };
+
+    function ParentComponent() {
+      const [isOpen, setIsOpen] = useState(false);
+      const form = useForm<Form>();
+
+      const onSubmit = form.handleSubmit(async (data: Form) => {
+        // API call for example
+        console.log(data); // eslint-disable-line no-console
+        await new Promise((resolve) => setTimeout(resolve, 250));
+        form.reset();
+        setIsOpen(false);
+      });
+
+      return (
+        <>
+          <Button
+            onClick={() => setIsOpen(true)}
+            text="Open create user form"
+          />
+
+          <Drawer
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            title="Creating a new user"
+            customActionsBar={
+              <>
+                <Button
+                  onClick={() => setIsOpen(false)}
+                  text="Close"
+                  mode="secondary"
+                />
+                <Button
+                  type="submit"
+                  form="create-user-form" // <- link the form to the button (by the form id)
+                  text="Create user"
+                  isLoading={form.formState.isSubmitting}
+                />
+              </>
+            }
+          >
+            <form id="create-user-form" onSubmit={onSubmit} noValidate>
+              <TextInput
+                {...form.register("name", { required: "Name is required" })}
+                id="name"
+                label="Name"
+                errorHelperText={form.formState.errors.name?.message}
+              />
+              <TextInput {...form.register("email")} id="email" label="Email" />
+            </form>
+          </Drawer>
+        </>
+      );
+    }
+
+    return <ParentComponent />;
+  },
+};
+```
+
+## Developer notes
+
+Here are the notes available for the developer on the built Storybook, you can read them to understand the component and how to use it.
+
+```mdx
+import { Meta, Controls, Source } from "@storybook/addon-docs/blocks";
+
+import * as Drawer from "./Drawer.stories";
+import * as DrawerTests from "./tests/Drawer.stories";
+
+<Meta of={Drawer} />
+
+# Drawer
+
+## Example usage
+
+<Source of={DrawerTests.ExampleUsage} type="code" dark />
+
+## Example with a form
+
+<Source of={DrawerTests.ExampleWithReactHookForm} type="code" dark />
+
+## Props
+
+<Controls of={Drawer.Playground} />
+```

package/dist/packages/components/Dropdown/Dropdown.d.ts

@@ -18,6 +18,10 @@ export type Props = {
      * The inline style for the element.
      */
     style?: React.CSSProperties;
+    /**
+     * When true, increases the dropdown max-height from 200px to 400px.
+     */
+    tallDropdown?: boolean;
 };
 declare const Dropdown: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;

package/dist/packages/components/Dropdown/doc.md

@@ -0,0 +1,205 @@
+# Dropdown
+
+## Props
+
+The complete Props documentation with JS doc for this component is available at this path:
+
+node_modules/@agregio-solutions/design-system/dist/packages/components/Dropdown/Dropdown.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Dropdown from "./Dropdown";
+import { userEvent, within, expect } from "storybook/test";
+import DropdownListItem, {
+  Props as DropdownListItemProps,
+} from "@components/Dropdown/components/DropdownListItem/DropdownListItem";
+import { useState } from "react";
+
+const meta: Meta<typeof Dropdown> = {
+  component: Dropdown,
+  parameters: {
+    layout: "centered",
+  },
+  globals: {
+    backgrounds: { value: "light" },
+  },
+  argTypes: {
+    children: { control: false },
+    items: { control: false },
+  },
+};
+export default meta;
+
+const baseItem: DropdownListItemProps = {
+  iconLeft: "help_outline",
+  iconRight: "star",
+  text: "Item 1",
+  id: "item-1",
+};
+
+const generateItems = (count: number): Array<DropdownListItemProps> =>
+  new Array(count).fill(null).map((_, index) => ({
+    ...baseItem,
+    id: `item-${index + 1}`,
+    text: `Item ${index + 1}`,
+    selected: index === 3,
+    disabled: index === 4,
+  }));
+
+export const Default: StoryObj<typeof Dropdown> = {
+  args: {
+    children: generateItems(5).map((item) => (
+      <DropdownListItem {...item} key={item.id} ref={undefined} />
+    )),
+    style: {
+      width: 315,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Item 1");
+    await canvas.findByText("Item 2");
+    await canvas.findByText("Item 3");
+    await expect(canvas.queryByText("Item 4")?.parentElement).toHaveAttribute(
+      "data-selected",
+      "true",
+    );
+    await expect(canvas.queryByText("Item 5")?.parentElement).toHaveAttribute(
+      "data-disabled",
+      "true",
+    );
+  },
+};
+
+export const WithMultipleItems: StoryObj<typeof Dropdown> = {
+  args: {
+    children: generateItems(20).map((item) => (
+      <DropdownListItem {...item} key={item.id} ref={undefined} />
+    )),
+    style: {
+      width: 315,
+    },
+  },
+};
+
+export const WithTallDropdown: StoryObj<typeof Dropdown> = {
+  args: {
+    ...WithMultipleItems.args,
+    tallDropdown: true,
+  },
+  play: async ({ canvasElement }) => {
+    await expect(
+      canvasElement.querySelector('[data-tall="true"]'),
+    ).not.toBeNull();
+  },
+};
+
+export const WithControlledSelectedItem: StoryObj<typeof Dropdown> = {
+  render: () => {
+    const Wrapper = () => {
+      const [selectedItemId, setSelectedItemId] = useState<string>();
+      const items = generateItems(10).map((item) => ({
+        ...item,
+        selected: item.id === selectedItemId,
+        onClick: () => setSelectedItemId(item.id),
+      }));
+
+      return (
+        <Dropdown style={{ width: 315 }}>
+          {items.map((item) => (
+            <DropdownListItem {...item} key={item.id} ref={undefined} />
+          ))}
+        </Dropdown>
+      );
+    };
+
+    return <Wrapper />;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.queryByText("Item 1")?.parentElement).toHaveAttribute(
+      "data-selected",
+      "false",
+    );
+    await userEvent.click(canvas.getByText("Item 1"));
+    await expect(canvas.queryByText("Item 1")?.parentElement).toHaveAttribute(
+      "data-selected",
+      "true",
+    );
+    await userEvent.click(canvas.getByText("Item 2"));
+    await expect(canvas.queryByText("Item 1")?.parentElement).toHaveAttribute(
+      "data-selected",
+      "false",
+    );
+    await expect(canvas.queryByText("Item 2")?.parentElement).toHaveAttribute(
+      "data-selected",
+      "true",
+    );
+  },
+};
+
+export const WithDeprecatedItemsProp: StoryObj<typeof Dropdown> = {
+  args: {
+    items: generateItems(5),
+    style: {
+      width: 315,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Item 1");
+    await canvas.findByText("Item 2");
+    await canvas.findByText("Item 3");
+    await expect(canvas.queryByText("Item 4")?.parentElement).toHaveAttribute(
+      "data-selected",
+      "true",
+    );
+    await expect(canvas.queryByText("Item 5")?.parentElement).toHaveAttribute(
+      "data-disabled",
+      "true",
+    );
+  },
+};
+```
+
+## Developer notes
+
+Here are the notes available for the developer on the built Storybook, you can read them to understand the component and how to use it.
+
+```mdx
+import { Canvas, Meta, Stories, Controls } from "@storybook/addon-docs/blocks";
+
+import * as Dropdown from "./Dropdown.stories";
+import * as DropdownListItem from "./components/DropdownListItem/DropdownListItem.stories";
+
+<Meta of={Dropdown} />
+
+# Dropdown
+
+The dropdown is a simple component that allows you to create a dropdown menu.
+
+This component **does not handle it's absolute positioning**, you need to do it yourself with whatever method or lib you prefer.
+
+There is two ways of using this component:
+
+- ✅ **Recommended:** pass a list of `DropdownListItem` components as `children`
+- ⚠️ **Deprecated:** pass an array of `items` which values are the same as [DropdownListItem](?path=/docs/components-dropdown-components-dropdownlistitem--docs) props. (this prop may be removed in a future version)
+
+<Canvas of={Dropdown.Default} />
+
+### Dropdown props
+
+<Controls of={Dropdown.Default} />
+
+### Dropdown `items` keys (for reference)
+
+<Controls of={DropdownListItem.Default} />
+
+<Stories />
+```

package/dist/packages/components/EmptyState/doc.md

@@ -0,0 +1,101 @@
+# EmptyState
+
+## Props
+
+The complete Props documentation with JS doc for this component is available at this path:
+
+node_modules/@agregio-solutions/design-system/dist/packages/components/EmptyState/EmptyState.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import EmptyState from "./EmptyState";
+import Button from "@components/Button/Button";
+
+const meta: Meta<typeof EmptyState> = {
+  component: EmptyState,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  globals: {
+    backgrounds: { value: "light" },
+  },
+  argTypes: {
+    children: { control: false },
+    description: { control: "text" },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "496px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: "help_outline",
+    title: "[Insert title]",
+    description:
+      "[Change this paragraph to include any informations for user that can assit them in making decisions.]",
+    children: (
+      <>
+        <Button mode="secondary" text="[Insert name]" />
+        <Button mode="primary" text="[Insert name]" />
+      </>
+    ),
+  },
+};
+
+export const WithoutIcon: Story = {
+  args: {
+    title: "No data available",
+    description:
+      "There are no items to display at this time. Try adjusting your filters or check back later.",
+    children: (
+      <>
+        <Button mode="secondary" text="Refresh" />
+        <Button mode="primary" text="Add Item" />
+      </>
+    ),
+  },
+};
+
+export const WithoutActions: Story = {
+  args: {
+    icon: "help_outline",
+    title: "Coming Soon",
+    description:
+      "This feature is currently under development and will be available soon.",
+  },
+};
+
+export const SingleAction: Story = {
+  args: {
+    icon: "help_outline",
+    title: "Get Started",
+    description: "Welcome! Click the button below to begin your journey.",
+    children: <Button mode="primary" text="Get Started" />,
+  },
+};
+
+export const GrayVariant: Story = {
+  globals: {
+    backgrounds: { value: "default" },
+  },
+  args: {
+    ...Default.args,
+    variant: "gray",
+  },
+};
+```