create-rezi 0.1.0-alpha.1

package/templates/form-app/src/main.ts

@@ -0,0 +1,223 @@
+import { createApp, rgb, ui } from "@rezi-ui/core";
+import { createNodeBackend } from "@rezi-ui/node";
+
+type Plan = "starter" | "growth" | "enterprise";
+
+type State = {
+  section: number;
+  name: string;
+  email: string;
+  company: string;
+  plan: Plan;
+  seats: string;
+  newsletter: boolean;
+  notes: string;
+  status: string;
+};
+
+const sections = ["Profile", "Plan", "Review"] as const;
+
+const initialState: State = {
+  section: 0,
+  name: "",
+  email: "",
+  company: "",
+  plan: "growth",
+  seats: "5",
+  newsletter: true,
+  notes: "",
+  status: "Draft",
+};
+
+const app = createApp<State>({
+  backend: createNodeBackend(),
+  initialState,
+});
+
+const colors = {
+  accent: rgb(116, 200, 255),
+  muted: rgb(140, 150, 170),
+  panel: rgb(18, 22, 34),
+  panelAlt: rgb(22, 28, 44),
+  ok: rgb(130, 220, 170),
+  ink: rgb(10, 14, 24),
+};
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function panel(title: string, children: ReturnType<typeof ui.column>[], flex = 1) {
+  return ui.box(
+    {
+      title,
+      flex,
+      border: "rounded",
+      px: 1,
+      py: 0,
+      style: { bg: colors.panel, fg: colors.muted },
+    },
+    children,
+  );
+}
+
+app.view((state) => {
+  return ui.column({ flex: 1, p: 1, gap: 1, items: "stretch" }, [
+    ui.row({ justify: "between", items: "center" }, [
+      ui.text("__APP_NAME__", { fg: colors.accent, bold: true }),
+      ui.text(`Status: ${state.status}`, { fg: colors.ok, bold: true }),
+    ]),
+
+    ui.row({ flex: 1, gap: 1, items: "stretch" }, [
+      panel(
+        "Sections",
+        [
+          ui.column(
+            { gap: 0 },
+            sections.map((label, index) => {
+              const active = index === state.section;
+              return ui.text(`${active ? ">" : " "} ${label}`, {
+                key: label,
+                fg: active ? colors.accent : colors.muted,
+                bold: active,
+              });
+            }),
+          ),
+        ],
+        1,
+      ),
+
+      panel(
+        "Customer Details",
+        [
+          ui.column({ gap: 1 }, [
+            ui.field({
+              label: "Name",
+              required: true,
+              children: ui.input({
+                id: "name",
+                value: state.name,
+                placeholder: "Ada Lovelace",
+                onInput: (value) => app.update((s) => ({ ...s, name: value })),
+              }),
+            }),
+            ui.field({
+              label: "Email",
+              required: true,
+              children: ui.input({
+                id: "email",
+                value: state.email,
+                placeholder: "ada@lovelace.io",
+                onInput: (value) => app.update((s) => ({ ...s, email: value })),
+              }),
+            }),
+            ui.field({
+              label: "Company",
+              children: ui.input({
+                id: "company",
+                value: state.company,
+                placeholder: "Analytical Engines Ltd",
+                onInput: (value) => app.update((s) => ({ ...s, company: value })),
+              }),
+            }),
+            ui.field({
+              label: "Plan",
+              children: ui.select({
+                id: "plan",
+                value: state.plan,
+                options: [
+                  { value: "starter", label: "Starter" },
+                  { value: "growth", label: "Growth" },
+                  { value: "enterprise", label: "Enterprise" },
+                ],
+                onChange: (value) => app.update((s) => ({ ...s, plan: value as Plan })),
+              }),
+            }),
+            ui.field({
+              label: "Seats",
+              children: ui.input({
+                id: "seats",
+                value: state.seats,
+                onInput: (value) => app.update((s) => ({ ...s, seats: value })),
+              }),
+            }),
+            ui.checkbox({
+              id: "newsletter",
+              label: "Subscribe to release notes",
+              checked: state.newsletter,
+              onChange: (checked) => app.update((s) => ({ ...s, newsletter: checked })),
+            }),
+          ]),
+        ],
+        2,
+      ),
+
+      panel(
+        "Preview",
+        [
+          ui.column({ gap: 1 }, [
+            ui.text("Summary", { fg: colors.accent, bold: true }),
+            ui.text(`Name: ${state.name || "-"}`),
+            ui.text(`Email: ${state.email || "-"}`),
+            ui.text(`Company: ${state.company || "-"}`),
+            ui.text(`Plan: ${state.plan}`),
+            ui.text(`Seats: ${state.seats || "-"}`),
+            ui.text(`Newsletter: ${state.newsletter ? "Yes" : "No"}`),
+            ui.divider({ char: "-" }),
+            ui.text("Notes"),
+            ui.text(state.notes || "Add internal notes in Review."),
+            ui.button({
+              id: "save",
+              label: "Save draft",
+              onPress: () =>
+                app.update((s) => ({
+                  ...s,
+                  status: `Saved at ${new Date().toLocaleTimeString()}`,
+                })),
+            }),
+          ]),
+        ],
+        1,
+      ),
+    ]),
+
+    ui.box({ px: 1, py: 0, style: { bg: colors.ink, fg: colors.muted } }, [
+      ui.row({ justify: "between", items: "center" }, [
+        ui.text("Form flow ready"),
+        ui.row({ gap: 1 }, [
+          ui.kbd("tab"),
+          ui.text("Focus"),
+          ui.kbd("ctrl+s"),
+          ui.text("Save"),
+          ui.kbd("ctrl+r"),
+          ui.text("Reset"),
+          ui.kbd("q"),
+          ui.text("Quit"),
+        ]),
+      ]),
+    ]),
+  ]);
+});
+
+app.keys({
+  q: () => app.stop(),
+  "ctrl+c": () => app.stop(),
+  "ctrl+s": () =>
+    app.update((s) => ({
+      ...s,
+      status: `Saved at ${new Date().toLocaleTimeString()}`,
+    })),
+  "ctrl+r": () => app.update(() => ({ ...initialState })),
+  "ctrl+up": () =>
+    app.update((s) => ({
+      ...s,
+      section: clamp(s.section - 1, 0, sections.length - 1),
+    })),
+  "ctrl+down": () =>
+    app.update((s) => ({
+      ...s,
+      section: clamp(s.section + 1, 0, sections.length - 1),
+    })),
+});
+
+await app.start();

