DESIGN-1 Feat Chips Component

src/core/components/Chips/Chips.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/react';
+import { useRef, useState } from 'react';
+import { Plus } from '@phosphor-icons/react';
+
+import Chips from '@/core/components/Chips/index';
+import IconButton from '@/core/components/Button/IconButton';
+
+const meta = {
+  title: 'core/Chips',
+  component: Chips,
+} satisfies Meta<typeof Chips>;
+
+export default meta;
+
+export const Default = () => {
+  const [values, setValues] = useState(['test', 'test2', 'test3']);
+  const chipsRef = useRef<HTMLUListElement>(null);
+
+  const handleDelete = (item: string) => {
+    setValues((prevValue) => prevValue.filter((v) => v !== item));
+  };
+
+  const handleAdd = () => {
+    setValues((prevValues) => [...prevValues, `test${prevValues.length + 1}`]);
+  };
+
+  return (
+    <div className={'flex max-w-[300px] gap-2'}>
+      <Chips rootRef={chipsRef} items={values} onDelete={handleDelete} />
+      <IconButton
+        size={'h-29'}
+        rounded={'rounded-full'}
+        colorTheme={'primary'}
+        icon={<Plus weight={'bold'} />}
+        className={'flex-shrink-0'}
+        onClick={handleAdd}
+      />
+    </div>
+  );
+};

src/core/components/Chips/index.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import clsx from 'clsx';
+
+import { ChipsParams } from '@/core/components/Chips/types';
+import Chip from '@/core/components/Chip';
+
+const Chips = ({ className, rootRef, items, onDelete }: ChipsParams) => {
+  useEffect(() => {
+    if (!rootRef.current) return;
+
+    rootRef.current.scrollTo({
+      left: rootRef.current.scrollWidth,
+      behavior: 'smooth',
+    });
+  }, [rootRef, items]);
+
+  return (
+    <ul
+      ref={rootRef}
+      className={clsx('flex items-center gap-x-2 overflow-x-auto', className)}
+    >
+      {items.map((item) => (
+        <Chip
+          element={'li'}
+          key={item}
+          label={item}
+          onDelete={onDelete && (() => onDelete(item))}
+          className={'whitespace-nowrap px-3'}
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default Chips;

src/core/components/Chips/types/index.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, RefObject } from 'react';
+
+export interface ChipsParams
+  extends Pick<HTMLAttributes<HTMLUListElement>, 'className'> {
+  rootRef: RefObject<HTMLUListElement>;
+  items: string[];
+  onDelete?: (item: string) => void;
+}