@remember-web/primitive 0.0.0-alpha.1

package/src/Floating/DropdownMenu/DropdownMenuSection.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+import {
+  StyledDropdownMenuSectionTitle,
+  StyledDropdownMenuSection,
+} from '@/Floating/DropdownMenu/styles';
+import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
+
+type DropdownMenuSectionProps<As> = GetStyledComponentProps<
+  typeof StyledDropdownMenuSection,
+  As
+> & {
+  title?: ReactNode;
+};
+
+export const DropdownMenuSection = <As,>({
+  title,
+  children,
+  ...props
+}: DropdownMenuSectionProps<As>) => (
+  <StyledDropdownMenuSection {...props}>
+    {title && (
+      <StyledDropdownMenuSectionTitle>{title}</StyledDropdownMenuSectionTitle>
+    )}
+    {children}
+  </StyledDropdownMenuSection>
+);

package/src/Floating/DropdownMenu/index.tsx

@@ -0,0 +1,36 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+
+import type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';
+import {
+  StyledDropdownMenuContent,
+  StyledDropdownMenuItem,
+} from '@/Floating/DropdownMenu/styles';
+import Popover from '@/Floating/Popover';
+
+import { DropdownMenuSection } from './DropdownMenuSection';
+
+export interface DropdownContentProps extends PopoverContentProps {}
+export interface DropdownMenuProps extends PopoverProps {}
+/**
+ * Popover에 DropdownMenu Parts들을 추가한 컴포넌트
+ * @see Popover
+ */
+const DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {
+  Content: ({ isInsideCloseable = false, ...props }: DropdownContentProps) =>
+    isInsideCloseable ? (
+      <RadixPopover.Close asChild>
+        <StyledDropdownMenuContent {...props} />
+      </RadixPopover.Close>
+    ) : (
+      <StyledDropdownMenuContent {...props} />
+    ),
+  Arrow: Popover.Arrow,
+  Trigger: Popover.Trigger,
+  Portal: Popover.Portal,
+  Anchor: Popover.Anchor,
+  Close: Popover.Close,
+  Section: DropdownMenuSection,
+  Item: StyledDropdownMenuItem,
+});
+
+export default DropdownMenu;

package/src/Floating/DropdownMenu/styles.tsx

@@ -0,0 +1,81 @@
+import styled, { css } from 'styled-components';
+
+import { bg200, contents000, contents200, divider } from '@remember-web/mixin';
+import { getTypographyStyles } from '@remember-web/mixin';
+import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+import { StyledPopoverContent } from '@/Floating/Popover/styles';
+
+export const dropdownMenuItemCSS = css`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+
+  ${getTypographyStyles('Body1')};
+  color: ${contents000};
+  transition: background-color 0.07s;
+  border-radius: unset;
+  text-decoration: none;
+`;
+
+export const DropdownMenuItemHoverCSS = css`
+  &:hover,
+  &:focus-visible {
+    background-color: ${bg200};
+  }
+`;
+
+export const DropdownMenuItemDisabledCSS = css`
+  pointer-events: none;
+`;
+
+export const StyledDropdownMenuSectionTitle = styled.span`
+  ${dropdownMenuItemCSS};
+  ${getTypographyStyles('Body2_M')};
+  color: ${contents200};
+`;
+
+export type DropdownMenuItemProps =
+  ConvertTransientProps<StyledDropdownMenuItemProps>;
+
+export type StyledDropdownMenuItemProps = {
+  $active?: boolean;
+  $disabled?: boolean;
+};
+
+export const getDropdownMenuItemCss = ({
+  $active,
+  $disabled,
+}: StyledDropdownMenuItemProps) =>
+  css(() => [
+    dropdownMenuItemCSS,
+    !$active && DropdownMenuItemHoverCSS,
+    $disabled && DropdownMenuItemDisabledCSS,
+    css`
+      font-weight: ${$active ? 600 : 400};
+
+      &:focus-visible {
+        outline: none;
+      }
+    `,
+  ]);
+
+export const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(
+  ({ active, disabled, ...props }) => ({
+    tabIndex: active ? -1 : undefined,
+    $active: active,
+    $disabled: disabled,
+    ...props,
+  })
+)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);
+
+export const StyledDropdownMenuSection = styled.div``;
+
+export const StyledDropdownMenuContent = styled(StyledPopoverContent)`
+  ${StyledDropdownMenuSection} {
+    border-bottom: 1px solid ${divider};
+  }
+  ${StyledDropdownMenuSection}:last-child {
+    border-bottom: none;
+  }
+`;
+StyledDropdownMenuItem.defaultProps = {};

