feat(lynx-playground): add docs example catalog

Author: iamchanii

bun.lock

@@ -12,6 +12,6 @@ Lynx 컴포넌트 문서에서 실행하는 ReactLynx 예제를 둡니다. Rspee
 
 ## 코드 작성 컨벤션
 
-- entry는 필요한 스타일을 import하고 `<page>`를 렌더한 뒤 `root.render()`를 직접 호출합니다.
+- entry는 default export하는 하나의 예제 컴포넌트다. 독립 실행은 상위 `standalone.tsx`의 bootstrap이 맡으며, 예제 내부에서 `root.render()`를 호출하지 않는다.
 - 새로 작성하거나 대상 컴포넌트 import를 수정하는 예제는 Lynx registry 항목이 있으면 `@/components/ui/<name>`의 registry 모듈을 사용합니다. registry가 없는 package-only 컴포넌트만 `@seed-design/lynx-react`의 공개 export를 직접 사용합니다. 기존 예제의 일괄 변경은 별도 작업으로 다룹니다.
 - 사용자 이벤트는 Lynx 이벤트 prop을 사용합니다. background thread에서 실행해야 하는 handler에는 `"background only"` 지시문을 둡니다.

docs/examples/lynx/AGENTS.md

@@ -1,6 +1,6 @@
 import "./styles";
 
-import { root, useState } from "@lynx-js/react";
+import { useState } from "@lynx-js/react";
 import { Box, Text, useSeedClassName } from "@seed-design/lynx-react";
 import {
   Accordion,
@@ -9,7 +9,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 
-function Root() {
+export default function Example() {
   const seedClassName = useSeedClassName({ colorMode: "system" });
   const [values, setValues] = useState<string[]>(["item-1"]);
 
@@ -21,7 +21,7 @@ function Root() {
   }
 
   return (
-    <page className={seedClassName}>
+    <view className={`${seedClassName} docs-lynx-accordion-root`}>
       <Accordion values={values} onValuesChange={handleValuesChange}>
         <AccordionItem value="item-1">
           <AccordionTrigger title="주문 전 확인 사항" />
@@ -54,8 +54,6 @@ function Root() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-    </page>
+    </view>
   );
 }
-
-root.render(<Root />);

docs/examples/lynx/accordion/controlled-required-open.tsx

@@ -1,6 +1,6 @@
 import "./styles";
 
-import { root, useState } from "@lynx-js/react";
+import { useState } from "@lynx-js/react";
 import { Box, Text, useSeedClassName } from "@seed-design/lynx-react";
 import {
   Accordion,
@@ -9,7 +9,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 
-function Root() {
+export default function Example() {
   const seedClassName = useSeedClassName({ colorMode: "system" });
   const [values, setValues] = useState<string[]>(["item-1"]);
 
@@ -20,7 +20,7 @@ function Root() {
   }
 
   return (
-    <page className={seedClassName}>
+    <view className={`${seedClassName} docs-lynx-accordion-root`}>
       <Accordion values={values} onValuesChange={handleValuesChange}>
         <AccordionItem value="item-1">
           <AccordionTrigger title="아코디언 항목 1" />
@@ -47,8 +47,6 @@ function Root() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-    </page>
+    </view>
   );
 }
-
-root.render(<Root />);

docs/examples/lynx/accordion/controlled.tsx

@@ -1,6 +1,5 @@
 import "./styles";
 
-import { root } from "@lynx-js/react";
 import { Box, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";
 import {
   Accordion,
@@ -9,11 +8,11 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 
-function Root() {
+export default function Example() {
   const seedClassName = useSeedClassName({ colorMode: "system" });
 
   return (
-    <page className={seedClassName}>
+    <view className={`${seedClassName} docs-lynx-accordion-root`}>
       <Accordion>
         <AccordionItem value="item-1">
           <AccordionTrigger title="배송 안내" description="배송 정책 및 예상 소요 시간" />
@@ -50,8 +49,6 @@ function Root() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-    </page>
+    </view>
   );
 }
-
-root.render(<Root />);

docs/examples/lynx/accordion/custom-content.tsx

@@ -1,6 +1,5 @@
 import "./styles";
 
-import { root } from "@lynx-js/react";
 import { Box, Text, useSeedClassName } from "@seed-design/lynx-react";
 import {
   Accordion,
@@ -9,11 +8,11 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 
-function Root() {
+export default function Example() {
   const seedClassName = useSeedClassName({ colorMode: "system" });
 
   return (
-    <page className={seedClassName}>
+    <view className={`${seedClassName} docs-lynx-accordion-root`}>
       <Accordion multiple defaultValues={["item-1"]}>
         <AccordionItem value="item-1">
           <AccordionTrigger title="아코디언 항목 1" />
@@ -40,8 +39,6 @@ function Root() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-    </page>
+    </view>
   );
 }
-
-root.render(<Root />);

docs/examples/lynx/accordion/default-expanded.tsx

@@ -1,6 +1,5 @@
 import "./styles";
 
-import { root } from "@lynx-js/react";
 import { Box, Text, useSeedClassName } from "@seed-design/lynx-react";
 import {
   Accordion,
@@ -9,11 +8,11 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 
-function Root() {
+export default function Example() {
   const seedClassName = useSeedClassName({ colorMode: "system" });
 
   return (
-    <page className={seedClassName}>
+    <view className={`${seedClassName} docs-lynx-accordion-root`}>
       <Accordion>
         <AccordionItem value="item-1">
           <AccordionTrigger title="활성화된 항목" />
@@ -40,8 +39,6 @@ function Root() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-    </page>
+    </view>
   );
 }
-
-root.render(<Root />);

docs/examples/lynx/accordion/disabled.tsx

@@ -1,6 +1,5 @@
 import "./styles";
 
-import { root } from "@lynx-js/react";
 import { Box, Text, useSeedClassName } from "@seed-design/lynx-react";
 import {
   Accordion,
@@ -9,11 +8,11 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 
-function Root() {
+export default function Example() {
   const seedClassName = useSeedClassName({ colorMode: "system" });
 
   return (
-    <page className={seedClassName}>
+    <view className={`${seedClassName} docs-lynx-accordion-root`}>
       <Accordion variant="inline">
         <AccordionItem value="item-1">
           <AccordionTrigger title="아코디언 항목 1" />
@@ -40,8 +39,6 @@ function Root() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-    </page>
+    </view>
   );
 }
-
-root.render(<Root />);

docs/examples/lynx/accordion/inline.tsx

@@ -1,6 +1,5 @@
 import "./styles";
 
-import { root } from "@lynx-js/react";
 import { Box, Text, useSeedClassName } from "@seed-design/lynx-react";
 import {
   Accordion,
@@ -9,11 +8,11 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 
-function Root() {
+export default function Example() {
   const seedClassName = useSeedClassName({ colorMode: "system" });
 
   return (
-    <page className={seedClassName}>
+    <view className={`${seedClassName} docs-lynx-accordion-root`}>
       <Accordion multiple defaultValues={["item-1", "item-2"]}>
         <AccordionItem value="item-1">
           <AccordionTrigger title="아코디언 항목 1" />
@@ -40,8 +39,6 @@ function Root() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-    </page>
+    </view>
   );
 }
-
-root.render(<Root />);

docs/examples/lynx/accordion/multiple.tsx

@@ -1,5 +1,4 @@
-/* biome-ignore lint/correctness/noUnknownTypeSelector: Lynx의 page 요소입니다. */
-page {
+.docs-lynx-accordion-root {
   min-height: 100%;
   padding: 24px;
   background-color: var(--seed-color-bg-layer-default);