improve spinner & task management

reliverse · Dec 27, 2024 · 86c0aae · 86c0aae
1 parent 6eed31c
commit 86c0aae
Show file tree

Hide file tree

Showing 64 changed files with 2,060 additions and 720 deletions.
diff --git a/README.md b/README.md
diff --git a/bun.lockb b/bun.lockb
diff --git a/cspell.json b/cspell.json
@@ -5,6 +5,7 @@
   "ignorePaths": ["examples/deprecated", "dist-jsr", "dist-npm"],
   "words": [
     "alacritty",
+    "alcalzone",
     "alternar",
     "anims",
     "anykey",
@@ -18,6 +19,7 @@
     "ausgewählt",
     "avez",
     "Baratheon",
+    "bitflag",
     "blefnk",
     "browserlist",
     "browserlistrc",
@@ -54,13 +56,16 @@
     "figliolia",
     "Fireship",
     "Focusable",
+    "focusables",
     "forgetme",
+    "Gawf",
     "Geralt",
     "goroutines",
     "Greyjoy",
     "Gyllenhaal",
     "haben",
     "Haha",
+    "hotmail",
     "hoverable",
     "iife",
     "invertir",
@@ -105,15 +110,19 @@
     "sbuf",
     "scelto",
     "scule",
+    "segs",
     "selección",
     "seleccionar",
     "sentencer",
     "shadcn",
+    "shoutout",
     "signup",
     "Silverhand",
     "sisteransi",
+    "Speedrun",
     "Sprache",
     "subchoices",
+    "suped",
     "Targ",
     "Targaryen",
     "terkelg",
@@ -126,13 +135,16 @@
     "typesafety",
     "typestat",
     "Tyrell",
+    "unclip",
     "unjs",
     "unpub",
     "unstub",
     "valign",
+    "valtio",
     "venv",
     "Vous",
     "vsprintf",
+    "WCAG",
     "wezterm",
     "Whoo",
     "Wybrałeś",

diff --git a/example.png b/example.png
diff --git a/examples/launcher.ts b/examples/launcher.ts
@@ -9,64 +9,81 @@ async function examplesRunner() {
 
   const exampleToRun = await selectPrompt({
     title: "Choose an example to run",
+    titleColor: "passionGradient",
     options: [
       {
-        label: "✨ The Most Full-Featured Example",
-        value: "1-main",
+        label: "✨ Full-Featured Example",
+        value: "main",
         hint: "recommended",
       },
       {
-        label: pc.dim("Mono Component Example"),
-        value: "2-mono",
+        label: "Spinner Example",
+        value: "spinner",
+        hint: "experimental",
+      },
+      {
+        label: pc.dim("Task Example"),
+        value: "task",
+        hint: pc.dim("not finished"),
+      },
+      {
+        label: pc.dim("Progressbar Example"),
+        value: "progressbar",
         hint: pc.dim("not finished"),
       },
       {
         label: pc.dim("Simple Example"),
-        value: "3-simple",
+        value: "simple",
         hint: pc.dim("not finished"),
       },
       {
         label: pc.dim("with flags 1 Example"),
-        value: "4-cmd-a",
+        value: "cmd-a",
         hint: pc.dim("not finished"),
       },
       {
         label: pc.dim("with flags 2 Example"),
-        value: "5-cmd-b",
+        value: "cmd-b",
         hint: pc.dim("not finished"),
       },
       { label: "🗝️  Exit", value: "exit" },
     ] as const,
-    defaultValue: "1-main",
+    defaultValue: "main",
   });
 
   switch (exampleToRun) {
-    case "1-main":
-      await import("./1-main.js");
+    case "main":
+      await import("./main.js");
+      break;
+    case "spinner":
+      await import("./other/spinner.js");
+      break;
+    case "task":
+      await import("./other/task.js");
       break;
-    case "2-mono":
-      await import("./2-mono.js");
+    case "progressbar":
+      await import("./other/progress.js");
       break;
-    case "3-simple":
-      await import("./3-simple.js");
+    case "simple":
+      await import("./other/simple.js");
       break;
-    case "4-cmd-a":
+    case "cmd-a":
       console.clear();
       console.log(
-        "`bun examples/4-args-a.ts Alice --friendly --age 22 --adj cool`",
+        "`bun examples/other/args-a.ts Alice --friendly --age 22 --adj cool`",
       );
       console.log("Run without any arguments to see the help message.");
       break;
-    case "5-cmd-b":
+    case "cmd-b":
       console.clear();
       console.log(
-        "1. [BUILD] `bun examples/5-args-b.ts build ./src --workDir ./src`",
+        "1. [BUILD] `bun examples/other/args-b.ts build ./src --workDir ./src`",
       );
       console.log(
-        "2. [DEBUG] `bun examples/5-args-b.ts debug --feature database-query`",
+        "2. [DEBUG] `bun examples/other/args-b.ts debug --feature database-query`",
       );
       console.log(
-        "3. [DEPLOY] `bun examples/5-args-b.ts deploy --include '*.js' --exclude '*.d.ts'`",
+        "3. [DEPLOY] `bun examples/other/args-b.ts deploy --include '*.js' --exclude '*.d.ts'`",
       );
       console.log("Run without any arguments to see the help message.");
       break;

diff --git a/examples/main.png b/examples/main.png
diff --git a/examples/1-main.ts → examples/main.ts b/examples/1-main.ts → examples/main.ts
diff --git a/examples/4-args-a.ts → examples/other/args-a.ts b/examples/4-args-a.ts → examples/other/args-a.ts
diff --git a/examples/5-args-b.ts → examples/other/args-b.ts b/examples/5-args-b.ts → examples/other/args-b.ts
@@ -1,6 +1,6 @@
 import { defineCommand, runMain } from "~/main.js";
 
-import packageJson from "../package.json" with { type: "json" };
+import packageJson from "../../package.json" with { type: "json" };
 
 const main = defineCommand({
   meta: {
@@ -15,9 +15,9 @@ const main = defineCommand({
     console.info("✅ Cleanup");
   },
   subCommands: {
-    build: () => import("./src/commands/build.js").then((r) => r.default),
-    deploy: () => import("./src/commands/deploy.js").then((r) => r.default),
-    debug: () => import("./src/commands/debug.js").then((r) => r.default),
+    build: () => import("../src/commands/build.js").then((r) => r.default),
+    deploy: () => import("../src/commands/deploy.js").then((r) => r.default),
+    debug: () => import("../src/commands/debug.js").then((r) => r.default),
   },
 });
 

diff --git a/examples/2-mono.ts → examples/other/progress.ts b/examples/2-mono.ts → examples/other/progress.ts
@@ -1,6 +1,12 @@
 // 2-mono-example.ts: A fun example of a quiz game. Inspired by CLI-game created by Fireship. The example demonstrates how to use a mono prompt() component.
 
-import { animateText, inputPrompt, task } from "~/main.js";
+import {
+  animateText,
+  inputPrompt,
+  advancedTaskPrompt,
+  endPrompt,
+  msg,
+} from "~/main.js";
 import { prompt } from "~/mono/mono.js";
 import { colorize } from "~/utils/colorize.js";
 import { errorHandler } from "~/utils/errors.js";
@@ -48,7 +54,7 @@ async function main() {
     ],
   });
 
-  await task({
+  /* await advancedTaskPrompt({
     initialMessage: "Checking answer...",
     successMessage: "Answer checked successfully.",
     spinnerSolution: "ora",
@@ -58,11 +64,54 @@ async function main() {
       updateMessage(
         answer === "Dec 4th, 1995"
           ? `Nice work ${playerName}. That's a legit answer!`
-          : `🫠 Game over, ${playerName}! You lose!`,
+          : `🫠  Game over, ${playerName}! You lose!`,
       );
       await new Promise((resolve) => setTimeout(resolve, 1000));
     },
-  });
+  }); */
+
+  const result = await advancedTaskPrompt(
+    "Check answer",
+    {
+      priority: "normal",
+      displayType: "progress",
+    },
+    async ({ setStatus, setError, setProgress }) => {
+      setProgress({
+        current: 0,
+        total: 5,
+        message: "Starting verification...",
+      });
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      for (let i = 0; i < 5; i++) {
+        setProgress({
+          current: i + 1,
+          total: 5,
+          message: `Step ${i + 1}: Verifying answer...`,
+        });
+        await new Promise((resolve) => setTimeout(resolve, 400));
+      }
+
+      const isCorrect = answer === "Dec 4th, 1995";
+
+      if (!isCorrect) {
+        setError(
+          `🫠  Game over, ${playerName}! You lose!\nNo worries, you can try again!`,
+        );
+        // Wait a bit to ensure the message is displayed
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        process.exit(1);
+      }
+
+      setStatus(`Nice work ${playerName}. That's a legit answer!`);
+      return isCorrect;
+    },
+  );
+
+  if (!result) {
+    return;
+  }
 
   const message = `Congrats !\n $ 1 , 0 0 0 , 0 0 0`;
 
@@ -81,6 +130,15 @@ async function main() {
     titleTypography: "bold",
     border: false,
   });
+
+  msg({ type: "M_BAR" });
+
+  await endPrompt({
+    title: "Thanks for playing!\n",
+    titleColor: "passionGradient",
+    titleTypography: "bold",
+  });
+
   process.exit(0);
 }
 

diff --git a/examples/separate/select/select-example.ts → examples/other/select.ts b/examples/separate/select/select-example.ts → examples/other/select.ts
@@ -17,39 +17,39 @@ export async function detailedExample() {
   msg({
     type: "M_INFO",
     title:
-      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you think about testing the very very very long text? Is something broken for you?",
+      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very very very long text? Is something broken for you?",
     content:
-      "What web technologies do you like? 42 is the answer to everything. What do you think about testing the very long text? Is something broken for you? What category best describes your project?",
-    hint: "hint !!! What do you think about testing the very long text? Is something broken for you? What category best describes your project?",
+      "What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very long text? Is something broken for you? What category best describes your project?",
+    hint: "hint !!! What do you mind about testing the very long text? Is something broken for you? What category best describes your project?",
   });
 
   await confirmPrompt({
     title:
-      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you think about testing the very very very long text? Is something broken for you?",
+      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very very very long text? Is something broken for you?",
     content:
-      "What web technologies do you like? 42 is the answer to everything. What do you think about testing the very long text? Is something broken for you? What category best describes your project?",
+      "What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very long text? Is something broken for you? What category best describes your project?",
     displayInstructions: true,
   });
 
   await confirmPrompt({
     title:
-      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you think about testing the very very very long text? Is something broken for you?",
+      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very very very long text? Is something broken for you?",
     content:
-      "What web technologies do you like? 42 is the answer to everything. What do you think about testing the very long text? Is something broken for you? What category best describes your project?",
+      "What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very long text? Is something broken for you? What category best describes your project?",
   });
 
   await togglePrompt({
     title:
-      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you think about testing the very very very long text? Is something broken for you?",
+      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very very very long text? Is something broken for you?",
     content:
-      "What web technologies do you like? 42 is the answer to everything. What do you think about testing the very long text? Is something broken for you? What category best describes your project?",
+      "What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very long text? Is something broken for you? What category best describes your project?",
   });
 
   await selectPrompt({
     title:
-      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you think about testing the very very very long text? Is something broken for you?",
+      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very very very long text? Is something broken for you?",
     content:
-      "What web technologies do you like? 42 is the answer to everything. What do you think about testing the very long text? Is something broken for you? What category best describes your project?",
+      "What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very long text? Is something broken for you? What category best describes your project?",
     displayInstructions: true,
     terminalWidth: 92,
     options: [
@@ -68,9 +68,9 @@ export async function detailedExample() {
 
   await multiselectPrompt({
     title:
-      "What web technologies do you like? 42 is the answer to everything. What do you think about testing the very long text? Is something broken for you? What category best describes your project?",
+      "What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very long text? Is something broken for you? What category best describes your project?",
     content:
-      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you think about testing the very very very long text? Is something broken for you?",
+      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very very very long text? Is something broken for you?",
     defaultValue: ["react", "typescript"],
     options: [
       {
@@ -93,9 +93,9 @@ export async function detailedExample() {
 
   await selectPrompt({
     title:
-      "What web technologies do you like? 42 is the answer to everything. What do you think about testing the very long text? Is something broken for you? What category best describes your project?",
+      "What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very long text? Is something broken for you? What category best describes your project?",
     content:
-      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you think about testing the very very very long text? Is something broken for you?",
+      "Let's embark on a creative journey and build something completely new! Afterward, it's all yours to refine. What category best describes your project? What web technologies do you like? 42 is the answer to everything. What do you mind about testing the very very very long text? Is something broken for you?",
     defaultValue: "react",
     options: [
       {

diff --git a/examples/3-simple.ts → examples/other/simple.ts b/examples/3-simple.ts → examples/other/simple.ts
@@ -5,18 +5,18 @@ import pc from "picocolors";
 import figures from "~/figures/index.js";
 import { select } from "~/prompts/index.js";
 
-import checkboxDemo from "./src/simple/checkbox.js";
-import confirmDemo from "./src/simple/confirm.js";
-import editorDemo from "./src/simple/editor.js";
-import expandDemo from "./src/simple/expand.js";
-import inputDemo from "./src/simple/input.js";
-import loaderDemo from "./src/simple/loader.js";
-import numberDemo from "./src/simple/number.js";
-import passwordDemo from "./src/simple/password.js";
-import rawlistDemo from "./src/simple/rawlist.js";
-import searchDemo from "./src/simple/search.js";
-import selectDemo from "./src/simple/select.js";
-import timeoutDemo from "./src/simple/timeout.js";
+import checkboxDemo from "../src/simple/checkbox.js";
+import confirmDemo from "../src/simple/confirm.js";
+import editorDemo from "../src/simple/editor.js";
+import expandDemo from "../src/simple/expand.js";
+import inputDemo from "../src/simple/input.js";
+import loaderDemo from "../src/simple/loader.js";
+import numberDemo from "../src/simple/number.js";
+import passwordDemo from "../src/simple/password.js";
+import rawlistDemo from "../src/simple/rawlist.js";
+import searchDemo from "../src/simple/search.js";
+import selectDemo from "../src/simple/select.js";
+import timeoutDemo from "../src/simple/timeout.js";
 
 const demos = {
   checkbox: checkboxDemo,