@agregio-solutions/design-system 1.90.1 → 1.92.0

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

@@ -0,0 +1,124 @@
+# ChartTooltip
+
+## 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/ChartTooltip/ChartTooltip.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import ChartTooltip from "./ChartTooltip";
+
+const meta: Meta<typeof ChartTooltip> = {
+  component: ChartTooltip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    footerSlot: { control: "text" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    title: "Title 1",
+    items: [
+      { text: "Item : Value #", color: "#4A90E2" },
+      { text: "Item : Value #", color: "#7ED321", icon: "plainline" },
+      { text: "Item : Value #", color: "#50E3C2", icon: "dottedline" },
+    ],
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    bodyTitle: "Zone 2 title",
+    bodyContent: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    footerSlot: (
+      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <span>↔</span>
+        <span>Slot component</span>
+      </div>
+    ),
+    style: {
+      maxWidth: "240px",
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Title 1");
+    await canvas.findByText("Zone 2 title");
+    await expect(await canvas.findAllByText("Item : Value #")).toHaveLength(3);
+    await expect(await canvas.findAllByText(/Lorem ipsum/)).toHaveLength(2);
+    await canvas.findByText("Slot component");
+  },
+};
+
+export const WithHeaderOnly: Story = {
+  args: {
+    title: "Simple Tooltip",
+    items: [
+      { text: "Metric A : 100%", color: "#FF6B6B" },
+      { text: "Metric B : 75%", color: "#4ECDC4" },
+    ],
+  },
+};
+
+export const WithBody: Story = {
+  args: {
+    title: "Tooltip with Body",
+    items: [{ text: "Data : 42", color: "#45B7D1" }],
+    bodyTitle: "Additional Information",
+    bodyContent: "This is additional context for the tooltip content.",
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    title: "Tooltip with Footer",
+    items: [{ text: "Status : Active", color: "#96CEB4" }],
+    footerSlot: <div>Read-only information</div>,
+  },
+};
+
+export const EmptyItems: Story = {
+  args: {
+    title: "Tooltip without items",
+    description: "This tooltip shows only the title and body content.",
+    items: [],
+  },
+};
+
+export const OnlyOneItem: Story = {
+  args: {
+    title: "SPOT : -3,50 €",
+    description: "24/09/25 - 13:00",
+  },
+};
+
+export const WithOutlineColor: Story = {
+  args: {
+    title: "Tooltip with Outline Color",
+    items: [
+      {
+        text: "Data : 42",
+        color: "var(--color-content-dataviz-azure-1)",
+        outlineColor: "var(--color-content-dataviz-azure-3)",
+      },
+      {
+        text: "Data : 50",
+        color: "var(--color-content-dataviz-orange-1)",
+        outlineColor: "var(--color-content-dataviz-orange-3)",
+      },
+    ],
+  },
+};
+```

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

@@ -0,0 +1,329 @@
+# Checkbox
+
+## 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/Checkbox/Checkbox.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Checkbox from "./Checkbox";
+import { expect, fireEvent, fn, within } from "storybook/test";
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  argTypes: {
+    defaultSelected: { control: false },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+
+// Be warned ! There is a known issue with the userEvent.click on checkbox inputs in Firefox
+// This is why we use a mix of userEvent and fireEvent, waiting for a fix in userEvent
+// See: https://github.com/testing-library/user-event/issues/1149
+
+export const Playground: StoryObj<typeof Checkbox> = {
+  args: {
+    label: "Label",
+    onChange: fn(),
+  },
+};
+
+export const WithLabel: StoryObj<typeof Checkbox> = {
+  args: {
+    ...Playground.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Label");
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+  },
+};
+
+export const WithLabelDefaultSelected: StoryObj<typeof Checkbox> = {
+  args: {
+    ...Playground.args,
+    defaultSelected: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Label");
+    await expect(canvas.getByLabelText("Label")).toBeChecked();
+  },
+};
+
+export const WithLabelDisabled: StoryObj<typeof Checkbox> = {
+  args: {
+    ...Playground.args,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Label");
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+    await expect(canvas.getByLabelText("Label")).toBeDisabled();
+    await fireEvent.click(canvas.getByLabelText("Label"));
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+  },
+};
+
+export const WithLabelIndeterminate: StoryObj<typeof Checkbox> = {
+  args: {
+    ...Playground.args,
+    isIndeterminate: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Label");
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+  },
+};
+
+export const WithLabelReadOnly: StoryObj<typeof Checkbox> = {
+  args: {
+    ...Playground.args,
+    readOnly: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Label");
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+    await fireEvent.click(canvas.getByLabelText("Label"));
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+  },
+};
+
+export const WithLabelFocus: StoryObj<typeof Checkbox> = {
+  args: {
+    ...Playground.args,
+    // @ts-ignore
+    "data-force-focus": true,
+  },
+};
+
+export const WithoutLabel: StoryObj<typeof Checkbox> = {
+  args: {
+    ...Playground.args,
+    hideLabel: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+  },
+};
+
+export const WithoutLabelDefaultSelected: StoryObj<typeof Checkbox> = {
+  args: {
+    ...WithoutLabel.args,
+    defaultSelected: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("Label")).toBeChecked();
+  },
+};
+
+export const WithoutLabelDisabled: StoryObj<typeof Checkbox> = {
+  args: {
+    ...WithoutLabel.args,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+    await expect(canvas.getByLabelText("Label")).toBeDisabled();
+    await fireEvent.click(canvas.getByLabelText("Label"));
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+  },
+};
+
+export const WithoutLabelIndeterminate: StoryObj<typeof Checkbox> = {
+  args: {
+    ...WithoutLabel.args,
+    isIndeterminate: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+  },
+};
+
+export const WithoutLabelReadOnly: StoryObj<typeof Checkbox> = {
+  args: {
+    ...WithoutLabel.args,
+    readOnly: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+    await fireEvent.click(canvas.getByLabelText("Label"));
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+  },
+};
+
+export const WithoutLabelFocus: StoryObj<typeof Checkbox> = {
+  args: {
+    ...WithoutLabel.args,
+    // @ts-ignore
+    "data-force-focus": true,
+  },
+};
+```
+
+## 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 Checkbox from "../Checkbox";
+import React from "react";
+import { expect, fireEvent, within } from "storybook/test";
+import { useController, useForm } from "react-hook-form";
+import { someTime } from "@internal/test-utils-storybook/test-utils-storybook";
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+    chromatic: { disableSnapshot: true },
+  },
+};
+export default meta;
+
+// Be warned ! There is a known issue with the userEvent.click on checkbox inputs in Firefox
+// This is why we use a mix of userEvent and fireEvent, waiting for a fix in userEvent
+// See: https://github.com/testing-library/user-event/issues/1149
+
+export const ExampleControlled: StoryObj<typeof Checkbox> = {
+  render: () => {
+    function Example() {
+      const [selected, setSelection] = React.useState(false);
+
+      return (
+        <>
+          <Checkbox
+            label="Label"
+            isSelected={selected}
+            onChange={setSelection}
+          />
+
+          <p>{`The checkbox is  ${selected ? "selected" : "unselected"}`}</p>
+        </>
+      );
+    }
+
+    return <Example />;
+  },
+};
+
+export const TestControlled: StoryObj<typeof Checkbox> = {
+  render: ExampleControlled.render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("The checkbox is unselected");
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+    await fireEvent.click(canvas.getByLabelText("Label"));
+    await canvas.findByText("The checkbox is selected");
+    await expect(canvas.getByLabelText("Label")).toBeChecked();
+  },
+};
+
+export const ExampleWithReactHookForm: StoryObj<typeof Checkbox> = {
+  render: (args) => {
+    const ReactHookFormExample = () => {
+      const { control } = useForm<any>();
+      const checkBoxField = useController({
+        control,
+        name: "checkbox",
+      });
+
+      return (
+        <>
+          <Checkbox
+            label="Label"
+            isSelected={checkBoxField.field.value}
+            onChange={(selected) => checkBoxField.field.onChange(selected)}
+          />
+
+          <p>{`The checkbox is  ${checkBoxField.field.value ? "selected" : "unselected"}`}</p>
+        </>
+      );
+    };
+
+    return <ReactHookFormExample {...args} />;
+  },
+};
+
+export const TestWithReactHookForm: StoryObj<typeof Checkbox> = {
+  render: ExampleWithReactHookForm.render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await someTime(250);
+    await canvas.findByText("The checkbox is unselected");
+    await expect(canvas.getByLabelText("Label")).not.toBeChecked();
+    await fireEvent.click(canvas.getByLabelText("Label"));
+    await canvas.findByText("The checkbox is selected");
+    await expect(canvas.getByLabelText("Label")).toBeChecked();
+  },
+};
+```
+
+## 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,
+  Controls,
+  Meta,
+  Source,
+  Stories,
+} from "@storybook/addon-docs/blocks";
+
+import * as Checkbox from "./Checkbox.stories";
+import * as CheckboxTests from "./tests/Checkbox.stories";
+
+<Meta of={Checkbox} />
+
+# Checkbox
+
+<Canvas of={Checkbox.Playground} />
+
+## Checkbox props
+
+<Controls of={Checkbox.Playground} />
+
+## Code examples
+
+### Basic usage
+
+This is how you generally want to use the `Checkbox` component.
+You can control the value of the checkbox by passing the `isSelected` and `onChange` props.
+
+<Source of={CheckboxTests.ExampleControlled} type="code" dark />
+
+### React Hook Form
+
+Here is another example of how to use the `Checkbox` component with `react-hook-form`.
+Since the Checkbox component manages its state internally, you have to use `useController` (or the Controller component) from React Hook Form to integrate with it in a controlled mode.
+
+More information about this technical limitation on the [react-hook-form docs](https://www.react-hook-form.com/get-started/#IntegratingwithUIlibraries) and also in [React Aria docs](https://react-spectrum.adobe.com/react-aria/forms.html#react-hook-form)
+
+<Source of={CheckboxTests.ExampleWithReactHookForm} type="code" dark />
+
+## Stories
+
+<Stories of={Checkbox} />
+```

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

