@pstdio/ui 0.0.1

package/src/components/param-editor-input-group.tsx

@@ -0,0 +1,145 @@
+import { Box, Button, Collapsible, Flex, Stack, Text, useDisclosure } from "@chakra-ui/react";
+import { ChevronDown, ChevronLeft } from "lucide-react";
+import type { InputGroup, Param, ParamValue, ParamValueMap } from "./param-editor.types";
+import { ColorInput } from "./param-editor-color-input";
+import { DateInput } from "./param-editor-date-input";
+import { NumberInput } from "./param-editor-number-input";
+import { SelectionInput } from "./param-editor-selection-input";
+import { TextInput } from "./param-editor-text-input";
+
+interface InputGroupComponentProps {
+  group: InputGroup;
+  defaultValues: ParamValueMap;
+  onChange: (id: string, value: ParamValue) => void;
+  readOnly?: boolean;
+  fullWidth?: boolean;
+}
+
+const resolveDefaultValue = <T,>(defaultValues: ParamValueMap, paramId: string, fallback: T) => {
+  return defaultValues[paramId] === undefined ? fallback : (defaultValues[paramId] as T);
+};
+
+export const InputGroupComponent = (props: InputGroupComponentProps) => {
+  const { group, defaultValues, onChange, readOnly, fullWidth = false } = props;
+  const { open, onToggle } = useDisclosure({
+    defaultOpen: !group.defaultCollapsed,
+  });
+
+  const renderNumberParam = (param: Extract<Param, { type: "number" }>) => (
+    <NumberInput
+      readOnly={readOnly}
+      id={param.id}
+      key={param.id}
+      name={param.name}
+      description={param.description || ""}
+      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue)}
+      min={param.min}
+      max={param.max}
+      step={param.step}
+      onChange={onChange}
+      fullWidth={fullWidth}
+    />
+  );
+
+  const renderTextParam = (param: Extract<Param, { type: "text" }>) => (
+    <TextInput
+      readOnly={readOnly}
+      id={param.id}
+      key={param.id}
+      name={param.name}
+      description={param.description || ""}
+      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue)}
+      singleLine={param.singleLine}
+      onChange={onChange}
+      fullWidth={fullWidth}
+    />
+  );
+
+  const renderSelectionParam = (param: Extract<Param, { type: "selection" }>) => (
+    <SelectionInput
+      readOnly={readOnly}
+      id={param.id}
+      key={param.id}
+      name={param.name}
+      description={param.description || ""}
+      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue)}
+      options={param.options}
+      onChange={onChange}
+      multiSelect={param.multiSelect}
+      placeholder={param.placeholder}
+      fullWidth={fullWidth}
+    />
+  );
+
+  const renderDateParam = (param: Extract<Param, { type: "date" }>) => (
+    <DateInput
+      readOnly={readOnly}
+      id={param.id}
+      key={param.id}
+      name={param.name}
+      description={param.description || ""}
+      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue)}
+      min={param.min}
+      max={param.max}
+      onChange={onChange}
+      fullWidth={fullWidth}
+    />
+  );
+
+  const renderColorParam = (param: Extract<Param, { type: "color" }>) => (
+    <ColorInput
+      readOnly={readOnly}
+      id={param.id}
+      key={param.id}
+      name={param.name}
+      description={param.description || ""}
+      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue)}
+      onChange={onChange}
+      fullWidth={fullWidth}
+    />
+  );
+
+  const renderParam = (param: Param) => {
+    switch (param.type) {
+      case "number":
+        return renderNumberParam(param);
+      case "text":
+        return renderTextParam(param);
+      case "selection":
+        return renderSelectionParam(param);
+      case "date":
+        return renderDateParam(param);
+      case "color":
+        return renderColorParam(param);
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Box>
+      {group.collapsible ? (
+        <Button variant="ghost" size="xs" onClick={onToggle} pl={0} _hover={{ bg: "transparent" }}>
+          <Flex alignItems="center" gap="xs">
+            <Text textStyle="label/M/medium">{group.title}</Text>
+            {open ? <ChevronDown size={14} /> : <ChevronLeft size={14} />}
+          </Flex>
+        </Button>
+      ) : (
+        <Text textStyle="label/M/medium">{group.title}</Text>
+      )}
+
+      {group.description && (
+        <Text textStyle="label/S/regular" color="foreground.secondary" mb="sm">
+          {group.description}
+        </Text>
+      )}
+
+      <Collapsible.Root open={group.collapsible ? open : true}>
+        <Collapsible.Content>
+          <Stack gap="md">{group.params.map(renderParam)}</Stack>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </Box>
+  );
+};

