Dialog

import "./styles";

import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <DialogRoot>
          <DialogTrigger>
            <ActionButton variant="neutralSolid">Open Dialog</ActionButton>
          </DialogTrigger>
          <DialogContent title="제목" description="설명을 작성할 수 있어요">
            <DialogBody>
              <text className="dialog-example-text">
                본문에는 사용자가 확인해야 할 내용이나 추가 입력 폼을 배치할 수 있습니다.
              </text>
            </DialogBody>
            <DialogFooter>
              <view className="dialog-example-actions">
                <DialogAction variant="neutralWeak">취소</DialogAction>
                <DialogAction variant="neutralSolid">확인</DialogAction>
              </view>
            </DialogFooter>
          </DialogContent>
        </DialogRoot>
      </view>
    </view>
  );
}

import "./styles";

import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <DialogRoot>
          <DialogTrigger>
            <ActionButton variant="neutralSolid">Open</ActionButton>
          </DialogTrigger>
          <DialogContent title="Trigger 패턴">
            <DialogBody>
              <text className="dialog-example-text">
                Trigger를 탭하면 현재 화면 위에 Dialog가 열립니다.
              </text>
            </DialogBody>
            <DialogFooter>
              <view className="dialog-example-actions">
                <DialogAction variant="neutralWeak">취소</DialogAction>
                <DialogAction variant="neutralSolid">확인</DialogAction>
              </view>
            </DialogFooter>
          </DialogContent>
        </DialogRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [open, setOpen] = useState(false);

  function handleOpen() {
    "background only";
    setOpen(true);
  }

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <view className="dialog-example-column">
          <ActionButton variant="neutralSolid" bindtap={handleOpen}>
            열기
          </ActionButton>
          <DialogRoot open={open} onOpenChange={setOpen}>
            <DialogContent title="제목" description="설명을 작성할 수 있어요">
              <DialogBody>
                <text className="dialog-example-text">
                  Labore do culpa dolore irure nisi dolor dolor laboris veniam ipsum excepteur
                  adipisicing laboris non quis.
                </text>
              </DialogBody>
              <DialogFooter>
                <view className="dialog-example-actions">
                  <DialogAction variant="neutralWeak">취소</DialogAction>
                  <DialogAction variant="neutralSolid">확인</DialogAction>
                </view>
              </DialogFooter>
            </DialogContent>
          </DialogRoot>
        </view>
      </view>
    </view>
  );
}

import "./styles";

import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function DialogExample({ size }: { size: "medium" | "large" }) {
  const isLarge = size === "large";

  return (
    <DialogRoot size={size}>
      <DialogTrigger>
        <ActionButton variant="neutralSolid">
          {isLarge ? "Large Dialog" : "Medium Dialog"}
        </ActionButton>
      </DialogTrigger>
      <DialogContent
        title={isLarge ? "Large Dialog" : "Medium Dialog"}
        description={
          isLarge
            ? "넓은 다이얼로그에서 더 많은 상세 콘텐츠를 다룹니다."
            : "기본 너비로 상세 정보와 주요 액션을 함께 제공합니다."
        }
      >
        <DialogBody>
          <text className="dialog-example-text">
            {isLarge
              ? "large size는 넓은 화면에서 더 큰 Dialog token 너비를 사용합니다."
              : "medium은 Dialog의 기본 size입니다."}
          </text>
        </DialogBody>
        <DialogFooter>
          <view className="dialog-example-actions">
            <DialogAction variant="neutralWeak">취소</DialogAction>
            <DialogAction variant="neutralSolid">확인</DialogAction>
          </view>
        </DialogFooter>
      </DialogContent>
    </DialogRoot>
  );
}

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <view className="dialog-example-column">
          <DialogExample size="medium" />
          <DialogExample size="large" />
        </view>
      </view>
    </view>
  );
}

import "./styles";

