create-skaff 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skaff",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Interactive Next.js project scaffolder: Tailwind, shadcn/ui, Motion, Lucide, Oxlint, Oxfmt, Ultracite, Claude and Codex config",
   "type": "module",
   "bin": {

package/src/components/answered-row.tsx

@@ -0,0 +1,15 @@
+type AnsweredRowProps = { label: string; value: string };
+
+export function AnsweredRow({ label, value }: AnsweredRowProps) {
+  return (
+    <box flexDirection="column">
+      <text>
+        <span fg="#4ade80">◇</span>  {label}
+      </text>
+      <text>
+        <span fg="#555555">│</span>  <span fg="#888888">{value}</span>
+      </text>
+      <text fg="#555555">│</text>
+    </box>
+  );
+}

package/src/components/confirm-prompt.tsx

@@ -0,0 +1,17 @@
+import { type ScaffoldConfig, projectDir } from "../lib/scaffold-steps";
+
+type ConfirmPromptProps = { config: ScaffoldConfig };
+
+export function ConfirmPrompt({ config }: ConfirmPromptProps) {
+  return (
+    <box flexDirection="column">
+      <text>
+        <span fg="#a78bfa">◆</span>  <strong>Scaffold into {projectDir(config)}?</strong>
+      </text>
+      <text>
+        <span fg="#a78bfa">│  </span>
+        <span fg="#666666">Enter to start · Esc to go back</span>
+      </text>
+    </box>
+  );
+}

package/src/components/name-prompt.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+type NamePromptProps = { initialValue: string; onSubmit: (name: string) => void };
+
+export function NamePrompt({ initialValue, onSubmit }: NamePromptProps) {
+  const [value, setValue] = useState(initialValue);
+  const name = value.trim();
+  const valid = name === "." || /^[a-z0-9][a-z0-9._-]*$/.test(name);
+  return (
+    <box flexDirection="column">
+      <text>
+        <span fg="#a78bfa">◆</span>  <strong>Project name</strong>
+      </text>
+      <box flexDirection="row">
+        <text fg="#a78bfa">│  </text>
+        <box width={40}>
+          <input
+            focused
+            placeholder="my-app or . for the current directory"
+            value={initialValue}
+            onInput={setValue}
+            onSubmit={() => {
+              if (valid) {
+                onSubmit(name);
+              }
+            }}
+          />
+        </box>
+      </box>
+      <text>
+        <span fg="#a78bfa">│  </span>
+        <span fg={valid || name === "" ? "#666666" : "#f87171"}>lowercase letters, numbers, dots, dashes · Enter to continue</span>
+      </text>
+    </box>
+  );
+}

package/src/components/package-manager-prompt.tsx

@@ -0,0 +1,38 @@
+import { useKeyboard } from "@opentui/react";
+import { useState } from "react";
+import { type PackageManager, packageManagers } from "../lib/package-manager";
+
+type PackageManagerPromptProps = { initialValue: PackageManager; onSelect: (packageManager: PackageManager) => void };
+
+export function PackageManagerPrompt({ initialValue, onSelect }: PackageManagerPromptProps) {
+  const [index, setIndex] = useState(Math.max(0, packageManagers.indexOf(initialValue)));
+
+  useKeyboard((key) => {
+    if (key.name === "up" || key.name === "k") {
+      setIndex((current) => (current + packageManagers.length - 1) % packageManagers.length);
+    } else if (key.name === "down" || key.name === "j") {
+      setIndex((current) => (current + 1) % packageManagers.length);
+    } else if (key.name === "return") {
+      onSelect(packageManagers[index]);
+    }
+  });
+
+  return (
+    <box flexDirection="column">
+      <text>
+        <span fg="#a78bfa">◆</span>  <strong>Package manager</strong>
+      </text>
+      {packageManagers.map((value, i) => (
+        <text key={value}>
+          <span fg="#a78bfa">│  </span>
+          {i === index ? <span fg="#4ade80">◉ </span> : <span fg="#555555">○ </span>}
+          <span fg={i === index ? "#ffffff" : "#888888"}>{value}</span>
+        </text>
+      ))}
+      <text>
+        <span fg="#a78bfa">│  </span>
+        <span fg="#666666">↑↓ to move · Enter to continue · Esc to go back</span>
+      </text>
+    </box>
+  );
+}

package/src/components/progress-timeline.tsx

@@ -0,0 +1,40 @@
+import { useKeyboard } from "@opentui/react";
+import { useScaffoldRunner } from "../lib/hooks/use-scaffold-runner";
+import type { ScaffoldConfig } from "../lib/scaffold-steps";
+import { StepRow } from "./step-row";
+
+type ProgressTimelineProps = { config: ScaffoldConfig; onExit: () => void };
+
+export function ProgressTimeline({ config, onExit }: ProgressTimelineProps) {
+  const { steps, finished, error } = useScaffoldRunner(config);
+  useKeyboard((key) => {
+    if (finished && (key.name === "q" || key.name === "return")) {
+      onExit();
+    }
+  });
+  return (
+    <box flexDirection="column">
+      {steps.map((step) => (
+        <StepRow key={step.id} step={step} />
+      ))}
+      {error ? (
+        <box flexDirection="column">
+          <text>
+            <span fg="#f87171">└  Failed</span>
+          </text>
+          <text fg="#f87171">{error}</text>
+        </box>
+      ) : null}
+      {finished && !error ? (
+        <box flexDirection="column">
+          <text>
+            <span fg="#4ade80">└  Done.</span> <span fg="#888888">Next steps:</span>
+          </text>
+          {config.name === "." ? null : <text>{`   cd ${config.name}`}</text>}
+          <text>{`   ${config.packageManager} run dev`}</text>
+        </box>
+      ) : null}
+      {finished ? <text fg="#666666">Enter or q to exit</text> : null}
+    </box>
+  );
+}

package/src/components/step-row.tsx

@@ -1,10 +1,10 @@
 import type { StepState } from "../lib/hooks/use-scaffold-runner";
 
 const glyphs: Record<StepState["status"], { icon: string; color: string }> = {
-  pending: { icon: "○", color: "#666666" },
-  running: { icon: "◐", color: "#facc15" },
-  done: { icon: "●", color: "#4ade80" },
-  failed: { icon: "✕", color: "#f87171" },
+  pending: { icon: "○", color: "#555555" },
+  running: { icon: "◆", color: "#facc15" },
+  done: { icon: "◇", color: "#4ade80" },
+  failed: { icon: "■", color: "#f87171" },
 };
 
 type StepRowProps = { step: StepState };
@@ -14,11 +14,12 @@ export function StepRow({ step }: StepRowProps) {
   return (
     <box flexDirection="column">
       <text>
-        <span fg={glyph.color}>{glyph.icon}</span> {step.label}
+        <span fg={glyph.color}>{glyph.icon}</span>  <span fg={step.status === "pending" ? "#666666" : "#ffffff"}>{step.label}</span>
+      </text>
+      <text>
+        <span fg="#555555">│  </span>
+        <span fg="#666666">{step.status === "running" ? step.lastLine.slice(0, 80) : ""}</span>
       </text>
-      {step.status === "running" && step.lastLine ? (
-        <text fg="#888888">{`    ${step.lastLine.slice(0, 80)}`}</text>
-      ) : null}
     </box>
   );
 }

package/src/components/wizard-app.tsx

@@ -2,10 +2,11 @@ import { useKeyboard, useRenderer } from "@opentui/react";
 import { useState } from "react";
 import type { PackageManager } from "../lib/package-manager";
 import type { ScaffoldConfig } from "../lib/scaffold-steps";
-import { ConfirmStep } from "./confirm-step";
-import { NameStep } from "./name-step";
-import { PackageManagerStep } from "./package-manager-step";
-import { ProgressStep } from "./progress-step";
+import { AnsweredRow } from "./answered-row";
+import { ConfirmPrompt } from "./confirm-prompt";
+import { NamePrompt } from "./name-prompt";
+import { PackageManagerPrompt } from "./package-manager-prompt";
+import { ProgressTimeline } from "./progress-timeline";
 
 type Screen = "name" | "packageManager" | "confirm" | "progress";
 
@@ -40,13 +41,19 @@ export function WizardApp({ initialName, cwd }: WizardAppProps) {
     }
   });
 
