@remember-web/primitive 0.0.0-alpha.1

package/src/Control/BaseToggle/index.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import type { ForwardRefRenderFunction } from 'react';
+import { forwardRef } from 'react';
+
+import { Typography } from '@/Common';
+
+import { ToggleIcon } from './ToggleIcon';
+import { ToggleInput, ToggleRoot } from './styles';
+import type { BaseToggleProps } from './types';
+
+const _BaseToggle: ForwardRefRenderFunction<
+  HTMLInputElement,
+  BaseToggleProps
+> = (
+  {
+    variant,
+    label: _label,
+    labelPosition = 'right',
+    className,
+    inputClassName,
+    size = 'medium',
+    labelGap = size === 'small' ? 2 : 4,
+    type = 'checkbox',
+    onToggle,
+    onChange,
+    ...props
+  },
+  ref
+) => {
+  const isStringLabel = typeof _label === 'string';
+  const label = isStringLabel ? (
+    <Typography variant="Body1">{_label}</Typography>
+  ) : (
+    _label
+  );
+
+  return (
+    <ToggleRoot className={className} $gap={labelGap}>
+      <ToggleInput
+        ref={ref}
+        className={inputClassName}
+        type={type}
+        {...props}
+        onChange={(e) => {
+          onChange?.(e);
+          onToggle?.(e.target.checked);
+        }}
+      />
+      {labelPosition === 'left' && label}
+      <ToggleIcon
+        className="onIcon"
+        size={size}
+        status="on"
+        variant={variant}
+      />
+      <ToggleIcon
+        className="offIcon"
+        size={size}
+        status="off"
+        variant={variant}
+      />
+      {labelPosition === 'right' && label}
+    </ToggleRoot>
+  );
+};
+
+export const BaseToggle = forwardRef(_BaseToggle);

package/src/Control/BaseToggle/styles.ts

@@ -0,0 +1,59 @@
+'use client';
+
+import styled from 'styled-components';
+import { primary100 } from '@remember-web/mixin';
+
+export const ToggleRoot = styled.label<{ $gap?: number }>`
+  width: fit-content;
+  height: fit-content;
+  display: flex;
+  ${({ $gap }) => $gap && `gap: ${$gap}px;`}
+
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+
+  & > svg {
+    transition: filter 0.2s ease-in-out;
+    flex-shrink: 0;
+  }
+
+  :has(input:disabled) {
+    cursor: default;
+  }
+
+  @media (hover: hover) {
+    &:hover > svg {
+      filter: grayscale(0.05) brightness(0.95);
+    }
+  }
+`;
+
+export const ToggleInput = styled.input`
+  all: unset;
+  position: absolute;
+  width: 1px;
+  height: 0px;
+  margin-left: -1px;
+
+  &:checked ~ svg.offIcon {
+    display: none;
+  }
+
+  &:not(:checked) ~ svg.onIcon {
+    display: none;
+  }
+
+  &:disabled ~ svg {
+    filter: grayscale(1) brightness(1.1);
+  }
+
+  &:not(:disabled):active ~ svg {
+    filter: grayscale(0.1) brightness(0.9);
+  }
+
+  &:focus-visible ~ svg {
+    outline: solid 2px ${primary100};
+    outline-offset: -1px;
+  }
+`;

package/src/Control/BaseToggle/types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+
+export type ToggleStatusType = 'on' | 'off';
+export type ToggleVariantType =
+  | 'check'
+  | 'checkbox'
+  | 'favorite'
+  | 'bookmark'
+  | 'radio';
+export type ToggleIconSizeType = 'small' | 'medium';
+
+export type BaseToggleProps = {
+  variant: ToggleVariantType;
+  label?: ReactNode;
+  /**
+   * @default right
+   * */
+  labelPosition?: 'left' | 'right';
+  /**
+   * @default 4
+   * */
+  labelGap?: number;
+  inputClassName?: string;
+  onToggle?: (checked: boolean) => void;
+  size?: ToggleIconSizeType;
+  type?: 'checkbox' | 'radio';
+} & Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | `aria-${string}` | 'size'
+>;

package/src/Control/Checkbox.stories.tsx

