feat: stackflow, preview, installation

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["biomejs.biome"]
+  "recommendations": ["biomejs.biome", "formulahendry.auto-close-tag"]
 }

.vscode/settings.json

@@ -12,5 +12,8 @@
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "auto-close-tag.activationOnLanguage": [
+    "mdx"
+  ],
 }

biome.json

@@ -26,7 +26,8 @@
         "useTemplate": "warn"
       },
       "complexity": {
-        "useLiteralKeys": "warn"
+        "useLiteralKeys": "warn",
+        "noBannedTypes": "off"
       },
       "correctness": {
         "useExhaustiveDependencies": "warn"
@@ -59,11 +60,21 @@
     },
     {
       "include": ["component-docs/**/*"],
-      "ignore": ["**/*.css", "registry/**/*", "public/**/*"],
+      "ignore": [
+        "**/*.css",
+        "registry/**/*",
+        "public/**/*",
+        "node_modules",
+        ".cache",
+        "lib",
+        "dist",
+        ".eslintrc"
+      ],
       "linter": {
         "rules": {
           "style": {
-            "noNonNullAssertion": "off"
+            "noNonNullAssertion": "off",
+            "useImportType": "off"
           },
           "correctness": {
             "useExhaustiveDependencies": "warn"

component-docs/README.md

@@ -12,5 +12,6 @@ component-docs
  ┃ ┃ ┗ 📂components # CLI로 install 할 때 참조
  ┣ 📂schemas        #
  ┣ 📂scripts        #
+ ┣ 📂seed-design    # snippet은 진실의 원천으로 사용하고, Docs에서 사용하는 코드는 생성해서 사용
  ┗ 📂snippets       # registry에 담김
 ```

component-docs/activities/AlertDialogActivity.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+import { type ActivityComponentType, useStepFlow, useStack } from "@stackflow/react/future";
+import { BoxButton } from "@/seed-design/ui/box-button";
+
+import { AlertDialog as UIAlertDialog } from "@/seed-design/ui/alert-dialog";
+
+declare module "@stackflow/config" {
+  interface Register {
+    Main: {
+      alert: boolean;
+    };
+  }
+}
+
+const AlertDialogActivity: ActivityComponentType<"Main"> = ({ params }) => {
+  const { alert } = params;
+  const stack = useStack();
+  const { pushStep, popStep } = useStepFlow("Main");
+
+  const appBarLeft = () => <div>Left</div>;
+  const appBarRight = () => <div>Right</div>;
+
+  const onInteractOutside = () => {
+    popStep();
+  };
+
+  const onButtonClick = () => {
+    pushStep({
+      alert: true,
+    });
+  };
+
+  const mainActivitySteps = stack.activities[0].steps;
+
+  return (
+    <AppScreen
+      appBar={{
+        renderLeft: appBarLeft,
+        renderRight: appBarRight,
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <BoxButton onClick={onButtonClick}>Open</BoxButton>
+        {alert && (
+          <UIAlertDialog
+            onInteractOutside={onInteractOutside}
+            title="Title"
+            description="Description"
+          />
+        )}
+      </div>
+
+      <div
+        style={{
+          position: "fixed",
+          bottom: "0",
+          right: "0",
+          padding: "8px",
+        }}
+      >
+        <span style={{ fontSize: "12px", color: "var(--seed-semantic-color-divider-3)" }}>
+          Steps
+        </span>
+        {mainActivitySteps.map((step) => (
+          <div
+            style={{
+              fontSize: "12px",
+              width: "1rem",
+              height: "1rem",
+              borderRadius: "50%",
+              border: "1px solid var(--seed-semantic-color-divider-3)",
+              margin: "8px",
+            }}
+            key={step.id}
+          />
+        ))}
+      </div>
+
+      <div
+        style={{
+          position: "fixed",
+          bottom: "0",
+          left: "0",
+          padding: "8px",
+          zIndex: 1000,
+        }}
+      >
+        <BoxButton onClick={popStep}>Back</BoxButton>
+      </div>
+    </AppScreen>
+  );
+};
+
+export default AlertDialogActivity;

component-docs/components/Installation.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import type { ComponentRegistry } from "@/schemas/registry";
+import { Code, Pre, Tabs, Steps } from "nextra/components";
+
+interface InstallationProps {
+  registry: ComponentRegistry;
+}
+
+const Heading3 = ({ children }: { children: React.ReactNode }) => (
+  <h3 className="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">
+    {children}
+  </h3>
+);
+
+/**
+ * @see https://github.com/shuding/nextra/blob/main/packages/nextra/src/components/pre.tsx
+ * @type {React.FC<InstallationProps>}
+ */
+export function Installation({ registry }: InstallationProps) {
+  return (
+    <Tabs items={["CLI", "Manual"]}>
+      <Tabs.Tab>
+        <Pre hasCopyCode data-language="sh" data-theme="default">
+          <Code lang="sh" data-language="sh" data-theme="default">
+            <span className="line">
+              <span style={{ color: "var(--shiki-token-function)" }}>npx </span>
+              <span style={{ color: "var(--shiki-token-string)" }}>@seed-design/cli@latest </span>
+              <span style={{ color: "var(--shiki-token-string)" }}>add </span>
+              <span style={{ color: "var(--shiki-token-string)" }}>{registry.name}</span>
+            </span>
+          </Code>
+        </Pre>
+      </Tabs.Tab>
+      <Tabs.Tab>
+        <Steps>
+          <Heading3>의존성 설치</Heading3>
+          <Pre hasCopyCode lang="sh" data-language="sh" data-theme="default">
+            <Code lang="sh" data-language="sh" data-theme="default">
+              <span className="line">
+                <span style={{ color: "var(--shiki-token-function)" }}>npm </span>
+                <span style={{ color: "var(--shiki-token-string)" }}>install </span>
+                <span style={{ color: "var(--shiki-token-string)" }}>
+                  {registry.dependencies.join(" ")}
+                </span>
+              </span>
+            </Code>
+          </Pre>
+
+          <Heading3>아래 코드를 복사 후 붙여넣고 사용하세요</Heading3>
+          {registry.registries.map((registry) => (
+            <Pre hasCopyCode filename={registry.name} key={registry.name}>
+              <Code>{registry.content}</Code>
+            </Pre>
+          ))}
+        </Steps>
+      </Tabs.Tab>
+    </Tabs>
+  );
+}

component-docs/components/Preview.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Tabs } from "nextra/components";
+
+interface PreviewProps {
+  component: React.ReactNode;
+}
+
+/**
+ * @description children에는 "코드"를 넣고, component에는 미리보기할 컴포넌트를 넣습니다.
+ */
+export const Preview = ({ children, component }: React.PropsWithChildren<PreviewProps>) => {
+  return (
+    <Tabs items={["미리보기", "코드"]}>
+      <Tabs.Tab>
+        <div
+          style={{
+            minHeight: "350px",
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "10px",
+          }}
+        >
+          {component}
+        </div>
+      </Tabs.Tab>
+      <Tabs.Tab>{children}</Tabs.Tab>
+    </Tabs>
+  );
+};

component-docs/components/Stackflow.tsx

@@ -0,0 +1,48 @@
+import { makeStack } from "@/stackflow";
+import { type ActivityComponentType } from "@stackflow/react/future";
+import { useSimpleReveal } from "simple-reveal";
+
+interface StackflowProps {
+  Activity: ActivityComponentType<"Main">;
+}
+
+export const Stackflow: React.FC<StackflowProps> = ({ Activity }) => {
+  const { Stack } = makeStack({ Activity });
+  const { cn, ref, style } = useSimpleReveal({
+    delay: 200,
+    rootMargin: "-400px",
+    initialTransform: "scale(0.95)",
+  });
+
+  return (
+    <div
+      ref={ref}
+      className={cn()}
+      style={{
+        position: "relative",
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        margin: "3rem 0",
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: "360px",
+          height: "640px",
+          position: "relative",
+          borderRadius: ".5rem",
+          overflow: "hidden",
+          transform: "translate3d(0, 0, 0)",
+          maskImage: "-webkit-radial-gradient(white, black)",
+          boxShadow: "0 .25rem 1rem 0 rgba(0, 0, 0, .1)",
+          border: "1px solid var(--seed-semantic-color-divider-1)",
+        }}
+      >
+        <Stack />
+      </div>
+    </div>
+  );
+};

component-docs/metadatas/component.mts → component-docs/metadatas/component.ts

@@ -1,4 +1,4 @@
-import type { ComponentMetadatas } from "../schemas/component";
+import type { ComponentMetadatas } from "../schemas/metadata";
 
 export const componentMetadatas: ComponentMetadatas = [
   {

component-docs/next.config.js

@@ -1,4 +1,6 @@
-const withNextra = require("nextra")({
+import nextra from "nextra";
+
+const withNextra = nextra({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.jsx",
 });
@@ -14,4 +16,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withNextra(nextConfig);
+export default withNextra(nextConfig);

component-docs/package.json

@@ -2,24 +2,36 @@
   "name": "component-docs",
   "packageManager": "[email protected]",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "start": "next start",
     "build": "yarn generate:registry && next build",
-    "build:content": "contentlayer2 build",
-    "generate:registry": "node --no-warnings=ExperimentalWarning --loader ts-node/esm scripts/generate-registry.mts"
+    "generate:registry": "node --no-warnings=ExperimentalWarning --loader ts-node/esm scripts/generate-registry.ts"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "@seed-design/design-token": "1.0.3",
+    "@seed-design/recipe": "0.0.0",
+    "@seed-design/stylesheet": "1.0.4",
+    "@stackflow/config": "^1.1.0",
+    "@stackflow/core": "^1.0.13",
+    "@stackflow/plugin-basic-ui": "^1.8.4",
+    "@stackflow/plugin-history-sync": "^1.6.0",
+    "@stackflow/plugin-renderer-basic": "^1.1.11",
+    "@stackflow/react": "^1.2.1",
     "next": "^14.2.5",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "simple-reveal": "^0.8.0",
     "ts-morph": "^23.0.0"
   },
   "devDependencies": {
+    "@seed-design/cli": "workspace:^",
     "@types/node": "^20.14.12",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "chalk": "^5.3.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.3",

component-docs/pages/_app.mdx

@@ -0,0 +1,8 @@
+import "@seed-design/stylesheet/token.css";
+import "@seed-design/stylesheet/global.css";
+import "@stackflow/plugin-basic-ui/index.css";
+import "simple-reveal/index.css";
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}