package/src/Floating/Popover/Popover.stories.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Popover from '@/Floating/Popover/index';
+import { Flex } from '@/Common';
+
+type Story = StoryObj<typeof Popover>;
+
+const meta = {
+  title: 'Floating/Popover',
+  component: Popover,
+} satisfies Meta<typeof Popover>;
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <p>
+        추가 use case 들에 대한 예제는{' '}
+        <a href="/?path=/story/floating-dropdownmenu--default">
+          DropdownMenu 컴포넌트를 참고하세요
+        </a>
+      </p>
+      <Popover>
+        <Popover.Trigger>
+          <button type="button">open popover</button>
+        </Popover.Trigger>
+
+        <Popover.Content>
+          <div style={{ width: 200, padding: 30 }}>hihi</div>
+        </Popover.Content>
+      </Popover>
+      <hr />
+
+      <Popover>
+        <div>
+          <div>other place</div>
+
+          <Popover.Trigger>
+            <button type="button">open other place</button>
+          </Popover.Trigger>
+
+          <Popover.Content align="end">
+            <div style={{ width: 200, padding: 30 }}>hihi</div>
+          </Popover.Content>
+
+          <br />
+        </div>
+        <Flex justify="flex-end">
+          <Popover.Anchor>here!</Popover.Anchor>
+        </Flex>
+      </Popover>
+    </>
+  ),
+};
+
+export default meta;

package/src/Floating/Popover/index.tsx

@@ -0,0 +1,34 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+
+import { StyledPopoverContent } from '@/Floating/Popover/styles';
+
+const { Trigger, Anchor, Close, PopoverPortal } = RadixPopover;
+
+export type PopoverProps = RadixPopover.PopoverProps;
+export type PopoverContentProps = RadixPopover.PopoverContentProps & {
+  isInsideCloseable?: boolean;
+};
+
+/**
+ * @see https://www.radix-ui.com/docs/primitives/components/popover
+ */
+
+const Popover = Object.assign(RadixPopover.Root.bind(null), {
+  Trigger(props: RadixPopover.PopoverTriggerProps) {
+    return <Trigger asChild {...props} />;
+  },
+  Anchor,
+  Portal: PopoverPortal,
+  Close,
+  Arrow: RadixPopover.Arrow,
+  Content: ({ isInsideCloseable = false, ...props }: PopoverContentProps) =>
+    isInsideCloseable ? (
+      <RadixPopover.Close asChild>
+        <StyledPopoverContent {...props} />
+      </RadixPopover.Close>
+    ) : (
+      <StyledPopoverContent {...props} />
+    ),
+});
+
+export default Popover;

package/src/Floating/Popover/styles.ts

@@ -0,0 +1,54 @@
+import styled, { keyframes } from 'styled-components';
+import { PopoverContent } from '@radix-ui/react-popover';
+
+import { bg100, contents000 } from '@remember-web/mixin';
+
+export const showFadeIn = keyframes`
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+`;
+export const showFadeOut = keyframes`
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+`;
+
+export const StyledPopoverContent = styled(PopoverContent)`
+  contain: paint;
+  width: fit-content;
+  margin: 0;
+  padding: 0;
+  border-radius: 4px;
+
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+  color: ${contents000};
+  background-color: ${bg100};
+  white-space: pre-line;
+
+  height: 100%;
+  will-change: box-shadow;
+
+  &:focus {
+    outline: none;
+  }
+  &[data-state='open'] {
+    animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;
+  }
+  &:not([data-state='open']) {
+    animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;
+  }
+`;
+
+StyledPopoverContent.defaultProps = {
+  avoidCollisions: true,
+  align: 'start',
+  side: 'bottom',
+  sideOffset: 4,
+};

