@agregio-solutions/design-system 1.90.1 → 1.92.0

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

@@ -0,0 +1,490 @@
+# TextInput
+
+## 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/TextInput/TextInput.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import TextInput from "./TextInput";
+import { ICON_NAMES_ARRAY } from "@components/Icon/Icon";
+import { useState } from "react";
+import { fn } from "storybook/test";
+
+const meta: Meta<typeof TextInput> = {
+  component: TextInput,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: { type: "text" } },
+    description: { control: { type: "text" } },
+    helperText: { control: { type: "text" } },
+    errorHelperText: { control: { type: "text" } },
+    successHelperText: { control: { type: "text" } },
+    inputIcon: {
+      options: ["", ...ICON_NAMES_ARRAY],
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+
+export const Playground: StoryObj<typeof TextInput> = {
+  args: {
+    onChange: fn(),
+    placeholder: "[Insert text]",
+    inputIcon: "help_outline",
+    required: true,
+    label: "[Insert label]",
+    labelIconRight: "help_outline",
+    labelIconRightTooltip: "Additional information",
+    description: "[Insert description]",
+    characterCounter: true,
+    maxLength: 60,
+    helperText: "[Insert helper]",
+    helperTextIcon: "help_outline",
+    disabled: false,
+    style: { width: 284 },
+  },
+};
+
+export const Default: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+  },
+};
+
+export const Disabled: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    disabled: true,
+  },
+};
+
+export const Negative: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    helperText: undefined,
+    inputIcon: "cancel",
+    errorHelperText: "Error message",
+    errorHelperTextIcon: "error_outline",
+  },
+};
+
+export const Positive: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    helperText: undefined,
+    inputIcon: "check_circle_outline",
+    successHelperText: "Success message",
+    successHelperTextIcon: "check",
+  },
+};
+
+export const Warning: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    helperText: undefined,
+    inputIcon: "warning_amber",
+    warningHelperText: "Warning message",
+    warningHelperTextIcon: "warning_amber",
+  },
+};
+
+export const ControlledWithCharacterCount: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+  },
+  render: (args) => {
+    const Wrapper = () => {
+      const [value, setValue] = useState<string>("");
+      return (
+        <TextInput
+          {...args}
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+export const WithAddonRight: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    inputIcon: "#",
+  },
+};
+
+export const Focus: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    // @ts-ignore
+    "data-force-focus": true,
+  },
+};
+
+export const Horizontal: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    description: undefined,
+    orientation: "horizontal",
+  },
+};
+
+export const FullWidth: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    style: undefined,
+    fullWidth: true,
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Multiline: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    style: undefined,
+    fullWidth: true,
+    as: "textarea",
+    rows: 4,
+  },
+  parameters: {
+    layout: "padded",
+  },
+  render: (args) => {
+    const Wrapper = () => {
+      const [value, setValue] = useState<string>("");
+      return (
+        <TextInput
+          {...(args as any)}
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      );
+    };
+    return <Wrapper />;
+  },
+};
+```
+
+## 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 { userEvent, within, expect, fn } from "storybook/test";
+import TextInput from "../TextInput";
+import { ICON_NAMES_ARRAY } from "@components/Icon/Icon";
+import { useForm, useWatch } from "react-hook-form";
+import {
+  ControlledWithCharacterCount,
+  Disabled,
+  Playground,
+} from "../TextInput.stories";
+
+const meta: Meta<typeof TextInput> = {
+  component: TextInput,
+  argTypes: {
+    label: { control: { type: "text" } },
+    description: { control: { type: "text" } },
+    helperText: { control: { type: "text" } },
+    inputIcon: {
+      options: ["", ...ICON_NAMES_ARRAY],
+    },
+  },
+  parameters: {
+    layout: "centered",
+    chromatic: { disableSnapshot: true },
+  },
+};
+export default meta;
+
+export const ShouldSelectAValue: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "New value");
+    await expect(input).toHaveValue("New value");
+    await expect(args.onChange).toHaveBeenCalled();
+  },
+};
+
+export const NumberType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "number",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "12");
+    await expect(input).toHaveValue(12);
+  },
+};
+
+export const EmailType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "email",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "contact@example.com");
+    await expect(input).toHaveValue("contact@example.com");
+  },
+};
+
+export const TelType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "tel",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "0612345678");
+    await expect(input).toHaveValue("0612345678");
+  },
+};
+
+export const UrlType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "url",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "https://example.com");
+    await expect(input).toHaveValue("https://example.com");
+  },
+};
+
+export const PasswordType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "password",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "password");
+    await expect(input).toHaveValue("password");
+  },
+};
+
+export const DateType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "date",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "2024-04-03");
+    await expect(input).toHaveValue("2024-04-03");
+  },
+};
+
+export const DatetimeLocalType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "datetime-local",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "2024-03-15T12:00");
+    await expect(input).toHaveValue("2024-03-15T12:00");
+  },
+};
+
+export const TimeType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "time",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "20:59");
+    await expect(input).toHaveValue("20:59");
+  },
+};
+
+export const MonthType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "month",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "2024-06");
+    await expect(input).toHaveValue("2024-06");
+  },
+};
+
+export const WeekType: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    type: "week",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "2024-W07");
+    await expect(input).toHaveValue("2024-W07");
+  },
+};
+
+export const ShouldNotChangeDisabledInput: StoryObj<typeof TextInput> = {
+  args: {
+    ...Disabled.args,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    const input = canvas.getByPlaceholderText("[Insert text]");
+    await user.type(input, "Trying to type...");
+    await expect(input).not.toHaveValue("Trying to type...");
+    await expect(args.onChange).not.toHaveBeenCalled();
+  },
+};
+
+export const ControlledModeWithCharacterCount: StoryObj<typeof TextInput> = {
+  ...ControlledWithCharacterCount,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "New value");
+    await expect(input).toHaveValue("New value");
+    await canvas.findByText("9 / 60");
+  },
+};
+
+export const WithoutLabel: StoryObj<typeof TextInput> = {
+  args: {
+    "aria-label": "Aria label",
+    onChange: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("Aria label");
+    await user.type(input, "New value");
+    await expect(input).toHaveValue("New value");
+    await expect(args.onChange).toHaveBeenCalled();
+  },
+};
+
+export const IntegrationWithReactHookForm: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+  },
+  render: (args) => {
+    const Wrapper = () => {
+      const { register, handleSubmit, control } = useForm();
+      const exampleValue = useWatch({ control, name: "example" });
+
+      return (
+        // eslint-disable-next-line no-console
+        <form onSubmit={handleSubmit((data) => console.log(data))}>
+          <div>Form value is: "{exampleValue}"</div>
+          <TextInput {...args} {...register("example")} />
+        </form>
+      );
+    };
+    return <Wrapper />;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    await user.type(input, "New value");
+    await expect(input).toHaveValue("New value");
+    await canvas.findByText('Form value is: "New value"');
+  },
+};
+
+export const OnlyCharacterCounter: StoryObj<typeof TextInput> = {
+  args: {
+    ...Playground.args,
+    characterCounter: true,
+    value: "New value",
+    description: undefined,
+    helperText: undefined,
+    errorHelperText: undefined,
+    successHelperText: undefined,
+  },
+};
+
+export const CharacterCounterAndDescription: StoryObj<typeof TextInput> = {
+  args: {
+    ...OnlyCharacterCounter.args,
+    description: "Description",
+  },
+};
+
+export const CharacterCounterAndHelperText: StoryObj<typeof TextInput> = {
+  args: {
+    ...OnlyCharacterCounter.args,
+    helperText: "Helper text",
+  },
+};
+
+export const CharacterCounterAndErrorHelperText: StoryObj<typeof TextInput> = {
+  args: {
+    ...OnlyCharacterCounter.args,
+    errorHelperText: "Error helper text",
+  },
+};
+
+export const CharacterCounterAndSuccessHelperText: StoryObj<typeof TextInput> =
+  {
+    args: {
+      ...OnlyCharacterCounter.args,
+      successHelperText: "Success helper text",
+    },
+  };
+
+export const CharacterCounterAndDescriptionAndHelperText: StoryObj<
+  typeof TextInput
+> = {
+  args: {
+    ...OnlyCharacterCounter.args,
+    description: "Description",
+    helperText: "Helper text",
+  },
+};
+```