feat: add task search ui

src/components/ui/List/index.tsx

@@ -1,24 +1,14 @@
-import type { CSSProperties, FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 
 import clsx from 'clsx';
 
 type ListProps = {
   children: ReactNode;
   className?: string;
-  wrap?: CSSProperties['flexWrap'];
 };
 
-export const List: FC<ListProps> = ({ children, className, wrap }) => (
-  <ul
-    className={clsx(
-      'flex flex-row gap-4',
-      wrap && 'flex-wrap',
-      !wrap && 'flex-nowrap',
-      className
-    )}
-  >
-    {children}
-  </ul>
+export const List: FC<ListProps> = ({ children, className }) => (
+  <ul className={clsx('flex flex-row gap-4', className)}>{children}</ul>
 );
 
 type ListItemProps = {

src/domains/Tag/components/TagList/index.stories.tsx

@@ -0,0 +1,24 @@
+import { TagListLoading } from './loading';
+import { TagList } from './main';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof TagList> = {
+  component: TagList,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TagList>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Loading: Story = {
+  render: ()=> <TagListLoading />
+};

src/domains/Tag/components/TagList/index.test.tsx

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+
+describe('model/TagList', () => {
+  it('title is exist', () => {
+    expect(true);
+  });
+});

src/domains/Tag/components/TagList/index.ts

@@ -0,0 +1,3 @@
+export * from './main';
+
+export * from './loading';

src/domains/Tag/components/TagList/loading.tsx

@@ -0,0 +1,14 @@
+import type { FC, ReactNode } from 'react';
+
+import { List } from '@/components/ui/List';
+import { Skeleton } from '@/components/ui/Skeleton';
+
+const TagSkeleton = (): ReactNode => <Skeleton className="w-24 h-6" />;
+
+export const TagListLoading: FC = () => (
+  <List className="flex-wrap gap-1">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <TagSkeleton key={index} />
+    ))}
+  </List>
+);

src/domains/Tag/components/TagList/main.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode, FC } from 'react';
+
+import type { Tag } from '../../types';
+
+import { List, ListItem } from '@/components/ui/List';
+import { cn } from '@/libs/utils';
+
+type Props = {
+  tags: Tag[];
+  render?: (tag: Tag) => ReactNode;
+  className?: string;
+};
+
+export const defaultTagClassName =
+  'border-orange-pop hover:bg-orange-sub border-2 bg-white text-black h-6 py-0.5 content-center rounded-sm px-2 text-sm font-bold';
+
+const tagRender = (tag: Tag): ReactNode => (
+  <ListItem key={tag.id} className={defaultTagClassName}>
+    {tag.name}
+  </ListItem>
+);
+
+export const TagList: FC<Props> = ({
+  tags,
+  className,
+  render = tagRender,
+}: Props) => (
+  <List className={cn('flex-nowrap gap-1', className)}>
+    {tags.map((tag) => render(tag))}
+  </List>
+);

src/domains/Tag/components/TagSearchBox/index.tsx

@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+
+import { TagSearchInput } from '../TagSearchInput';
+import { TagSearchResult } from '../TagSearchResult';
+
+import type { Tag } from '../../types';
+
+import { Horizontal } from '@/components/Layout/Horizontal';
+
+type Props = {
+  handleTagClick: (tag: Tag) => void;
+};
+export const TagSearchBox: FC<Props> = ({ handleTagClick }) => (
+  <Horizontal className="border-orange-pop border-2 rounded-md overflow-scroll">
+    <TagSearchInput />
+    <div className="px-4 pb-4">
+      <TagSearchResult handleClickTag={handleTagClick} />
+    </div>
+  </Horizontal>
+);

src/domains/Tag/components/TagSearchInput/index.stories.tsx