package/src/components/param-editor-number-input.tsx

@@ -0,0 +1,145 @@
+import { Box, Flex, type NumberInputValueChangeDetails, type SliderValueChangeDetails, Text } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+import { NumberInputField, NumberInputRoot } from "./number-input";
+import { Slider } from "./slider";
+import { Tooltip } from "./tooltip";
+
+interface NumberInputProps {
+  id: string;
+  defaultValue: number;
+  name: string;
+  step?: number;
+  min?: number;
+  max?: number;
+  onChange: (id: string, value: number) => void;
+  description: string;
+  readOnly?: boolean;
+  hideLabel?: boolean;
+  hideSlider?: boolean;
+  tooltipPlacement?: "top" | "right" | "bottom" | "left";
+  fullWidth?: boolean;
+}
+
+export const NumberInput = (props: NumberInputProps) => {
+  const {
+    id,
+    defaultValue,
+    name,
+    step = 1,
+    min,
+    max,
+    onChange,
+    description,
+    readOnly,
+    hideLabel = false,
+    hideSlider = false,
+    tooltipPlacement = "right",
+    fullWidth = false,
+  } = props;
+  const [value, setValue] = useState(defaultValue);
+  const isRange = min !== undefined && max !== undefined;
+  const showSlider = isRange && !hideSlider;
+  const useFullWidthLayout = fullWidth && !showSlider;
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleChange = (nextValue: number) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => onChange(id, nextValue), 540);
+  };
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  return (
+    <Box>
+      <Tooltip positioning={{ placement: tooltipPlacement }} content={description} contentProps={{ padding: "xxs" }}>
+        {useFullWidthLayout ? (
+          <Box mb="sm">
+            {!hideLabel && (
+              <Text textStyle="label/S/medium" color="foreground.secondary" mb="xs">
+                {name}
+              </Text>
+            )}
+            <NumberInputRoot
+              disabled={readOnly}
+              width="100%"
+              size="sm"
+              value={`${value}`}
+              step={step}
+              min={min}
+              max={max}
+              onValueChange={(details: NumberInputValueChangeDetails) => {
+                const next = Number.isNaN(details.valueAsNumber) ? (min ?? 0) : details.valueAsNumber;
+                setValue(next);
+                scheduleChange(next);
+              }}
+            >
+              <NumberInputField
+                className="nodrag"
+                h="2rem"
+                readOnly={readOnly}
+                placeholder={hideLabel ? name : undefined}
+                onKeyUp={(e) => {
+                  if (e.key === "Enter") {
+                    e.currentTarget.blur();
+                  }
+                }}
+              />
+            </NumberInputRoot>
+          </Box>
+        ) : (
+          <Flex alignItems="center" justifyContent="space-between" minHeight="2rem" mb="sm">
+            {!hideLabel && (
+              <Text textStyle="label/S/medium" color="foreground.secondary">
+                {name}
+              </Text>
+            )}
+            <NumberInputRoot
+              disabled={readOnly}
+              width="5rem"
+              size="sm"
+              value={`${value}`}
+              step={step}
+              min={min}
+              max={max}
+              onValueChange={(details: NumberInputValueChangeDetails) => {
+                const next = Number.isNaN(details.valueAsNumber) ? (min ?? 0) : details.valueAsNumber;
+                setValue(next);
+                scheduleChange(next);
+              }}
+            >
+              <NumberInputField
+                className="nodrag"
+                h="2rem"
+                readOnly={readOnly}
+                placeholder={hideLabel ? name : undefined}
+                onKeyUp={(e) => {
+                  if (e.key === "Enter") {
+                    e.currentTarget.blur();
+                  }
+                }}
+              />
+            </NumberInputRoot>
+          </Flex>
+        )}
+      </Tooltip>
+      {showSlider && (
+        <Slider
+          size="sm"
+          disabled={readOnly}
+          value={[value]}
+          step={step}
+          min={min}
+          max={max}
+          onValueChange={(details: SliderValueChangeDetails) => {
+            setValue(details.value[0]);
+          }}
+          onValueChangeEnd={(details: SliderValueChangeDetails) => {
+            onChange(id, details.value[0]);
+          }}
+        />
+      )}
+    </Box>
+  );
+};

