@checkstack/ui 0.0.3 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @checkstack/ui
 
+## 0.1.0
+
+### Minor Changes
+
+- 8e43507: # Button component defaults to type="button"
+
+  The `Button` component now defaults to `type="button"` instead of the HTML default `type="submit"`. This prevents accidental form submissions when buttons are placed inside forms but aren't intended to submit.
+
+  ## Changes
+
+  - Default `type` prop is now `"button"` instead of the HTML implicit `"submit"`
+  - Form submission buttons must now explicitly set `type="submit"`
+
+  ## Migration
+
+  No migration needed if your submit buttons already have `type="submit"` explicitly set (recommended practice). If you have buttons that should submit forms but don't have an explicit type, add `type="submit"`:
+
+  ```diff
+  - <Button onClick={handleSubmit}>Submit</Button>
+  + <Button type="submit">Submit</Button>
+  ```
+
+### Patch Changes
+
+- 97c5a6b: Fixed DOM clobbering issue in DynamicForm by prefixing field IDs with 'field-'. Previously, schema fields with names matching native DOM properties (like 'nodeName', 'tagName', 'innerHTML') could shadow those properties, causing floating-ui and React to crash during DOM traversal.
+- Updated dependencies [8e43507]
+  - @checkstack/common@0.1.0
+  - @checkstack/frontend-api@0.0.4
+
+## 0.0.4
+
+### Patch Changes
+
+- f5b1f49: Extended DynamicForm type definitions with additional JSON Schema metadata properties.
+- Updated dependencies [f5b1f49]
+  - @checkstack/common@0.0.3
+  - @checkstack/frontend-api@0.0.3
+
 ## 0.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/components/Button.tsx

@@ -39,12 +39,16 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    { className, variant, size, asChild = false, type = "button", ...props },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        type={asChild ? undefined : type}
         {...props}
       />
     );

package/src/components/DynamicForm/DynamicForm.tsx

@@ -109,7 +109,9 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
           return (
             <FormField
               key={key}
-              id={key}
+              // Prefix with 'field-' to prevent DOM clobbering when field names
+              // match native DOM properties (e.g., nodeName, tagName, innerHTML)
+              id={`field-${key}`}
               label={label}
               propSchema={propSchema}
               value={value[key]}

package/src/components/DynamicForm/types.ts

@@ -1,24 +1,22 @@
 import type { TemplateProperty } from "../TemplateEditor";
+import type {
+  JsonSchemaPropertyCore,
+  JsonSchemaBase,
+} from "@checkstack/common";
 
-export interface JsonSchemaProperty {
-  type?: string;
-  description?: string;
-  enum?: string[];
-  const?: string | number | boolean; // For discriminator values
-  properties?: Record<string, JsonSchemaProperty>;
-  items?: JsonSchemaProperty;
-  required?: string[];
-  additionalProperties?: boolean | JsonSchemaProperty;
-  format?: string;
-  default?: unknown;
-  oneOf?: JsonSchemaProperty[]; // Discriminated union variants
-  anyOf?: JsonSchemaProperty[]; // Union variants
-  "x-secret"?: boolean; // Custom metadata for secret fields
-  "x-color"?: boolean; // Custom metadata for color fields
-  "x-options-resolver"?: string; // Name of a resolver function for dynamic options
-  "x-depends-on"?: string[]; // Field names this field depends on (triggers refetch when they change)
+/**
+ * JSON Schema property with DynamicForm-specific x-* extensions for config rendering.
+ * Uses the generic core type for proper recursive typing.
+ */
+export interface JsonSchemaProperty
+  extends JsonSchemaPropertyCore<JsonSchemaProperty> {
+  // Config-specific x-* extensions
+  "x-secret"?: boolean; // Field contains sensitive data
+  "x-color"?: boolean; // Field is a color picker
+  "x-options-resolver"?: string; // Name of resolver function for dynamic options
+  "x-depends-on"?: string[]; // Field names this field depends on (triggers refetch)
   "x-hidden"?: boolean; // Field should be hidden in form (auto-populated)
-  "x-searchable"?: boolean; // Shows a search input for filtering dropdown options
+  "x-searchable"?: boolean; // Shows search input for filtering dropdown options
 }
 
 /** Option returned by an options resolver */
@@ -32,10 +30,10 @@ export type OptionsResolver = (
   formValues: Record<string, unknown>
 ) => Promise<ResolverOption[]>;
 
-export interface JsonSchema {
-  properties?: Record<string, JsonSchemaProperty>;
-  required?: string[];
-}
+/**
+ * JSON Schema for config forms with DynamicForm-specific extensions.
+ */
+export type JsonSchema = JsonSchemaBase<JsonSchemaProperty>;
 
 export interface DynamicFormProps {
   schema: JsonSchema;