@@ -0,0 +1,40 @@
+import { useArgs } from '@storybook/client-api';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from './Checkbox';
+
+type Story = StoryObj<typeof Checkbox>;
+
+const meta = {
+  title: 'Control/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    onToggle: { table: { disable: true } },
+    inputClassName: { table: { disable: true } },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    required: false,
+    checked: false,
+    variant: 'checkbox',
+    label: "I'm a Checkbox",
+    size: 'medium',
+    labelPosition: 'right',
+  },
+  render: ({ ...args }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [{ checked }, updateArgs] = useArgs();
+    return (
+      <Checkbox
+        {...args}
+        checked={checked}
+        onToggle={(v) => updateArgs({ checked: v })}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/Control/Checkbox.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
+
+import type { BaseToggleProps } from './BaseToggle/types';
+import { CircleBaseToggle } from './Toggle';
+
+export const _Checkbox: ForwardRefRenderFunction<
+  HTMLInputElement,
+  Omit<BaseToggleProps, 'variant' | 'type'> & {
+    variant?: 'checkbox' | 'check';
+  }
+> = ({ variant = 'checkbox', ...props }, ref) => (
+  <CircleBaseToggle ref={ref} variant={variant} {...props} />
+);
+
+export const Checkbox = forwardRef(_Checkbox);

package/src/Control/Radio.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Radio } from './Radio';
+
+type Story = StoryObj<typeof Radio>;
+
+const meta = {
+  title: 'Control/Radio',
+  component: Radio,
+  argTypes: {
+    inputClassName: { table: { disable: true } },
+  },
+} satisfies Meta<typeof Radio>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    required: false,
+    size: 'medium',
+    labelPosition: 'right',
+    label: "I'm a Radio",
+  },
+  render: ({ ...args }) => (
+    <div>
+      <Radio {...args} name="radio" value="1" label="1번 라디오 입니다." />
+      <Radio {...args} name="radio" value="2" label="2번 라디오 입니다." />
+      <Radio {...args} name="radio" value="3" label="3번 라디오 입니다." />
+      <Radio {...args} name="radio" value="4" label="4번 라디오 입니다." />
+      <Radio {...args} name="radio" value="5" label="5번 라디오 입니다." />
+      <Radio {...args} name="radio" value="6" label="6번 라디오 입니다." />
+      <Radio {...args} name="radio" value="7" label="7번 라디오 입니다." />
+    </div>
+  ),
+};
+
+export default meta;

package/src/Control/Radio.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
+
+import type { BaseToggleProps } from './BaseToggle/types';
+import { CircleBaseToggle } from './Toggle';
+
+const _Radio: ForwardRefRenderFunction<
+  HTMLInputElement,
+  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>
+> = ({ ...props }, ref) => (
+  <CircleBaseToggle ref={ref} variant="radio" type="radio" {...props} />
+);
+
+export const Radio = forwardRef(_Radio);

package/src/Control/Switch/Switch.stories.tsx

