Merge branch 'main' into feature/header-component

GDSC-Hongik · Oct 13, 2024 · f42c3bf · f42c3bf
2 parents be82089 + 7b19f05
commit f42c3bf
Show file tree

Hide file tree

Showing 50 changed files with 1,942 additions and 18 deletions.
diff --git a/.changeset/chilly-pumas-search.md b/.changeset/chilly-pumas-search.md
@@ -0,0 +1,5 @@
+---
+"wowds-ui": patch
+---
+
+Tab 컴포넌트를 구현합니다.
diff --git a/.changeset/clever-lizards-tell.md b/.changeset/clever-lizards-tell.md
@@ -0,0 +1,6 @@
+---
+"wowds-icons": patch
+"wowds-ui": patch
+---
+
+Avatar 컴포넌트를 추가합니다.
diff --git a/.changeset/green-feet-teach.md b/.changeset/green-feet-teach.md
@@ -0,0 +1,6 @@
+---
+"wowds-tokens": patch
+"wowds-theme": patch
+---
+
+zIndex 토큰을 추가합니다.
diff --git a/.changeset/pretty-cooks-join.md b/.changeset/pretty-cooks-join.md
@@ -0,0 +1,5 @@
+---
+"wowds-icons": patch
+---
+
+Icon 공통 타입을 내보내기합니다.
diff --git a/.changeset/seven-eggs-wait.md b/.changeset/seven-eggs-wait.md
@@ -0,0 +1,5 @@
+---
+"wowds-ui": patch
+---
+
+Toast 컴포넌트를 추가합니다.
diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx
@@ -10,6 +10,10 @@ import RadioButton from "wowds-ui/RadioButton";
 import RadioGroup from "wowds-ui/RadioGroup";
 import SearchBar from "wowds-ui/SearchBar";
 import Switch from "wowds-ui/Switch";