+  const nameAnswered = screen !== "name";
+  const packageManagerAnswered = screen === "confirm" || screen === "progress";
+
   return (
-    <box flexDirection="column" padding={1} gap={1}>
+    <box flexDirection="column" paddingLeft={1} paddingTop={1}>
       <text>
-        <strong fg="#a78bfa">skaff</strong> <span fg="#888888">· Next.js scaffolder</span>
+        <span fg="#555555">┌</span>  <strong fg="#a78bfa">skaff</strong> <span fg="#888888">· Next.js scaffolder</span>
       </text>
+      <text fg="#555555">│</text>
+      {nameAnswered ? <AnsweredRow label="Project name" value={name} /> : null}
+      {packageManagerAnswered ? <AnsweredRow label="Package manager" value={packageManager} /> : null}
       {screen === "name" ? (
-        <NameStep
+        <NamePrompt
           initialValue={name}
           onSubmit={(value) => {
             setName(value);
@@ -55,15 +62,16 @@ export function WizardApp({ initialName, cwd }: WizardAppProps) {
         />
       ) : null}
       {screen === "packageManager" ? (
-        <PackageManagerStep
+        <PackageManagerPrompt
+          initialValue={packageManager}
           onSelect={(value) => {
             setPackageManager(value);
             setScreen("confirm");
           }}
         />
       ) : null}
-      {screen === "confirm" ? <ConfirmStep config={{ name, packageManager, cwd }} /> : null}
-      {screen === "progress" && config ? <ProgressStep config={config} onExit={exit} /> : null}
+      {screen === "confirm" ? <ConfirmPrompt config={{ name, packageManager, cwd }} /> : null}
+      {screen === "progress" && config ? <ProgressTimeline config={config} onExit={exit} /> : null}
     </box>
   );
 }

package/src/components/confirm-step.tsx

@@ -1,33 +0,0 @@
-import type { ScaffoldConfig } from "../lib/scaffold-steps";
-import { projectDir, scaffoldSteps } from "../lib/scaffold-steps";
-
-type ConfirmStepProps = { config: ScaffoldConfig };
-
-export function ConfirmStep({ config }: ConfirmStepProps) {
-  return (
-    <box flexDirection="column" gap={1}>
-      <text>
-        <strong>Ready to scaffold</strong>
-      </text>
-      <box flexDirection="column" border borderStyle="rounded" paddingLeft={1} paddingRight={1}>
-        <text>
-          name: <span fg="#7dd3fc">{config.name}</span>
-        </text>
-        <text>
-          package manager: <span fg="#7dd3fc">{config.packageManager}</span>
-        </text>
-        <text>
-          directory: <span fg="#7dd3fc">{projectDir(config)}</span>
-        </text>
-      </box>
-      <box flexDirection="column">
-        {scaffoldSteps.map((step) => (
-          <text key={step.id} fg="#aaaaaa">
-            · {step.label}
-          </text>
-        ))}
-      </box>
-      <text fg="#888888">Enter to start · Esc to go back</text>
-    </box>
-  );
-}

package/src/components/name-step.tsx

@@ -1,30 +0,0 @@
-import { useState } from "react";
-
-type NameStepProps = { initialValue: string; onSubmit: (name: string) => void };
-
-export function NameStep({ initialValue, onSubmit }: NameStepProps) {
-  const [value, setValue] = useState(initialValue);
-  const name = value.trim();
-  const valid = name === "." || /^[a-z0-9][a-z0-9._-]*$/.test(name);
-  return (
-    <box flexDirection="column" gap={1}>
-      <text>
-        <strong>Project name</strong>
-      </text>
-      <box border borderStyle="rounded" paddingLeft={1} paddingRight={1} width={40}>
-        <input
-          focused
-          placeholder="my-app"
-          value={initialValue}
-          onInput={setValue}
-          onSubmit={() => {
-            if (valid) {
-              onSubmit(name);
-            }
-          }}
-        />
-      </box>
-      <text fg="#888888">lowercase letters, numbers, dots, dashes, or . for the current directory · Enter to continue</text>
-    </box>
-  );
-}

package/src/components/package-manager-step.tsx

@@ -1,29 +0,0 @@
-import type { SelectOption } from "@opentui/core";
-import { type PackageManager, packageManagers } from "../lib/package-manager";
-
-type PackageManagerStepProps = { onSelect: (packageManager: PackageManager) => void };
-
-const options: SelectOption[] = packageManagers.map((value) => ({ name: value, value, description: "" }));
-
-export function PackageManagerStep({ onSelect }: PackageManagerStepProps) {
-  return (
-    <box flexDirection="column" gap={1}>
-      <text>
-        <strong>Package manager</strong>
-      </text>
-      <box border borderStyle="rounded" width={40} height={5}>
-        <select
-          focused
-          options={options}
-          showDescription={false}
-          onSelect={(_index, option) => {
-            if (option && packageManagers.includes(option.value as PackageManager)) {
-              onSelect(option.value as PackageManager);
-            }
-          }}
-        />
-      </box>
-      <text fg="#888888">↑↓ to move · Enter to continue · Esc to go back</text>
-    </box>
-  );
-}

package/src/components/progress-step.tsx

@@ -1,40 +0,0 @@
-import { useKeyboard } from "@opentui/react";
-import { useScaffoldRunner } from "../lib/hooks/use-scaffold-runner";
-import type { ScaffoldConfig } from "../lib/scaffold-steps";
-import { StepRow } from "./step-row";
-
-type ProgressStepProps = { config: ScaffoldConfig; onExit: () => void };
-
-export function ProgressStep({ config, onExit }: ProgressStepProps) {
-  const { steps, finished, error } = useScaffoldRunner(config);
-  useKeyboard((key) => {
-    if (finished && (key.name === "q" || key.name === "return")) {
-      onExit();
-    }
-  });
-  return (
-    <box flexDirection="column" gap={1}>
-      <text>
-        <strong>{finished ? (error ? "Failed" : "Done") : "Scaffolding…"}</strong>
-      </text>
-      <box flexDirection="column">
-        {steps.map((step) => (
-          <StepRow key={step.id} step={step} />
-        ))}
-      </box>
-      {error ? (
-        <box border borderStyle="rounded" borderColor="#f87171" paddingLeft={1} paddingRight={1}>
-          <text fg="#f87171">{error}</text>
-        </box>
-      ) : null}
-      {finished && !error ? (
-        <box flexDirection="column">
-          <text fg="#4ade80">Next steps:</text>
-          {config.name === "." ? null : <text>{`  cd ${config.name}`}</text>}
-          <text>{`  ${config.packageManager} run dev`}</text>
-        </box>
-      ) : null}
-      <text fg="#888888">{finished ? "Enter or q to exit" : "running… Ctrl+C to abort"}</text>
-    </box>
-  );
-}