Merge branch 'main' of https://github.com/cobaltinc/co-design into ne…

…xt-level
cobaltinc · Nov 21, 2023 · d20f71b · d20f71b
2 parents 0129fb4 + f084859
commit d20f71b
Show file tree

Hide file tree

Showing 5 changed files with 994 additions and 577 deletions.
diff --git a/package.json b/package.json
@@ -33,16 +33,16 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^3.0.0",
-    "@storybook/addon-a11y": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-storysource": "^7.2.1",
-    "@storybook/addons": "^7.2.1",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/nextjs": "^7.2.1",
-    "@storybook/react": "^7.2.1",
+    "@storybook/addon-storysource": "^7.5.3",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/nextjs": "^7.5.3",
+    "@storybook/react": "^7.5.3",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/testing-library": "^0.2.0",
     "@types/react": "^18.0.11",
@@ -58,12 +58,12 @@
     "esno": "^0.12.1",
     "execa": "^5.0.0",
     "lerna": "^6.5.1",
-    "next": "^13.5.0",
+    "next": "^14.0.3",
     "rollup": "^2.61.0",
     "rollup-plugin-esbuild": "^4.7.2",
     "rollup-plugin-node-externals": "^3.0.1",
     "rollup-plugin-visualizer": "^5.5.2",
-    "storybook": "^7.2.1",
+    "storybook": "^7.5.3",
     "storybook-dark-mode": "^3.0.1",
     "typescript": "^5.1.6",
     "yargs": "^17.3.0"

diff --git a/packages/co-design-core/package.json b/packages/co-design-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@co-design/core",
-  "version": "0.9.15",
+  "version": "0.9.16",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",

diff --git a/packages/co-design-core/src/components/Tooltip/Tooltip.tsx b/packages/co-design-core/src/components/Tooltip/Tooltip.tsx
@@ -12,15 +12,16 @@ export type TooltipStylesNames = ClassNames<typeof useStyles>;
 
 export interface TooltipProps extends CoComponentProps<TooltipStylesNames>, React.ComponentPropsWithoutRef<'div'> {
   /**
+   * true일 경우 Tooltip 컴포넌트를 보여줍니다.
    * Tooltip 의 초기 visible 상태를 설정합니다
    */
-  initVisible?: boolean;
+  visible?: boolean;
 
   /**
-   * true일 경우 Tooltip 컴포넌트를 보여줍니다.
-   * Tooltip 컴포넌트를 직접 제어할 경우 사용하는 속성입니다.
+   * Tooltip 의 open 상태를 자식 컴포넌트가 제어할 때 사용합니다.
+   * 만약 자식 컴포넌트에게 제어권을 주고, 강제로 open 상태를 toggle 하고 싶다면 flag 를 사용합니다.
    */
-  visible?: boolean;
+  flag?: boolean;
 
   /** Tooltip 컴포넌트의 배경색 지정을 위한 ColorScheme 을 정합니다. */
   colorScheme?: ColorScheme;
@@ -59,7 +60,7 @@ export interface TooltipProps extends CoComponentProps<TooltipStylesNames>, Reac
   transitionTimingFunction?: string;
 
   /** visible이 변경될 경우 실행됩니다. */
-  onChangeVisible?(visible: boolean): boolean;
+  onChangeVisible?(visible: boolean): void;
 }
 
 const getPositionStyle = (placement: TooltipPlacement, target?: HTMLElement) => {
@@ -89,8 +90,8 @@ const getPositionStyle = (placement: TooltipPlacement, target?: HTMLElement) =>
 
 export const Tooltip = ({
   children,
-  visible,
-  initVisible = false,
+  visible = false,
+  flag,
   colorScheme,
   title,
   label,
@@ -117,7 +118,7 @@ export const Tooltip = ({
     { overrideStyles, name: 'Tooltip' },
   );
 
-  const [currentVisible, setCurrentVisible] = useToggle(initVisible);
+  const [currentVisible, setCurrentVisible] = useToggle(visible);
   const balloonRef = useRef<HTMLDivElement>(null);
   const targetRef = useClickAway<HTMLDivElement>((e: MouseEvent) => {
     if (
@@ -145,8 +146,8 @@ export const Tooltip = ({
   const handleBlur = trigger === 'focus' ? () => setCurrentVisible(false) : undefined;
 
   useUpdateEffect(() => {
-    setCurrentVisible(visible);
-  }, [visible]);
+    setCurrentVisible((prev) => !prev);
+  }, [flag]);
 
   useUpdateEffect(() => {
     onChangeVisible?.(currentVisible);

diff --git a/packages/co-design-core/src/components/Tooltip/stories/Tooltip.stories.tsx b/packages/co-design-core/src/components/Tooltip/stories/Tooltip.stories.tsx
@@ -5,6 +5,7 @@ import { Tooltip } from '../Tooltip';
 import { Popover } from '../../Popover';
 import { Button } from '../../Button';
 import { Menu } from '../../Menu';
+import { useToggle } from '@co-design/hooks';
 
 export default {
   title: '@co-design/core/Tooltip',
@@ -72,24 +73,40 @@ export const WithTitle = {
 
 export const WithPopover: StoryObj = {
   render: (arg) => {
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [visibleFlag, toggleVisibleFlag] = useToggle(false);
+    const [visible, setVisible] = useState(false);
 
     return (
-      <Popover
-        placement="bottom"
-        onOpen={() => setIsPopoverOpen(true)}
-        onClose={() => setIsPopoverOpen(false)}
-        content={
-          <Menu>
-            <Menu.Item>1</Menu.Item>
-            <Menu.Item>2</Menu.Item>
-          </Menu>
-        }
-      >
-        <Tooltip visible={!isPopoverOpen} label="Peek-A-Boo" {...arg}>
-          <Button>hello</Button>
-        </Tooltip>
-      </Popover>
+      <>
+        <Popover
+          placement="bottom"
+          content={
+            <Menu>
+              <Menu.Item>1</Menu.Item>
+              <Menu.Item>2</Menu.Item>
+            </Menu>
+          }
+        >
+          <Tooltip
+            flag={visibleFlag}
+            onChangeVisible={(currentVisible) => {
+              setVisible(currentVisible);
+            }}
+            label="Peek-A-Boo"
+            {...arg}
+          >
+            <Button
+              onClick={() => {
+                if (visible) {
+                  toggleVisibleFlag();
+                }
+              }}
+            >
+              hello
+            </Button>
+          </Tooltip>
+        </Popover>
+      </>
     );
   },
 };