boottent-design 0.1.66 → 0.1.67

package/README.md

@@ -1,29 +1,63 @@
 # boottent-design
 
-React, Vite, Typescript, TailwindCSS, Storybook, Radix-UI를 사용해 만든 부트텐트 디자인시스템 라이브러리입니다.
+React, Vite, Typescript, TailwindCSS, Radix-UI를 사용해 만든 부트텐트 디자인시스템 라이브러리입니다.
 
 ## Getting Started
 
 ```sh
-yarn add boottent-design@0.1.33
+yarn add boottent-design@0.1.67
 ```
 
-## Usage Example
+## Usage Example: Icon, Symbols, Input, Button, Stack, Box, FlexBox
 
-Boottent Design 라이브러리를 사용하는 예시입니다.
+```tsx
+import { Input, Icon, Symbols } from "boottent-design/ui";
+import { FlexBox } from "boottent-design/layout";
+import { cn } from "boottent-design/utils";
+import { colors } from "boottent-design/styles";
+
+export default function Test() {
+  return (
+    <FlexBox.Col className="bg-grey-100 min-h-60 w-full items-center gap-4 rounded-lg p-10">
+      <Input className={cn("w-full min-w-[500px]")} placeholder="입력해주세요." />
+      <FlexBox.Row className="mx-auto w-full items-center justify-center gap-4 p-4">
+        <Icon.Calendar fill={colors.lime[500]} />
+        <Symbols.Boottent />
+        <Symbols.Apple />
+      </FlexBox.Row>
+    </FlexBox.Col>
+  );
+}
+```
+
+## Usage Example 2 : Modal, Alert, Dialog, Toast
+
+usePortal 훅을 사용하여 모달, 다이얼로그, 토스트, 알람 창을 띄우려면 PortalProvider를 앱의 루트에 추가해주세요.
 
 ```tsx
-import { Button, Input, Icon, Symbols } from "boottent-design/ui";
+import { PortalProvider } from "boottent-design/provider";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <>
+    <App />
+    <PortalProvider />
+  </>,
+);
+```
+
+모달, 알람창, 다이얼로그, 토스트를 사용하는 예시입니다.
+
+```tsx
+import { Button } from "boottent-design/ui";
 import { Box, Stack } from "boottent-design/layout";
 import { cn } from "boottent-design/utils";
-import { colors } from "boottent-design/styles";
 import { usePortal } from "boottent-design/hooks";
 
 export default function Test() {
   const { toast, modal, alert, dialog } = usePortal();
 
   return (
-    <Stack className="min-h-60 w-full items-center gap-4 rounded-lg bg-grey-100 p-10">
+    <Stack className="bg-grey-100 min-h-60 w-full items-center gap-4 rounded-lg p-10">
       <Box className="flex gap-4">
         <Button
           variant={"outline"}
@@ -88,29 +122,124 @@ export default function Test() {
           알림
         </Button>
       </Box>
-      <Input className={cn("w-full min-w-[500px]")} placeholder="sdfasdf" />
-      <Stack
-        type="row"
-        className="mx-auto w-full items-center justify-center gap-4 p-4"
-      >
-        <Icon.Calendar fill={colors.lime[500]} />
-        <Symbols.Boottent />
-        <Symbols.Apple />
-      </Stack>
     </Stack>
   );
+}
+```
+
+## Usage Example 3: Dropdown
+
+```tsx
+import { useEffect, useState } from "react";
+import { Dropdown, Icon, Button } from "boottent-design/ui";
+import { Box } from "boottent-design/layout";
+import { SelectedDropdownItem } from "boottent-design/types";
+import { getDropdownButtonText } from "boottent-design/utils";
+
+const Template = ({ defaultValue }: { defaultValue?: SelectedDropdownItem[] }) => {
+  const [selectedItems, setSelectedItems] = useState<SelectedDropdownItem[]>(defaultValue || []);
+
+  useEffect(() => {
+    console.log("Selected Items:", selectedItems);
+  }, [selectedItems]);
+
+  // Dropdown의 size 설정
+
+  return (
+    <Box className="w-full space-y-8 py-10">
+      <Dropdown {...args} onChange={setSelectedItems}>
+        <Button
+          size="sm"
+          variant="outline"
+          theme="secondary"
+          icRight={<Icon.ArrowDown size="12" />}
+          className="text-medium14 min-w-fit justify-between"
+        >
+          {getDropdownButtonText(selectedItems, "Open Dropdown")}
+        </Button>
+      </Dropdown>
+    </Box>
+  );
 };
 ```
 
-usePortal 훅을 사용하여 모달, 다이얼로그, 토스트, 알람 창을 띄우려면 PortalProvider를 앱의 루트에 추가해주세요.
+## Usage Example 3 : ToggleButtonGroup
 
 ```tsx
-import { PortalProvider } from "boottent-design/provider";
+import { useState } from "react";
+import { FlexBox, Box } from "boottent-design/layout";
+import { ToggleButtonGroup } from "boottent-design/ui";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-    <>
-      <App />
-      <PortalProvider />
-    </>
-);
-```
+export const TooltipExamples = () => {
+  const [value, setValue] = useState<string>("option1");
+
+  return (
+    <FlexBox.Col className="items-center gap-4">
+      <h3>Single Toggle with Tooltip</h3>
+      <ToggleButtonGroup.Single
+        theme="primary"
+        size="md"
+        shape="square"
+        variant="outline"
+        value={value}
+        onChange={setValue}
+        options={[
+          {
+            value: "option1",
+            label: "Option 1",
+            tooltip: { label: "Tooltip for Option 1", position: "bottom-left", bubbleTip: false },
+          },
+          {
+            value: "option2",
+            label: "Option 2",
+          },
+          {
+            value: "option3",
+            label: "Option 3",
+          },
+        ]}
+      />
+      <Box className="mt-2 text-sm text-gray-600">선택된 옵션: {value}</Box>
+    </FlexBox.Col>
+  );
+};
+```
+
+## Usage Example 4 : Tooltip
+
+```tsx
+import { Tooltip, Button } from "boottent-design/ui";
+import { FlexBox } from "boottent-design/layout";
+
+export const Tooltip = () => {
+  const variants = [
+    {
+      variant: "primary",
+      text: "Primary Tooltip",
+      label: "This is a primary tooltip!",
+    },
+    {
+      variant: "secondary",
+      text: "Secondary Tooltip",
+      label: "This is a secondary tooltip!",
+    },
+    {
+      variant: "white",
+      text: "White Tooltip",
+      label: "This is a white tooltip!",
+    },
+  ];
+
+  return (
+    <FlexBox.Col className="justify-center gap-10 py-40">
+      {variants.map(({ variant, text, label }) => (
+        <Tooltip key={variant} variant={variant} label={label} bubbleTip={false}>
+          <Button theme={"primary"} variant="outline">
+            {text}
+          </Button>
+        </Tooltip>
+      ))}
+    </FlexBox.Col>
+  );
+};
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "boottent-design",
   "private": false,
-  "version": "0.1.66",
+  "version": "0.1.67",
   "description": "부트텐트 디자인시스템 라이브러리",
   "repository": {
     "type": "git",