@@ -0,0 +1,242 @@
+# CheckboxGroup
+
+## 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/CheckboxGroup/CheckboxGroup.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import CheckboxGroup from "./CheckboxGroup";
+import { userEvent, within, waitFor, expect, fn } from "storybook/test";
+import Checkbox from "@components/Checkbox/Checkbox";
+
+const meta: Meta<typeof CheckboxGroup> = {
+  component: CheckboxGroup,
+  argTypes: {
+    children: { control: false },
+    className: { control: "text" },
+    value: { control: false },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+
+export const Playground: StoryObj<typeof CheckboxGroup> = {
+  args: {
+    "aria-label": "Checkbox Group",
+    children: (
+      <>
+        <Checkbox label="Option 1" value="1" />
+        <Checkbox label="Option 2" value="2" />
+        <Checkbox label="Option 3" value="3" />
+      </>
+    ),
+    isDisabled: false,
+    isReadOnly: false,
+    onChange: fn(),
+    className: "",
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+    },
+  },
+};
+
+export const Disabled: StoryObj<typeof CheckboxGroup> = {
+  args: {
+    ...Playground.args,
+    isDisabled: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await expect(canvas.getByLabelText("Option 1")).toBeDisabled();
+    await user.click(canvas.getByText("Option 1"));
+    await expect(canvas.getByLabelText("Option 2")).toBeDisabled();
+    await user.click(canvas.getByText("Option 2"));
+    await expect(canvas.getByLabelText("Option 3")).toBeDisabled();
+    await user.click(canvas.getByText("Option 3"));
+    await waitFor(() => expect(args.onChange).not.toHaveBeenCalled());
+  },
+};
+
+export const ReadOnly: StoryObj<typeof CheckboxGroup> = {
+  args: {
+    ...Playground.args,
+    isReadOnly: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await user.click(canvas.getByText("Option 1"));
+    await user.click(canvas.getByText("Option 2"));
+    await user.click(canvas.getByText("Option 3"));
+    await waitFor(() => expect(args.onChange).not.toHaveBeenCalled());
+  },
+};
+```
+
+## 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 CheckboxGroup from "../CheckboxGroup";
+import { userEvent, within, waitFor, expect } from "storybook/test";
+import { Playground } from "../CheckboxGroup.stories";
+import { useState } from "react";
+import Checkbox from "@components/Checkbox/Checkbox";
+import Radio from "@components/Radio/Radio";
+import { useController, useForm } from "react-hook-form";
+
+const meta: Meta<typeof CheckboxGroup> = {
+  component: CheckboxGroup,
+  parameters: {
+    layout: "centered",
+    chromatic: { disableSnapshot: true },
+  },
+};
+export default meta;
+
+export const TestShouldSelectTheItems: StoryObj<typeof CheckboxGroup> = {
+  args: {
+    ...Playground.args,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await user.click(canvas.getByText("Option 1"));
+    await waitFor(() => expect(args.onChange).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(args.onChange).toHaveBeenCalledWith(["1"]));
+    await user.click(canvas.getByText("Option 2"));
+    await waitFor(() => expect(args.onChange).toHaveBeenCalledTimes(2));
+    await waitFor(() => expect(args.onChange).toHaveBeenCalledWith(["1", "2"]));
+    await user.click(canvas.getByText("Option 3"));
+    await waitFor(() => expect(args.onChange).toHaveBeenCalledTimes(3));
+    await waitFor(() =>
+      expect(args.onChange).toHaveBeenCalledWith(["1", "2", "3"]),
+    );
+    await user.click(canvas.getByText("Option 2"));
+    await waitFor(() => expect(args.onChange).toHaveBeenCalledTimes(4));
+    await waitFor(() => expect(args.onChange).toHaveBeenCalledWith(["1", "3"]));
+  },
+};
+
+export const ExampleControlled: StoryObj<typeof CheckboxGroup> = {
+  render: () => {
+    const ParentComponent = () => {
+      const [value, setValue] = useState<Array<string>>([]);
+
+      return (
+        <div>
+          Selected values: {value.join(", ")}
+          <CheckboxGroup
+            value={value}
+            onChange={setValue}
+            aria-label="Checkbox Group"
+          >
+            <Checkbox label="Option 1" value="1" />
+            <Checkbox label="Option 2" value="2" />
+            <Checkbox label="Option 3" value="3" />
+          </CheckboxGroup>
+        </div>
+      );
+    };
+
+    return <ParentComponent />;
+  },
+};
+
+export const ExampleWithReactHookForm: StoryObj<typeof Radio> = {
+  render: (args) => {
+    const ReactHookFormExample = () => {
+      const { control } = useForm({
+        defaultValues: {
+          checkboxes: [],
+        },
+      });
+
+      const checkboxesField = useController({ name: "checkboxes", control });
+
+      return (
+        <form>
+          <div>Selected values: {checkboxesField.field.value.join(", ")}</div>
+          <div>
+            <CheckboxGroup
+              value={checkboxesField.field.value}
+              onChange={checkboxesField.field.onChange}
+              aria-label="Checkbox Group"
+            >
+              <Checkbox label="Option 1" value="1" />
+              <Checkbox label="Option 2" value="2" />
+              <Checkbox label="Option 3" value="3" />
+            </CheckboxGroup>
+          </div>
+        </form>
+      );
+    };
+
+    return <ReactHookFormExample {...args} />;
+  },
+};
+```
+
+## 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,
+  Canvas,
+  Controls,
+  Source,
+  Stories,
+} from "@storybook/addon-docs/blocks";
+
+import * as CheckboxGroup from "./CheckboxGroup.stories";
+import * as CheckboxGroupTests from "./tests/CheckboxGroup.stories";
+
+<Meta of={CheckboxGroup} />
+
+# CheckboxGroup
+
+This component is a helper to manage a group of checkboxes.
+
+<Canvas of={CheckboxGroup.Playground} />
+
+## CheckboxGroup props
+
+<Controls of={CheckboxGroup.Playground} />
+
+## Code examples
+
+### Basic usage
+
+<Source of={CheckboxGroupTests.ExampleControlled} type="code" dark />
+
+### React Hook Form
+
+Here is another example of how to use the `CheckboxGroup` component with `react-hook-form`.
+Since the Checkbox component manages its state internally, you have to use `useController` (or the Controller component) from React Hook Form to integrate with it in a controlled mode.
+
+More information about this technical limitation on the [react-hook-form docs](https://www.react-hook-form.com/get-started/#IntegratingwithUIlibraries) and also in [React Aria docs](https://react-spectrum.adobe.com/react-aria/forms.html#react-hook-form)
+
+<Source of={CheckboxGroupTests.ExampleWithReactHookForm} type="code" dark />
+
+## Stories
+
+<Stories of={CheckboxGroup} />
+```