@agregio-solutions/design-system 1.91.0 → 1.92.0

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

@@ -0,0 +1,99 @@
+# Chip
+
+## 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/Chip/Chip.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn, within } from "storybook/test";
+
+import Chip from "./Chip";
+
+const meta: Meta<typeof Chip> = {
+  component: Chip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+
+export const Default: StoryObj<typeof Chip> = {
+  args: {
+    value: "[Insert chip]",
+    onClose: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(String(args.value));
+  },
+};
+
+export const Small: StoryObj<typeof Chip> = {
+  args: {
+    ...Default.args,
+    size: "small",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(String(args.value));
+  },
+};
+
+export const NoCloseButton: StoryObj<typeof Chip> = {
+  args: {
+    ...Default.args,
+    onClose: undefined,
+  },
+};
+
+export const ImplementationExample: StoryObj<typeof Chip> = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  render: () => {
+    interface ChipData {
+      key: number;
+      label: string;
+    }
+
+    const ImplementationExample = () => {
+      const [chipData, setChipData] = React.useState<readonly ChipData[]>([
+        { key: 0, label: "Biarritz" },
+        { key: 2, label: "Lyon" },
+        { key: 3, label: "Paris" },
+        { key: 4, label: "Strasbourg" },
+      ]);
+      const handleDelete = (chipToDelete: ChipData) => () => {
+        setChipData((chips) =>
+          chips.filter((chip) => chip.key !== chipToDelete.key),
+        );
+      };
+
+      return (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+          {chipData.map((data) => (
+            <Chip
+              key={data.key}
+              value={data.label}
+              onClose={handleDelete(data)}
+            />
+          ))}
+        </div>
+      );
+    };
+
+    return <ImplementationExample />;
+  },
+};
+```