import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function DialogExample({ long }: { long: boolean }) {
  return (
    <DialogRoot>
      <DialogTrigger>
        <ActionButton variant={long ? "neutralSolid" : "neutralWeak"}>
          {long ? "긴 본문 (스크롤 적용)" : "짧은 본문 (스크롤 없음)"}
        </ActionButton>
      </DialogTrigger>
      <DialogContent
        title={long ? "긴 본문" : "짧은 본문"}
        description={
          long
            ? "본문이 넘치면 DialogBody 안에서 스크롤됩니다"
            : "본문이 짧으면 별도 스크롤이 생기지 않습니다"
        }
      >
        <DialogBody>
          <view className="dialog-example-scroll-content">
            {long ? (
              Array.from({ length: 16 }, (_, index) => index + 1).map((line) => (
                <text key={line} className="dialog-example-text">
                  {line}. Lynx의 DialogBody는 native scroll-view로 렌더링됩니다.
                </text>
              ))
            ) : (
              <text className="dialog-example-text">
                내용이 짧으면 마지막 줄까지 바로 확인할 수 있습니다.
              </text>
            )}
          </view>
        </DialogBody>
        <DialogFooter>
          <view className="dialog-example-actions">
            <DialogAction variant="neutralWeak">취소</DialogAction>
            <DialogAction variant="neutralSolid">확인</DialogAction>
          </view>
        </DialogFooter>
      </DialogContent>
    </DialogRoot>
  );
}

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <view className="dialog-example-column">
          <DialogExample long={false} />
          <DialogExample long />
        </view>
      </view>
    </view>
  );
}

import "./styles";

import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function DialogExample({ variant }: { variant: "maxHeight" | "minHeight" | "fullBleed" }) {
  const isMaxHeight = variant === "maxHeight";
  const isMinHeight = variant === "minHeight";
  const isFullBleed = variant === "fullBleed";

  return (
    <DialogRoot>
      <DialogTrigger>
        <ActionButton variant="neutralSolid">
          {isMaxHeight ? "maxHeight 200px" : isMinHeight ? "minHeight + 가운데 정렬" : "paddingX 0"}
        </ActionButton>
      </DialogTrigger>
      <DialogContent
        title={isMaxHeight ? "본문 최대 높이" : isMinHeight ? "빈 상태" : "Full Bleed"}
        description={
          isMaxHeight
            ? "DialogBody의 높이를 200px로 제한합니다"
            : isMinHeight
              ? "짧은 내용에서도 높이를 고정합니다"
              : "가로 패딩을 제거해 콘텐츠를 가장자리까지 배치합니다"
        }
      >
        <DialogBody
          className={
            isMaxHeight
              ? "dialog-example-scroll-body"
              : isMinHeight
                ? "dialog-example-min-height-body"
                : undefined
          }
          style={isFullBleed ? { paddingLeft: 0, paddingRight: 0 } : undefined}
        >
          {isMaxHeight ? (
            <view className="dialog-example-scroll-content">
              {Array.from({ length: 12 }, (_, index) => index + 1).map((line) => (
                <text key={line} className="dialog-example-text">
                  {line}. 본문이 200px을 넘으면 그 안에서 스크롤됩니다.
                </text>
              ))}
            </view>
          ) : isMinHeight ? (
            <text className="dialog-example-text">아직 항목이 없습니다</text>
          ) : (
            <view className="dialog-example-full-bleed">
              <text className="dialog-example-text">가장자리까지 닿는 영역입니다</text>
            </view>
          )}
        </DialogBody>
        <DialogFooter>
          <view className="dialog-example-actions">
            <DialogAction variant="neutralWeak">취소</DialogAction>
            <DialogAction variant="neutralSolid">확인</DialogAction>
          </view>
        </DialogFooter>
      </DialogContent>
    </DialogRoot>
  );
}

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <view className="dialog-example-column">
          <DialogExample variant="maxHeight" />
          <DialogExample variant="minHeight" />
          <DialogExample variant="fullBleed" />
        </view>
      </view>
    </view>
  );
}

import "./styles";

