@monkey-mini-app/dsh-mini-app 0.1.1 → 0.1.4

package/skills/monkey-mini-app/references/examples/misc-editors/misc-editors-02.tsx

@@ -0,0 +1,33 @@
+/**
+ * @group editors
+ * @title JiraWiki
+ * @scenario JiraWiki markup rendered live next to the raw Textarea source (wiki tables, code blocks, colours).
+ * @hint Left markup, right live preview
+ */
+import * as React from "react";
+
+import { JiraWiki, Textarea } from "@monkey-mini-app/ui";
+
+import { JIRA_WIKI_SAMPLE } from "../shared/jira-wiki-sample";
+
+export default function MiscEditors02Example() {
+  const [wiki, setWiki] = React.useState(JIRA_WIKI_SAMPLE);
+
+  return (
+    <>
+      <div className="overflow-hidden rounded-xl border bg-card">
+        <div className="grid min-h-[280px] md:grid-cols-2">
+          <Textarea
+            value={wiki}
+            onChange={(event) => setWiki(event.target.value)}
+            spellCheck={false}
+            className="min-h-[280px] resize-none rounded-none border-0 border-b font-mono md:border-r md:border-b-0"
+          />
+          <div className="overflow-auto p-3">
+            <JiraWiki>{wiki}</JiraWiki>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-forms/misc-forms-01.tsx

@@ -0,0 +1,22 @@
+/**
+ * @group forms
+ * @title Input / Textarea
+ * @scenario Free-text pair side by side: single-line Input vs multi-line Textarea, both controlled — the baseline before picking a specialised field.
+ */
+import * as React from "react";
+
+import { Input, Textarea } from "@monkey-mini-app/ui";
+
+export default function MiscForms01Example() {
+  const [text, setText] = React.useState("");
+  const [area, setArea] = React.useState("notes");
+
+  return (
+    <>
+      <div className="flex max-w-sm flex-col gap-2">
+        <Input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type here" />
+        <Textarea value={area} onChange={(e) => setArea(e.target.value)} />
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-forms/misc-forms-02.tsx

@@ -0,0 +1,37 @@
+/**
+ * @group forms
+ * @title Checkbox / Switch / Radio
+ * @scenario Three boolean-ish choices compared: Checkbox (agree), Switch (instant-effect setting), RadioGroup (one of N). Pick by semantics, not looks.
+ */
+import * as React from "react";
+
+import { Checkbox, RadioGroup, RadioGroupItem, Switch } from "@monkey-mini-app/ui";
+
+export default function MiscForms02Example() {
+  const [on, setOn] = React.useState(true);
+  const [checked, setChecked] = React.useState(true);
+  const [radio, setRadio] = React.useState("a");
+
+  return (
+    <>
+      <div className="flex flex-col gap-3">
+        <label className="flex items-center gap-2 text-sm">
+          <Checkbox checked={checked} onCheckedChange={(v) => setChecked(!!v)} />
+          Accept
+        </label>
+        <label className="flex items-center gap-2 text-sm">
+          <Switch checked={on} onCheckedChange={setOn} />
+          Enabled {on ? "on" : "off"}
+        </label>
+        <RadioGroup value={radio} onValueChange={setRadio}>
+          <label className="flex items-center gap-2 text-sm">
+            <RadioGroupItem value="a" /> A
+          </label>
+          <label className="flex items-center gap-2 text-sm">
+            <RadioGroupItem value="b" /> B
+          </label>
+        </RadioGroup>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-forms/misc-forms-03.tsx

@@ -0,0 +1,42 @@
+/**
+ * @group forms
+ * @title Select / NativeSelect
+ * @scenario Custom styled Select (compound parts, own trigger width) next to NativeSelect, which uses the OS picker — cheaper on mobile and keyboard.
+ */
+import * as React from "react";
+
+import {
+  NativeSelect,
+  NativeSelectOption,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@monkey-mini-app/ui";
+
+export default function MiscForms03Example() {
+  const [select, setSelect] = React.useState("stg");
+  const [native, setNative] = React.useState("dev");
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-3">
+        <Select value={select} onValueChange={(value) => value && setSelect(value)}>
+          <SelectTrigger className="w-40">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="dev">dev</SelectItem>
+            <SelectItem value="stg">stg</SelectItem>
+            <SelectItem value="prd">prd</SelectItem>
+          </SelectContent>
+        </Select>
+        <NativeSelect value={native} onChange={(e) => setNative(e.target.value)}>
+          <NativeSelectOption value="dev">dev</NativeSelectOption>
+          <NativeSelectOption value="stg">stg</NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-forms/misc-forms-04.tsx

@@ -0,0 +1,25 @@
+/**
+ * @group forms
+ * @title Phone / Password / Currency / Copyable
+ * @scenario Format-aware text fields that validate while typing: PhoneInput, PasswordField (mask toggle), CurrencyInput, plus Copyable for read-only tokens/ids.
+ */
+import * as React from "react";
+
+import { Copyable, CurrencyInput, PasswordField, PhoneInput } from "@monkey-mini-app/ui";
+
+export default function MiscForms04Example() {
+  const [phone, setPhone] = React.useState("");
+  const [pwd, setPwd] = React.useState("secret");
+  const [money, setMoney] = React.useState("12.50");
+
+  return (
+    <>
+      <div className="flex max-w-sm flex-col gap-2">
+        <PhoneInput value={phone} onChange={setPhone} />
+        <PasswordField value={pwd} onChange={setPwd} />
+        <CurrencyInput value={money} onChange={setMoney} />
+        <Copyable value="TMS-55357" />
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-forms/misc-forms-05.tsx

@@ -0,0 +1,27 @@
+/**
+ * @group forms
+ * @title SearchInput / Autocomplete
+ * @scenario Two ways to narrow a list: SearchInput (free text with clear) vs Autocomplete (suggest from a fixed option list).
+ */
+import * as React from "react";
+
+import { Autocomplete, SearchInput } from "@monkey-mini-app/ui";
+
+export default function MiscForms05Example() {
+  const [search, setSearch] = React.useState("");
+  const [auto, setAuto] = React.useState("");
+
+  return (
+    <>
+      <div className="flex max-w-sm flex-col gap-2">
+        <SearchInput value={search} onChange={setSearch} />
+        <Autocomplete
+          value={auto}
+          onChange={setAuto}
+          options={["alpha", "bravo", "charlie", "delta"]}
+          placeholder="Type a…"
+        />
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-forms/misc-forms-06.tsx

@@ -0,0 +1,33 @@
+/**
+ * @group forms
+ * @title TagInput / UserPicker / Rating / ColorPicker
+ * @scenario Compact pickers that all store their own value shape: TagInput (string[]), UserPicker (user object), Rating (0–5), ColorPicker (hex).
+ */
+import * as React from "react";
+
+import { ColorPicker, Rating, TagInput, UserPicker } from "@monkey-mini-app/ui";
+
+export default function MiscForms06Example() {
+  const [color, setColor] = React.useState("#2563eb");
+  const [stars, setStars] = React.useState(3);
+  const [tags, setTags] = React.useState(["qa", "ci"]);
+  const [user, setUser] = React.useState("ada");
+
+  return (
+    <>
+      <div className="flex max-w-sm flex-col gap-3">
+        <TagInput value={tags} onChange={setTags} />
+        <UserPicker
+          value={user}
+          onChange={setUser}
+          users={[
+            { id: "ada", name: "Ada" },
+            { id: "lin", name: "Lin" },
+          ]}
+        />
+        <Rating value={stars} onChange={setStars} />
+        <ColorPicker value={color} onChange={setColor} />
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-forms/misc-forms-07.tsx

@@ -0,0 +1,44 @@
+/**
+ * @group forms
+ * @title Cascader / Transfer
+ * @scenario Multi-value selection patterns: Cascader walks a nested option tree, Transfer moves whole items between available/selected lists.
+ */
+import * as React from "react";
+
+import { Cascader, Transfer } from "@monkey-mini-app/ui";
+
+export default function MiscForms07Example() {
+  const [cascade, setCascade] = React.useState<string[]>([]);
+  const [transfer, setTransfer] = React.useState(["b"]);
+
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <Cascader
+          value={cascade}
+          onChange={setCascade}
+          options={[
+            {
+              value: "cn",
+              label: "China",
+              children: [
+                { value: "sh", label: "Shanghai" },
+                { value: "bj", label: "Beijing" },
+              ],
+            },
+            { value: "us", label: "US", children: [{ value: "sf", label: "SF" }] },
+          ]}
+        />
+        <Transfer
+          value={transfer}
+          onChange={setTransfer}
+          items={[
+            { id: "a", label: "Alpha" },
+            { id: "b", label: "Bravo" },
+            { id: "c", label: "Charlie" },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-overlays/misc-overlays-01.tsx

@@ -0,0 +1,43 @@
+/**
+ * @group overlays
+ * @title Sheet / Drawer
+ * @scenario Two side surfaces: Sheet (persistent app side panel, desktop) vs Drawer (bottom-anchored, touch-first). Same trigger/content API.
+ */
+import {
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@monkey-mini-app/ui";
+
+export default function MiscOverlays01Example() {
+  return (
+    <>
+      <div className="flex gap-2">
+        <Sheet>
+          <SheetTrigger render={<Button variant="outline" />}>Open sheet</SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Inspector</SheetTitle>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+        <Drawer>
+          <DrawerTrigger render={<Button variant="outline" />}>Open drawer</DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Drawer</DrawerTitle>
+            </DrawerHeader>
+          </DrawerContent>
+        </Drawer>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-overlays/misc-overlays-02.tsx

@@ -0,0 +1,38 @@
+/**
+ * @group overlays
+ * @title Popover / Tooltip / HoverCard
+ * @scenario Hover/click surfaces ranked by commitment: Popover (anchored editor, e.g. filters), Tooltip (short read-only label), HoverCard (preview of a referenced record).
+ */
+import {
+  Button,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@monkey-mini-app/ui";
+
+export default function MiscOverlays02Example() {
+  return (
+    <>
+      <div className="flex flex-wrap gap-3">
+        <Popover>
+          <PopoverTrigger render={<Button variant="outline" />}>Popover</PopoverTrigger>
+          <PopoverContent>Filter options</PopoverContent>
+        </Popover>
+        <Tooltip>
+          <TooltipTrigger render={<Button variant="outline" />}>Hover me</TooltipTrigger>
+          <TooltipContent>Tooltip text</TooltipContent>
+        </Tooltip>
+        <HoverCard>
+          <HoverCardTrigger render={<Button variant="ghost" />}>User</HoverCardTrigger>
+          <HoverCardContent>Ada · QA</HoverCardContent>
+        </HoverCard>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-primitives/misc-primitives-01.tsx

@@ -0,0 +1,21 @@
+/**
+ * @group primitives
+ * @title Badge / Avatar / Kbd
+ * @scenario Inline identity atoms: Badge for labels/counts, Avatar with initials fallback when a picture is missing, Kbd for shortcuts.
+ */
+import { Avatar, AvatarFallback, Badge, Kbd } from "@monkey-mini-app/ui";
+
+export default function MiscPrimitives01Example() {
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <Badge>New</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Avatar className="size-8">
+          <AvatarFallback>AD</AvatarFallback>
+        </Avatar>
+        <Kbd>⌘K</Kbd>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-primitives/misc-primitives-02.tsx

@@ -0,0 +1,52 @@
+/**
+ * @group primitives
+ * @title Tabs / Accordion / Collapsible
+ * @scenario Three ways to switch content in place — Tabs (parallel views), Accordion (stacked, multiple open), Collapsible (one region folded inside a card).
+ */
+import * as React from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@monkey-mini-app/ui";
+
+export default function MiscPrimitives02Example() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <div className="flex max-w-lg flex-col gap-4">
+        <Tabs defaultValue="one">
+          <TabsList>
+            <TabsTrigger value="one">One</TabsTrigger>
+            <TabsTrigger value="two">Two</TabsTrigger>
+          </TabsList>
+          <TabsContent value="one">First panel</TabsContent>
+          <TabsContent value="two">Second panel</TabsContent>
+        </Tabs>
+        <Accordion>
+          <AccordionItem value="a">
+            <AccordionTrigger>What is this?</AccordionTrigger>
+            <AccordionContent>An interactive accordion.</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Collapsible open={open} onOpenChange={setOpen}>
+          <CollapsibleTrigger render={<Button variant="outline" size="sm" />}>
+            {open ? "Hide" : "Show"} extra
+          </CollapsibleTrigger>
+          <CollapsibleContent className="pt-2 text-sm">Hidden details</CollapsibleContent>
+        </Collapsible>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-primitives/misc-primitives-03.tsx

@@ -0,0 +1,44 @@
+/**
+ * @group primitives
+ * @title ScrollArea / Resizable / InputGroup / Calendar / Message
+ * @scenario Layout primitives that fight resizing: ScrollArea (custom, fixed-height), Resizable split panes (orientation + min size), InputGroup (addon prefix + icon).
+ */
+import {
+  Calendar,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  Message,
+  MessageContent,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ScrollArea,
+} from "@monkey-mini-app/ui";
+
+export default function MiscPrimitives03Example() {
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <ScrollArea className="h-24 rounded-lg border p-2 text-sm">
+          {Array.from({ length: 20 }, (_, i) => (
+            <div key={i}>Row {i + 1}</div>
+          ))}
+        </ScrollArea>
+        <ResizablePanelGroup orientation="horizontal" className="min-h-24 rounded-lg border">
+          <ResizablePanel defaultSize={50}>Left</ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel>Right</ResizablePanel>
+        </ResizablePanelGroup>
+        <InputGroup className="max-w-xs">
+          <InputGroupAddon>@</InputGroupAddon>
+          <InputGroupInput placeholder="username" />
+        </InputGroup>
+        <Calendar mode="single" />
+        <Message>
+          <MessageContent>Assistant reply</MessageContent>
+        </Message>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/number-field/number-field-01.tsx

@@ -0,0 +1,22 @@
+/**
+ * @exampleOf NumberField
+ * @title NumberField
+ * @scenario Numeric input with stepper buttons and clamped min/max, so quantity fields never receive NaN or out-of-range text.
+ * @hint Plus/minus and typing
+ */
+import * as React from "react";
+
+import { NumberField } from "@monkey-mini-app/ui";
+
+export default function NumberField01Example() {
+  const [n, setN] = React.useState(3);
+
+  return (
+    <>
+      <NumberField value={n} onChange={setN} min={0} max={99} />
+      <p className="text-muted-foreground mt-2 text-xs" data-testid="number-field-value">
+        value: {n}
+      </p>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/overlays.md

@@ -0,0 +1,11 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Examples · overlays
+
+Multi-component demos: layout/pattern recipes with no single subject component.
+Copy the whole file into `ui.tsx` (or split it) — imports are `react` + `@monkey-mini-app/ui` only.
+
+| example | what it shows | scenario |
+|---|---|---|
+| [`misc-overlays-01.tsx`](./misc-overlays/misc-overlays-01.tsx) | Sheet / Drawer | Two side surfaces: Sheet (persistent app side panel, desktop) vs Drawer (bottom-anchored, touch-first). Same trigger/content API. |
+| [`misc-overlays-02.tsx`](./misc-overlays/misc-overlays-02.tsx) | Popover / Tooltip / HoverCard | Hover/click surfaces ranked by commitment: Popover (anchored editor, e.g. filters), Tooltip (short read-only label), HoverCard (preview of a referenced record). |

package/skills/monkey-mini-app/references/examples/pagination/pagination-01.tsx

@@ -0,0 +1,51 @@
+/**
+ * @exampleOf Pagination
+ * @title Pagination
+ * @scenario Numbered page nav with prev/next and an active page, driven by your own state; DataGrid already includes this when you need a full table.
+ */
+import * as React from "react";
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@monkey-mini-app/ui";
+
+export default function Pagination01Example() {
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <>
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                setPage((p) => Math.max(1, p - 1));
+              }}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                setPage((p) => p + 1);
+              }}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/primitives.md

@@ -0,0 +1,12 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Examples · primitives
+
+Multi-component demos: layout/pattern recipes with no single subject component.
+Copy the whole file into `ui.tsx` (or split it) — imports are `react` + `@monkey-mini-app/ui` only.
+
+| example | what it shows | scenario |
+|---|---|---|
+| [`misc-primitives-01.tsx`](./misc-primitives/misc-primitives-01.tsx) | Badge / Avatar / Kbd | Inline identity atoms: Badge for labels/counts, Avatar with initials fallback when a picture is missing, Kbd for shortcuts. |
+| [`misc-primitives-02.tsx`](./misc-primitives/misc-primitives-02.tsx) | Tabs / Accordion / Collapsible | Three ways to switch content in place — Tabs (parallel views), Accordion (stacked, multiple open), Collapsible (one region folded inside a card). |
+| [`misc-primitives-03.tsx`](./misc-primitives/misc-primitives-03.tsx) | ScrollArea / Resizable / InputGroup / Calendar / Message | Layout primitives that fight resizing: ScrollArea (custom, fixed-height), Resizable split panes (orientation + min size), InputGroup (addon prefix + icon). |

package/skills/monkey-mini-app/references/examples/progress/progress-01.tsx

@@ -0,0 +1,10 @@
+/**
+ * @exampleOf Progress
+ * @title Progress
+ * @scenario Determinate percentage bar for a known-length task (upload, batch done/total); use Spinner when progress is unknown.
+ */
+import { Progress } from "@monkey-mini-app/ui";
+
+export default function Progress01Example() {
+  return <Progress value={48} />;
+}

package/skills/monkey-mini-app/references/examples/relative-date-picker/relative-date-picker-01.tsx

@@ -0,0 +1,19 @@
+/**
+ * @exampleOf RelativeDatePicker
+ * @title RelativeDatePicker
+ * @scenario Preset ranges ('last 7 days', 'this month') that resolve to absolute timestamps on submit — the usual filter on dashboards and log screens.
+ */
+import * as React from "react";
+
+import { type DateRange, RelativeDatePicker, type RelativePreset } from "@monkey-mini-app/ui";
+
+export default function RelativeDatePicker01Example() {
+  const [preset, setPreset] = React.useState<RelativePreset>("7d");
+  const [rel, setRel] = React.useState<DateRange | undefined>();
+
+  return (
+    <>
+      <RelativeDatePicker preset={preset} value={rel} onPresetChange={setPreset} onChange={setRel} />
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/rich-text-editor/rich-text-editor-01.tsx

@@ -0,0 +1,15 @@
+/**
+ * @exampleOf RichTextEditor
+ * @title RichTextEditor
+ * @scenario WYSIWYG editing with a local contentEditable toolbar (bold/list/quote) — no CDN, no dependency; use when users are not writing raw markdown.
+ * @hint Tiptap — toolbar is live
+ */
+import * as React from "react";
+
+import { RichTextEditor } from "@monkey-mini-app/ui";
+
+export default function RichTextEditor01Example() {
+  const [html, setHtml] = React.useState("<p>Write a <strong>run note</strong>.</p>");
+
+  return <RichTextEditor value={html} onChange={setHtml} />;
+}

package/skills/monkey-mini-app/references/examples/run-timeline/run-timeline-01.tsx

@@ -0,0 +1,17 @@
+/**
+ * @exampleOf RunTimeline
+ * @title RunTimeline
+ * @scenario Ordered steps of one job (queued → running → done) with per-step status; denser than a Table when the story is sequence.
+ */
+import { RunTimeline } from "@monkey-mini-app/ui";
+
+export default function RunTimeline01Example() {
+  return (
+    <RunTimeline
+      items={[
+        { id: "1", title: "Queued" },
+        { id: "2", title: "Running" },
+      ]}
+    />
+  );
+}