Add interactive previews and GIF assets for component docs

app/docs/[[...slug]]/page.tsx

@@ -26,6 +26,15 @@ import {
   ReferendumSelectorDemo,
   TrackSelectorDemo,
   BountySelectorDemo,
+  MomentDemo,
+  VoteThresholdDemo,
+  KeyValueDemo,
+  VectorFixedDemo,
+  BTreeMapDemo,
+  StructDemo,
+  TupleDemo,
+  VoteDemo,
+  CallDemo,
 } from "@/components/docs/demos";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
@@ -64,6 +73,15 @@ export default async function Page(props: {
             ReferendumSelectorDemo,
             TrackSelectorDemo,
             BountySelectorDemo,
+            MomentDemo,
+            VoteThresholdDemo,
+            KeyValueDemo,
+            VectorFixedDemo,
+            BTreeMapDemo,
+            StructDemo,
+            TupleDemo,
+            VoteDemo,
+            CallDemo,
             Tab,
             Tabs,
           }}

components/docs/demos/advanced-demos.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import React from "react";
+import { VectorFixed } from "@/components/params/inputs/vector-fixed";
+import { BTreeMap } from "@/components/params/inputs/btree-map";
+import { Struct } from "@/components/params/inputs/struct";
+import { Text } from "@/components/params/inputs/text";
+import { Boolean } from "@/components/params/inputs/boolean";
+import { Vote } from "@/components/params/inputs/vote";
+import { Amount } from "@/components/params/inputs/amount";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import Link from "next/link";
+
+export function VectorFixedDemo() {
+  return (
+    <div className="w-full max-w-md">
+      <VectorFixed
+        name="hash"
+        label="Hash"
+        typeName="[u8; 32]"
+        client={null as any}
+        typeId={0}
+        onChange={() => {}}
+      />
+    </div>
+  );
+}
+
+export function BTreeMapDemo() {
+  return (
+    <div className="w-full max-w-md">
+      <BTreeMap
+        name="deposits"
+        label="Deposits"
+        client={null as any}
+        typeId={0}
+        onChange={() => {}}
+      />
+    </div>
+  );
+}
+
+export function StructDemo() {
+  return (
+    <div className="w-full max-w-md">
+      <Struct
+        name="identity"
+        label="Identity Info"
+        client={null as any}
+        onChange={() => {}}
+        fields={[
+          {
+            name: "display",
+            label: "Display Name",
+            typeName: "Text",
+            component: (
+              <Text
+                name="display"
+                label="Display Name"
+                client={null as any}
+                onChange={() => {}}
+              />
+            ),
+            required: true,
+          },
+          {
+            name: "email",
+            label: "Email",
+            typeName: "Text",
+            component: (
+              <Text
+                name="email"
+                label="Email"
+                client={null as any}
+                onChange={() => {}}
+              />
+            ),
+          },
+          {
+            name: "verified",
+            label: "Verified",
+            typeName: "bool",
+            component: (
+              <Boolean
+                name="verified"
+                label="Verified"
+                client={null as any}
+                onChange={() => {}}
+              />
+            ),
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+export function TupleDemo() {
+  const [values, setValues] = React.useState<[string, string]>(["", ""]);
+
+  return (
+    <div className="w-full max-w-md">
+      <Label>Block Range</Label>
+      <Card className="mt-2">
+        <CardContent className="pt-6 flex flex-col gap-4">
+          <Text
+            name="tuple-0"
+            label="Text [0]"
+            client={null as any}
+            onChange={(v) => setValues((prev) => [v as string, prev[1]])}
+          />
+          <Amount
+            name="tuple-1"
+            label="u128 [1]"
+            typeName="u128"
+            client={null as any}
+            onChange={(v) => setValues((prev) => [prev[0], v as string])}
+          />
+        </CardContent>
+      </Card>
+      <p className="text-xs text-muted-foreground mt-2">
+        Simulated tuple layout. The actual Tuple component resolves field types from chain metadata.
+      </p>
+    </div>
+  );
+}
+
+export function VoteDemo() {
+  return (
+    <div className="w-full max-w-md">
+      <Vote
+        name="vote"
+        label="Vote"
+        client={null as any}
+        onChange={() => {}}
+      />
+    </div>
+  );
+}
+
+export function CallDemo() {
+  return (
+    <div className="w-full max-w-md">
+      <div className="flex flex-col gap-2">
+        <Label>Nested Call</Label>
+        <Card>
+          <CardContent className="pt-6 flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Label className="text-xs text-muted-foreground">Pallet</Label>
+              <Select disabled>
+                <SelectTrigger>
+                  <SelectValue placeholder="utility" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="utility">utility</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label className="text-xs text-muted-foreground">Method</Label>
+              <Select disabled>
+                <SelectTrigger>
+                  <SelectValue placeholder="batch" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="batch">batch</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              The Call input requires a chain connection to populate pallets and methods.{" "}
+              <Link href="/builder" className="text-primary underline underline-offset-4 hover:text-primary/80">
+                Visit the Builder
+              </Link>{" "}
+              to try it live.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

components/docs/demos/index.ts

@@ -1,8 +1,9 @@
 export { AccountDemo } from "./account-demo";
 export { BalanceDemo } from "./balance-demo";
 export { EnumDemo } from "./enum-demo";
-export { BoolDemo, TextDemo, HashDemo, BytesDemo, AmountDemo } from "./simple-demos";
+export { BoolDemo, TextDemo, HashDemo, BytesDemo, AmountDemo, MomentDemo, VoteThresholdDemo, KeyValueDemo } from "./simple-demos";
 export { OptionDemo, VectorDemo } from "./composite-demos";
+export { VectorFixedDemo, BTreeMapDemo, StructDemo, TupleDemo, VoteDemo, CallDemo } from "./advanced-demos";
 export {
   ValidatorSelectorDemo,
   ValidatorMultiSelectorDemo,

components/docs/demos/simple-demos.tsx

@@ -1,20 +1,26 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { Boolean } from "@/components/params/inputs/boolean";
 import { Text } from "@/components/params/inputs/text";
 import { Hash256 } from "@/components/params/inputs/hash";
 import { Bytes } from "@/components/params/inputs/bytes";
 import { Amount } from "@/components/params/inputs/amount";
+import { Moment } from "@/components/params/inputs/moment";
+import { VoteThreshold } from "@/components/params/inputs/vote-threshold";
+import { KeyValue } from "@/components/params/inputs/key-value";
 
 export function BoolDemo() {
+  const [value, setValue] = useState(false);
+
   return (
     <div className="w-full max-w-md">
       <Boolean
         name="approve"
         label="Approve Proposal"
+        value={value}
         client={null as any}
-        onChange={() => {}}
+        onChange={(v) => setValue(v as boolean)}
       />
     </div>
   );
@@ -72,3 +78,42 @@ export function AmountDemo() {
     </div>
   );
 }
+
+export function MomentDemo() {
+  return (
+    <div className="w-full max-w-md">
+      <Moment
+        name="when"
+        label="Schedule Time"
+        client={null as any}
+        onChange={() => {}}
+      />
+    </div>
+  );
+}
+
+export function VoteThresholdDemo() {
+  return (
+    <div className="w-full max-w-md">
+      <VoteThreshold
+        name="threshold"
+        label="Vote Threshold"
+        client={null as any}
+        onChange={() => {}}
+      />
+    </div>
+  );
+}
+
+export function KeyValueDemo() {
+  return (
+    <div className="w-full max-w-md">
+      <KeyValue
+        name="entry"
+        label="Storage Entry"
+        client={null as any}
+        onChange={() => {}}
+      />
+    </div>
+  );
+}