package/src/Floating/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/Buttons';
+import { Flex } from '@/Common';
+import { IconAlarm } from '@remember-web/icon';
+
+import Tooltip from '.';
+
+type Story = StoryObj<typeof Tooltip>;
+
+const meta = {
+  title: 'Floating/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    content: {
+      type: 'string',
+    },
+    size: {
+      option: ['small', 'large'],
+    },
+    hasArrow: {
+      if: { arg: 'size', eq: 'large' },
+      defaultValue: true,
+      type: 'boolean',
+    },
+    open: {
+      if: { arg: 'type', eq: 'static' },
+      defaultValue: false,
+      type: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Tooltip>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  args: {
+    content: 'Tooltip',
+    size: 'small',
+    type: 'hover',
+    side: 'top',
+    gap: 4,
+    defaultOpen: false,
+  },
+  render: ({ ...props }) => (
+    <Flex gap={24}>
+      <Tooltip {...props}>
+        <IconAlarm size={24} />
+      </Tooltip>
+      <Tooltip {...props}>
+        <Button>버튼</Button>
+      </Tooltip>
+      <Tooltip {...props} defaultOpen type="closeButton">
+        <Button>기본 활성화 + 닫기 버튼</Button>
+      </Tooltip>
+      <Tooltip {...props}>그냥 텍스트</Tooltip>
+    </Flex>
+  ),
+};
+
+export default meta;

package/src/Floating/Tooltip/index.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { useState, type PropsWithChildren } from 'react';
+
+import { isSSR } from '@remember-web/shared/utils/common';
+import { IconCloseS } from '@remember-web/icon';
+import { contents000, contents999 } from '@remember-web/mixin';
+
+import { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';
+import {
+  isLargeSizeProps,
+  isStaticTypeProps,
+  type TooltipProps,
+  type TooltipSize,
+  type TooltipType,
+} from './types';
+
+const hoverable = isSSR()
+  ? true
+  : window.matchMedia('(any-hover: hover)').matches;
+
+export default function Tooltip<
+  Type extends TooltipType = 'hover',
+  Size extends TooltipSize = 'small'
+>({
+  children,
+  content,
+  contentOptions,
+  defaultOpen,
+  side = 'top',
+  gap = 4,
+  onOpenChange,
+  onClickOutside,
+  ...props
+}: PropsWithChildren<TooltipProps<Type, Size>>) {
+  const [_open, _setOpen] = useState(defaultOpen ?? false);
+  const { type = 'hover', size = 'small' } = props;
+  const {
+    backgroundColor = contents000,
+    contentColor = contents999,
+    maxWidth = 'initial',
+    textAlign = 'center',
+    onClick,
+    zIndex = 0,
+  } = contentOptions ?? {};
+  /**
+   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정
+   *
+   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */
+  const isHoverType = hoverable && type === 'hover';
+  const isClickType = !hoverable || type === 'click';
+  const isCloseButtonType = type === 'closeButton';
+  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */
+  const isClickTrigger = isClickType || isCloseButtonType;
+  const isOpen = isStaticTypeProps(props)
+    ? props.open
+    : isHoverType
+    ? undefined
+    : _open;
+
+  return (
+    <RadixTooltip.Provider>
+      <RadixTooltip.Root
+        open={isOpen}
+        defaultOpen={defaultOpen}
+        delayDuration={100}
+        onOpenChange={onOpenChange}
+      >
+        <RadixTooltip.Trigger
+          asChild
+          onClick={
+            isClickTrigger
+              ? () => _setOpen(isClickType ? (prev) => !prev : true)
+              : undefined
+          }
+        >
+          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <TooltipContent
+            $size={size}
+            $maxWidth={maxWidth}
+            $backgroundColor={backgroundColor}
+            $contentColor={contentColor}
+            $textAlign={textAlign}
+            $zIndex={zIndex}
+            sideOffset={gap}
+            side={side}
+            onPointerDownOutside={(e) => {
+              if (isClickType) {
+                _setOpen(false);
+              }
+              onClickOutside?.(e);
+            }}
+            collisionPadding={20}
+            onClick={(e) => {
+              if (isClickType) {
+                () => _setOpen(false);
+              }
+              onClick?.(e);
+            }}
+          >
+            {content}
+            {type === 'closeButton' && (
+              <CloseButton onClick={() => _setOpen(false)}>
+                <IconCloseS />
+              </CloseButton>
+            )}
+            {isLargeSizeProps(props) && props.hasArrow && (
+              <RadixTooltip.Arrow
+                width={14}
+                height={8}
+                color={backgroundColor}
+              />
+            )}
+          </TooltipContent>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  );
+}

package/src/Floating/Tooltip/styles.ts

@@ -0,0 +1,93 @@
+'use client';
+
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import styled, { css, keyframes } from 'styled-components';
+
+import type { TypographyStyle } from '@remember-web/mixin';
+import {
+  contents000,
+  contents999,
+  getTypographyStyles,
+} from '@remember-web/mixin';
+
+import type { TooltipSize, TooltipTextAlign } from './types';
+
+const TOOLTIP_CONTENT_CONSTANTS: Record<
+  TooltipSize,
+  { padding: string; typography: TypographyStyle }
+> = {
+  large: {
+    padding: '8px 12px',
+    typography: 'Body1',
+  },
+  small: {
+    padding: '4px 8px',
+    typography: 'Body2',
+  },
+};
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+export const TooltipTriggerWrapper = styled.div`
+  width: fit-content;
+  height: fit-content;
+  & > svg {
+    display: block;
+  }
+`;
+
+export const TooltipContent = styled(RadixTooltip.Content)<{
+  $size: TooltipSize;
+  $maxWidth: number | string;
+  $backgroundColor: string;
+  $contentColor: string;
+  $textAlign?: TooltipTextAlign;
+  $zIndex?: number;
+}>`
+  box-sizing: border-box;
+  display: flex;
+  white-space: pre-wrap;
+  color: ${contents999};
+  background-color: ${contents000};
+  border-radius: 4px;
+  will-change: opacity;
+  animation: ${fadeIn} 200ms forwards;
+  gap: 4px;
+
+  ${({
+    $size,
+    $maxWidth,
+    $zIndex,
+    $backgroundColor,
+    $contentColor,
+    $textAlign,
+  }) => [
+    css`
+      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};
+      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};
+      background-color: ${$backgroundColor};
+      color: ${$contentColor};
+      text-align: ${$textAlign};
+      z-index: ${$zIndex};
+    `,
+    typeof $maxWidth === 'string'
+      ? `max-width: ${$maxWidth};`
+      : `max-width: ${$maxWidth}px;`,
+  ]};
+`;
+
+export const CloseButton = styled.button`
+  all: unset;
+  appearance: none;
+  cursor: pointer;
+  & > svg {
+    display: block;
+  }
+`;

