@agregio-solutions/design-system 1.90.1 → 1.92.0

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

@@ -0,0 +1,1046 @@
+# Timeline
+
+## 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/Timeline/Timeline.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Timeline from "./Timeline";
+import { within, userEvent, fn } from "storybook/test";
+import MockDate from "mockdate";
+import {
+  expectNotPresent,
+  STORYBOOK_VIEWPORTS,
+} from "@internal/test-utils-storybook/test-utils-storybook";
+import { I18nProvider } from "react-aria-components";
+import ChartTooltip from "@components/ChartTooltip/ChartTooltip";
+
+const meta: Meta<typeof Timeline> = {
+  parameters: {
+    docs: {
+      story: {
+        autoplay: true,
+      },
+    },
+  },
+  component: Timeline,
+  decorators: [
+    (Story) => (
+      <I18nProvider locale="fr">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof Timeline>;
+
+export const Playground: Story = {
+  args: {
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-15T00:00:00.000Z"),
+    emptyPlaceholder: "No data",
+    lines: [
+      {
+        name: "Installation 1",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-01T00:00:00.000Z"),
+            endDate: new Date("2024-01-02T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-positive-3)",
+            hoverText: "One day",
+            onClick: fn(),
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-03T00:00:00.000Z"),
+            endDate: new Date("2024-01-05T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-purple-3)",
+            hoverText: "Two days",
+            onClick: fn(),
+          },
+          {
+            id: "block-3",
+            startDate: new Date("2024-01-06T00:00:00.000Z"),
+            endDate: new Date("2024-01-09T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-3)",
+            hoverText: "Three days",
+            onClick: fn(),
+          },
+          {
+            id: "block-3",
+            startDate: new Date("2024-01-13T00:00:00.000Z"),
+            endDate: new Date("2024-01-20T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-3)",
+            hoverText: "Overflow after",
+            onClick: fn(),
+          },
+        ],
+      },
+      {
+        name: "Installation avec un nom long",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-02T00:00:00.000Z"),
+            endDate: new Date("2024-01-03T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-neutral-3)",
+            hoverText: "1 day",
+            onClick: fn(),
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-01T00:00:00.000Z"),
+            endDate: new Date("2024-01-05T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-pink-3)",
+            hoverText: "4 days",
+            onClick: fn(),
+          },
+          {
+            id: "block-3",
+            startDate: new Date("2024-01-01T00:00:00.000Z"),
+            endDate: new Date("2024-01-03T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-azure-3)",
+            hoverText: "2 days",
+            onClick: fn(),
+          },
+          {
+            id: "block-4",
+            startDate: new Date("2024-01-04T00:00:00.000Z"),
+            endDate: new Date("2024-01-06T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-azure-3)",
+            hoverText: "2 days again",
+            onClick: fn(),
+          },
+          {
+            id: "block-5",
+            startDate: new Date("2024-01-01T00:00:00.000Z"),
+            endDate: new Date("2024-01-11T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-3)",
+            hoverText: "full line block",
+            onClick: fn(),
+          },
+        ],
+      },
+      {
+        name: "Installation avec un nom super super super long",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-01T00:00:00.000Z"),
+            endDate: new Date("2024-01-02T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-neutral-3)",
+            hoverText: "Group 1 - 1 day",
+            onClick: fn(),
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-02T06:00:00.000Z"),
+            endDate: new Date("2024-01-03T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-pink-3)",
+            hoverText: "Group 2 - 1 day",
+            onClick: fn(),
+          },
+          {
+            id: "block-3",
+            startDate: new Date("2024-01-02T06:00:00.000Z"),
+            endDate: new Date("2024-01-04T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-azure-3)",
+            hoverText: "Group 2 - 2 days",
+            onClick: fn(),
+          },
+          {
+            id: "block-4",
+            startDate: new Date("2024-01-05T00:00:00.000Z"),
+            endDate: new Date("2024-01-08T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-azure-3)",
+            hoverText: "Group 3 - 3 days",
+            onClick: fn(),
+          },
+          {
+            id: "block-5",
+            startDate: new Date("2024-01-06T00:00:00.000Z"),
+            endDate: new Date("2024-01-08T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-3)",
+            hoverText: "Group 3 - 2 days",
+            onClick: fn(),
+          },
+          {
+            id: "block-6",
+            startDate: new Date("2024-01-07T00:00:00.000Z"),
+            endDate: new Date("2024-01-08T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-3)",
+            hoverText: "Group 3 - 1 day",
+            onClick: fn(),
+          },
+          ...new Array(8).fill(null).map((_, index) => ({
+            id: `block-${index + 7}`,
+            startDate: new Date("2024-01-09T00:00:00.000Z"),
+            endDate: new Date("2024-01-10T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-ocean-3)",
+            hoverText: `Group 4 - block ${index}`,
+            onClick: fn(),
+          })),
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-05T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    await canvas.findByText("Installation 1");
+    await canvas.findByText("Installation avec un nom long");
+    await canvas.findByText("Installation avec un nom super super super long");
+
+    // Check first line
+    const firstLine = within(
+      canvas.getByTestId("block-chart-line-Installation 1-0"),
+    );
+    await firstLine.findByTestId("One day");
+    await firstLine.findByTestId("Two days");
+    await firstLine.findByTestId("Three days");
+
+    // Check second line
+    const secondLine = within(
+      canvas.getByTestId("block-chart-line-Installation avec un nom long-1"),
+    );
+
+    await secondLine.findByTestId("1 day");
+    await secondLine.findByTestId("4 days");
+    await secondLine.findByTestId("2 days");
+    await secondLine.findByTestId("2 days again");
+    await secondLine.findByTestId("full line block");
+
+    // Check third line
+    const thirdLine = within(
+      canvas.getByTestId(
+        "block-chart-line-Installation avec un nom super super super long-2",
+      ),
+    );
+
+    await thirdLine.findByTestId("Group 1 - 1 day");
+    await thirdLine.findByTestId("Group 2 - 1 day");
+    await thirdLine.findByTestId("Group 2 - 2 days");
+    await thirdLine.findByTestId("Group 3 - 3 days");
+    await thirdLine.findByTestId("Group 3 - 2 days");
+    await thirdLine.findByTestId("Group 3 - 1 day");
+  },
+};
+
+export const NoData: Story = {
+  args: {
+    ...Playground.args,
+    lines: [],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("No data");
+    await expectNotPresent(() => canvas.queryByTestId("timeline"));
+  },
+};
+
+export const HoursUnit: Story = {
+  args: {
+    ...Playground.args,
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-02T00:00:00.000Z"),
+    lines: [
+      {
+        name: "Installation 1",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-01T00:00:00.000Z"),
+            endDate: new Date("2024-01-01T10:00:00.000Z"),
+            color: "var(--color-content-dataviz-positive-3)",
+            hoverText: "block-1",
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-01T11:00:00.000Z"),
+            endDate: new Date("2024-01-01T13:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-2)",
+            hoverText: "block-2",
+          },
+          {
+            id: "block-3",
+            startDate: new Date("2024-01-01T02:00:00.000Z"),
+            endDate: new Date("2024-01-01T03:00:00.000Z"),
+            color: "var(--color-content-dataviz-ocean-3)",
+            hoverText: "block-3",
+          },
+          {
+            id: "block-4",
+            startDate: new Date("2024-01-01T03:00:00.000Z"),
+            endDate: new Date("2024-01-01T04:00:00.000Z"),
+            color: "var(--color-content-dataviz-positive-3)",
+            hoverText: "block-4",
+          },
+        ],
+      },
+      {
+        name: "Installation 2",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-01T01:00:00.000Z"),
+            endDate: new Date("2024-01-01T10:00:00.000Z"),
+            color: "var(--color-content-dataviz-pink-2)",
+            hoverText: "block-1",
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-01T11:00:00.000Z"),
+            endDate: new Date("2024-01-01T13:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-2)",
+            hoverText: "block-2",
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ mount }) => {
+    MockDate.set("2024-01-01T08:00:00.000Z");
+    await mount();
+  },
+};
+
+export const Week: Story = {
+  args: {
+    ...Playground.args,
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-08T00:00:00.000Z"),
+    lines: [
+      {
+        name: "Installation 1",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-01T12:00:00.000Z"),
+            endDate: new Date("2024-01-08T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-positive-3)",
+            hoverText: "block-1",
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-02T00:00:00.000Z"),
+            endDate: new Date("2024-01-04T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-2)",
+            hoverText: "block-2",
+          },
+          {
+            id: "block-3",
+            startDate: new Date("2024-01-06T00:00:00.000Z"),
+            endDate: new Date("2024-01-08T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-ocean-3)",
+            hoverText: "block-3",
+          },
+        ],
+      },
+      {
+        name: "Installation 2",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-01T01:00:00.000Z"),
+            endDate: new Date("2024-01-01T10:00:00.000Z"),
+            color: "var(--color-content-dataviz-pink-2)",
+            hoverText: "block-1",
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-01T11:00:00.000Z"),
+            endDate: new Date("2024-01-01T13:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-2)",
+            hoverText: "block-2",
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ mount }) => {
+    MockDate.set("2024-01-01T12:00:00.000Z");
+    await mount();
+  },
+};
+
+export const Month: Story = {
+  args: {
+    ...Playground.args,
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-02-01T00:00:00.000Z"),
+    lines: [
+      {
+        name: "Installation 1",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-01T12:00:00.000Z"),
+            endDate: new Date("2024-01-31T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-positive-3)",
+            hoverText: "block-1",
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-10T00:00:00.000Z"),
+            endDate: new Date("2024-01-12T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-2)",
+            hoverText: "block-2",
+          },
+          {
+            id: "block-3",
+            startDate: new Date("2024-01-13T00:00:00.000Z"),
+            endDate: new Date("2024-01-15T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-ocean-3)",
+            hoverText: "block-3",
+          },
+        ],
+      },
+      {
+        name: "Installation 2",
+        blocks: [
+          {
+            id: "block-1",
+            startDate: new Date("2024-01-10T01:00:00.000Z"),
+            endDate: new Date("2024-01-20T10:00:00.000Z"),
+            color: "var(--color-content-dataviz-pink-2)",
+            hoverText: "block-1",
+          },
+          {
+            id: "block-2",
+            startDate: new Date("2024-01-01T11:00:00.000Z"),
+            endDate: new Date("2024-01-01T13:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-2)",
+            hoverText: "block-2",
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ mount }) => {
+    MockDate.set("2024-01-11T12:00:00.000Z");
+    await mount();
+  },
+};
+
+export const Mobile: Story = {
+  parameters: {
+    ...STORYBOOK_VIEWPORTS,
+  },
+  globals: {
+    viewport: { value: "iphone6", isRotated: false },
+  },
+  args: {
+    ...Playground.args,
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <div style={{ paddingBlock: "var(--spacing-lg)" }}>
+          Content that should not scroll-x
+        </div>
+        <Story />
+        <div style={{ paddingBlock: "var(--spacing-lg)" }}>
+          Content that should not scroll-x
+        </div>
+      </div>
+    ),
+  ],
+  play: async ({ mount }) => {
+    MockDate.set("2024-01-01T12:00:00.000Z");
+    await mount();
+  },
+};
+
+export const GroupSimple: Story = {
+  args: {
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-08T00:00:00.000Z"),
+    lines: [
+      {
+        type: "group",
+        name: "Installation 1",
+        subLines: [
+          {
+            name: "Installation 1 PRM_1",
+            blocks: [
+              {
+                id: "unavailability-1",
+                startDate: new Date("2024-01-01T00:00:00.000Z"),
+                endDate: new Date("2024-01-02T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Installation 1 PRM_1 - Indisponibilité 1",
+              },
+              {
+                id: "activation-1",
+                startDate: new Date("2024-01-07T00:00:00.000Z"),
+                endDate: new Date("2024-01-10T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-azure-3)",
+                hoverText: "Installation 1 PRM_1 - Activation 1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-05T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await user.click(canvas.getByText("Installation 1"));
+    await canvas.findByText("Installation 1 PRM_1");
+    await canvas.findByTestId("Installation 1 PRM_1 - Indisponibilité 1");
+    await canvas.findByTestId("Installation 1 PRM_1 - Activation 1");
+  },
+};
+
+export const GroupMultiple: Story = {
+  args: {
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-08T00:00:00.000Z"),
+    lines: [
+      {
+        type: "group",
+        name: "Installation 3",
+        subLines: [
+          {
+            name: "Installation 3 PRM_1",
+            blocks: [
+              {
+                id: "unavailability-1",
+                startDate: new Date("2024-01-03T00:00:00.000Z"),
+                endDate: new Date("2024-01-04T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Installation 3 PRM_1 - Indisponibilité 1",
+              },
+              {
+                id: "activation-1",
+                startDate: new Date("2024-01-06T00:00:00.000Z"),
+                endDate: new Date("2024-01-07T12:00:00.000Z"),
+                color: "var(--color-content-dataviz-azure-3)",
+                hoverText: "Installation 3 PRM_1 - Activation 1",
+              },
+            ],
+          },
+          {
+            name: "Installation 3 PRM_2",
+            blocks: [
+              {
+                id: "unavailability-1",
+                startDate: new Date("2024-01-01T00:00:00.000Z"),
+                endDate: new Date("2024-01-02T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Installation 3 PRM_2 - Indisponibilité 1",
+              },
+              {
+                id: "unavailability-2",
+                startDate: new Date("2024-01-02T00:00:00.000Z"),
+                endDate: new Date("2024-01-03T12:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Installation 3 PRM_2 - Indisponibilité 2",
+              },
+              {
+                id: "unavailability-3",
+                startDate: new Date("2024-01-05T00:00:00.000Z"),
+                endDate: new Date("2024-01-07T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Installation 3 PRM_2 - Indisponibilité 3",
+              },
+              {
+                id: "activation-1",
+                startDate: new Date("2024-01-05T00:00:00.000Z"),
+                endDate: new Date("2024-01-07T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-azure-3)",
+                hoverText: "Installation 3 PRM_2 - Activation 1",
+              },
+            ],
+          },
+          {
+            name: "Installation 3 PRM_3",
+            blocks: [
+              {
+                id: "unavailability-1",
+                startDate: new Date("2024-01-03T14:00:00.000Z"),
+                endDate: new Date("2024-01-04T12:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Installation 3 PRM_3 - Indisponibilité 1",
+              },
+              {
+                id: "activation-1",
+                startDate: new Date("2024-01-07T02:00:00.000Z"),
+                endDate: new Date("2024-01-10T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-azure-3)",
+                hoverText: "Installation 3 PRM_3 - Activation 1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-05T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await user.click(canvas.getByText("Installation 3"));
+    await canvas.findByText("Installation 3 PRM_1");
+    await canvas.findByText("Installation 3 PRM_2");
+  },
+};
+
+export const GroupWithEmptySubLine: Story = {
+  args: {
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-08T00:00:00.000Z"),
+    lines: [
+      {
+        type: "group",
+        name: "Groupe vide",
+        subLines: [
+          {
+            name: "Sous-ligne sans blocs",
+            blocks: [],
+          },
+          {
+            name: "Sous-ligne avec bloc",
+            blocks: [
+              {
+                id: "b1",
+                startDate: new Date("2024-01-03T00:00:00.000Z"),
+                endDate: new Date("2024-01-05T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-positive-3)",
+                hoverText: "Bloc existant",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-05T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await user.click(canvas.getByText("Groupe vide"));
+    await canvas.findByText("Sous-ligne sans blocs");
+    await canvas.findByText("Sous-ligne avec bloc");
+  },
+};
+
+export const GroupWithOverflow: Story = {
+  args: {
+    startDate: new Date("2024-01-03T00:00:00.000Z"),
+    endDate: new Date("2024-01-06T00:00:00.000Z"),
+    lines: [
+      {
+        type: "group",
+        name: "Groupe avec overflow",
+        subLines: [
+          {
+            name: "Sous-ligne overflow gauche",
+            blocks: [
+              {
+                id: "overflow-left",
+                startDate: new Date("2024-01-01T00:00:00.000Z"),
+                endDate: new Date("2024-01-04T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Déborde à gauche",
+              },
+            ],
+          },
+          {
+            name: "Sous-ligne overflow droite",
+            blocks: [
+              {
+                id: "overflow-right",
+                startDate: new Date("2024-01-05T00:00:00.000Z"),
+                endDate: new Date("2024-01-08T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-azure-3)",
+                hoverText: "Déborde à droite",
+              },
+            ],
+          },
+          {
+            name: "Sous-ligne overflow les deux",
+            blocks: [
+              {
+                id: "overflow-both",
+                startDate: new Date("2024-01-01T00:00:00.000Z"),
+                endDate: new Date("2024-01-10T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-orange-3)",
+                hoverText: "Déborde des deux côtés",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-04T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await user.click(canvas.getByText("Groupe avec overflow"));
+    await canvas.findByText("Sous-ligne overflow gauche");
+    await canvas.findByText("Sous-ligne overflow droite");
+    await canvas.findByText("Sous-ligne overflow les deux");
+  },
+};
+
+export const MixedSimpleAndGroup: Story = {
+  args: {
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-08T00:00:00.000Z"),
+    lines: [
+      {
+        name: "Ligne simple avant",
+        blocks: [
+          {
+            id: "simple-1",
+            startDate: new Date("2024-01-01T00:00:00.000Z"),
+            endDate: new Date("2024-01-03T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-pink-3)",
+            hoverText: "Bloc simple avant",
+            onClick: fn(),
+          },
+        ],
+      },
+      {
+        type: "group",
+        name: "Groupe au milieu",
+        subLines: [
+          {
+            name: "Sous-ligne groupe",
+            blocks: [
+              {
+                id: "group-1",
+                startDate: new Date("2024-01-03T00:00:00.000Z"),
+                endDate: new Date("2024-01-06T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Bloc groupe",
+                onClick: fn(),
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: "Ligne simple après",
+        blocks: [
+          {
+            id: "simple-2",
+            startDate: new Date("2024-01-05T00:00:00.000Z"),
+            endDate: new Date("2024-01-07T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-pink-3)",
+            hoverText: "Bloc simple après",
+            onClick: fn(),
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-04T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    await canvas.findByText("Ligne simple avant");
+    await canvas.findByText("Groupe au milieu");
+    await canvas.findByText("Ligne simple après");
+  },
+};
+
+export const CustomHoverContent: Story = {
+  args: {
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-15T00:00:00.000Z"),
+    lines: [
+      {
+        name: "Installation 1",
+        blocks: [
+          {
+            id: "custom-2",
+            startDate: new Date("2024-01-05T00:00:00.000Z"),
+            endDate: new Date("2024-01-08T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-orange-3)",
+            hoverText: "Maintenance B",
+            hoverContent: (
+              <ChartTooltip
+                items={[]}
+                bodyTitle={`05/01/2024 - 00:00 \n 08/01/2024 - 00:00`}
+                bodyContent={
+                  <div>
+                    <div>Puissance indisponible : 8,50 MW</div>
+                    <div>Cause : Maintenance préventive</div>
+                  </div>
+                }
+                footerSlot={
+                  <div>
+                    <hr
+                      style={{
+                        border: "none",
+                        margin: "0",
+                        padding: "0",
+                        borderTop:
+                          "1px solid var(--color-content-neutral-stroke)",
+                      }}
+                    />
+                    <em style={{ fontStyle: "italic" }}>
+                      Cliquez pour accéder au détail.
+                    </em>
+                  </div>
+                }
+              />
+            ),
+            onClick: fn(),
+          },
+          {
+            id: "custom-3",
+            startDate: new Date("2024-01-09T00:00:00.000Z"),
+            endDate: new Date("2024-01-12T00:00:00.000Z"),
+            color: "var(--color-content-dataviz-negative-3)",
+            hoverText: "Default tooltip block",
+            onClick: fn(),
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-05T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    await canvas.findByTestId("Maintenance B");
+    await canvas.findByTestId("Default tooltip block");
+  },
+};
+
+export const GroupFullOverlap: Story = {
+  args: {
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-08T00:00:00.000Z"),
+    lines: [
+      {
+        type: "group",
+        name: "Maison Dieu - PRM[50014414454079]",
+        subLines: [
+          {
+            name: "Sous-ligne 1",
+            blocks: [
+              {
+                id: "negative-1",
+                startDate: new Date("2024-01-02T00:00:00.000Z"),
+                endDate: new Date("2024-01-06T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-negative-3)",
+                hoverText: "Sous-ligne 1 - bloc",
+              },
+            ],
+          },
+          {
+            name: "Sous-ligne 2",
+            blocks: [
+              {
+                id: "orange-1",
+                startDate: new Date("2024-01-03T00:00:00.000Z"),
+                endDate: new Date("2024-01-07T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-orange-3)",
+                hoverText: "Sous-ligne 2 - bloc",
+              },
+            ],
+          },
+          {
+            name: "Sous-ligne 3",
+            blocks: [
+              ...new Array(10).fill(null).map((_, index) => ({
+                id: `positive-multiple-blocks-${index}`,
+                startDate: new Date("2024-01-02T12:00:00.000Z"),
+                endDate: new Date("2024-01-05T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-positive-3)",
+                hoverText: `Sous-ligne 3 - bloc ${index + 1}`,
+              })),
+            ],
+          },
+          {
+            name: "Sous-ligne 4",
+            blocks: [
+              {
+                id: "neutral-1",
+                startDate: new Date("2024-01-02T00:00:00.000Z"),
+                endDate: new Date("2024-01-06T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-neutral-3)",
+                hoverText: "Sous-ligne 1 - bloc",
+              },
+            ],
+          },
+          {
+            name: "Sous-ligne 5",
+            blocks: [
+              {
+                id: "azure-1",
+                startDate: new Date("2024-01-02T00:00:00.000Z"),
+                endDate: new Date("2024-01-06T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-azure-3)",
+                hoverText: "Sous-ligne 5 - bloc",
+              },
+            ],
+          },
+          {
+            name: "Sous-ligne 6",
+            blocks: [
+              {
+                id: "pink-1",
+                startDate: new Date("2024-01-02T00:00:00.000Z"),
+                endDate: new Date("2024-01-06T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Sous-ligne 6 - bloc",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-03T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await user.click(canvas.getByText("Maison Dieu - PRM[50014414454079]"));
+  },
+};
+```
+
+## 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, Canvas } from "@storybook/addon-docs/blocks";
+
+import * as Timeline from "./Timeline.stories";
+
+<Meta of={Timeline} />
+
+# Timeline
+
+This component allows you to display temporal informations in a compact way.
+It consists of a series of lines that can all have different "blocks" that each have a starting and ending date.
+
+Here are some of the features that comes built-in:
+
+- **date-based**: give a start date and an end date for the timeline, the timeline range units will be computed accordingly
+- **overflow-control**: you don't have to filter blocks that start before/after the timeline range, they will be hidden automatically
+- **automatic stacking**: of blocks that overlap in the same line, no limit in the number of blocks that can be stacked
+- **hover-text**: each block can have a hover text that will be displayed when hovering over the block
+- **empty placeholder**: display a message when there are no blocks to display
+
+There are a few restrictions though:
+
+- please **do not exceed 1 month (31 days) in range**, it might not render properly (ask us if you need to display more!)
+- please also give **at least a few hours** in range
+- it is highly recommended to provide all dates (Timeline range _and_ blocks) in **ISO 8601 format with UTC timezone** (so the user can see the vertical bar indicating "now" at the proper place)
+
+<Canvas of={Timeline.Playground} />
+<Controls of={Timeline.Playground} />
+
+## Timeline modes
+
+You will see a small variation of the display of the timeline range (hours or dates).
+
+We can see this as "modes", but please note that those modes are computed automatically based on the dates provided.
+
+### Example usage : "hour" mode
+
+To display hours in the timeline range, you must provide a start and end date that are exactly 1 day or less apart.
+
+Here is an example (click on "Show code").
+
+<Canvas of={Timeline.HoursUnit} />
+
+### Example usage : "week" mode (weekdays)
+
+This display will appear if the timeline range between more than 1 day to 2 weeks.
+
+Here is an example (click on "Show code").
+
+<Canvas of={Timeline.Week} />
+
+### Example usage : "month" mode
+
+This display will appear if the timeline range is more than 2 weeks.
+
+Please note that for now, we recommend to provide a range of 1 month (31 days) maximum.
+
+Here is an example (click on "Show code").
+
+<Canvas of={Timeline.Month} />
+
+## Grouped lines
+
+A **group line** aggregates multiple sub-lines under a single collapsible row.
+
+Use `type: "group"` with a `subLines` array instead of a `blocks` array.
+
+```ts
+{
+  type: "group",
+  name: "Installation 3",
+  subLines: [
+    {
+      name: "Installation 3 PRM_1",
+      blocks: [ /* ... */ ],
+    },
+    {
+      name: "Installation 3 PRM_2",
+      blocks: [ /* ... */ ],
+    },
+  ],
+}
+```
+
+### Collapsed state (default)
+
+When collapsed, the group displays a **merged view** of all sub-lines' blocks. Blocks sharing the same color are merged into a single block spanning their combined range. This gives a quick overview of activity across all sub-lines.
+
+### Expanded state
+
+Clicking the group name **expands** it, revealing each sub-line on its own indented row. Clicking again collapses it back.
+
+### Simple group (one sub-line)
+
+<Canvas of={Timeline.GroupSimple} />
+
+### Group with multiple sub-lines
+
+<Canvas of={Timeline.GroupMultiple} />
+
+### Mixed simple and group lines
+
+Simple lines and group lines can coexist in the same `lines` array.
+
+<Canvas of={Timeline.MixedSimpleAndGroup} />
+
+## How to test the Timeline component
+
+- Lines' names can be targeted through their label prop (`getByText`) (even if truncated)
+- Individual lines can be targeted through `getByTestId` with id of `block-chart-line-${lineLabel}-${lineIndex}`
+- Individual time blocks can be targeted through `getByTestId` with id of their hover text
+
+Feel free to inspect the DOM to find the right selectors.
+````