issue #270 feat: add SearchInput to design system

teamWaggle · May 6, 2024 · 801eda0 · 801eda0
1 parent 4016203
commit 801eda0
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 18 deletions.
diff --git a/...-service/src/assets/svg/search-button.svg → ...n-system/src/assets/svg/search-button.svg b/...-service/src/assets/svg/search-button.svg → ...n-system/src/assets/svg/search-button.svg
diff --git a/...s/common/SearchInput/SearchInput.style.ts → ...mponents/SearchInput/SearchInput.style.ts b/...s/common/SearchInput/SearchInput.style.ts → ...mponents/SearchInput/SearchInput.style.ts
diff --git a/...onents/common/SearchInput/SearchInput.tsx → ...rc/components/SearchInput/SearchInput.tsx b/...onents/common/SearchInput/SearchInput.tsx → ...rc/components/SearchInput/SearchInput.tsx
@@ -1,21 +1,20 @@
 import type { ChangeEvent } from "react";
 
-import { Flex } from "waggle-design-system";
-
 import SearchButtonIcon from "@/assets/svg/search-button.svg?react";
 
+import Flex from "@/components/Flex/Flex";
 import {
-  searchStyle,
-  searchInputStyle,
   searchButtonStyle,
-} from "@/components/common/SearchInput/SearchInput.style";
+  searchInputStyle,
+  searchStyle,
+} from "@/components/SearchInput/SearchInput.style";
 
 interface SearchBarProps {
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   width: string;
 }
 
-const SearchBar = ({ onChange, width }: SearchBarProps) => {
+const SearchInput = ({ onChange, width }: SearchBarProps) => {
   return (
     <Flex styles={{ align: "center", position: "relative" }} css={searchStyle(width)}>
       <input
@@ -30,4 +29,4 @@ const SearchBar = ({ onChange, width }: SearchBarProps) => {
     </Flex>
   );
 };
-export default SearchBar;
+export default SearchInput;
diff --git a/packages/waggle-design-system/src/index.tsx b/packages/waggle-design-system/src/index.tsx
@@ -6,7 +6,6 @@ import Heading from "@/components/Heading/Heading";
 import Logo from "@/components/Logo/Logo";
 import MainContainer from "@/components/MainContainer/MainContainer";
 import ModalContainer from "@/components/ModalContainer/ModalContainer";
-import Modal from "@/components/Modal/Modal";
 import Skeleton from "@/components/Skeleton/Skeleton";
 import Slider from "@/components/Slider/Slider";
 import SortButton from "@/components/SortButton/SortButton";
@@ -17,7 +16,7 @@ import Text from "@/components/Text/Text";
 import Dropdown from "@/components/Dropdown/Dropdown";
 import { Theme } from "@/styles/Theme";
 import { getDefaultTextStyle } from "@/styles/getDefaultTextStyle";
-
+import SearchInput from "@/components/SearchInput/SearchInput";
 import WaggleProvider from "@/WaggleProvider";
 
 import useSlider from "@/hooks/useSlider";
@@ -31,7 +30,6 @@ export {
   Logo,
   MainContainer,
   ModalContainer,
-  Modal,
   Skeleton,
   Slider,
   SortButton,
@@ -44,4 +42,5 @@ export {
   Theme,
   getDefaultTextStyle,
   Dropdown,
+  SearchInput,
 };
diff --git a/packages/waggle-service/src/components/Connection/ConnectionMain/ConnectionSearchbar.tsx b/packages/waggle-service/src/components/Connection/ConnectionMain/ConnectionSearchbar.tsx
@@ -1,6 +1,6 @@
 import { Flex, Heading, Theme, getDefaultTextStyle } from "waggle-design-system";
 
-import { SearchInput } from "@/components/common";
+import { SearchInput } from "waggle-design-system";
 
 const ConnectionSearchbar = () => {
   return (

diff --git a/packages/waggle-service/src/components/Planning/Main/Main.tsx b/packages/waggle-service/src/components/Planning/Main/Main.tsx
@@ -6,7 +6,7 @@ import MemberTeamSlider from "@/components/Planning/Main/MemberTeamSlider/Member
 import { headingStyle, buttonStyle, gridBoxStyle } from "@/components/Planning/Main/Main.style";
 import { useRecoilValue } from "recoil";
 import { isLoggedInState } from "@/recoil/atoms/auth";
-import { SearchInput } from "@/components/common";
+import { SearchInput } from "waggle-design-system";
 
 const Main = () => {
   const navigate = useNavigate();

diff --git a/packages/waggle-service/src/components/Question/QuestionMain/QuestionMain.tsx b/packages/waggle-service/src/components/Question/QuestionMain/QuestionMain.tsx
@@ -2,7 +2,7 @@ import { Fragment } from "react";
 
 import { Flex, Box } from "waggle-design-system";
 
-import { SearchInput } from "@/components/common";
+import { SearchInput } from "waggle-design-system";
 import SortButton from "@/components/common/SortButton/SortButton";
 import QuestionCard from "@/components/Question/QuestionCard/QuestionCard";
 import QuestionSidebar from "@/components/Question/QuestionSidebar/QuestionSidebar";

diff --git a/packages/waggle-service/src/components/Siren/SirenSearchBar/SirenSearchBar.tsx b/packages/waggle-service/src/components/Siren/SirenSearchBar/SirenSearchBar.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { Flex, Text, Theme } from "waggle-design-system";
 
-import { SearchInput } from "@/components/common";
+import { SearchInput } from "waggle-design-system";
 import SortButton from "@/components/common/SortButton/SortButton";
 
 import { SIREN_TAG_CATEGORY } from "@/constants/siren";

diff --git a/packages/waggle-service/src/components/Story/StorySearchBar/StorySearchBar.tsx b/packages/waggle-service/src/components/Story/StorySearchBar/StorySearchBar.tsx
@@ -4,7 +4,7 @@ import { Flex, Heading, Button, SortButton } from "waggle-design-system";
 
 import LogIcon from "@/assets/svg/log.svg?react";
 
-import { SearchInput } from "@/components/common";
+import { SearchInput } from "waggle-design-system";
 
 import StoryUploadMediaModal from "@/components/Story/StoryUploadMediaModal/StoryUploadMediaModal";
 

diff --git a/packages/waggle-service/src/components/common/index.tsx b/packages/waggle-service/src/components/common/index.tsx
@@ -5,7 +5,6 @@ import Modal from "@/components/common/Modal/Modal";
 import Form from "@/components/common/Form/Form";
 import InputNotice from "@/components/common/InputNotice/InputNotice";
 import Logo from "@/components/common/Logo";
-import SearchInput from "@/components/common/SearchInput/SearchInput";
 import Slider from "@/components/common/Slider/Slider";
 import SocialLogin from "@/components/common/SocialLogin/SocialLogin";
 import TimePicker from "@/components/common/TimePicker/TimePicker";
@@ -15,7 +14,6 @@ export {
   Modal,
   Logo,
   SocialLogin,
-  SearchInput,
   DatePicker,
   DatePickerCalendarModal,
   DatePickerTimeModal,

diff --git a/packages/waggle-service/tsconfig.json b/packages/waggle-service/tsconfig.json
@@ -22,5 +22,5 @@
     "noFallthroughCasesInSwitch": true,
     "jsxImportSource": "@emotion/react",
   },
-  "include": ["src"]
+  "include": ["src", "../waggle-design-system/src/components/SearchInput"]
 }