@btst/plugin-form-builder 0.0.0-stage → 1.0.0

package/dist/ui/src/components/form-builder/validation-schemas.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+const z = require('zod');
+
+const baseMetaSchema = z.z.object({
+  label: z.z.string().min(1).meta({ label: "Label" }),
+  description: z.z.string().optional().meta({ label: "Description" }),
+  required: z.z.boolean().default(false).meta({ label: "Required", fieldType: "switch" })
+});
+const baseMetaSchemaWithPlaceholder = baseMetaSchema.merge(
+  z.z.object({
+    placeholder: z.z.string().optional().meta({ label: "Placeholder" })
+  })
+);
+const DEFAULT_VALUE_SCHEMAS = {
+  string: z.z.string().optional().meta({ label: "Default Value" }),
+  number: z.z.number().optional().meta({ label: "Default Value" }),
+  boolean: z.z.boolean().default(false).meta({ label: "Default Value", fieldType: "switch" }),
+  date: z.z.date().optional().meta({ label: "Default Date", fieldType: "date" }),
+  enum: z.z.string().optional().meta({
+    label: "Default Value",
+    description: "Must match one of the options"
+  })
+};
+const stringValidationSchema = z.z.object({
+  minLength: z.z.number().int().min(0).optional().meta({ label: "Min Length" }),
+  maxLength: z.z.number().int().min(1).optional().meta({ label: "Max Length" })
+  // Note: pattern/regex is serializable but requires careful UX for input
+  // Uncomment to enable:
+  // pattern: z.string().optional().meta({ label: "Pattern (Regex)" }),
+});
+const numberValidationSchema = z.z.object({
+  min: z.z.number().optional().meta({ label: "Minimum" }),
+  max: z.z.number().optional().meta({ label: "Maximum" })
+  // Note: multipleOf is serializable but less commonly used
+  // Uncomment to enable:
+  // multipleOf: z.number().optional().meta({ label: "Multiple Of" }),
+});
+const booleanValidationSchema = z.z.object({});
+const dateValidationSchema = z.z.object({
+  // Date min/max can be added when the date serialization is refined
+  // minDate: z.date().optional().meta({ label: "Minimum Date", fieldType: "date" }),
+  // maxDate: z.date().optional().meta({ label: "Maximum Date", fieldType: "date" }),
+});
+const enumOptionsSchema = z.z.object({
+  options: z.z.string().meta({
+    label: "Options (one per line)",
+    fieldType: "textarea",
+    description: "Enter each option on a new line"
+  })
+});
+const objectValidationSchema = z.z.object({});
+const arrayValidationSchema = z.z.object({
+  minItems: z.z.number().int().min(0).optional().meta({ label: "Min Items" }),
+  maxItems: z.z.number().int().min(1).optional().meta({ label: "Max Items" })
+});
+
+exports.DEFAULT_VALUE_SCHEMAS = DEFAULT_VALUE_SCHEMAS;
+exports.arrayValidationSchema = arrayValidationSchema;
+exports.baseMetaSchema = baseMetaSchema;
+exports.baseMetaSchemaWithPlaceholder = baseMetaSchemaWithPlaceholder;
+exports.booleanValidationSchema = booleanValidationSchema;
+exports.dateValidationSchema = dateValidationSchema;
+exports.enumOptionsSchema = enumOptionsSchema;
+exports.numberValidationSchema = numberValidationSchema;
+exports.objectValidationSchema = objectValidationSchema;
+exports.stringValidationSchema = stringValidationSchema;

package/dist/ui/src/components/form-builder/validation-schemas.mjs