package/src/components/param-editor-selection-input.tsx

@@ -0,0 +1,181 @@
+import { Box, Button, Flex, Menu, Text } from "@chakra-ui/react";
+import { Check, ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { MenuItem } from "./menu-item";
+import { Tooltip } from "./tooltip";
+
+interface Option {
+  id: string;
+  name: string;
+  icon?: string;
+}
+
+interface SelectionInputProps {
+  id: string;
+  defaultValue: string | string[];
+  name: string;
+  options: Option[];
+  onChange: (id: string, value: string | string[]) => void;
+  description: string;
+  readOnly?: boolean;
+  hideLabel?: boolean;
+  multiSelect?: boolean;
+  tooltipPlacement?: "top" | "right" | "bottom" | "left";
+  placeholder?: string;
+  fullWidth?: boolean;
+}
+
+export const SelectionInput = (props: SelectionInputProps) => {
+  const {
+    id,
+    defaultValue,
+    name,
+    options,
+    onChange,
+    description,
+    readOnly,
+    hideLabel = false,
+    multiSelect = false,
+    tooltipPlacement = "right",
+    placeholder,
+    fullWidth = false,
+  } = props;
+  const [value, setValue] = useState(defaultValue);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scheduleChange = (nextValue: string | string[]) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => onChange(id, nextValue), 540);
+  };
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const isSelected = (optionId: string) => {
+    if (multiSelect) {
+      return Array.isArray(value) && value.includes(optionId);
+    }
+    return value === optionId;
+  };
+
+  const getDisplayText = () => {
+    if (multiSelect) {
+      const selectedValues = Array.isArray(value) ? value : [];
+      if (selectedValues.length === 0) {
+        return placeholder || `Select`;
+      }
+
+      const selectedOptions = selectedValues
+        .map((id) => options.find((o) => o.id === id))
+        .filter(Boolean)
+        .map((opt) => opt!.name);
+
+      if (selectedOptions.length <= 3) {
+        return selectedOptions.join(", ");
+      }
+      const displayItems = selectedOptions.slice(0, 3).join(", ");
+      const remaining = selectedOptions.length - 3;
+      return `${displayItems} +${remaining}`;
+    }
+    const selectedOption = options.find((o) => o.id === value);
+    return selectedOption?.name || "Select";
+  };
+
+  const handleSelect = (newValue: string) => {
+    if (multiSelect) {
+      const currentValues = Array.isArray(value) ? value : [];
+      let updatedValues: string[];
+
+      if (currentValues.includes(newValue)) {
+        updatedValues = currentValues.filter((v) => v !== newValue);
+      } else {
+        updatedValues = [...currentValues, newValue];
+      }
+
+      setValue(updatedValues);
+      scheduleChange(updatedValues);
+    } else {
+      setValue(newValue);
+      scheduleChange(newValue);
+    }
+  };
+
+  return (
+    <Box>
+      <Tooltip positioning={{ placement: tooltipPlacement }} content={description} contentProps={{ padding: "xxs" }}>
+        {fullWidth ? (
+          <Box mb="sm">
+            {!hideLabel && (
+              <Text textStyle="label/S/medium" color="foreground.secondary" mb="xs">
+                {name}
+              </Text>
+            )}
+            <Menu.Root closeOnSelect={!multiSelect}>
+              <Menu.Trigger asChild>
+                <Button
+                  size="sm"
+                  borderWidth="1px"
+                  borderStyle="solid"
+                  borderColor="border"
+                  disabled={readOnly}
+                  width="100%"
+                >
+                  <Flex alignItems="center" justifyContent="space-between" gap="xs" w="full">
+                    <Flex alignItems="center" gap="xs">
+                      {getDisplayText()}
+                    </Flex>
+                    <ChevronDown size={14} />
+                  </Flex>
+                </Button>
+              </Menu.Trigger>
+              <Menu.Positioner>
+                <Menu.Content>
+                  {options.map((opt) => (
+                    <MenuItem
+                      key={opt.id}
+                      primaryLabel={opt.name}
+                      onClick={() => handleSelect(opt.id)}
+                      rightIcon={multiSelect && isSelected(opt.id) ? Check : undefined}
+                      rightIconSize="12px"
+                    />
+                  ))}
+                </Menu.Content>
+              </Menu.Positioner>
+            </Menu.Root>
+          </Box>
+        ) : (
+          <Flex alignItems="center" justifyContent="space-between" minHeight="2rem" mb="sm">
+            {!hideLabel && (
+              <Text textStyle="label/S/medium" color="foreground.secondary">
+                {name}
+              </Text>
+            )}
+            <Menu.Root closeOnSelect={!multiSelect}>
+              <Menu.Trigger asChild>
+                <Button size="sm" borderWidth="1px" borderStyle="solid" borderColor="border" disabled={readOnly}>
+                  <Flex alignItems="center" gap="xs">
+                    {getDisplayText()}
+                    <ChevronDown size={14} />
+                  </Flex>
+                </Button>
+              </Menu.Trigger>
+              <Menu.Positioner>
+                <Menu.Content>
+                  {options.map((opt) => (
+                    <MenuItem
+                      key={opt.id}
+                      primaryLabel={opt.name}
+                      onClick={() => handleSelect(opt.id)}
+                      rightIcon={multiSelect && isSelected(opt.id) ? Check : undefined}
+                      rightIconSize="12px"
+                    />
+                  ))}
+                </Menu.Content>
+              </Menu.Positioner>
+            </Menu.Root>
+          </Flex>
+        )}
+      </Tooltip>
+    </Box>
+  );
+};

