@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/dial/DialPanel.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+
+import { DialSchema, DialGroupConfig, LabelPositionT } from "./DialProvider";
+import {
+  DialBooleanInput,
+  DialEulerDegInput,
+  DialIntInput,
+  DialNumberInput,
+  DialSelectInput,
+  DialSliderInput,
+  DialVec3Input,
+  DialVectorInput,
+} from "./wrapped-inputs";
+
+interface DialSchemaRendererProps {
+  schemas: DialSchema[];
+  groups?: DialGroupConfig[];
+}
+
+export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups: groupConfigs }) => {
+  // Create a map of group configurations for easy lookup
+  const groupConfigMap: Record<string, DialGroupConfig> = {};
+
+  // First, populate from explicit groups prop if provided
+  if (groupConfigs) {
+    groupConfigs.forEach((config) => {
+      groupConfigMap[config.name] = config;
+    });
+  }
+
+  // Then, analyze schemas to build group configs from tags if not already defined
+  schemas.forEach((schema) => {
+    const grouping = schema.tags?.grouping;
+    if (grouping && !groupConfigMap[grouping]) {
+      // Initialize group config if it doesn't exist
+      groupConfigMap[grouping] = { name: grouping };
+    }
+    // Check if this schema has noWrap tag and apply it to the group
+    if (grouping && schema.tags?.noWrap && groupConfigMap[grouping]) {
+      groupConfigMap[grouping].noWrap = true;
+    }
+  });
+
+  // Group schemas by their grouping tag
+  const groupedSchemas: Record<string, DialSchema[]> = {};
+  const ungrouped: DialSchema[] = [];
+
+  schemas.forEach((schema) => {
+    const grouping = schema.tags?.grouping;
+    if (grouping) {
+      if (!groupedSchemas[grouping]) {
+        groupedSchemas[grouping] = [];
+      }
+      groupedSchemas[grouping].push(schema);
+    } else {
+      ungrouped.push(schema);
+    }
+  });
+
+  // Render a single schema item as an input component
+  const renderSchemaInput = (schema: DialSchema) => {
+    const { name, dtype, min, max, step, options, tags } = schema;
+    const labelPosition = tags?.labelPosition as LabelPositionT;
+    const label = name.charAt(0).toUpperCase() + name.slice(1);
+
+    // Choose the right input component based on dtype
+    switch (dtype) {
+      case "vector3":
+        return (
+          <DialVec3Input
+            key={name}
+            name={name}
+            label={label}
+            step={step}
+            labelPosition={labelPosition}
+          />
+        );
+
+      case "euler":
+        return (
+          <DialEulerDegInput
+            key={name}
+            name={name}
+            label={label}
+            step={step}
+            labelPosition={labelPosition}
+          />
+        );
+
+      case "vector":
+      case "vector-6":
+      case "number-group":
+        // For generic vector or number-group, use VectorN input
+        return <DialVectorInput key={name} name={name} label={label} />;
+
+      case "boolean":
+        return (
+          <DialBooleanInput key={name} name={name} label={label} labelPosition={labelPosition} />
+        );
+
+      case "number-int":
+        // Integer input
+        return (
+          <DialIntInput
+            key={name}
+            name={name}
+            label={label}
+            step={step || 1}
+            labelPosition={labelPosition}
+          />
+        );
+
+      case "number":
+        // Use slider if min and max are defined, otherwise use number input
+        if (min !== undefined && max !== undefined && !options) {
+          return (
+            <DialSliderInput
+              key={name}
+              name={name}
+              label={label}
+              min={min}
+              max={max}
+              step={step}
+              labelPosition={labelPosition}
+            />
+          );
+        }
+
+        // Use select if options are provided
+        if (options && options.length > 0) {
+          return (
+            <DialSelectInput
+              key={name}
+              name={name}
+              label={label}
+              options={options}
+              labelPosition={labelPosition}
+            />
+          );
+        }
+
+        // Default to number input
+        return (
+          <DialNumberInput
+            key={name}
+            name={name}
+            label={label}
+            min={min}
+            max={max}
+            step={step}
+            labelPosition={labelPosition}
+          />
+        );
+
+      case "string":
+        // If options are provided, use select
+        if (options && options.length > 0) {
+          return (
+            <DialSelectInput
+              key={name}
+              name={name}
+              label={label}
+              options={options}
+              labelPosition={labelPosition}
+            />
+          );
+        }
+        // For now, skip pure string inputs (could add text input later)
+        return null;
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="dial-schema-renderer space-y-4">
+      {/* Render grouped schemas */}
+      {Object.entries(groupedSchemas).map(([name, schemaList]) => {
+        // Use group configuration
+        const groupConfig = groupConfigMap[name];
+        const hasNoWrap = groupConfig?.noWrap;
+        const wrapClass = hasNoWrap ? "" : "flex-wrap";
+
+        return (
+          <div key={name} className="dial-group">
+            <div className="text-text-primary mb-2 font-medium">{name}</div>
+            <div className={`dial-row flex flex-row ${wrapClass} gap-4`}>
+              {schemaList.map(renderSchemaInput)}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Render ungrouped schemas - always wrap */}
+      {ungrouped.length > 0 && (
+        <div className="dial-group">
+          {/*<h3 className="text-sm font-semibold text-text-primary mb-2">*/}
+          {/*  General*/}
+          {/*</h3>*/}
+          <div className="dial-row flex flex-row flex-wrap gap-4">
+            {ungrouped.map(renderSchemaInput)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/dial/DialProvider.example.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { DialProvider, DialSchema, DialValue } from "./DialProvider";
+
+// Example 1: Uncontrolled Component (manages its own state)
+export const UncontrolledExample = () => {
+  const schemas: DialSchema[] = [
+    { name: "volume", dtype: "number", value: 50, min: 0, max: 100 },
+    { name: "enabled", dtype: "boolean", value: true },
+  ];
+
+  return (
+    <DialProvider
+      schemas={schemas}
+      onValueChange={(name, value) => {
+        console.log(`${name} changed to:`, value);
+      }}
+    >
+      <div>{/* Your dial components here */}</div>
+    </DialProvider>
+  );
+};
+
+// Example 2: Controlled Component (parent manages state)
+export const ControlledExample = () => {
+  const [dialValues, setDialValues] = useState<Record<string, DialValue>>({
+    volume: 50,
+    enabled: true,
+  });
+
+  const schemas: DialSchema[] = [
+    { name: "volume", dtype: "number", min: 0, max: 100 },
+    { name: "enabled", dtype: "boolean" },
+  ];
+
+  const handleValueChange = (name: string, value: DialValue) => {
+    setDialValues((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    console.log(`${name} changed to:`, value);
+  };
+
+  return (
+    <div>
+      <DialProvider
+        schemas={schemas}
+        values={dialValues} // Pass controlled values
+        onValueChange={handleValueChange}
+      >
+        <div>{/* Your dial components here */}</div>
+      </DialProvider>
+      
+      {/* Parent can also control values externally */}
+      <button onClick={() => setDialValues({ volume: 0, enabled: false })}>
+        Reset All Values
+      </button>
+    </div>
+  );
+};
+
+// Example 3: Semi-controlled (initial values + onChange)
+export const SemiControlledExample = () => {
+  const schemas: DialSchema[] = [
+    { name: "volume", dtype: "number", min: 0, max: 100 },
+    { name: "enabled", dtype: "boolean" },
+  ];
+
+  return (
+    <DialProvider
+      schemas={schemas}
+      initialValues={{ volume: 75, enabled: false }} // Set initial values
+      onValueChange={(name, value) => {
+        // React to changes but don't control the values
+        console.log(`${name} changed to:`, value);
+      }}
+    >
+      <div>{/* Your dial components here */}</div>
+    </DialProvider>
+  );
+};

package/src/dial/DialProvider.tsx

@@ -0,0 +1,138 @@
+import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from "react";
+
+export type LabelPositionT = "left" | "top" | "inline" | undefined;
+
+// Define specific value types for dial values
+export type DialValue = string | number | boolean | number[] | string[] | null | undefined;
+
+// Types for the dial schema
+export interface DialSchema {
+  name: string;
+  dtype: string;
+  value?: DialValue;
+  min?: number;
+  max?: number;
+  step?: number;
+  options?: Array<string | number | { label: string; value: string | number }>;
+  dimensions?: number;
+  placeholders?: string[];
+  tooltips?: string[];
+  dtypes?: string[];
+  mins?: number[];
+  maxs?: number[];
+  steps?: number[];
+  helpText?: string;
+  icon?: string;
+  tags?: {
+    grouping?: string;
+    col?: boolean | number;
+    row?: number;
+    layout?: string;
+    labelPosition?: LabelPositionT;
+    noWrap?: boolean;
+  };
+}
+
+// Group configuration interface
+export interface DialGroupConfig {
+  name: string;
+  noWrap?: boolean;
+  [key: string]: unknown;
+}
+
+export interface DialSchemaGroup {
+  component: string;
+  schemas: DialSchema[];
+  groups?: DialGroupConfig[];
+}
+
+// Context type
+interface DialContextValue {
+  values: Record<string, DialValue>;
+  schemas: DialSchema[];
+  getValue: (name: string) => DialValue;
+  setValue: (name: string, value: DialValue) => void;
+  onValueChange?: (name: string, value: DialValue) => void;
+}
+
+// Create the context
+const DialSchemaContext = createContext<DialContextValue | undefined>(undefined);
+
+// Hook to use the dial context
+export const useDialSchema = () => {
+  const context = useContext(DialSchemaContext);
+  if (!context) {
+    throw new Error("useDialSchema must be used within a DialSchemaProvider");
+  }
+  return context;
+};
+
+interface DialSchemaProviderProps {
+  children: ReactNode;
+  schemas: DialSchema[];
+  initialValues?: Record<string, DialValue>;
+  values?: Record<string, DialValue>; // For controlled mode
+  onValueChange?: (name: string, value: DialValue) => void;
+}
+
+// Provider component
+export const DialProvider: React.FC<DialSchemaProviderProps> = ({
+  children,
+  schemas,
+  initialValues = {},
+  values: controlledValues,
+  onValueChange,
+}) => {
+  // Determine if component is controlled
+  const isControlled = controlledValues !== undefined;
+
+  // Initialize state with default values from schemas or provided initial values
+  const [internalValues, setInternalValues] = useState<Record<string, DialValue>>(() => {
+    const defaultValues: Record<string, DialValue> = {};
+    schemas.forEach((schema) => {
+      defaultValues[schema.name] = initialValues[schema.name] ?? schema.value;
+    });
+    return defaultValues;
+  });
+
+  // Use controlled values if provided, otherwise use internal state
+  const values = isControlled ? controlledValues : internalValues;
+
+  const getValue = useCallback(
+    (name: string) => {
+      return values[name];
+    },
+    [values],
+  );
+
+  const setValue = useCallback(
+    (name: string, value: DialValue) => {
+      if (isControlled) {
+        // In controlled mode, only call the change handler
+        onValueChange?.(name, value);
+      } else {
+        // In uncontrolled mode, update internal state
+        setInternalValues((prev) => ({
+          ...prev,
+          [name]: value,
+        }));
+        // Also call external change handler if provided
+        onValueChange?.(name, value);
+      }
+    },
+    [isControlled, onValueChange],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      values,
+      schemas,
+      getValue,
+      setValue,
+      onValueChange,
+    }),
+    [values, schemas, getValue, setValue, onValueChange],
+  );
+
+  return <DialSchemaContext.Provider value={contextValue}>{children}</DialSchemaContext.Provider>;
+};

package/src/dial/index.ts

@@ -0,0 +1,26 @@
+// Core dial components
+export { DialProvider, useDialSchema } from './DialProvider';
+export type { DialSchema, DialSchemaGroup, DialGroupConfig, DialValue, LabelPositionT } from './DialProvider';
+export { DialPanel } from './DialPanel';
+
+// All wrapped input components
+export {
+  // Basic controlled inputs
+  DialBooleanInput,
+  DialNumberInput,
+  DialSelectInput,
+  DialSliderInput,
+  DialVectorInput,
+  // UIKit wrapped inputs
+  DialVec3Input,
+  DialEulerInput,
+  DialEulerDegInput,
+  DialQuaternionInput,
+  DialVectorWrappedInput,
+  DialIntInput,
+  DialDegInput,
+  DialRadInput,
+  DialCmInput,
+  DialInchInput,
+  DialTimeInput,
+} from './wrapped-inputs';

package/src/dial/wrapped-inputs/ControlledInputs.tsx

@@ -0,0 +1,176 @@
+import React from "react";
+import { LabelPositionT, useDialSchema } from "../DialProvider";
+import {
+  FormLayout,
+  Input,
+  InputSlot,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Slider,
+  Switch,
+} from "../../index"; // Base input component that connects to the dial store
+
+// Base input component that connects to the dial store
+interface DialInputProps {
+  name: string;
+  type?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  options?: any[];
+  label?: string;
+  labelPosition?: LabelPositionT;
+  size?: "sm" | "md" | "lg";
+}
+
+// Helper component for wrapping inputs with labels
+const DialInputWrapper: React.FC<{
+  label?: string;
+  children: React.ReactElement;
+}> = ({ label, children }) => {
+  if (!label) {
+    return <>{children}</>;
+  }
+
+  return (
+    <FormLayout orientation="label-top">
+      <Label size="sm">{label}</Label>
+      {children}
+    </FormLayout>
+  );
+};
+
+export const DialNumberInput: React.FC<DialInputProps> = ({
+  name,
+  min,
+  max,
+  step = 1,
+  label,
+  labelPosition,
+  size = "sm",
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  const inputProps = {
+    type: "number" as const,
+    value,
+    min,
+    max,
+    step,
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+      setValue(name, parseFloat(e.target.value)),
+    size,
+  };
+
+  if (labelPosition === "inline") {
+    return (
+      <Input {...inputProps}>{label ? <InputSlot side="left">{label}</InputSlot> : null}</Input>
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <Input {...inputProps} />
+      </DialInputWrapper>
+    );
+  }
+};
+
+export const DialBooleanInput: React.FC<DialInputProps> = ({ name, label, labelPosition }) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? false) as boolean;
+
+  const switchProps = {
+    checked: value,
+    onCheckedChange: (checked: boolean) => setValue(name, checked),
+  };
+
+  if (!label) {
+    return <Switch {...switchProps} />;
+  }
+
+  return (
+    <div className="flex flex-row items-center gap-2">
+      <Label size="sm">{label}</Label>
+      <Switch {...switchProps} />
+    </div>
+  );
+};
+
+export const DialSelectInput: React.FC<DialInputProps> = ({
+  name,
+  options = [],
+  label,
+  labelPosition,
+  size = "sm",
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name);
+
+  const selectComponent = (
+    <Select
+      value={String(value)}
+      onValueChange={(val) => {
+        // Try to parse as number if possible
+        const parsed = !isNaN(Number(val)) ? Number(val) : val;
+        setValue(name, parsed);
+      }}
+    >
+      <SelectTrigger size={size}>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((opt, i) => (
+          <SelectItem key={i} value={String(opt)}>
+            {String(opt)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+
+  if (!label) {
+    return selectComponent;
+  }
+
+  return <DialInputWrapper label={label}>{selectComponent}</DialInputWrapper>;
+};
+
+export const DialSliderInput: React.FC<DialInputProps> = ({
+  name,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  labelPosition,
+  size = "sm",
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? min) as number;
+
+  const sliderProps = {
+    value: [value],
+    onValueChange: ([val]: number[]) => setValue(name, val),
+    min,
+    max,
+    step,
+    className: "flex-1",
+  };
+
+  const sliderComponent = (
+    <div className="flex flex-1 items-center gap-2">
+      <Slider {...sliderProps} />
+      <span className="text-text-secondary w-12 text-right text-sm">{value}</span>
+    </div>
+  );
+
+  if (!label) {
+    return sliderComponent;
+  }
+
+  return <DialInputWrapper label={label}>{sliderComponent}</DialInputWrapper>;
+};