package/src/Floating/Tooltip/types.ts

@@ -0,0 +1,42 @@
+import type {
+  DismissableLayerProps,
+  PopperContentProps,
+  TooltipProps as RadixTooltipProps,
+} from '@radix-ui/react-tooltip';
+import type { ReactNode } from 'react';
+
+export type TooltipSize = 'small' | 'large';
+export type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';
+export type TooltipTextAlign = 'left' | 'center' | 'right';
+
+export type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {
+  content: ReactNode;
+  defaultOpen?: boolean;
+  gap?: 4 | 8 | (number & {});
+  side?: PopperContentProps['side'];
+  type?: Type;
+  size?: Size;
+  contentOptions?: TooltipContentOptionProps;
+  onOpenChange?: RadixTooltipProps['onOpenChange'];
+  onClickOutside?: DismissableLayerProps['onPointerDownOutside'];
+} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &
+  (Size extends 'large' ? { hasArrow?: boolean } : {});
+
+export const isStaticTypeProps = (
+  props: Pick<TooltipProps<any, any>, 'type'>
+): props is TooltipProps<'static', any> =>
+  'type' in props && props.type === 'static';
+
+export const isLargeSizeProps = (
+  props: Pick<TooltipProps<any, any>, 'size'>
+): props is TooltipProps<any, 'large'> =>
+  'size' in props && props.size === 'large';
+
+export type TooltipContentOptionProps = {
+  maxWidth?: number | string;
+  backgroundColor?: string;
+  contentColor?: string;
+  zIndex?: number;
+  textAlign?: TooltipTextAlign;
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};

package/src/Floating/index.ts

@@ -0,0 +1,3 @@
+export { default as Tooltip } from './Tooltip';
+export { default as Popover } from './Popover';
+export { default as DropdownMenu } from './DropdownMenu';