import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function DialogExample({ showCloseAction }: { showCloseAction: boolean }) {
  return (
    <DialogRoot>
      <DialogTrigger>
        <ActionButton variant="neutralSolid">
          {showCloseAction ? "닫기 액션 있음" : "닫기 액션 없음"}
        </ActionButton>
      </DialogTrigger>
      <DialogContent
        title={showCloseAction ? "닫기 액션" : "닫기 액션 없음"}
        description={
          showCloseAction
            ? "Registry DialogContent가 닫기 ActionButton을 내부에서 제공합니다."
            : "닫기 액션을 숨긴 경우 푸터에 닫기 액션을 제공해야 합니다."
        }
        showCloseButton={showCloseAction}
      >
        <DialogBody>
          <text className="dialog-example-text">
            {showCloseAction
              ? "DialogContent의 showCloseButton을 사용합니다."
              : "showCloseButton={false}인 경우 푸터 액션만 제공합니다."}
          </text>
        </DialogBody>
        <DialogFooter>
          <view className="dialog-example-actions">
            <DialogAction variant="neutralWeak">취소</DialogAction>
            <DialogAction variant="neutralSolid">확인</DialogAction>
          </view>
        </DialogFooter>
      </DialogContent>
    </DialogRoot>
  );
}

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <view className="dialog-example-column">
          <DialogExample showCloseAction />
          <DialogExample showCloseAction={false} />
        </view>
      </view>
    </view>
  );
}

import "./styles";

import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <DialogRoot>
          <DialogTrigger>
            <ActionButton variant="neutralSolid">Footer 레이아웃</ActionButton>
          </DialogTrigger>
          <DialogContent
            title="Footer 레이아웃"
            description="버튼 배치는 view의 flex 레이아웃으로 직접 구성합니다."
          >
            <DialogBody>
              <view className="dialog-example-column">
                <text className="dialog-example-text">
                  DialogFooter는 flex 레이아웃만 제공합니다.
                </text>
                <text className="dialog-example-text">
                  넓은 다이얼로그에서는 주요 액션을 우측에 가로로 정렬할 수 있습니다.
                </text>
              </view>
            </DialogBody>
            <DialogFooter>
              <view className="dialog-example-actions">
                <DialogAction variant="neutralWeak">취소</DialogAction>
                <DialogAction variant="neutralSolid">확인</DialogAction>
              </view>
            </DialogFooter>
          </DialogContent>
        </DialogRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [open, setOpen] = useState(false);
  const [preventClose, setPreventClose] = useState(true);

  function handleTogglePreventClose() {
    "background only";
    setPreventClose((previous) => !previous);
  }

  function handleOpenChange(nextOpen: boolean) {
    if (nextOpen || !preventClose) {
      setOpen(nextOpen);
    }
  }

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <DialogRoot open={open} onOpenChange={handleOpenChange}>
          <DialogTrigger>
            <ActionButton variant="neutralSolid">열기</ActionButton>
          </DialogTrigger>
          <DialogContent title="닫기 방지" description="확인 버튼을 눌러도 Dialog가 닫히지 않도록 설정할 수 있습니다.">
            <DialogBody>
              <view className="dialog-example-option">
                <text className="dialog-example-text">
                  닫힘 방지: {JSON.stringify(preventClose)}
                </text>
                <ActionButton variant="neutralWeak" bindtap={handleTogglePreventClose}>
                  전환
                </ActionButton>
              </view>
            </DialogBody>
            <DialogFooter>
              <view className="dialog-example-actions">
                <DialogAction variant="neutralWeak">취소</DialogAction>
                <DialogAction variant="neutralSolid">확인</DialogAction>
              </view>
            </DialogFooter>
          </DialogContent>
        </DialogRoot>
      </view>
    </view>
  );
}

import "./styles";

import {
  DialogAction,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogRoot,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-dialog-root`}>
      <view className="dialog-example-stage">
        <DialogRoot>
          <DialogTrigger>
            <ActionButton variant="neutralSolid">열기</ActionButton>
          </DialogTrigger>
          <DialogContent
            container="window"
            overlayLevel={2}
            title="Overlay"
            description="Lynx에서는 Positioner의 container와 overlayLevel로 네이티브 overlay 레이어를 선택합니다."
          >
            <DialogBody>
              <text className="dialog-example-text">
                콘텐츠는 window 컨테이너와 overlay level 2 위에 표시됩니다.
              </text>
            </DialogBody>
            <DialogFooter>
              <view className="dialog-example-actions">
                <DialogAction variant="neutralWeak">취소</DialogAction>
                <DialogAction variant="neutralSolid">확인</DialogAction>
              </view>
            </DialogFooter>
          </DialogContent>
        </DialogRoot>
      </view>
    </view>
  );
}