@spunto/design-system 0.10.0 → 0.11.1

package/src/components/projects/repo-list.tsx

@@ -0,0 +1,302 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { GitBranchIcon, Trash2Icon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { Button } from "../button"
+import { Input } from "../input"
+import type { ProjectRepo } from "./types"
+
+/** A repository the user can pick from a connected GitHub account. */
+export interface GithubRepoOption {
+  fullName: string
+  private?: boolean
+  installationId?: number
+}
+
+/** State of the org's GitHub App connection, as far as this list needs it. */
+export interface GithubConnection {
+  connected?: boolean
+  appSlug?: string
+  installedAccounts?: { login: string; avatarUrl?: string | null }[]
+}
+
+/**
+ * Renders the GitHub repository field. A slot, because a real combobox is an
+ * app-level dependency (the dashboard has a Base UI one): without it the list
+ * falls back to an `<input list>` + `<datalist>`, which needs nothing, works
+ * with a keyboard, and is honest about being a plain text field.
+ */
+export type RepoFieldRender = (props: {
+  value: string
+  onChange: (value: string) => void
+  options: GithubRepoOption[]
+  placeholder: string
+  id: string
+}) => ReactNode
+
+export interface RepoListProps {
+  repos: ProjectRepo[]
+  onChange: (repos: ProjectRepo[]) => void
+  /** Repositories reachable through the connected GitHub App. */
+  githubRepos?: GithubRepoOption[]
+  github?: GithubConnection
+  /** Where "Connect GitHub" points. The package knows no route of its own. */
+  connectUrl?: string
+  renderRepoField?: RepoFieldRender
+  /** Icon for GitHub rows — the app passes its brand glyph; defaults to a git branch. */
+  githubIcon?: ReactNode
+  className?: string
+}
+
+/** Human label + default workspace dir out of a raw clone URL. */
+export function deriveFromGitUrl(url: string): { label: string; repoName: string } {
+  const path = url
+    .trim()
+    .replace(/^git@[^:]+:/, "")
+    .replace(/^ssh:\/\/[^/]+\//, "")
+    .replace(/^https?:\/\/[^/]+\//, "")
+    .replace(/\.git$/, "")
+  const segments = path.split("/").filter(Boolean)
+  const repoName = segments[segments.length - 1] ?? ""
+  const label = segments.slice(-2).join("/") || path
+  return { label, repoName }
+}
+
+/**
+ * The repository field's slot in a row: its own full-width line on a phone,
+ * a shared column as soon as there's room for one.
+ */
+const ROW_LEAD = "relative min-w-0 basis-full @min-[30rem]/repos:basis-0 @min-[30rem]/repos:flex-1"
+
+let seq = 0
+/**
+ * Identity for a row that doesn't exist server-side yet. A counter rather than
+ * `crypto.randomUUID()`: it only has to be unique among the rows of one form,
+ * and a counter is stable under SSR, where `randomUUID` would hand the server
+ * and the client two different keys.
+ */
+function localRepoId(): string {
+  seq += 1
+  return `repo-${seq}`
+}
+
+/**
+ * The repositories a project clones into `/workspace`, one row each: where the
+ * code comes from, and the directory it lands in.
+ *
+ * **Fully controlled** — it never keeps a repo in local state. The one piece of
+ * cleverness it does keep is `workspacePathTouched`: the path follows the repo
+ * name while you're picking a repo, and stops the moment you type your own.
+ * Without that flag, choosing a repo silently overwrites a path you had set.
+ */
+export function RepoList({
+  repos,
+  onChange,
+  githubRepos = [],
+  github,
+  connectUrl,
+  renderRepoField,
+  githubIcon,
+  className,
+}: RepoListProps) {
+  const hasGithubRepos = githubRepos.length > 0
+  const hasGitRepos = repos.some((r) => r.provider === "git")
+
+  const patch = (id: string, next: Partial<ProjectRepo>) =>
+    onChange(repos.map((r) => (r.id === id ? { ...r, ...next } : r)))
+
+  function setProject(repo: ProjectRepo, value: string) {
+    const repoName = value.split("/")[1] ?? value
+    patch(repo.id, {
+      project: value,
+      // Tag the row with the installation that grants access, so a worker clones
+      // it with the right token when the org connected several GitHub accounts.
+      installationId: githubRepos.find((r) => r.fullName === value)?.installationId,
+      ...(repo.workspacePathTouched ? {} : { workspacePath: repoName }),
+    })
+  }
+
+  function setCloneUrl(repo: ProjectRepo, value: string) {
+    const { label, repoName } = deriveFromGitUrl(value)
+    patch(repo.id, {
+      cloneUrl: value,
+      project: label,
+      ...(repo.workspacePathTouched ? {} : { workspacePath: repoName }),
+    })
+  }
+
+  return (
+    <div className={cn("@container/repos space-y-2", className)}>
+      {repos.length > 0 && (
+        <div className="mb-1 hidden grid-cols-[1fr_1fr_auto] gap-2 px-1 text-xs text-muted-foreground @min-[30rem]/repos:grid">
+          <span>Repository</span>
+          <span>Workspace path</span>
+          <span />
+        </div>
+      )}
+
+      {repos.map((repo) => (
+        // `flex-wrap` + `basis-full`, not a grid: at phone width the two-column
+        // grid gave the `auto` track to the workspace-path input, which sized to
+        // its content and squeezed the repository field down to its icon. Here
+        // the repository takes a full row of its own until there's room, and the
+        // path + bin share the next one.
+        <div key={repo.id} className="flex flex-wrap items-center gap-2">
+          {repo.provider === "git" ? (
+            <div className={ROW_LEAD}>
+              <GitBranchIcon className="absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                className="pl-8 font-mono text-xs"
+                placeholder="git@gitlab.com:group/repo.git"
+                value={repo.cloneUrl ?? ""}
+                onChange={(e) => setCloneUrl(repo, e.target.value)}
+              />
+            </div>
+          ) : renderRepoField && hasGithubRepos ? (
+            <div className={ROW_LEAD}>
+              {renderRepoField({
+              value: repo.project,
+              onChange: (value) => setProject(repo, value),
+              options: githubRepos,
+                placeholder: "Search or type owner/repo…",
+                id: repo.id,
+              })}
+            </div>
+          ) : (
+            <div className={cn(ROW_LEAD, "relative")}>
+              <span className="absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground">
+                {githubIcon ?? <GitBranchIcon className="h-3.5 w-3.5" />}
+              </span>
+              <Input
+                className="pl-8"
+                list={hasGithubRepos ? `repos-${repo.id}` : undefined}
+                placeholder="owner/repo"
+                value={repo.project}
+                onChange={(e) => setProject(repo, e.target.value)}
+              />
+              {hasGithubRepos && (
+                <datalist id={`repos-${repo.id}`}>
+                  {githubRepos.map((r) => (
+                    <option key={r.fullName} value={r.fullName} />
+                  ))}
+                </datalist>
+              )}
+            </div>
+          )}
+
+          <Input
+            placeholder="e.g. app"
+            aria-label="Workspace path"
+            className="min-w-0 flex-1"
+            value={repo.workspacePath}
+            onChange={(e) => patch(repo.id, { workspacePath: e.target.value, workspacePathTouched: true })}
+          />
+
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="shrink-0"
+            aria-label={`Remove ${repo.project || "repository"}`}
+            onClick={() => onChange(repos.filter((r) => r.id !== repo.id))}
+          >
+            <Trash2Icon className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+
+      <div className="flex flex-wrap gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            onChange([...repos, { id: localRepoId(), provider: "github", project: "", workspacePath: "" }])
+          }
+        >
+          <span className="mr-1 flex h-4 w-4 items-center justify-center">
+            {githubIcon ?? <GitBranchIcon className="h-4 w-4" />}
+          </span>
+          Add GitHub repo
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            onChange([...repos, { id: localRepoId(), provider: "git", project: "", workspacePath: "", cloneUrl: "" }])
+          }
+        >
+          <GitBranchIcon className="mr-1 h-4 w-4" />
+          Add Git URL
+        </Button>
+      </div>
+
+      <p className="text-xs text-muted-foreground">
+        Cloned into <code>/workspace/&lt;path&gt;</code> at worker startup.{" "}
+        {connectUrl &&
+          (github?.connected ? (
+            <a href={connectUrl} className="underline underline-offset-2">
+              Reconnect GitHub
+            </a>
+          ) : (
+            <>
+              <a href={connectUrl} className="underline underline-offset-2">
+                Connect GitHub
+              </a>{" "}
+              to enable private repos for this organization.
+            </>
+          ))}
+      </p>
+
+      {hasGitRepos && (
+        <p className="rounded-md border border-dashed p-3 text-xs text-muted-foreground">
+          Git URL repos (GitLab, Gitea, Bitbucket, self-hosted…) are cloned with this project&apos;s SSH{" "}
+          <strong>deploy key</strong>. After saving, register the public key shown on the project page as a{" "}
+          <strong>read-only</strong> deploy key on each repo. <code>https://</code> URLs to public repos work
+          without a key.
+        </p>
+      )}
+
+      {github?.connected && github.installedAccounts && github.installedAccounts.length > 0 && (
+        <div className="space-y-2 rounded-md border border-dashed p-3">
+          <p className="text-xs font-medium">GitHub App installed on:</p>
+          <div className="flex flex-wrap gap-2">
+            {github.installedAccounts.map((account) => (
+              <span key={account.login} className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs">
+                {account.avatarUrl && (
+                  <img src={account.avatarUrl} alt="" className="h-4 w-4 rounded-sm" />
+                )}
+                {account.login}
+              </span>
+            ))}
+          </div>
+          {github.appSlug && (
+            <p className="text-xs text-muted-foreground">
+              <a
+                href={`https://github.com/apps/${github.appSlug}/installations/new`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline underline-offset-2"
+              >
+                Install on another account
+              </a>{" "}
+              to access more repos
+              {connectUrl && (
+                <>
+                  , then{" "}
+                  <a href={connectUrl} className="underline underline-offset-2">
+                    reconnect
+                  </a>
+                </>
+              )}
+              .
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/projects/secret-list.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import { useState } from "react"
+import { PlusIcon, Trash2Icon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { Input } from "../input"
+import type { ProjectSecretDraft, ProjectSecretRef } from "./types"
+
+/** Env var names, the shell convention: `MY_SECRET`, never `my-secret`. */
+const NAME_PATTERN = /^[A-Z][A-Z0-9_]*$/
+
+export interface SecretListProps {
+  /** Secrets typed in this session, values still in memory. */
+  drafts: ProjectSecretDraft[]
+  onDraftsChange: (drafts: ProjectSecretDraft[]) => void
+  /** Already-saved secrets. Values are never returned by an API — only names show. */
+  saved?: ProjectSecretRef[]
+  /** Ids of saved secrets staged for removal; they disappear from the list. */
+  removedIds?: string[]
+  onRemovedIdsChange?: (ids: string[]) => void
+  hint?: string
+  className?: string
+}
+
+let seq = 0
+
+/**
+ * The env vars injected into every workspace: a list of names, and a row to add
+ * one.
+ *
+ * A secret is write-only by nature — the API never returns a value — so the list
+ * shows names alone and the two states are told apart by colour: saved ones are
+ * neutral, the ones you just typed are flame, because they only exist in this
+ * page until you submit.
+ *
+ * Validation lives here rather than in the parent form: the name rule is a
+ * property of a secret, not of the screen it's typed on.
+ */
+export function SecretList({
+  drafts,
+  onDraftsChange,
+  saved = [],
+  removedIds = [],
+  onRemovedIdsChange,
+  hint,
+  className,
+}: SecretListProps) {
+  const [name, setName] = useState("")
+  const [value, setValue] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  const visible = saved.filter((s) => !removedIds.includes(s.id))
+
+  function add() {
+    setError(null)
+    const key = name.trim().toUpperCase()
+    if (!key || !value.trim()) return
+    if (!NAME_PATTERN.test(key)) {
+      setError("UPPER_SNAKE_CASE required (e.g. MY_SECRET)")
+      return
+    }
+    if (visible.some((s) => s.name === key) || drafts.some((s) => s.name === key)) {
+      setError(`${key} is already set`)
+      return
+    }
+    seq += 1
+    onDraftsChange([...drafts, { localId: `secret-${seq}`, name: key, value: value.trim() }])
+    setName("")
+    setValue("")
+  }
+
+  return (
+    <div className={cn("@container/secrets space-y-3", className)}>
+      {(visible.length > 0 || drafts.length > 0) && (
+        <div className="space-y-1.5">
+          {visible.map((secret) => (
+            <Row
+              key={secret.id}
+              name={secret.name}
+              onRemove={onRemovedIdsChange ? () => onRemovedIdsChange([...removedIds, secret.id]) : undefined}
+            />
+          ))}
+          {drafts.map((secret) => (
+            <Row
+              key={secret.localId}
+              name={secret.name}
+              pending
+              onRemove={() => onDraftsChange(drafts.filter((s) => s.localId !== secret.localId))}
+            />
+          ))}
+        </div>
+      )}
+
+      <div className="space-y-1.5">
+        {/* Same reason as RepoList: a two-column grid handed the `auto` track to
+            the value field, which squeezed NAME down to two characters on a
+            phone. Wrapping gives NAME its own line until both fit. */}
+        <div className="flex flex-wrap items-end gap-2">
+          <Input
+            placeholder="NAME"
+            aria-label="Secret name"
+            value={name}
+            spellCheck={false}
+            className="h-8 min-w-0 basis-full font-mono text-sm @min-[26rem]/secrets:basis-0 @min-[26rem]/secrets:flex-1"
+            onChange={(e) => setName(e.target.value.toUpperCase())}
+            onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), add())}
+          />
+          <Input
+            type="password"
+            placeholder="value"
+            aria-label="Secret value"
+            value={value}
+            autoComplete="off"
+            className="h-8 min-w-0 flex-1 font-mono text-sm"
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), add())}
+          />
+          {/* `type="button"`: this sits inside the project form, and a bare
+              button would submit the whole thing on Enter. */}
+          <button
+            type="button"
+            onClick={add}
+            aria-label="Add secret"
+            className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          >
+            <PlusIcon className="h-3.5 w-3.5" />
+          </button>
+        </div>
+        {error && <p className="text-xs text-destructive">{error}</p>}
+      </div>
+
+      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+    </div>
+  )
+}
+
+function Row({ name, pending = false, onRemove }: { name: string; pending?: boolean; onRemove?: () => void }) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between gap-3 rounded-md border px-3 py-2",
+        pending ? "border-primary/30 bg-primary/5" : "bg-muted/30"
+      )}
+    >
+      <code className={cn("truncate font-mono text-sm", pending && "text-primary")}>{name}</code>
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${name}`}
+          className="shrink-0 cursor-pointer text-muted-foreground transition-colors hover:text-destructive"
+        >
+          <Trash2Icon className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/projects/types.ts

@@ -0,0 +1,136 @@
+// The shape a project form edits, and nothing more.
+//
+// Same rule as the rest of the package: this is NOT an app's OpenAPI type. The
+// dashboard's create payload and its update payload already differ from each
+// other (creation has no ports/prewarm/dind, update has no inline secrets), and
+// Spunto Lite's project is smaller still. So the form owns one **complete**
+// value — every field present, never undefined — and each app maps it to its own
+// payload on submit. A complete value is what makes the form controllable
+// without a single `?? ""` at every input.
+
+/** One repository to clone into the workspace. */
+export interface ProjectRepo {
+  /** Client-side identity, stable across re-renders. Not the API's id. */
+  id: string
+  /** `github` resolves through the connected GitHub App; `git` clones a raw URL with the deploy key. */
+  provider: "github" | "git"
+  /** `owner/repo` for GitHub, a human label for a raw URL. */
+  project: string
+  /** Directory under `/workspace`. Auto-derived from the repo name until the user edits it. */
+  workspacePath: string
+  /**
+   * True once the user typed their own path — the form then stops re-deriving it.
+   * Without it, picking a repo silently overwrites a path the user had set.
+   */
+  workspacePathTouched?: boolean
+  /** Which GitHub App installation grants access (an org can connect several). */
+  installationId?: number
+  /** Raw clone URL, `git` provider only. */
+  cloneUrl?: string
+}
+
+/** A devcontainer feature, as the form carries it. */
+export interface ProjectFeatureSelection {
+  id: string
+  /** Set for a hand-typed OCI ref that isn't in the catalog. */
+  ociRef?: string
+  options?: Record<string, string>
+}
+
+/** A secret the user typed but that isn't saved yet. Values never come back from an API. */
+export interface ProjectSecretDraft {
+  /** Client-side identity — a secret has no id until it's persisted. */
+  localId: string
+  name: string
+  value: string
+}
+
+/** A secret that already exists server-side. The form can only remove it. */
+export interface ProjectSecretRef {
+  id: string
+  name: string
+}
+
+/** Everything the form edits. Every field is present — see the note at the top. */
+export interface ProjectFormValue {
+  name: string
+  description: string
+  image: string
+  repositories: ProjectRepo[]
+  features: ProjectFeatureSelection[]
+  vscodeExtensions: string[]
+  postCreateCommand: string
+  postStartCommand: string
+  /** Secrets typed in this session. */
+  secrets: ProjectSecretDraft[]
+  /** Ids of already-saved secrets the user asked to remove. */
+  removedSecretIds: string[]
+  forwardPorts: number[]
+  prewarmImages: string[]
+  dockerInDocker: boolean
+}
+
+export type ProjectFormSectionId =
+  | "identity"
+  | "image"
+  | "repositories"
+  | "features"
+  | "extensions"
+  | "lifecycle"
+  | "ports"
+  | "prewarm"
+  | "docker"
+  | "secrets"
+
+/** Creation: the seven sections that matter before a project exists. */
+export const CREATE_SECTIONS: ProjectFormSectionId[] = [
+  "identity",
+  "image",
+  "repositories",
+  "features",
+  "extensions",
+  "lifecycle",
+  "secrets",
+]
+
+/** Editing: everything, including the runtime knobs you only tune once it runs. */
+export const EDIT_SECTIONS: ProjectFormSectionId[] = [
+  "identity",
+  "image",
+  "repositories",
+  "features",
+  "extensions",
+  "lifecycle",
+  "ports",
+  "prewarm",
+  "docker",
+  "secrets",
+]
+
+/** An empty, complete value — the starting point of a creation form. */
+export function emptyProjectFormValue(): ProjectFormValue {
+  return {
+    name: "",
+    description: "",
+    image: "",
+    repositories: [],
+    features: [],
+    vscodeExtensions: [],
+    postCreateCommand: "",
+    postStartCommand: "",
+    secrets: [],
+    removedSecretIds: [],
+    forwardPorts: [],
+    prewarmImages: [],
+    dockerInDocker: false,
+  }
+}
+
+/**
+ * Fill the gaps of a partial value — what an app has after mapping an existing
+ * project, where half the fields are nullable. Keeps the form's "everything is
+ * present" invariant without pushing a dozen `?? ""` onto every caller.
+ */
+export function toProjectFormValue(partial?: Partial<ProjectFormValue> | null): ProjectFormValue {
+  return { ...emptyProjectFormValue(), ...(partial ?? {}) }
+}

package/styles.css

@@ -513,3 +513,16 @@
   [data-slot="image-pull-sweep"] { animation: none; opacity: 0.45; }
   [data-slot="image-pull"] * { transition-duration: 0.01ms !important; }
 }
+
+/* ---------------------------------------------------------------------------
+   FormSection — entrance.
+   A long form arrives as a stack of cards; each one lifts in slightly after the
+   previous (the delay is an inline style, since it depends on the section's
+   index). Deliberately CSS and not a motion library: the package won't take a
+   dependency on one for a single fade-in, and `motion-safe:` already gates it
+   on the user's reduced-motion setting.
+--------------------------------------------------------------------------- */
+@keyframes form-section-in {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: none; }
+}