@@ -0,0 +1,31 @@
+import { useArgs } from '@storybook/client-api';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Switch } from '.';
+
+type Story = StoryObj<typeof Switch>;
+
+const meta = {
+  title: 'Control/Switch',
+  component: Switch,
+} satisfies Meta<typeof Switch>;
+
+export const Default: Story = {
+  args: {
+    size: 'small',
+    checked: false,
+  },
+  render: ({ onCheckedChange, ...args }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [{ checked }, updateArgs] = useArgs();
+    return (
+      <Switch
+        {...args}
+        checked={checked}
+        onCheckedChange={(v) => updateArgs({ checked: v })}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/Control/Switch/index.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { SwitchRoot, SwitchThumb, Label } from './styles';
+import type { SwitchProps } from './types';
+
+export function Switch({ size = 'small', ...props }: SwitchProps) {
+  return (
+    <Label>
+      <SwitchRoot size={size} {...props}>
+        <SwitchThumb size={size} aria-hidden="true" />
+      </SwitchRoot>
+    </Label>
+  );
+}

package/src/Control/Switch/styles.ts

@@ -0,0 +1,74 @@
+'use client';
+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import styled, { css } from 'styled-components';
+
+import { contents300, contents999, secondary100 } from '@remember-web/mixin';
+
+import type { SwitchProps } from './types';
+
+export const Label = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const SwitchRoot = styled(SwitchPrimitive.Root)<{
+  size: SwitchProps['size'];
+}>`
+  all: unset;
+  background-color: ${contents300};
+  border-radius: 24px;
+  position: relative;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: solid 2px black;
+    outline-offset: 2px;
+  }
+  &[data-state='checked'] {
+    background-color: ${secondary100};
+  }
+
+  ${({ size }) =>
+    (size === 'small' &&
+      css`
+        width: 36px;
+        height: 20px;
+      `) ||
+    (size === 'large' &&
+      css`
+        width: 64px;
+        height: 38px;
+      `)};
+`;
+
+export const SwitchThumb = styled(SwitchPrimitive.Thumb)<{
+  size: SwitchProps['size'];
+}>`
+  display: block;
+  background-color: ${contents999};
+  border-radius: 50%;
+  transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);
+  will-change: transform;
+
+  ${({ size }) =>
+    (size === 'small' &&
+      css`
+        width: 14px;
+        height: 14px;
+        transform: translateX(3px);
+        &[data-state='checked'] {
+          transform: translateX(19px);
+        }
+      `) ||
+    (size === 'large' &&
+      css`
+        width: 28px;
+        height: 28px;
+        transform: translateX(5px);
+        &[data-state='checked'] {
+          transform: translateX(31px);
+        }
+      `)};
+`;

package/src/Control/Switch/types.ts

@@ -0,0 +1,5 @@
+import type { SwitchProps as PrimitiveSwitchProps } from '@radix-ui/react-switch';
+
+export interface SwitchProps extends Omit<PrimitiveSwitchProps, 'asChild'> {
+  size?: 'small' | 'large';
+}

package/src/Control/Toggle.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+
+import { Toggle } from './Toggle';
+
+type Story = StoryObj<typeof Toggle>;
+
+const meta = {
+  title: 'Control/Toggle',
+  component: Toggle,
+  argTypes: {
+    onToggle: { table: { disable: true } },
+    inputClassName: { table: { disable: true } },
+  },
+} satisfies Meta<typeof Toggle>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    checked: false,
+    variant: 'bookmark',
+    label: "I'm a Toggle",
+    size: 'medium',
+    labelPosition: 'right',
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [{ checked }, updateArgs] = useArgs();
+
+    return (
+      <Toggle
+        {...args}
+        checked={checked}
+        onToggle={(v) => updateArgs({ checked: v })}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/Control/Toggle.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import styled from 'styled-components';
+
+import { BaseToggle } from './BaseToggle';
+import type { BaseToggleProps } from './BaseToggle/types';
+
+export const _Toggle: ForwardRefRenderFunction<
+  HTMLInputElement,
+  Omit<BaseToggleProps, 'variant' | 'type'> & {
+    variant: 'bookmark' | 'favorite';
+  }
+> = ({ variant, ...props }, ref) => (
+  <BaseToggle ref={ref} variant={variant} {...props} />
+);
+
+export const Toggle = forwardRef(_Toggle);
+
+export const CircleBaseToggle = styled(BaseToggle)`
+  & > svg {
+    border-radius: 50%;
+  }
+`;

package/src/Control/index.ts

@@ -0,0 +1,4 @@
+export * from './Checkbox';
+export * from './Toggle';
+export * from './Switch';
+export * from './Radio';

package/src/Floating/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,219 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable no-console */
+import type { Meta, StoryObj } from '@storybook/react';
+import { useRef, useState } from 'react';
+
+import { Flex } from '@/Common';
+import DropdownMenu from '@/Floating/DropdownMenu';
+import { Button } from '@';
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+const meta = {
+  title: 'Floating/DropdownMenu',
+  component: DropdownMenu,
+} satisfies Meta<typeof DropdownMenu>;
+
+export const Default: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen2, setIsOpen2] = useState(false);
+    const [isOpen3, setIsOpen3] = useState(false);
+    const closeTimeout = useRef<number | undefined>(undefined);
+
+    return (
+      <>
+        <DropdownMenu>
+          <DropdownMenu.Trigger>
+            <button type="button">open basic dropdown</button>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content>
+            <DropdownMenu.Section>
+              <Flex width="100%">
+                <div
+                  style={{
+                    width: '100%',
+                    height: 100,
+                    background: '#eee',
+                    padding: 24,
+                  }}
+                >
+                  Custom Dropdown Header
+                </div>
+              </Flex>
+            </DropdownMenu.Section>
+            <DropdownMenu.Section title="single action">
+              <DropdownMenu.Item
+                as="a"
+                href="/?path=/docs/floating-popover--docs"
+              >
+                as='a' <br />
+                popover 보러가기
+              </DropdownMenu.Item>
+            </DropdownMenu.Section>
+            <DropdownMenu.Section title="my items">
+              <DropdownMenu.Item $active>
+                <Flex justify="space-between" width="100%">
+                  <span>*</span>
+                  <span>액티브된 아이템</span>
+                  <span>*</span>
+                </Flex>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                as="a"
+                href="/?path=/docs/floating-popover--docs"
+              >
+                as="a" <br />
+                tab 눌러서 이동 가능
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                as={Button}
+                variant="outline"
+                layout="fullBlock"
+                style={{ border: 'none' }}
+              >
+                {'as={Button}'}
+              </DropdownMenu.Item>
+            </DropdownMenu.Section>
+            <div style={{ width: '100%', padding: 4, fontSize: 9 }}>
+              custom footer
+            </div>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+        <br />
+        <br />
+        <br />
+
+        <p style={{ fontSize: 14 }}>
+          내부 클릭시 닫히는 드롭다운 - uncontrolled
+        </p>
+        <DropdownMenu>
+          <DropdownMenu.Trigger>
+            <button type="button">
+              open uncontrolled dropdown - with inner isInsideCloseable
+            </button>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content isInsideCloseable>
+            <div style={{ width: 400 }}>
+              contents container width 400px
+              <DropdownMenu.Section title="single action">
+                <DropdownMenu.Item as="button">any button</DropdownMenu.Item>
+                <DropdownMenu.Item as="a" href="#">
+                  any link
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  as="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  안닫히는 버튼(stopPropagation)
+                </DropdownMenu.Item>
+              </DropdownMenu.Section>
+            </div>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+
+        <br />
+        <br />
+        <br />
+
+        <p style={{ fontSize: 14 }}>
+          radix의{' '}
+          <a href="https://www.radix-ui.com/primitives/docs/components/popover#root">
+            onOpenChange
+          </a>{' '}
+          속성은 현재 open을 기반으로 기존 radix의 동작을 시뮬레이션 한 값이
+          넘어옵니다.{' '}
+          <span style={{ color: '#999', fontSize: 11 }}>
+            (onOpenChange 이름 잘못 지은거 같음..)
+          </span>
+          <br />
+          그렇기 때문에 컨트롤드 방식을 사용하지만 기존 radix의 동작 상태를
+          추가하시려면 onOpenChange에 set open 함수를 넘겨주면 됩니다.
+        </p>
+        <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+          <DropdownMenu.Trigger>
+            <button type="button">
+              open controlled dropdown with onOpenChange
+            </button>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content>
+            <div style={{ width: 400 }}>
+              contents container width 400px
+              <DropdownMenu.Section title="single action">
+                <DropdownMenu.Item
+                  as="button"
+                  onClick={() => {
+                    setIsOpen(false);
+                  }}
+                >
+                  누르면 닫힘
+                </DropdownMenu.Item>
+              </DropdownMenu.Section>
+            </div>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+
+        <br />
+        <br />
+        <br />
+        <div
+          style={{ marginLeft: 200, width: 'fit-content' }}
+          onMouseEnter={() => {
+            window.clearTimeout(closeTimeout.current);
+            setIsOpen2(true);
+          }}
+          onMouseLeave={() => {
+            window.clearTimeout(closeTimeout.current);
+            closeTimeout.current = window.setTimeout(() => {
+              window.clearTimeout(closeTimeout.current);
+              setIsOpen2(false);
+            }, 200);
+          }}
+        >
+          <DropdownMenu open={isOpen2} onOpenChange={setIsOpen2}>
+            <DropdownMenu.Trigger>
+              <button type="button">
+                open controlled dropdown - hover case
+              </button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <div style={{ width: 400, height: 400 }}>
+                contents container width 400px, height 400px
+                <DropdownMenu.Item>마우스 나가면 닫힘</DropdownMenu.Item>
+              </div>
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        </div>
+
+        <br />
+        <br />
+        <br />
+        <DropdownMenu open={isOpen3}>
+          <DropdownMenu.Trigger>
+            <button type="button" onClick={() => setIsOpen3(true)}>
+              open only button controlled dropdown
+            </button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content>
+            아래 버튼을 눌러야지만 닫을 수 있습니다.
+            <DropdownMenu.Item
+              as="button"
+              onClick={() => {
+                setIsOpen3(false);
+              }}
+            >
+              닫기
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </>
+    );
+  },
+};
+
+export default meta;