package/src/components/param-editor-text-input.tsx

@@ -0,0 +1,113 @@
+import { Box, Flex, Input, Text, Textarea } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+import { Tooltip } from "./tooltip";
+
+interface TextInputProps {
+  id: string;
+  defaultValue: string;
+  name: string;
+  onChange: (id: string, value: string) => void;
+  description: string;
+  readOnly?: boolean;
+  singleLine?: boolean;
+  hideLabel?: boolean;
+  fullWidth?: boolean;
+}
+
+export const TextInput = (props: TextInputProps) => {
+  const {
+    id,
+    defaultValue,
+    name,
+    onChange,
+    description,
+    readOnly,
+    singleLine = true,
+    hideLabel = false,
+    fullWidth = false,
+  } = props;
+  const [value, setValue] = useState(defaultValue);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scheduleChange = (nextValue: string) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => onChange(id, nextValue), 540);
+  };
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
+    scheduleChange(newValue);
+  };
+
+  return (
+    <Box>
+      <Tooltip positioning={{ placement: "right" }} content={description} contentProps={{ padding: "xxs" }}>
+        {singleLine && !fullWidth ? (
+          <Flex alignItems="center" justifyContent="space-between" minHeight="2rem" mb="sm">
+            {!hideLabel && (
+              <Text mr="xs" textStyle="label/S/medium" color="foreground.secondary">
+                {name}
+              </Text>
+            )}
+            <Input
+              className="nodrag"
+              readOnly={readOnly}
+              flex="1"
+              maxW="12.5rem"
+              size="sm"
+              type="text"
+              placeholder={hideLabel ? name : undefined}
+              value={value}
+              onChange={(e) => handleChange(e.target.value)}
+              onKeyUp={(e) => {
+                if (e.key === "Enter") {
+                  e.currentTarget.blur();
+                }
+              }}
+            />
+          </Flex>
+        ) : (
+          <Box>
+            {!hideLabel && (
+              <Text textStyle="label/S/medium" color="foreground.secondary" mb="xs">
+                {name}
+              </Text>
+            )}
+            {singleLine ? (
+              <Input
+                className="nodrag"
+                readOnly={readOnly}
+                width="100%"
+                size="sm"
+                type="text"
+                placeholder={hideLabel ? name : undefined}
+                value={value}
+                onChange={(e) => handleChange(e.target.value)}
+                onKeyUp={(e) => {
+                  if (e.key === "Enter") {
+                    e.currentTarget.blur();
+                  }
+                }}
+              />
+            ) : (
+              <Textarea
+                className="nodrag"
+                readOnly={readOnly}
+                width="100%"
+                size="sm"
+                placeholder={hideLabel ? name : undefined}
+                value={value}
+                onChange={(e) => handleChange(e.target.value)}
+                rows={3}
+                resize="vertical"
+              />
+            )}
+          </Box>
+        )}
+      </Tooltip>
+    </Box>
+  );
+};