OPHJOD-298: Add TagsInput component

lib/components/TagsInput/TagsInput.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TagsInput } from './TagsInput';
+
+const meta = {
+  title: 'TagsInput',
+  component: TagsInput,
+  tags: ['autodocs'],
+} satisfies Meta<typeof TagsInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?type=design&node-id=542-7646',
+  },
+};
+
+export const Default: Story = {
+  parameters: {
+    ...parameters,
+  },
+  args: {
+    label: 'Label for screenreader at least',
+    placeholder: 'Lorem ipsum dolor sit amet',
+  },
+};

lib/components/TagsInput/TagsInput.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { screen, render } from '@testing-library/react';
+import { TagsInput } from './TagsInput';
+
+describe('Snapshot testing', () => {
+  it('matches the snapshot', () => {
+    const { container } = render(<TagsInput label="Label here" />);
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe('TagsInput', () => {
+  it('renders the label', () => {
+    const label = 'Test Label';
+    render(<TagsInput label={label} />);
+    const labelElement = screen.getByText(label);
+    expect(labelElement).toBeInTheDocument();
+  });
+
+  it('renders the placeholder', () => {
+    const placeholder = 'Test Placeholder';
+    render(<TagsInput label="Test Label" placeholder={placeholder} />);
+    const inputElement = screen.getByPlaceholderText(`(${placeholder})`);
+    expect(inputElement).toBeInTheDocument();
+  });
+});

lib/components/TagsInput/TagsInput.tsx

@@ -0,0 +1,43 @@
+import { TagsInput as ArkTagsInput } from '@ark-ui/react';
+
+export interface TagsInputProps {
+  label: string;
+  placeholder?: string;
+}
+
+export const TagsInput = ({ label, placeholder }: TagsInputProps) => {
+  return (
+    <ArkTagsInput.Root className="rounded-[10px] border-[5px] border-border-gray p-5">
+      <ArkTagsInput.Context>
+        {(tagsInput) => (
+          <>
+            <ArkTagsInput.Label hidden>{label}</ArkTagsInput.Label>
+            <ArkTagsInput.Input placeholder={`(${placeholder})`} className="mb-3 w-full" />
+            <ArkTagsInput.Control className="flex gap-x-3">
+              {tagsInput.value.map((value, index) => (
+                <ArkTagsInput.Item
+                  key={index}
+                  index={index}
+                  value={value}
+                  className="group inline-flex select-none items-center justify-center rounded-sm border-2 border-secondary-gray px-4 text-tag"
+                >
+                  <ArkTagsInput.ItemPreview className="inline-flex items-center gap-3">
+                    <ArkTagsInput.ItemText className="hyphens-auto py-[5px] text-secondary-gray group-hover:underline">
+                      {value}
+                    </ArkTagsInput.ItemText>
+                    <ArkTagsInput.ItemDeleteTrigger>
+                      <span className="material-symbols-outlined size-24-bold h-fit select-none text-secondary-gray">
+                        {'close'}
+                      </span>
+                    </ArkTagsInput.ItemDeleteTrigger>
+                  </ArkTagsInput.ItemPreview>
+                  <ArkTagsInput.ItemInput />
+                </ArkTagsInput.Item>
+              ))}
+            </ArkTagsInput.Control>
+          </>
+        )}
+      </ArkTagsInput.Context>
+    </ArkTagsInput.Root>
+  );
+};

lib/components/TagsInput/__snapshots__/TagsInput.test.tsx.snap

@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Snapshot testing > matches the snapshot 1`] = `
+<div>
+  <div
+    class="rounded-[10px] border-[5px] border-border-gray p-5"
+    data-empty=""
+    data-part="root"
+    data-scope="tags-input"
+    dir="ltr"
+    id="tags-input::r0:"
+  >
+    <label
+      data-part="label"
+      data-scope="tags-input"
+      dir="ltr"
+      for="tags-input::r0::input"
+      hidden=""
+      id="tags-input::r0::label"
+    >
+      Label here
+    </label>
+    <input
+      autocapitalize="none"
+      autocomplete="off"
+      autocorrect="off"
+      class="mb-3 w-full"
+      data-part="input"
+      data-scope="tags-input"
+      dir="ltr"
+      id="tags-input::r0::input"
+      placeholder="(undefined)"
+      value=""
+    />
+    <div
+      class="flex gap-x-3"
+      data-part="control"
+      data-scope="tags-input"
+      dir="ltr"
+      id="tags-input::r0::control"
+    />
+  </div>
+</div>
+`;