feat: Selection 관련 컴포넌트 추가 (#22)

* feat(toggle): Toggle 컴포넌트 추가

LH-374

* fix(toggle): export 누락

* feat(selectButton): SelectButton 컴포넌트 작업중

LH-374

* fix: inline-flex 수정

* fix: 타입 수정

* feat(selectButton): SelectButton 컴포넌트 추가

LH-374

* fix: 불필요한 children 제거

* feat(selectRadio): SelectRadio 컴포넌트 추가

LH-374

* feat(selectCheck): SelectCheck 컴포넌트 추가

LH-374

* feat(selectCheckBox): SelectCheckBox 컴포넌트 추가

LH-374

* feat(dropdown): Dropdown 공통 컴포넌트 제작

LH-374

* fix(selectCheckBox): 스토리북 경로 수정

LH-374

* fix(dropdown): 스타일 초기화

LH-374

* fix(dropdown): 불필요한 props 정리

LH-374

* feat(selectDropBox): SelectDropBox 컴포넌트 추가

LH-374

* fix: 최대 높이 추가

LH-374

* fix: 말줄임 추가

LH-374

* fix: export 누락

LH-374

* fix: divider 색상 변경

LH-374

* fix: 빌드 에러 수정

* fix: hover 추가

LH-374

* style: 빈줄 제거

Co-authored-by: Seong Gi Dong <[email protected]>

* fix: 코멘트 관련 수정

---------

Co-authored-by: baegofda <[email protected]>
Co-authored-by: Seong Gi Dong <[email protected]>

packages/travelmakers-design-core/src/components/Accordion/Accordion/Accordion.tsx

@@ -12,7 +12,7 @@ import {
 export type Props = {
   gap?: number;
   type?: AccordionType;
-  items: React.ReactNode[];
+  items: typeof AccordionItem[];
 };
 
 export const AccordionContext = createContext<Omit<Props, "items">>({

packages/travelmakers-design-core/src/components/Accordion/Accordion/stories/Accordion.stories.tsx

@@ -34,7 +34,7 @@ export default {
         "Accordion에 표시될 리스트 입니다. Accordion.Item를 사용합니다.",
       table: {
         type: {
-          summary: "React.ReactNode[]",
+          summary: "AccordionItem[]",
         },
       },
     },

packages/travelmakers-design-core/src/components/Badge/NewBadge/NewBadge.style.ts

@@ -1,7 +1,7 @@
 import { TmTheme, createStyles } from "@travelmakers-design-v2/styles";
 import { Props } from "./NewBadge";
 
-const NEWBADGE_SIZE = {
+const NEW_BADGE_SIZE = {
   small: "28px",
   medium: "34px",
 };
@@ -14,7 +14,7 @@ export default createStyles((theme: TmTheme, { type }: Props) => {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
-      height: NEWBADGE_SIZE[type],
+      height: NEW_BADGE_SIZE[type],
       padding: `0 ${spacing.spacing30}`,
       backgroundColor: colors.secondary,
     },

packages/travelmakers-design-core/src/components/BottomBar/BottomBar.tsx

@@ -35,7 +35,6 @@ export const BottomBar: BottomBarComponent & { displayName?: string } =
       {
         onClick,
         initSelectedId = 0,
-        children,
         component,
         className,
         overrideStyles,

packages/travelmakers-design-core/src/components/Callout/Callout/Callout.style.ts

@@ -5,7 +5,7 @@ export default createStyles((theme) => {
 
   return {
     root: {
-      display: "inline-flex",
+      display: "flex",
       flexDirection: "column",
       rowGap: spacing.spacing10,
       margin: 0,

packages/travelmakers-design-core/src/components/Callout/Callout/stories/Callout.stories.tsx

@@ -50,15 +50,21 @@ export default {
 } as Meta;
 
 export const Default = (props) => {
-  return <Callout title={data.title} {...props} items={data.items} />;
+  return (
+    <div style={{ display: "inline-flex" }}>
+      <Callout title={data.title} {...props} items={data.items} />
+    </div>
+  );
 };
 
 export const CalloutWithoutItems = (props) => {
   return (
-    <Callout
-      title={dataWithoutItems.title}
-      items={dataWithoutItems.items}
-      {...props}
-    />
+    <div style={{ display: "inline-flex" }}>
+      <Callout
+        title={dataWithoutItems.title}
+        items={dataWithoutItems.items}
+        {...props}
+      />
+    </div>
   );
 };

packages/travelmakers-design-core/src/components/Dropdown/Dropdown/Dropdown.tsx

@@ -0,0 +1,67 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import { createContext, forwardRef, useEffect, useRef, useState } from "react";
+import { View } from "../../View";
+import { DropdownItem } from "../DropdownItem";
+import { DropdownItems } from "../DropdownItems";
+import { DropdownTrigger } from "../DropdownTrigger";
+import {
+  DropdownComponent,
+  DropdownContextValue,
+  DropdownProps,
+} from "./Dropdown.type";
+
+export interface Props {
+  trigger: React.ReactNode;
+  content: React.ReactNode;
+}
+
+export const DropdownContext =
+  createContext<DropdownContextValue | undefined>(undefined);
+DropdownContext.displayName = "DropdownContext";
+
+export const Dropdown: DropdownComponent & {
+  displayName?: string;
+  Trigger?: typeof DropdownTrigger;
+  Items?: typeof DropdownItems;
+  Item?: typeof DropdownItem;
+} = forwardRef(
+  <C extends React.ElementType = "div">(
+    { trigger, content, className, ...props }: DropdownProps<C>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const divRef = useRef(ref || null);
+    const [isToggle, setIsToggle] = useState(false);
+
+    const onClickOutside = (e: MouseEvent) => {
+      const el = divRef.current;
+      if (!el || el.contains(e.target as Node)) return;
+
+      setIsToggle(false);
+    };
+
+    useEffect(() => {
+      document.addEventListener("click", onClickOutside);
+
+      return () => document.removeEventListener("click", onClickOutside);
+    }, []);
+
+    return (
+      <DropdownContext.Provider value={{ isToggle, setIsToggle }}>
+        <View<React.ElementType>
+          component={"div"}
+          ref={divRef}
+          className={className}
+          {...props}
+        >
+          {trigger}
+          {isToggle && content}
+        </View>
+      </DropdownContext.Provider>
+    );
+  }
+);
+
+Dropdown.displayName = "Dropdown";
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Items = DropdownItems;
+Dropdown.Item = DropdownItem;

packages/travelmakers-design-core/src/components/Dropdown/Dropdown/Dropdown.type.ts

@@ -0,0 +1,17 @@
+import { PolymorphicComponentProps } from "@travelmakers-design-v2/styles";
+import { Dispatch, SetStateAction } from "react";
+import { Props } from "./Dropdown";
+
+export type DropdownContextValue = {
+  isToggle: boolean;
+  setIsToggle: Dispatch<SetStateAction<boolean>>;
+};
+
+interface SharedDropdownProps extends Props {}
+
+export type DropdownProps<C extends React.ElementType> =
+  PolymorphicComponentProps<C, SharedDropdownProps>;
+
+export type DropdownComponent = <C extends React.ElementType = "div">(
+  props: DropdownProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Dropdown/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from "./Dropdown";
+export type { DropdownProps } from "./Dropdown.type";

packages/travelmakers-design-core/src/components/Dropdown/DropdownItem/DropdownItem.tsx

@@ -0,0 +1,46 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import { PropsWithChildren, forwardRef, useContext } from "react";
+import { View } from "../../View";
+import { DropdownContext } from "../Dropdown/Dropdown";
+import { DropdownItemComponent, DropdownItemProps } from "./DropdownItem.type";
+
+export interface Props {
+  ariaSelected: boolean;
+}
+
+export const DropdownItem: DropdownItemComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "li">(
+    {
+      ariaSelected,
+      onClick,
+      children,
+      ...props
+    }: PropsWithChildren<DropdownItemProps<C>>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const { isToggle, setIsToggle } = useContext(DropdownContext);
+
+    const onClickHandler = () => {
+      setIsToggle(false);
+      onClick?.();
+    };
+
+    return (
+      <View<React.ElementType>
+        component={"li"}
+        ref={ref}
+        onClick={onClickHandler}
+        tabIndex={isToggle ? 0 : -1}
+        aria-selected={ariaSelected}
+        role="option"
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+DropdownItem.displayName = "DropdownItem";

packages/travelmakers-design-core/src/components/Dropdown/DropdownItem/DropdownItem.type.ts

@@ -0,0 +1,11 @@
+import { PolymorphicComponentProps } from "@travelmakers-design-v2/styles";
+import { Props } from "./DropdownItem";
+
+interface SharedDropdownItemProps extends Props {}
+
+export type DropdownItemProps<C extends React.ElementType> =
+  PolymorphicComponentProps<C, SharedDropdownItemProps>;
+
+export type DropdownItemComponent = <C extends React.ElementType = "li">(
+  props: DropdownItemProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Dropdown/DropdownItem/index.ts

@@ -0,0 +1,2 @@
+export { DropdownItem } from "./DropdownItem";
+export type { DropdownItemProps } from "./DropdownItem.type";

packages/travelmakers-design-core/src/components/Dropdown/DropdownItems/DropdownItems.style.ts

@@ -0,0 +1,11 @@
+import { createStyles } from "@travelmakers-design-v2/styles";
+
+export default createStyles((theme) => {
+  return {
+    root: {
+      listStyle: "none",
+      margin: 0,
+      padding: 0,
+    },
+  };
+});

packages/travelmakers-design-core/src/components/Dropdown/DropdownItems/DropdownItems.tsx

@@ -0,0 +1,37 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import { forwardRef } from "react";
+import { View } from "../../View";
+import useStyles from "./DropdownItems.style";
+import {
+  DropdownItemsComponent,
+  DropdownItemsProps,
+} from "./DropdownItems.type";
+
+export interface Props {
+  items: React.ReactNode[];
+}
+
+export const DropdownItems: DropdownItemsComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "ul">(
+    { items, className, ...props }: DropdownItemsProps<C>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const { classes, cx } = useStyles();
+
+    return (
+      <View<React.ElementType>
+        component={"ul"}
+        className={cx(classes.root, className)}
+        role="listbox"
+        ref={ref}
+        {...props}
+      >
+        {items}
+      </View>
+    );
+  }
+);
+
+DropdownItems.displayName = "DropdownItems";

packages/travelmakers-design-core/src/components/Dropdown/DropdownItems/DropdownItems.type.ts

@@ -0,0 +1,20 @@
+import {
+  ClassNames,
+  PolymorphicComponentProps,
+  TmComponentProps,
+} from "@travelmakers-design-v2/styles";
+import { Props } from "./DropdownItems";
+import useStyles from "./DropdownItems.style";
+
+type SelectDropBoxStylesNames = ClassNames<typeof useStyles>;
+
+interface SharedDropdownItemsProps
+  extends Props,
+    TmComponentProps<SelectDropBoxStylesNames> {}
+
+export type DropdownItemsProps<C extends React.ElementType> =
+  PolymorphicComponentProps<C, SharedDropdownItemsProps>;
+
+export type DropdownItemsComponent = <C extends React.ElementType = "ul">(
+  props: DropdownItemsProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Dropdown/DropdownItems/index.ts

@@ -0,0 +1,2 @@
+export { DropdownItems } from "./DropdownItems";
+export type { DropdownItemsProps } from "./DropdownItems.type";

packages/travelmakers-design-core/src/components/Dropdown/DropdownTrigger/DropdownTrigger.style.ts

@@ -0,0 +1,17 @@
+import { createStyles } from "@travelmakers-design-v2/styles";
+
+export default createStyles((theme) => {
+  const { colors } = theme;
+
+  return {
+    root: {
+      padding: 0,
+      backgroundColor: colors.transparent,
+      border: 0,
+      outline: 0,
+      cursor: "pointer",
+
+      "&:disabled": { cursor: "default" },
+    },
+  };
+});

packages/travelmakers-design-core/src/components/Dropdown/DropdownTrigger/DropdownTrigger.tsx

@@ -0,0 +1,51 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import React, { forwardRef, useContext } from "react";
+import { View } from "../../View";
+import { DropdownContext } from "../Dropdown/Dropdown";
+import useStyles from "./DropdownTrigger.style";
+import {
+  DropdownTriggerComponent,
+  DropdownTriggerProps,
+} from "./DropdownTrigger.type";
+
+export interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+  children:
+    | ((props: { isToggle: boolean }) => React.ReactNode)
+    | React.ReactNode;
+}
+
+export const DropdownTrigger: DropdownTriggerComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "button">(
+    { onClick, className, children, ...props }: DropdownTriggerProps<C>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const { classes, cx } = useStyles();
+    const { isToggle, setIsToggle } = useContext(DropdownContext);
+
+    const _children =
+      typeof children === "function" ? children({ isToggle }) : children;
+
+    const onClickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
+      setIsToggle((v) => !v);
+      onClick?.(e);
+    };
+
+    return (
+      <View<React.ElementType>
+        component={"button"}
+        ref={ref}
+        className={cx(classes.root, className)}
+        onClick={onClickHandler}
+        aria-haspopup="listbox"
+        aria-expanded={isToggle}
+        {...props}
+      >
+        {_children}
+      </View>
+    );
+  }
+);
+
+DropdownTrigger.displayName = "DropdownTrigger";

packages/travelmakers-design-core/src/components/Dropdown/DropdownTrigger/DropdownTrigger.type.ts

@@ -0,0 +1,20 @@
+import {
+  ClassNames,
+  PolymorphicComponentProps,
+  TmComponentProps,
+} from "@travelmakers-design-v2/styles";
+import { Props } from "./DropdownTrigger";
+import useStyles from "./DropdownTrigger.style";
+
+type SelectDropBoxStylesNames = ClassNames<typeof useStyles>;
+
+interface SharedDropdownTriggerProps
+  extends Props,
+    TmComponentProps<SelectDropBoxStylesNames> {}
+
+export type DropdownTriggerProps<C extends React.ElementType> =
+  PolymorphicComponentProps<C, SharedDropdownTriggerProps>;
+
+export type DropdownTriggerComponent = <C extends React.ElementType = "button">(
+  props: DropdownTriggerProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Dropdown/DropdownTrigger/index.ts

@@ -0,0 +1,2 @@
+export { DropdownTrigger } from "./DropdownTrigger";
+export type { DropdownTriggerProps } from "./DropdownTrigger.type";