@@ -0,0 +1,17 @@
+import { TagSearchInputPresentation } from './presentations';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof TagSearchInputPresentation> = {
+  component: TagSearchInputPresentation,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TagSearchInputPresentation>;
+
+export const Default: Story = {};

src/domains/Tag/components/TagSearchInput/index.test.tsx

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+
+describe('model/TagSearchInput', () => {
+  it('title is exist', () => {
+    expect(true);
+  });
+});

src/domains/Tag/components/TagSearchInput/index.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { FC } from 'react';
+
+import { useTagUsecase } from '../../usecase/usecase';
+
+import { TagSearchInputPresentation } from './presentations';
+
+export const TagSearchInput: FC = () => {
+  const { setSearchWord, searchWord } = useTagUsecase();
+  return (
+    <TagSearchInputPresentation
+      searchWord={searchWord}
+      setSearchWord={setSearchWord}
+    />
+  );
+};

src/domains/Tag/components/TagSearchInput/presentations/index.ts

@@ -0,0 +1 @@
+export * from './main';

src/domains/Tag/components/TagSearchInput/presentations/main.tsx

@@ -0,0 +1,28 @@
+import type { FC } from 'react';
+
+import { Search } from 'lucide-react';
+
+import { Horizontal } from '@/components/Layout/Horizontal';
+import { Input } from '@/components/ui/Input';
+
+type Props = {
+  searchWord: string;
+  setSearchWord: (searchWord: string) => void;
+};
+
+export const TagSearchInputPresentation: FC<Props> = ({
+  searchWord,
+  setSearchWord,
+}: Props) => (
+  <Horizontal className="relative">
+    <Search className="absolute left-1 top-1 text-orange-pop" />
+    <Input
+      className="outline-orange-pop outline-2 outline border-none rounded-sm focus-visible:outline-pale-red h-8 px-2 w-full pl-8"
+      value={searchWord}
+      placeholder="タグを検索"
+      onChange={(e) => {
+        setSearchWord(e.target.value);
+      }}
+    />
+  </Horizontal>
+);

src/domains/Tag/components/TagSearchResult/hooks/index.ts

@@ -0,0 +1,13 @@
+import type { Tag } from '@/domains/Tag/types';
+
+import { useTagUsecase } from '@/domains/Tag/usecase/usecase';
+
+type IUseTagSearchResult = {
+  tags: Tag[];
+  isEmpty: boolean;
+};
+
+export const useTagSearchResult = (): IUseTagSearchResult => {
+  const { tags } = useTagUsecase();
+  return { tags, isEmpty: tags !== undefined && tags.length === 0 };
+};

src/domains/Tag/components/TagSearchResult/index.stories.tsx

@@ -0,0 +1,27 @@
+import { TagSearchResultPresentation } from './presentations';
+import { TagSearchResultEmptyPresentation } from './presentations/empty';
+import { TagSearchResultErrorPresentation } from './presentations/error';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof TagSearchResultPresentation> = {
+  component: TagSearchResultPresentation,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TagSearchResultPresentation>;
+
+export const Default: Story = {};
+
+export const Empty: Story = {
+  render: () => <TagSearchResultEmptyPresentation />,
+};
+
+export const Error: Story = {
+  render: () => <TagSearchResultErrorPresentation />,
+};

src/domains/Tag/components/TagSearchResult/index.test.tsx

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+
+describe('model/TagSearchResult', () => {
+  it('title is exist', () => {
+    expect(true);
+  });
+});

src/domains/Tag/components/TagSearchResult/index.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react';
+import { Suspense } from 'react';
+
+import { TagListLoading } from '../TagList';
+
+import { TagSearchResultContainer } from './presentations';
+import { TagSearchResultErrorPresentation } from './presentations/error';
+
+import type { Tag } from '../../types';
+
+import { ErrorBoundary } from '@/libs/ErrorBoundary';
+
+type Props = {
+  handleClickTag: (tag: Tag) => void;
+};
+
+export const TagSearchResult: FC<Props> = ({ handleClickTag }) => (
+  <ErrorBoundary fallback={<TagSearchResultErrorPresentation />}>
+    <Suspense fallback={<TagListLoading />}>
+      <TagSearchResultContainer handleClickTag={handleClickTag} />
+    </Suspense>
+  </ErrorBoundary>
+);

src/domains/Tag/components/TagSearchResult/presentations/container.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { FC } from 'react';
+
+import { useTagSearchResult } from '../hooks';
+
+import { TagSearchResultEmptyPresentation } from './empty';
+import { TagSearchResultPresentation } from './main';
+
+import type { Tag } from '@/domains/Tag/types';
+
+type Props = {
+  handleClickTag: (tag: Tag) => void;
+};
+export const TagSearchResultContainer: FC<Props> = ({ handleClickTag }) => {
+  const { isEmpty, tags } = useTagSearchResult();
+  if (isEmpty) {
+    return <TagSearchResultEmptyPresentation />;
+  }
+  return (
+    <TagSearchResultPresentation tags={tags} handleClickTag={handleClickTag} />
+  );
+};

src/domains/Tag/components/TagSearchResult/presentations/empty.tsx

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+
+import { Typography } from '@/components/ui/Typography';
+
+export const TagSearchResultEmptyPresentation: FC = () => (
+  <Typography>タグが見つかりませんでした</Typography>
+);

src/domains/Tag/components/TagSearchResult/presentations/error.tsx

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+
+import { Typography } from '@/components/ui/Typography';
+
+export const TagSearchResultErrorPresentation: FC = () => (
+  <Typography>エラーが発生しました</Typography>
+);

src/domains/Tag/components/TagSearchResult/presentations/index.ts

@@ -0,0 +1,7 @@
+export * from './container';
+
+export * from './main';
+
+export { TagSearchResultEmptyPresentation } from './empty';
+
+export { TagSearchResultErrorPresentation } from './error';

src/domains/Tag/components/TagSearchResult/presentations/main.tsx

@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+
+import { TagList, defaultTagClassName } from '../../TagList';
+
+import type { Tag } from '@/domains/Tag/types';
+
+import { Button } from '@/components/ui/Button';
+
+type Props = {
+  tags: Tag[];
+  handleClickTag: (tag: Tag) => void;
+};
+
+export const TagSearchResultPresentation: FC<Props> = ({
+  tags,
+  handleClickTag,
+}: Props) => (
+  <TagList
+    className="flex-wrap"
+    tags={tags}
+    render={(tag) => (
+      <Button
+        className={defaultTagClassName}
+        onClick={() => {
+          handleClickTag(tag);
+        }}
+      >
+        {tag.name}
+      </Button>
+    )}
+  />
+);