@@ -0,0 +1,56 @@
+import { z } from 'zod';
+
+const baseMetaSchema = z.object({
+  label: z.string().min(1).meta({ label: "Label" }),
+  description: z.string().optional().meta({ label: "Description" }),
+  required: z.boolean().default(false).meta({ label: "Required", fieldType: "switch" })
+});
+const baseMetaSchemaWithPlaceholder = baseMetaSchema.merge(
+  z.object({
+    placeholder: z.string().optional().meta({ label: "Placeholder" })
+  })
+);
+const DEFAULT_VALUE_SCHEMAS = {
+  string: z.string().optional().meta({ label: "Default Value" }),
+  number: z.number().optional().meta({ label: "Default Value" }),
+  boolean: z.boolean().default(false).meta({ label: "Default Value", fieldType: "switch" }),
+  date: z.date().optional().meta({ label: "Default Date", fieldType: "date" }),
+  enum: z.string().optional().meta({
+    label: "Default Value",
+    description: "Must match one of the options"
+  })
+};
+const stringValidationSchema = z.object({
+  minLength: z.number().int().min(0).optional().meta({ label: "Min Length" }),
+  maxLength: z.number().int().min(1).optional().meta({ label: "Max Length" })
+  // Note: pattern/regex is serializable but requires careful UX for input
+  // Uncomment to enable:
+  // pattern: z.string().optional().meta({ label: "Pattern (Regex)" }),
+});
+const numberValidationSchema = z.object({
+  min: z.number().optional().meta({ label: "Minimum" }),
+  max: z.number().optional().meta({ label: "Maximum" })
+  // Note: multipleOf is serializable but less commonly used
+  // Uncomment to enable:
+  // multipleOf: z.number().optional().meta({ label: "Multiple Of" }),
+});
+const booleanValidationSchema = z.object({});
+const dateValidationSchema = z.object({
+  // Date min/max can be added when the date serialization is refined
+  // minDate: z.date().optional().meta({ label: "Minimum Date", fieldType: "date" }),
+  // maxDate: z.date().optional().meta({ label: "Maximum Date", fieldType: "date" }),
+});
+const enumOptionsSchema = z.object({
+  options: z.string().meta({
+    label: "Options (one per line)",
+    fieldType: "textarea",
+    description: "Enter each option on a new line"
+  })
+});
+const objectValidationSchema = z.object({});
+const arrayValidationSchema = z.object({
+  minItems: z.number().int().min(0).optional().meta({ label: "Min Items" }),
+  maxItems: z.number().int().min(1).optional().meta({ label: "Max Items" })
+});
+
+export { DEFAULT_VALUE_SCHEMAS, arrayValidationSchema, baseMetaSchema, baseMetaSchemaWithPlaceholder, booleanValidationSchema, dateValidationSchema, enumOptionsSchema, numberValidationSchema, objectValidationSchema, stringValidationSchema };

package/dist/ui/src/components/form.cjs

@@ -0,0 +1,120 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactSlot = require('@radix-ui/react-slot');
+const reactHookForm = require('react-hook-form');
+const utils = require('../lib/utils.cjs');
+const label = require('./label.cjs');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+
+const Form = reactHookForm.FormProvider;
+const FormFieldContext = React__namespace.createContext(
+  {}
+);
+const FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
+};
+const useFormField = () => {
+  const fieldContext = React__namespace.useContext(FormFieldContext);
+  const itemContext = React__namespace.useContext(FormItemContext);
+  const { getFieldState } = reactHookForm.useFormContext();
+  const formState = reactHookForm.useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+const FormItemContext = React__namespace.createContext(
+  {}
+);
+function FormItem({ className, ...props }) {
+  const id = React__namespace.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "form-item",
+      className: utils.cn("grid gap-2", className),
+      ...props
+    }
+  ) });
+}
+function FormLabel({
+  className,
+  ...props
+}) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    label.Label,
+    {
+      "data-slot": "form-label",
+      "data-error": !!error,
+      className: utils.cn("data-[error=true]:text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+}
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactSlot.Slot,
+    {
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+function FormMessage({ className, ...props }) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: formMessageId,
+      className: utils.cn("text-destructive text-sm", className),
+      ...props,
+      children: body
+    }
+  );
+}
+
+exports.Form = Form;
+exports.FormControl = FormControl;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.useFormField = useFormField;