+import Tabs from "wowds-ui/Tabs";
+import TabsContent from "wowds-ui/TabsContent";
+import TabsItem from "wowds-ui/TabsItem";
+import TabsList from "wowds-ui/TabsList";
 
 const Home = () => {
   return (
@@ -43,6 +47,22 @@ const Home = () => {
         <Switch label="switch4" value="switch4" />
       </MultiGroup>
       <SearchBar />
+      <Tabs>
+        <TabsList>
+          <TabsItem value="1">첫번째첫번째첫번째첫번째</TabsItem>
+          <TabsItem value="2">두 번째</TabsItem>
+          <TabsItem value="3">세 번쨰</TabsItem>
+        </TabsList>
+        <TabsContent value="1">
+          <span>첫번째 탭</span>
+        </TabsContent>
+        <TabsContent value="2">
+          <span>두번째 탭</span>
+        </TabsContent>
+        <TabsContent value="3">
+          <span>세번째 탭</span>
+        </TabsContent>
+      </Tabs>
     </>
   );
 };

diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js
@@ -343,6 +343,10 @@ const tokens = {
     value: 10,
     variable: "var(--z-index-dropdown)",
   },
+  "zIndex.overlay": {
+    value: 9999,
+    variable: "var(--z-index-overlay)",
+  },
   "shadows.blue": {
     value: "0px 4px 8px 0px rgba(16, 43, 74, 0.2)",
     variable: "var(--shadows-blue)",

diff --git a/apps/wow-docs/styled-system/tokens/tokens.d.ts b/apps/wow-docs/styled-system/tokens/tokens.d.ts
@@ -86,6 +86,7 @@ export type Token =
   | "borderWidths.button"
   | "borderWidths.arrow"
   | "zIndex.dropdown"
+  | "zIndex.overlay"
   | "shadows.blue"
   | "shadows.mono"
   | "breakpoints.xs"
@@ -323,7 +324,7 @@ export type RadiusToken = "sm" | "md" | "full";
 
 export type BorderWidthToken = "button" | "arrow";
 
-export type ZIndexToken = "dropdown";
+export type ZIndexToken = "dropdown" | "overlay";
 
 export type ShadowToken = "blue" | "mono";
 

diff --git a/packages/scripts/generateBuildConfig.ts b/packages/scripts/generateBuildConfig.ts
@@ -26,17 +26,22 @@ const excludedComponents = [
   "CollectionContext",
   "DropDownOptionList",
   "pickerComponents",
+  "ToastContext",
 ];
 
+// 추가할 컴포넌트 목록
+const includedComponents = ["useToast"];
+
 const getFilteredComponentFiles = async (directoryPath: string) => {
   const files = await fs.readdir(directoryPath, { recursive: true });
 
   return files.filter(
     (file) =>
-      file.endsWith(".tsx") &&
-      !file.includes("test") &&
-      !file.includes("stories") &&
-      !excludedComponents.some((excluded) => file.includes(excluded))
+      (file.endsWith(".tsx") &&
+        !file.includes("test") &&
+        !file.includes("stories") &&
+        !excludedComponents.some((excluded) => file.includes(excluded))) ||
+      includedComponents.some((included) => file.includes(included))
   );
 };
 

diff --git a/packages/scripts/generateReactComponentFromSvg.ts b/packages/scripts/generateReactComponentFromSvg.ts
@@ -138,7 +138,9 @@ const generateExportFile = async (components: string[]) => {
     )
     .join("\n");
 
-  await fs.writeFile(EXPORT_FILE_PATH, exportFileContent);
+  const resolvedExportFileContent = `export * from "../types/Icon.ts";\n${exportFileContent}`;
+
+  await fs.writeFile(EXPORT_FILE_PATH, resolvedExportFileContent);
 };
 
 (async () => {

diff --git a/packages/wow-icons/package.json b/packages/wow-icons/package.json
@@ -16,7 +16,6 @@
     "package.json"
   ],
   "type": "module",
-  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/component/index.d.ts",

diff --git a/packages/wow-icons/src/component/BlueAvatar.tsx b/packages/wow-icons/src/component/BlueAvatar.tsx
@@ -0,0 +1,83 @@
+import { forwardRef } from "react";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const BlueAvatar = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "100",
+      height = "100",
+      viewBox = "0 0 100 100",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="blue-avatar icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <rect
+          fill="url(#paint0_linear_2077_1337)"
+          height={height}
+          rx="50"
+          width={width}
+        />
+        <circle cx="50" cy="38" fill="#FDE6B2" r="16.25" />
+        <path
+          clipRule="evenodd"
+          d="M51.7811 38.5623C54.4138 38.5623 56.9005 37.9374 59.101 36.8279C60.5332 39.5608 62.719 41.8366 65.3824 43.3794C65.9647 41.7042 66.2812 39.9046 66.2812 38.0311C66.2812 29.0393 58.9919 21.75 50 21.75C44.5407 21.75 39.7089 24.437 36.7551 28.5607C39.213 34.435 45.015 38.5623 51.7811 38.5623Z"
+          fill="#333333"
+          fillRule="evenodd"
+        />
+        <path
+          d="M80.75 85.3481C80.75 93.7773 66.9828 100 50 100C33.0172 100 19.25 93.7773 19.25 85.3481C19.25 76.9189 19.25 58.75 50 58.75C80.75 58.75 80.75 76.9189 80.75 85.3481Z"
+          fill="url(#paint1_linear_2077_1337)"
+        />
+        <path
+          d="M83.713 45.4844C84.5605 45.6642 85.196 46.3693 85.2869 47.231L85.7765 51.8725C85.8674 52.7342 85.3931 53.5564 84.6017 53.9091L80.3387 55.8091C79.5473 56.1619 78.6188 55.9649 78.0387 55.3212L74.9144 51.8539C74.3344 51.2103 74.2348 50.2663 74.6677 49.5158L76.9998 45.4729C77.4327 44.7223 78.2997 44.3359 79.1473 44.5158L83.713 45.4844Z"
+          fill="#FDDD99"
+        />
+        <path
+          d="M22.4841 24.9364L21.6965 31.3307L27.8889 29.8728L22.8833 33.8833L28.2253 37.2844L21.9338 36.5616L23.2961 42.8293L19.4043 37.7968L15.9889 43.2596L16.7765 36.8653L10.584 38.3231L15.5897 34.3127L10.2477 30.9116L16.5392 31.6344L15.1769 25.3666L19.0686 30.3992L22.4841 24.9364Z"
+          fill="#FBBC04"
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_2077_1337"
+            x1="50"
+            x2="50"
+            y1="0"
+            y2="100"
+          >
+            <stop stopColor="#368FF7" />
+            <stop offset="1" stopColor="#205694" />
+          </linearGradient>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint1_linear_2077_1337"
+            x1="50"
+            x2="50"
+            y1="58.75"
+            y2="100"
+          >
+            <stop stopColor="#AFD2FC" />
+            <stop offset="1" stopColor="#4792EE" />
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+);
+
+BlueAvatar.displayName = "BlueAvatar";
+export default BlueAvatar;
diff --git a/packages/wow-icons/src/component/GreenAvatar.tsx b/packages/wow-icons/src/component/GreenAvatar.tsx
@@ -0,0 +1,87 @@
+import { forwardRef } from "react";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const GreenAvatar = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "100",
+      height = "100",
+      viewBox = "0 0 100 100",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="green-avatar icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <rect
+          fill="url(#paint0_linear_2077_1371)"
+          height={height}
+          rx="50"
+          width={width}
+        />
+        <circle cx="50" cy="38" fill="#FBD9D7" r="16.25" />
+        <path
+          clipRule="evenodd"
+          d="M52.2938 37.6293C53.6522 35.3743 54.4002 32.9218 54.5853 30.4644C57.5936 30.6435 60.5993 29.9819 63.2495 28.567C60.2961 24.4398 55.4622 21.75 50.0001 21.75C41.0083 21.75 33.719 29.0393 33.719 38.0311C33.719 40.6215 34.3239 43.0705 35.4002 45.2447C41.874 46.4349 48.6964 43.6009 52.2938 37.6293Z"
+          fill="#333333"
+          fillRule="evenodd"
+        />
+        <path
+          d="M80.75 85.3481C80.75 93.7773 66.9828 100 50 100C33.0172 100 19.25 93.7773 19.25 85.3481C19.25 76.9189 19.25 58.75 50 58.75C80.75 58.75 80.75 76.9189 80.75 85.3481Z"
+          fill="url(#paint1_linear_2077_1371)"
+        />
+        <path
+          clipRule="evenodd"
+          d="M32.0455 22.6619C31.8224 18.3739 34.9923 14.6123 39.3133 14.1527C42.3354 13.8313 45.1467 15.2073 46.7978 17.5138C47.7723 16.6429 49.0193 16.0585 50.4181 15.9097C53.9686 15.5321 57.1529 18.1042 57.5305 21.6547C57.9082 25.2052 55.336 28.3895 51.7856 28.7672C49.8575 28.9722 48.0374 28.3074 46.7161 27.0884C45.8876 28.2071 44.7754 29.1123 43.4722 29.6894C43.6953 33.9774 40.5253 37.7391 36.2043 38.1987C31.7344 38.674 27.7255 35.4359 27.2501 30.966C26.8667 27.3606 28.8993 24.0551 32.0455 22.6619Z"
+          fill="#333333"
+          fillRule="evenodd"
+        />
+        <path
+          d="M35.5136 77.6081C36.7352 79.7082 41.4661 84.2361 50.6169 85.5459C62.0554 87.1831 68.9184 79.3259 64.4424 72.2613C59.9664 65.1968 49.934 69.4345 49.9928 75.8325C50.0516 82.2304 57.973 90.4744 71.9175 83.2493C83.0731 77.4693 85.1063 64.9172 84.7285 59.3637"
+          stroke="#EA4335"
+          strokeLinecap="round"
+          strokeWidth="2.1"
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_2077_1371"
+            x1="50"
+            x2="50"
+            y1="0"
+            y2="100"
+          >
+            <stop stopColor="#34A853" />
+            <stop offset="1" stopColor="#1F6532" />
+          </linearGradient>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint1_linear_2077_1371"
+            x1="50"
+            x2="50"
+            y1="58.75"
+            y2="100"
+          >
+            <stop stopColor="#C2E5CB" />
+            <stop offset="1" stopColor="#5DB975" />
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+);
+
+GreenAvatar.displayName = "GreenAvatar";
+export default GreenAvatar;
diff --git a/packages/wow-icons/src/component/RedAvatar.tsx b/packages/wow-icons/src/component/RedAvatar.tsx
@@ -0,0 +1,84 @@
+import { forwardRef } from "react";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const RedAvatar = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "100",
+      height = "100",
+      viewBox = "0 0 100 100",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="red-avatar icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <rect
+          fill="url(#paint0_linear_2077_1373)"
+          height={height}
+          rx="50"
+          width={width}
+        />
+        <circle cx="50" cy="38" fill="#D7E9FD" r="16.25" />
+        <path
+          clipRule="evenodd"
+          d="M64.1516 46.0869L37.4788 27.6239C40.4652 24.0348 44.9658 21.75 49.9999 21.75C58.9917 21.75 66.2811 29.0393 66.2811 38.0311C66.2811 40.9617 65.5068 43.7114 64.1516 46.0869Z"
+          fill="#5EA5F9"
+          fillRule="evenodd"
+        />
+        <path
+          d="M80.75 85.3481C80.75 93.7773 66.9828 100 50 100C33.0172 100 19.25 93.7773 19.25 85.3481C19.25 76.9189 19.25 58.75 50 58.75C80.75 58.75 80.75 76.9189 80.75 85.3481Z"
+          fill="url(#paint1_linear_2077_1373)"
+        />
+        <circle cx="68" cy="24" fill="#5EA5F9" r="5.25" />
+        <circle cx="76.875" cy="29.125" fill="#5EA5F9" r="3.875" />
+        <circle cx="81.125" cy="35.375" fill="#5EA5F9" r="2.625" />
+        <path
+          d="M13.5378 46.0435C12.4812 48.2314 11.3773 54.6861 15.414 63.0023C20.46 73.3974 30.8125 74.6864 34.1612 67.023C37.51 59.3596 28.3827 53.4181 23.1139 57.0481C17.8451 60.678 15.4475 71.8567 29.24 79.3678C40.274 85.3767 51.8135 80.0356 56.204 76.614"
+          stroke="#163963"
+          strokeLinecap="round"
+          strokeWidth="2.1"
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_2077_1373"
+            x1="50"
+            x2="50"
+            y1="0"
+            y2="100"
+          >
+            <stop stopColor="#EE695D" />
+            <stop offset="1" stopColor="#EA4335" />
+          </linearGradient>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint1_linear_2077_1373"
+            x1="50"
+            x2="50"
+            y1="58.75"
+            y2="100"
+          >
+            <stop stopColor="#F9C7C2" />
+            <stop offset="1" stopColor="#F28E86" />
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+);
+
+RedAvatar.displayName = "RedAvatar";
+export default RedAvatar;