package/templates/form-app/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["node"],
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/templates/streaming-viewer/README.md

@@ -0,0 +1,17 @@
+# __APP_NAME__
+
+Scaffolded with `npm create rezi` using the **__TEMPLATE_LABEL__** template.
+
+## Quickstart
+
+```bash
+npm install
+npm start
+```
+
+## Keybindings
+
+- `up` / `down` or `j` / `k`: Switch stream
+- `space`: Toggle pause
+- `f`: Follow mode
+- `q`: Quit

package/templates/streaming-viewer/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "tsx src/main.ts",
+    "dev": "tsx watch src/main.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@rezi-ui/core": "^0.1.0-alpha.0",
+    "@rezi-ui/node": "^0.1.0-alpha.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.1",
+    "tsx": "^4.20.0",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/templates/streaming-viewer/src/main.ts

@@ -0,0 +1,174 @@
+import { createApp, rgb, ui } from "@rezi-ui/core";
+import { createNodeBackend } from "@rezi-ui/node";
+
+type Stream = {
+  name: string;
+  category: string;
+  viewers: number;
+  bitrate: number;
+  health: "good" | "warning";
+};
+
+const streams: readonly Stream[] = [
+  { name: "city-cam-01", category: "Urban", viewers: 1280, bitrate: 6.4, health: "good" },
+  { name: "forest-node", category: "Nature", viewers: 860, bitrate: 4.8, health: "good" },
+  { name: "harbor-live", category: "Maritime", viewers: 420, bitrate: 3.9, health: "warning" },
+  { name: "lab-monitor", category: "Science", viewers: 96, bitrate: 2.1, health: "good" },
+];
+
+const chatByStream: Record<string, string[]> = {
+  "city-cam-01": ["switch to night mode?", "pan left a bit", "traffic spike @ 18:00"],
+  "forest-node": ["birdsong level: high", "new fox spotted", "wind noise up"],
+  "harbor-live": ["dock 3 unloading", "signal jitter", "fog incoming"],
+  "lab-monitor": ["temperature stable", "note: calibrate sensor", "airflow normal"],
+};
+
+type State = {
+  selected: number;
+  paused: boolean;
+  follow: boolean;
+};
+
+const app = createApp<State>({
+  backend: createNodeBackend(),
+  initialState: {
+    selected: 0,
+    paused: false,
+    follow: true,
+  },
+});
+
+const colors = {
+  accent: rgb(116, 200, 255),
+  muted: rgb(140, 150, 170),
+  panel: rgb(18, 22, 34),
+  panelAlt: rgb(22, 28, 44),
+  ok: rgb(130, 220, 170),
+  warn: rgb(255, 180, 120),
+  ink: rgb(10, 14, 24),
+};
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function panel(title: string, children: ReturnType<typeof ui.column>[], flex = 1) {
+  return ui.box(
+    { title, flex, border: "rounded", px: 1, py: 0, style: { bg: colors.panel, fg: colors.muted } },
+    children,
+  );
+}
+
+app.view((state) => {
+  const current = streams[state.selected] ?? streams[0];
+  const chat = chatByStream[current?.name ?? ""] ?? [];
+  const bufferValue = state.paused ? 0.2 : current ? Math.min(1, current.bitrate / 7) : 0;
+
+  return ui.column({ flex: 1, p: 1, gap: 1, items: "stretch" }, [
+    ui.row({ justify: "between", items: "center" }, [
+      ui.text("__APP_NAME__", { fg: colors.accent, bold: true }),
+      ui.row({ gap: 2 }, [
+        ui.text(`Mode: ${state.paused ? "Paused" : "Live"}`, {
+          fg: state.paused ? colors.warn : colors.ok,
+          bold: true,
+        }),
+        ui.text(`Follow: ${state.follow ? "On" : "Off"}`, { fg: colors.muted }),
+      ]),
+    ]),
+
+    ui.row({ flex: 1, gap: 1, items: "stretch" }, [
+      panel(
+        "Streams",
+        [
+          ui.column(
+            { gap: 0 },
+            streams.map((stream, index) => {
+              const active = index === state.selected;
+              const prefix = active ? ">" : " ";
+              return ui.text(`${prefix} ${stream.name}`, {
+                key: stream.name,
+                fg: active ? colors.accent : colors.muted,
+                bold: active,
+              });
+            }),
+          ),
+        ],
+        1,
+      ),
+
+      ui.column({ flex: 2, gap: 1, items: "stretch" }, [
+        panel(
+          "Viewer",
+          [
+            ui.column({ gap: 1 }, [
+              ui.text(current ? current.name : "-", { fg: colors.accent, bold: true }),
+              ui.text(`Category: ${current?.category ?? "-"}`),
+              ui.text(`Viewers: ${current?.viewers ?? 0}`),
+              ui.text(`Health: ${current?.health ?? "-"}`, {
+                fg: current?.health === "warning" ? colors.warn : colors.ok,
+              }),
+              ui.text(`Bitrate: ${current?.bitrate ?? 0} Mbps`),
+              ui.progress(bufferValue, { label: "Buffer", showPercent: true }),
+            ]),
+          ],
+          1,
+        ),
+        panel(
+          "Chat",
+          [
+            ui.column({ gap: 1 }, [
+              ui.text("Live chat", { fg: colors.muted }),
+              ...chat.map((line) => ui.text(`- ${line}`)),
+            ]),
+          ],
+          1,
+        ),
+      ]),
+    ]),
+
+    ui.box({ px: 1, py: 0, style: { bg: colors.ink, fg: colors.muted } }, [
+      ui.row({ justify: "between", items: "center" }, [
+        ui.text("Streaming console ready"),
+        ui.row({ gap: 1 }, [
+          ui.kbd("up"),
+          ui.text("Stream"),
+          ui.kbd("space"),
+          ui.text("Pause"),
+          ui.kbd("f"),
+          ui.text("Follow"),
+          ui.kbd("q"),
+          ui.text("Quit"),
+        ]),
+      ]),
+    ]),
+  ]);
+});
+
+app.keys({
+  q: () => app.stop(),
+  "ctrl+c": () => app.stop(),
+  up: () =>
+    app.update((s) => ({
+      ...s,
+      selected: clamp(s.selected - 1, 0, streams.length - 1),
+    })),
+  down: () =>
+    app.update((s) => ({
+      ...s,
+      selected: clamp(s.selected + 1, 0, streams.length - 1),
+    })),
+  k: () =>
+    app.update((s) => ({
+      ...s,
+      selected: clamp(s.selected - 1, 0, streams.length - 1),
+    })),
+  j: () =>
+    app.update((s) => ({
+      ...s,
+      selected: clamp(s.selected + 1, 0, streams.length - 1),
+    })),
+  space: () => app.update((s) => ({ ...s, paused: !s.paused })),
+  f: () => app.update((s) => ({ ...s, follow: !s.follow })),
+});
+
+await app.start();

package/templates/streaming-viewer/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["node"],
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true
+  },
+  "include": ["src/**/*.ts"]
+}