@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/runtime/react/controls-panel/renderers/controls-panel-basic-renderers.tsx

@@ -0,0 +1,421 @@
+import * as React from "react";
+import {
+  AnchorGrid,
+  Checkbox,
+  CodeTextarea,
+  RangeInput,
+  RangeSlider,
+  Segmented,
+  Select,
+  Slider,
+  Switch,
+  TextInput,
+  Vector,
+  type ControlChangeMeta,
+} from "@repo/ui";
+
+import { toolcraftCanvasAspectRatioPresets } from "../../../schema/canvas-aspect-ratio-presets";
+import type { ToolcraftControlSchema } from "../../../schema/types";
+import {
+  getControlMarkerCount,
+  shouldCommitTextControlOnBlur,
+} from "../layout/controls-panel-layout";
+import {
+  asBoolean,
+  asCanvasAspectRatioValue,
+  asNumber,
+  asNumberArray,
+  asRangeInputValue,
+  asString,
+  asVectorPadCoordinateMode,
+  asVectorPadVariant,
+  asVectorValue,
+  parseCanvasAspectRatioOption,
+  type CanvasAspectRatioValue,
+} from "../values/controls-panel-values";
+
+const canvasAspectRatioOptions = [
+  ...toolcraftCanvasAspectRatioPresets.map((preset) => ({
+    label: preset.value,
+    value: preset.value,
+  })),
+  { label: "Custom...", value: "custom" },
+] as const;
+
+export type BasicControlCommit = (
+  nextValue: unknown,
+  meta?: ControlChangeMeta,
+) => void;
+
+export type BasicControlKeyframeWrap = (args: {
+  children: React.ReactNode;
+  control: ToolcraftControlSchema;
+  disableAction: boolean;
+  name: string;
+  providerKey: string;
+  value: unknown;
+}) => React.ReactNode;
+
+export type BasicControlRenderArgs = {
+  commit: BasicControlCommit;
+  control: ToolcraftControlSchema;
+  id: string;
+  name: string;
+  usesHeaderKeyframeAction: boolean;
+  value: unknown;
+  vectorPadShape: "compact" | "square";
+  withKeyframeLabelAction: BasicControlKeyframeWrap;
+};
+
+function CanvasAspectRatioControl({
+  defaultValue,
+  name,
+  onValueChange,
+  value,
+}: {
+  defaultValue: unknown;
+  name: string;
+  onValueChange?: (
+    value: CanvasAspectRatioValue,
+    meta?: ControlChangeMeta,
+  ) => void;
+  value: unknown;
+}): React.JSX.Element {
+  const ratio = asCanvasAspectRatioValue(value, defaultValue);
+  const selectedValue = ratio.mode === "custom" ? "custom" : ratio.value;
+
+  function commitRatio(
+    nextRatio: CanvasAspectRatioValue,
+    meta?: ControlChangeMeta,
+  ): void {
+    onValueChange?.(nextRatio, meta);
+  }
+
+  function updatePreset(nextValue: string): void {
+    if (nextValue === "custom") {
+      commitRatio({
+        height: ratio.height,
+        mode: "custom",
+        value: `${ratio.width}:${ratio.height}`,
+        width: ratio.width,
+      });
+      return;
+    }
+
+    const nextRatio = parseCanvasAspectRatioOption(nextValue);
+
+    if (nextRatio) {
+      commitRatio(nextRatio);
+    }
+  }
+
+  function updateCustomDimension(
+    dimension: "height" | "width",
+    nextValue: string,
+    meta?: ControlChangeMeta,
+  ): void {
+    const numberValue = Number.parseFloat(nextValue);
+
+    if (!Number.isFinite(numberValue) || numberValue <= 0) {
+      return;
+    }
+
+    const width =
+      dimension === "width" ? Math.max(1, Math.round(numberValue)) : ratio.width;
+    const height =
+      dimension === "height" ? Math.max(1, Math.round(numberValue)) : ratio.height;
+
+    commitRatio(
+      {
+        height,
+        mode: "custom",
+        value: `${width}:${height}`,
+        width,
+      },
+      meta,
+    );
+  }
+
+  return (
+    <div className="min-w-0 space-y-2" data-slot="canvas-aspect-ratio-control">
+      <Select
+        name={name}
+        onValueChange={updatePreset}
+        options={canvasAspectRatioOptions}
+        value={selectedValue}
+      />
+      {ratio.mode === "custom" ? (
+        <TextInput
+          inputs={[
+            {
+              commitOnBlur: true,
+              defaultValue: String(ratio.width),
+              name: "Width",
+              onValueChange: (nextValue, meta) =>
+                updateCustomDimension("width", nextValue, meta),
+              value: String(ratio.width),
+            },
+            {
+              commitOnBlur: true,
+              defaultValue: String(ratio.height),
+              name: "Height",
+              onValueChange: (nextValue, meta) =>
+                updateCustomDimension("height", nextValue, meta),
+              value: String(ratio.height),
+            },
+          ]}
+          inputsPerRow={2}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function renderBasicControl({
+  commit,
+  control,
+  id,
+  name,
+  usesHeaderKeyframeAction,
+  value,
+  vectorPadShape,
+  withKeyframeLabelAction,
+}: BasicControlRenderArgs): React.ReactNode | null {
+  switch (control.type) {
+    case "aspectRatio":
+      return (
+        <CanvasAspectRatioControl
+          defaultValue={control.defaultValue}
+          key={id}
+          name={name}
+          onValueChange={commit}
+          value={value}
+        />
+      );
+
+    case "anchorGrid":
+      return withKeyframeLabelAction({
+        children: (
+          <AnchorGrid
+            key={id}
+            name={name}
+            onValueChange={commit}
+            value={
+              asString(value, "center") as React.ComponentProps<
+                typeof AnchorGrid
+              >["value"]
+            }
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+
+    case "checkbox":
+      return (
+        <Checkbox
+          checked={asBoolean(value)}
+          key={id}
+          name={name}
+          onCheckedChange={commit}
+          showLabel={control.label !== false}
+        />
+      );
+
+    case "code":
+      return withKeyframeLabelAction({
+        children: (
+          <CodeTextarea
+            defaultValue={asString(control.defaultValue, asString(value))}
+            key={id}
+            name={name}
+            onValueChange={commit}
+            showLabel={control.label !== false}
+            value={asString(value)}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+
+    case "rangeInput": {
+      const rangeValue = asRangeInputValue(value);
+
+      return withKeyframeLabelAction({
+        children: (
+          <RangeInput
+            defaultValue={asRangeInputValue(control.defaultValue)}
+            end={rangeValue.end}
+            key={id}
+            name={name}
+            onValueChange={commit}
+            showLabel={control.label !== false}
+            start={rangeValue.start}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+    }
+
+    case "rangeSlider":
+      return withKeyframeLabelAction({
+        children: (
+          <RangeSlider
+            baseValue={asNumberArray(control.defaultValue, [])}
+            disabled={control.disabled}
+            markerCount={getControlMarkerCount(control)}
+            max={control.max ?? 100}
+            min={control.min ?? 0}
+            key={id}
+            name={name}
+            onValueChange={commit}
+            step={control.step ?? 0.1}
+            unit={control.unit}
+            value={asNumberArray(value, [control.min ?? 0, control.max ?? 100])}
+            valueLabel={control.valueLabel}
+            variant={control.variant === "discrete" ? "discrete" : "continuous"}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+
+    case "segmented":
+      return withKeyframeLabelAction({
+        children: (
+          <Segmented
+            key={id}
+            name={name}
+            onValueChange={commit}
+            options={control.options ?? []}
+            value={asString(value, control.options?.[0]?.value ?? "")}
+            variant={control.variant === "dots" ? "dots" : "default"}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+
+    case "select":
+      return (
+        <Select
+          key={id}
+          name={name}
+          onValueChange={commit}
+          options={control.options ?? []}
+          showLabel={control.label !== false}
+          value={asString(value, control.options?.[0]?.value ?? "")}
+        />
+      );
+
+    case "slider":
+      return withKeyframeLabelAction({
+        children: (
+          <Slider
+            baseValue={asNumber(control.defaultValue, control.min ?? 0)}
+            disabled={control.disabled}
+            key={id}
+            markerCount={getControlMarkerCount(control)}
+            max={control.max ?? 100}
+            min={control.min ?? 0}
+            name={name}
+            onValueChange={commit}
+            step={control.step ?? 1}
+            unit={control.unit}
+            value={asNumber(
+              value,
+              asNumber(control.defaultValue, control.min ?? 0),
+            )}
+            valueLabel={control.valueLabel}
+            variant={control.variant === "discrete" ? "discrete" : "continuous"}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+
+    case "switch":
+      return (
+        <Switch
+          checked={asBoolean(value)}
+          key={id}
+          name={name}
+          onCheckedChange={commit}
+          showLabel={control.label !== false}
+        />
+      );
+
+    case "text":
+      return withKeyframeLabelAction({
+        children: (
+          <TextInput
+            commitOnBlur={shouldCommitTextControlOnBlur(control)}
+            defaultValue={asString(control.defaultValue, asString(value))}
+            key={id}
+            name={name}
+            onValueChange={commit}
+            showLabel={control.label !== false}
+            value={asString(value)}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+
+    case "vector": {
+      const vectorValue = asVectorValue(value);
+      const padVariant = asVectorPadVariant(control.variant);
+
+      return withKeyframeLabelAction({
+        children: (
+          <Vector
+            defaultValue={asVectorValue(control.defaultValue)}
+            key={id}
+            name={name}
+            onValueChange={commit}
+            padCoordinateMode={asVectorPadCoordinateMode(
+              control.coordinateMode,
+              padVariant,
+            )}
+            padShape={vectorPadShape}
+            padVariant={padVariant}
+            x={vectorValue.x}
+            xLabel={control.xLabel}
+            y={vectorValue.y}
+            yLabel={control.yLabel}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+    }
+
+    default:
+      return null;
+  }
+}

package/templates/runtime/react/controls-panel/renderers/controls-panel-collection-renderer.tsx

@@ -0,0 +1,286 @@
+import * as React from "react";
+import {
+  Checkbox,
+  CollectionActions,
+  Color,
+  ColorOpacity,
+  FontPicker,
+  RangeInput,
+  Segmented,
+  Select,
+  Slider,
+  Switch,
+  TextInput,
+  type ControlChangeMeta,
+} from "@repo/ui";
+
+import type { ToolcraftControlSchema } from "../../../schema/types";
+import {
+  asBoolean,
+  asColorOpacityValue,
+  asColorValue,
+  asCollectionItems,
+  asFontPickerValue,
+  asNumber,
+  asRangeInputValue,
+  asString,
+  getCollectionHardMaxItems,
+  getCollectionItemBaseLabel,
+  getCollectionItemDefaultValue,
+  getCollectionItemName,
+  getCollectionItemType,
+  getCollectionMinItems,
+} from "../values/controls-panel-values";
+
+export type CollectionControlSetValue = (
+  target: string,
+  value: unknown,
+  label?: string,
+  meta?: ControlChangeMeta,
+) => void;
+
+export type CollectionActionsControlRenderArgs = {
+  control: ToolcraftControlSchema;
+  name: string;
+  setControlValue: CollectionControlSetValue;
+  value: unknown;
+};
+
+export function renderCollectionActionsControl({
+  control,
+  name,
+  setControlValue,
+  value,
+}: CollectionActionsControlRenderArgs): React.JSX.Element {
+  const items = asCollectionItems(value, control.defaultValue);
+  const minItems = getCollectionMinItems(control);
+  const hardMaxItems = getCollectionHardMaxItems(control);
+  const canAdd = hardMaxItems === null || items.length < hardMaxItems;
+  const canRemove = items.length > minItems;
+  const itemType = getCollectionItemType(control);
+
+  function setItems(nextItems: unknown[], label: string): void {
+    setControlValue(control.target, nextItems, label);
+  }
+
+  function addItem(): void {
+    if (!canAdd) {
+      return;
+    }
+
+    setItems([...items, getCollectionItemDefaultValue(control)], control.addLabel ?? "Add item");
+  }
+
+  function removeItem(): void {
+    if (!canRemove) {
+      return;
+    }
+
+    setItems(items.slice(0, -1), control.removeLabel ?? "Remove item");
+  }
+
+  function updateItem(index: number, nextValue: unknown, meta?: ControlChangeMeta): void {
+    const nextItems = items.map((item, itemIndex) =>
+      itemIndex === index ? nextValue : item,
+    );
+    const itemName = getCollectionItemName(control, index) || name;
+
+    setControlValue(control.target, nextItems, itemName, meta);
+  }
+
+  function renderColorItems(): React.ReactNode {
+    return (
+      <div
+        className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-4"
+        data-slot="collection-actions-items-grid"
+      >
+        {items.map((item, index) => {
+          const itemName = getCollectionItemName(control, index);
+
+          return (
+            <Color
+              hex={asColorValue(item).hex}
+              key={itemName || index}
+              name={itemName}
+              onValueChange={(nextValue: { hex: string }, meta?: ControlChangeMeta) =>
+                updateItem(index, nextValue, meta)
+              }
+              showLabel={false}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  function renderColorOpacityItems(): React.ReactNode {
+    return items.map((item, index) => {
+      const colorOpacityValue = asColorOpacityValue(item);
+      const itemName = getCollectionItemName(control, index);
+
+      return (
+        <ColorOpacity
+          hex={colorOpacityValue.hex}
+          key={itemName || index}
+          name={itemName}
+          onValueChange={(nextValue, meta) => updateItem(index, nextValue, meta)}
+          opacity={colorOpacityValue.opacity}
+          showLabel={false}
+        />
+      );
+    });
+  }
+
+  function renderStackedItemControl(item: unknown, index: number): React.ReactNode {
+    const itemControl = control.itemControl;
+    const itemName = getCollectionItemName(control, index);
+    const key = `${itemName || "item"}-${index}`;
+    const update = (nextValue: unknown, meta?: ControlChangeMeta) => {
+      updateItem(index, nextValue, meta);
+    };
+
+    switch (itemType) {
+      case "checkbox":
+        return (
+          <Checkbox
+            checked={asBoolean(item)}
+            key={key}
+            name={itemName}
+            onCheckedChange={update}
+            showLabel={itemControl?.label !== false}
+          />
+        );
+      case "rangeInput": {
+        const rangeValue = asRangeInputValue(item);
+
+        return (
+          <RangeInput
+            defaultValue={asRangeInputValue(itemControl?.defaultValue)}
+            end={rangeValue.end}
+            key={key}
+            name={itemName}
+            onValueChange={update}
+            start={rangeValue.start}
+          />
+        );
+      }
+      case "segmented":
+        return (
+          <Segmented
+            key={key}
+            name={itemName}
+            onValueChange={update}
+            options={itemControl?.options ?? []}
+            value={asString(item, itemControl?.options?.[0]?.value ?? "")}
+            variant={itemControl?.variant === "dots" ? "dots" : "default"}
+          />
+        );
+      case "select":
+        return (
+          <Select
+            key={key}
+            name={itemName}
+            onValueChange={update}
+            options={itemControl?.options ?? []}
+            value={asString(item, itemControl?.options?.[0]?.value ?? "")}
+          />
+        );
+      case "slider":
+        return (
+          <Slider
+            baseValue={asNumber(
+              itemControl?.defaultValue,
+              itemControl?.min ?? 0,
+            )}
+            key={key}
+            markerCount={
+              typeof itemControl?.markerCount === "number"
+                ? itemControl.markerCount
+                : undefined
+            }
+            max={itemControl?.max ?? 100}
+            min={itemControl?.min ?? 0}
+            name={itemName}
+            onValueChange={update}
+            step={itemControl?.step ?? 1}
+            unit={itemControl?.unit}
+            value={asNumber(
+              item,
+              asNumber(itemControl?.defaultValue, itemControl?.min ?? 0),
+            )}
+            variant={itemControl?.variant === "discrete" ? "discrete" : "continuous"}
+          />
+        );
+      case "switch":
+        return (
+          <Switch
+            checked={asBoolean(item)}
+            key={key}
+            name={itemName}
+            onCheckedChange={update}
+            showLabel={itemControl?.label !== false}
+          />
+        );
+      case "fontPicker":
+        return (
+          <FontPicker
+            defaultValue={asFontPickerValue(itemControl?.defaultValue)}
+            key={key}
+            name={itemName || "Font"}
+            onValueChange={update}
+            value={asFontPickerValue(item)}
+          />
+        );
+      case "text":
+        return (
+          <TextInput
+            commitOnBlur={itemControl?.commitMode === "setting"}
+            defaultValue={asString(itemControl?.defaultValue, asString(item))}
+            key={key}
+            name={itemName}
+            onValueChange={update}
+            value={asString(item)}
+          />
+        );
+      default:
+        return (
+          <TextInput
+            defaultValue={asString(itemControl?.defaultValue, asString(item))}
+            key={key}
+            name={itemName}
+            onValueChange={update}
+            value={asString(item)}
+          />
+        );
+    }
+  }
+
+  function renderCollectionItems(): React.ReactNode {
+    if (itemType === "color") {
+      return renderColorItems();
+    }
+
+    if (itemType === "colorOpacity") {
+      return renderColorOpacityItems();
+    }
+
+    return items.map(renderStackedItemControl);
+  }
+
+  return (
+    <div className="min-w-0 space-y-3" data-slot="collection-actions-control">
+      <CollectionActions
+        addLabel={control.addLabel ?? `Add ${getCollectionItemBaseLabel(control)}`}
+        canAdd={canAdd}
+        canRemove={canRemove}
+        name={name}
+        onAdd={addItem}
+        onRemove={removeItem}
+        removeLabel={control.removeLabel ?? `Remove ${getCollectionItemBaseLabel(control)}`}
+      />
+      <div className="min-w-0 space-y-4" data-slot="collection-actions-items">
+        {renderCollectionItems()}
+      </div>
+    </div>
+  );
+}