package/dist/ui/src/components/form.mjs

@@ -0,0 +1,98 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
+import { cn } from '../lib/utils.mjs';
+import { Label } from './label.mjs';
+
+const Form = FormProvider;
+const FormFieldContext = React.createContext(
+  {}
+);
+const FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+const FormItemContext = React.createContext(
+  {}
+);
+function FormItem({ className, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "form-item",
+      className: cn("grid gap-2", className),
+      ...props
+    }
+  ) });
+}
+function FormLabel({
+  className,
+  ...props
+}) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "form-label",
+      "data-error": !!error,
+      className: cn("data-[error=true]:text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+}
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+function FormMessage({ className, ...props }) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: formMessageId,
+      className: cn("text-destructive text-sm", className),
+      ...props,
+      children: body
+    }
+  );
+}
+
+export { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/ui/src/components/input.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../lib/utils.cjs');
+
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: utils.cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Input = Input;

package/dist/ui/src/components/input.mjs

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.mjs';
+
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Input };

package/dist/ui/src/components/label.cjs

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const LabelPrimitive = require('@radix-ui/react-label');
+const utils = require('../lib/utils.cjs');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceCompat(LabelPrimitive);
+
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LabelPrimitive__namespace.Root,
+    {
+      "data-slot": "label",
+      className: utils.cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Label = Label;

package/dist/ui/src/components/label.mjs

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../lib/utils.mjs';
+
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Label };

package/dist/ui/src/components/page-layout.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../lib/utils.cjs');
+
+function PageLayout({
+  children,
+  className,
+  "data-testid": dataTestId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "container mx-auto flex min-h-dvh flex-col items-center gap-12 px-4 py-18 lg:px-16",
+        className
+      ),
+      "data-testid": dataTestId,
+      children
+    }
+  );
+}
+
+exports.PageLayout = PageLayout;

package/dist/ui/src/components/page-layout.mjs

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.mjs';
+
+function PageLayout({
+  children,
+  className,
+  "data-testid": dataTestId
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "container mx-auto flex min-h-dvh flex-col items-center gap-12 px-4 py-18 lg:px-16",
+        className
+      ),
+      "data-testid": dataTestId,
+      children
+    }
+  );
+}
+
+export { PageLayout };

package/dist/ui/src/components/page-wrapper.cjs

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const pageLayout = require('./page-layout.cjs');
+const stackAttribution = require('./stack-attribution.cjs');
+
+function PageWrapper({
+  children,
+  className,
+  testId,
+  showAttribution = true
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(pageLayout.PageLayout, { className, "data-testid": testId, children }),
+    showAttribution && /* @__PURE__ */ jsxRuntime.jsx(stackAttribution.StackAttribution, {})
+  ] });
+}
+
+exports.PageWrapper = PageWrapper;

package/dist/ui/src/components/page-wrapper.mjs

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { PageLayout } from './page-layout.mjs';
+import { StackAttribution } from './stack-attribution.mjs';
+
+function PageWrapper({
+  children,
+  className,
+  testId,
+  showAttribution = true
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageLayout, { className, "data-testid": testId, children }),
+    showAttribution && /* @__PURE__ */ jsx(StackAttribution, {})
+  ] });
+}
+
+export { PageWrapper };

package/dist/ui/src/components/popover.cjs

@@ -0,0 +1,60 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const PopoverPrimitive = require('@radix-ui/react-popover');
+const utils = require('../lib/utils.cjs');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceCompat(PopoverPrimitive);
+
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  usePortal = true,
+  ...props
+}) {
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverPrimitive__namespace.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: utils.cn(
+        "bg-popover text-popover-foreground pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+  if (!usePortal) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: content });
+}
+
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;

package/dist/ui/src/components/popover.mjs

@@ -0,0 +1,42 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../lib/utils.mjs';
+
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  usePortal = true,
+  ...props
+}) {
+  const content = /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+  if (!usePortal) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content });
+}
+
+export { Popover, PopoverContent, PopoverTrigger };