Clean up components

apps/web/cypress/component/autoform/mantine-zod/ui-customization.cy.tsx

@@ -4,12 +4,13 @@ import { ZodProvider, fieldConfig } from "@autoform/zod";
 import { z } from "zod";
 import { TextField } from "@mui/material";
 import { TestWrapper } from "./utils";
+import { FieldWrapperProps } from "@autoform/react";
 
 describe("AutoForm UI Customization Tests", () => {
   const customSchema = z.object({
     name: z.string().superRefine(
       fieldConfig({
-        fieldWrapper: ({ label, children }) => (
+        fieldWrapper: ({ label, children }: FieldWrapperProps) => (
           <div className="custom-wrapper">
             <label className="custom-label">{label}</label>
             {children}

apps/web/cypress/component/autoform/mui-zod/ui-customization.cy.tsx

@@ -3,12 +3,13 @@ import { AutoForm } from "@autoform/mui";
 import { ZodProvider, fieldConfig } from "@autoform/zod";
 import { z } from "zod";
 import { TextField } from "@mui/material";
+import { FieldWrapperProps } from "@autoform/react";
 
 describe("AutoForm UI Customization Tests", () => {
   const customSchema = z.object({
     name: z.string().superRefine(
       fieldConfig({
-        fieldWrapper: ({ label, children }) => (
+        fieldWrapper: ({ label, children }: FieldWrapperProps) => (
           <div className="custom-wrapper">
             <label className="custom-label">{label}</label>
             {children}

apps/web/cypress/component/autoform/shadcn-zod/ui-customization.cy.tsx

@@ -4,12 +4,13 @@ import { ZodProvider, fieldConfig } from "@autoform/zod";
 import { z } from "zod";
 import { TextField } from "@mui/material";
 import { TestWrapper } from "./utils";
+import { FieldWrapperProps } from "@autoform/react";
 
 describe("AutoForm UI Customization Tests", () => {
   const customSchema = z.object({
     name: z.string().superRefine(
       fieldConfig({
-        fieldWrapper: ({ label, children }) => (
+        fieldWrapper: ({ label, children }: FieldWrapperProps) => (
           <div className="custom-wrapper">
             <label className="custom-label">{label}</label>
             {children}

packages/core/.eslintrc.js

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@repo/eslint-config/react-internal.js"],
+  extends: ["@repo/eslint-config/library.js"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: "./tsconfig.lint.json",

packages/core/src/schema-provider.ts

@@ -19,7 +19,7 @@ export interface SchemaProvider<T = any> {
    *
    * @param values - Form values to validate
    */
-  validateSchema(values: T): SchemaValidation;
+  validateSchema(_values: T): SchemaValidation;
 
   /**
    * Get the default values for the fields.

packages/core/src/types.ts

@@ -10,7 +10,7 @@ export interface FieldConfig<
   AdditionalRenderable = null,
   FieldTypes = string,
   FieldWrapper = any,
-  CustomData = {},
+  CustomData = Record<string, any>,
 > {
   description?: Renderable<AdditionalRenderable>;
   inputProps?: Record<string, any>;
@@ -41,21 +41,6 @@ export interface ParsedSchema<
   fields: ParsedField<AdditionalRenderable, FieldTypes>[];
 }
 
-export enum DependencyType {
-  DISABLES,
-  REQUIRES,
-  HIDES,
-  SETS_OPTIONS,
-}
-
-export interface Dependency {
-  sourceField: string;
-  targetField: string;
-  type: DependencyType;
-  condition: (sourceValue: any, targetValue: any) => boolean;
-  options?: string[];
-}
-
 export type SuccessfulSchemaValidation = {
   success: true;
   data: any;

packages/eslint-config/library.js

@@ -4,8 +4,14 @@ const project = resolve(process.cwd(), "tsconfig.json");
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["eslint:recommended", "prettier", "turbo"],
-  plugins: ["only-warn"],
+  extends: [
+    "eslint:recommended",
+    "prettier",
+    "turbo",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  plugins: ["only-warn", "@typescript-eslint"],
   globals: {
     React: true,
     JSX: true,
@@ -26,6 +32,17 @@ module.exports = {
     "node_modules/",
     "dist/",
   ],
+  rules: {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+  },
   overrides: [
     {
       files: ["*.js?(x)", "*.ts?(x)"],

packages/eslint-config/react-internal.js

@@ -10,8 +10,14 @@ const project = resolve(process.cwd(), "tsconfig.json");
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["eslint:recommended", "prettier", "turbo"],
-  plugins: ["only-warn"],
+  extends: [
+    "eslint:recommended",
+    "prettier",
+    "turbo",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  plugins: ["only-warn", "@typescript-eslint"],
   globals: {
     React: true,
     JSX: true,
@@ -36,4 +42,15 @@ module.exports = {
     // Force ESLint to detect .tsx files
     { files: ["*.js?(x)", "*.ts?(x)"] },
   ],
+  rules: {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+  },
 };

packages/mantine/src/AutoForm.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
   AutoForm as BaseAutoForm,
   AutoFormUIComponents,
-  AutoFormFieldComponents,
 } from "@autoform/react";
 import { MantineProvider } from "@mantine/core";
 import { AutoFormProps } from "./types";

packages/mantine/src/types.ts

@@ -1,4 +1,3 @@
-import { AutoFormProps as BaseAutoFormProps } from "@autoform/react";
 import { ExtendableAutoFormProps } from "@autoform/react/src/types";
 import { MantineProvider } from "@mantine/core";
 import { FieldValues } from "react-hook-form";

packages/mui/src/AutoForm.tsx

@@ -2,11 +2,8 @@ import React from "react";
 import {
   AutoForm as BaseAutoForm,
   AutoFormUIComponents,
-  AutoFormFieldComponents,
 } from "@autoform/react";
 import { ThemeProvider } from "@mui/material/styles";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
 import { AutoFormProps } from "./types";
 import { Form } from "./components/Form";
 import { FieldWrapper } from "./components/FieldWrapper";

packages/mui/src/components/ArrayElementWrapper.tsx

@@ -7,7 +7,6 @@ import { ArrayElementWrapperProps } from "@autoform/react";
 export const ArrayElementWrapper: React.FC<ArrayElementWrapperProps> = ({
   children,
   onRemove,
-  index,
 }) => {
   return (
     <Box

packages/mui/src/types.ts

@@ -1,7 +1,4 @@
-import {
-  AutoFormProps as BaseAutoFormProps,
-  ExtendableAutoFormProps,
-} from "@autoform/react";
+import { ExtendableAutoFormProps } from "@autoform/react";
 import { ThemeProvider } from "@mui/material/styles";
 import { FieldValues } from "react-hook-form";
 

packages/react/src/AutoFormField.tsx

@@ -22,7 +22,7 @@ export const AutoFormField: React.FC<{
   const error = getPathInObject(errors, path)?.message as string | undefined;
   const value = getValues(fullPath);
 
-  let FieldWrapper =
+  const FieldWrapper =
     field.fieldConfig?.fieldWrapper || uiComponents.FieldWrapper;
 
   let FieldComponent: React.ComponentType<AutoFormFieldProps> = () => (

packages/react/src/ObjectField.tsx

@@ -11,7 +11,7 @@ export const ObjectField: React.FC<{
 
   return (
     <uiComponents.ObjectWrapper label={getLabel(field)} field={field}>
-      {Object.entries(field.schema!).map(([key, subField]) => (
+      {Object.entries(field.schema!).map(([_key, subField]) => (
         <AutoFormField
           key={`${path.join(".")}.${subField.key}`}
           field={subField}

packages/react/src/types.ts

@@ -7,7 +7,6 @@ import {
   FieldConfig as BaseFieldConfig,
 } from "@autoform/core";
 import { FieldValues, UseFormReturn } from "react-hook-form";
-import { AutoForm } from "./AutoForm";
 
 export interface AutoFormProps<T extends FieldValues> {
   schema: SchemaProvider<T>;
@@ -95,7 +94,10 @@ export interface AutoFormContextType {
   formComponents: AutoFormFieldComponents;
 }
 
-export type FieldConfig<FieldTypes = string, CustomData = {}> = BaseFieldConfig<
+export type FieldConfig<
+  FieldTypes = string,
+  CustomData = Record<string, any>,
+> = BaseFieldConfig<
   ReactNode,
   FieldTypes,
   React.ComponentType<FieldWrapperProps>,

packages/react/src/utils.ts

@@ -10,7 +10,10 @@ import { FieldWrapperProps } from "./types";
 /**
  * @deprecated Use `buildZodFieldConfig` instead.
  */
-export function fieldConfig<FieldTypes = string, CustomData = {}>(
+export function fieldConfig<
+  FieldTypes = string,
+  CustomData = Record<string, any>,
+>(
   config: FieldConfig<
     ReactNode,
     FieldTypes,
@@ -26,7 +29,10 @@ export function fieldConfig<FieldTypes = string, CustomData = {}>(
   >(config);
 }
 
-export function buildZodFieldConfig<FieldTypes = string, CustomData = {}>(): (
+export function buildZodFieldConfig<
+  FieldTypes = string,
+  CustomData = Record<string, any>,
+>(): (
   config: FieldConfig<
     ReactNode,
     FieldTypes,
@@ -43,7 +49,10 @@ export function buildZodFieldConfig<FieldTypes = string, CustomData = {}>(): (
     >(config);
 }
 
-export function buildYupFieldConfig<FieldTypes = string, CustomData = {}>(): (
+export function buildYupFieldConfig<
+  FieldTypes = string,
+  CustomData = Record<string, any>,
+>(): (
   config: FieldConfig<
     ReactNode,
     FieldTypes,

packages/shadcn/.eslintrc.js → packages/shadcn/.eslintrc.cjs

@@ -7,4 +7,10 @@ module.exports = {
     project: "./tsconfig.lint.json",
     tsconfigRootDir: __dirname,
   },
+  ignorePatterns: [
+    "node_modules",
+    "dist",
+    "tailwind.config.ts",
+    "src/components/ui/*.tsx",
+  ],
 };

packages/shadcn/registry/autoform.json

@@ -89,7 +89,7 @@
     {
       "path": "autoform/components/FieldWrapper.tsx",
       "target": "components/ui/autoform/components/FieldWrapper.tsx",
-      "content": "import React from \"react\";\nimport { Label } from \"@/components/ui/label\";\nimport { FieldWrapperProps } from \"@autoform/react\";\n\nconst DISABLED_LABELS = [\"boolean\", \"object\", \"array\"];\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({\n  label,\n  children,\n  id,\n  field,\n}) => {\n  const isDisabled = DISABLED_LABELS.includes(field.type);\n\n  return (\n    <div className=\"space-y-2\">\n      {!isDisabled && (\n        <Label htmlFor={id}>\n          {label}\n          {field.required && <span className=\"text-destructive\"> *</span>}\n        </Label>\n      )}\n      {children}\n      {field.fieldConfig?.description && (\n        <p className=\"text-sm text-muted-foreground\">\n          {field.fieldConfig.description}\n        </p>\n      )}\n    </div>\n  );\n};\n",
+      "content": "import React from \"react\";\nimport { Label } from \"@/components/ui/label\";\nimport { FieldWrapperProps } from \"@autoform/react\";\n\nconst DISABLED_LABELS = [\"boolean\", \"object\", \"array\"];\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({\n  label,\n  children,\n  id,\n  field,\n  error,\n}) => {\n  const isDisabled = DISABLED_LABELS.includes(field.type);\n\n  return (\n    <div className=\"space-y-2\">\n      {!isDisabled && (\n        <Label htmlFor={id}>\n          {label}\n          {field.required && <span className=\"text-destructive\"> *</span>}\n        </Label>\n      )}\n      {children}\n      {field.fieldConfig?.description && (\n        <p className=\"text-sm text-muted-foreground\">\n          {field.fieldConfig.description}\n        </p>\n      )}\n      {error && <p className=\"text-sm text-destructive\">{error}</p>}\n    </div>\n  );\n};\n",
       "type": "registry:ui"
     },
     {
@@ -107,7 +107,7 @@
     {
       "path": "autoform/components/BooleanField.tsx",
       "target": "components/ui/autoform/components/BooleanField.tsx",
-      "content": "import React from \"react\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\nimport { Label } from \"../../label\";\n\nexport const BooleanField: React.FC<AutoFormFieldProps> = ({\n  field,\n  label,\n  id,\n  inputProps,\n}) => (\n  <div className=\"flex items-center space-x-2\">\n    <Checkbox id={id} {...inputProps} />\n    <Label htmlFor={id}>\n      {label}\n      {field.required && <span className=\"text-destructive\"> *</span>}\n    </Label>\n  </div>\n);\n",
+      "content": "import React from \"react\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\nimport { Label } from \"../../label\";\n\nexport const BooleanField: React.FC<AutoFormFieldProps> = ({\n  field,\n  label,\n  id,\n  inputProps,\n}) => (\n  <div className=\"flex items-center space-x-2\">\n    <Checkbox\n      id={id}\n      onCheckedChange={(checked) => {\n        // react-hook-form expects an event object\n        const event = {\n          target: {\n            name: field.key,\n            value: checked,\n          },\n        };\n        inputProps.onChange(event);\n      }}\n      checked={inputProps.value}\n    />\n    <Label htmlFor={id}>\n      {label}\n      {field.required && <span className=\"text-destructive\"> *</span>}\n    </Label>\n  </div>\n);\n",
       "type": "registry:ui"
     },
     {
@@ -119,7 +119,7 @@
     {
       "path": "autoform/components/ArrayElementWrapper.tsx",
       "target": "components/ui/autoform/components/ArrayElementWrapper.tsx",
-      "content": "import React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { TrashIcon } from \"lucide-react\";\nimport { ArrayElementWrapperProps } from \"@autoform/react\";\n\nexport const ArrayElementWrapper: React.FC<ArrayElementWrapperProps> = ({\n  children,\n  onRemove,\n  index,\n}) => {\n  return (\n    <div className=\"relative border p-4 rounded-md mt-2\">\n      <Button\n        onClick={onRemove}\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"absolute top-2 right-2\"\n      >\n        <TrashIcon className=\"h-4 w-4\" />\n      </Button>\n      {children}\n    </div>\n  );\n};\n",
+      "content": "import React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { TrashIcon } from \"lucide-react\";\nimport { ArrayElementWrapperProps } from \"@autoform/react\";\n\nexport const ArrayElementWrapper: React.FC<ArrayElementWrapperProps> = ({\n  children,\n  onRemove,\n}) => {\n  return (\n    <div className=\"relative border p-4 rounded-md mt-2\">\n      <Button\n        onClick={onRemove}\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"absolute top-2 right-2\"\n        type=\"button\"\n      >\n        <TrashIcon className=\"h-4 w-4\" />\n      </Button>\n      {children}\n    </div>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]

packages/shadcn/src/components/ui/autoform/AutoForm.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
   AutoForm as BaseAutoForm,
   AutoFormUIComponents,
-  AutoFormFieldComponents,
 } from "@autoform/react";
 import { AutoFormProps } from "./types";
 import { Form } from "./components/Form";

packages/shadcn/src/components/ui/autoform/types.ts

@@ -1,7 +1,4 @@
-import {
-  AutoFormProps as BaseAutoFormProps,
-  ExtendableAutoFormProps,
-} from "@autoform/react";
+import { ExtendableAutoFormProps } from "@autoform/react";
 import { FieldValues } from "react-hook-form";
 
 export interface AutoFormProps<T extends FieldValues>

packages/shadcn/tsconfig.lint.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@autoform/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "tailwind.config.ts",
+    "src/components/ui/*.tsx"
+  ]
+}

packages/yup/src/default-values.ts

@@ -1,4 +1,3 @@
-import * as yup from "yup";
 import { YupField, YupObjectOrWrapped } from "./types";
 
 export function getYupFieldDefaultValue(schema: YupField): any {

packages/yup/src/field-config.ts

@@ -7,7 +7,7 @@ export function fieldConfig<
   AdditionalRenderable = null,
   FieldTypes = string,
   FieldWrapper = any,
-  CustomData = {},
+  CustomData = Record<string, any>,
 >(
   config: FieldConfig<
     AdditionalRenderable,

packages/yup/src/field-type-inference.ts

@@ -1,5 +1,4 @@
 import { FieldConfig } from "@autoform/core";
-import * as yup from "yup";
 import { YupEnumSchema, YupField } from "./types";
 
 export function inferFieldType(

packages/yup/src/provider.ts

@@ -3,7 +3,6 @@ import { SchemaProvider } from "@autoform/core";
 import { parseSchema } from "./schema-parser";
 import { validateSchema } from "./validator";
 import { getDefaultValues } from "./default-values";
-import { YupObjectOrWrapped } from "./types";
 
 export class YupProvider<T extends yup.AnyObjectSchema>
   implements SchemaProvider

packages/zod/src/field-config.ts

@@ -7,7 +7,7 @@ export function fieldConfig<
   AdditionalRenderable = null,
   FieldTypes = string,
   FieldWrapper = any,
-  CustomData = {},
+  CustomData = Record<string, any>,
 >(
   config: FieldConfig<
     AdditionalRenderable,