create table: set default table name to be based on selected collection

src/components/TableSettings/TableId.tsx

@@ -1,33 +1,22 @@
 import { useEffect } from "react";
 import { useWatch } from "react-hook-form";
 import _camelCase from "lodash/camelCase";
+import {
+  ShortTextComponent,
+  IShortTextComponentProps,
+} from "@rowy/form-builder";
 
-import { TextField, TextFieldProps } from "@mui/material";
-import { IFieldComponentProps, FieldAssistiveText } from "@rowy/form-builder";
-
-export interface ICamelCaseIdProps
-  extends IFieldComponentProps,
-    Omit<
-      TextFieldProps,
-      "variant" | "name" | "label" | "onBlur" | "onChange" | "value" | "ref"
-    > {
+export interface ITableIdProps extends IShortTextComponentProps {
   watchedField?: string;
 }
 
-export default function CamelCaseId({
-  field: { onChange, onBlur, value, ref },
+export default function TableId({ watchedField, ...props }: ITableIdProps) {
+  const {
+    field: { onChange },
+    useFormMethods: { control },
+    disabled,
+  } = props;
 
-  name,
-  useFormMethods: { control },
-
-  errorMessage,
-  assistiveText,
-
-  disabled,
-
-  watchedField,
-  ...props
-}: ICamelCaseIdProps) {
   const watchedValue = useWatch({ control, name: watchedField } as any);
   useEffect(() => {
     if (!disabled && typeof watchedValue === "string" && !!watchedValue)
@@ -35,37 +24,9 @@ export default function CamelCaseId({
   }, [watchedValue, disabled]);
 
   return (
-    <TextField
-      onChange={onChange}
-      onBlur={onBlur}
-      value={value}
-      fullWidth
-      error={!!errorMessage}
-      helperText={
-        (errorMessage || assistiveText) && (
-          <>
-            {errorMessage}
-
-            <FieldAssistiveText style={{ margin: 0 }} disabled={!!disabled}>
-              {assistiveText}
-            </FieldAssistiveText>
-          </>
-        )
-      }
-      FormHelperTextProps={{ component: "div" } as any}
-      name={name}
-      id={`field-${name}`}
-      sx={{ "& .MuiInputBase-input": { fontFamily: "mono" } }}
+    <ShortTextComponent
       {...props}
-      disabled={disabled}
-      inputProps={{
-        required: false,
-        // https://github.com/react-hook-form/react-hook-form/issues/4485
-        disabled: false,
-        readOnly: disabled,
-        style: disabled ? { cursor: "default" } : undefined,
-      }}
-      inputRef={ref}
+      sx={{ "& .MuiInputBase-input": { fontFamily: "mono" } }}
     />
   );
 }

src/components/TableSettings/TableName.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { useWatch } from "react-hook-form";
+import _startCase from "lodash/startCase";
+import {
+  ShortTextComponent,
+  IShortTextComponentProps,
+} from "@rowy/form-builder";
+
+export interface ITableNameProps extends IShortTextComponentProps {
+  watchedField?: string;
+}
+
+export default function TableName({ watchedField, ...props }: ITableNameProps) {
+  const {
+    field: { onChange },
+    useFormMethods: { control },
+    disabled,
+  } = props;
+
+  const watchedValue = useWatch({ control, name: watchedField } as any);
+  useEffect(() => {
+    if (!disabled && typeof watchedValue === "string" && !!watchedValue)
+      onChange(_startCase(watchedValue));
+  }, [watchedValue, disabled]);
+
+  return <ShortTextComponent {...props} />;
+}

src/components/TableSettings/form.tsx

@@ -194,10 +194,11 @@ export const tableSettings = (
     // Step 2: Display
     {
       step: "display",
-      type: FieldType.shortText,
+      type: "tableName",
       name: "name",
       label: "Table name",
       required: true,
+      watchedField: "collection",
       assistiveText: "User-facing name for this table",
       autoFocus: true,
       gridCols: { xs: 12, sm: 6 },

src/components/TableSettings/index.tsx

@@ -9,6 +9,7 @@ import { DialogContentText, Stack, Typography } from "@mui/material";
 
 import { FormDialog, FormFields } from "@rowy/form-builder";
 import { tableSettings } from "./form";
+import TableName from "./TableName";
 import TableId from "./TableId";
 import SuggestedRules from "./SuggestedRules";
 import SteppedAccordion from "@src/components/SteppedAccordion";
@@ -32,7 +33,25 @@ export enum TableSettingsDialogModes {
   create,
   update,
 }
-export interface ICreateTableDialogProps {
+const customComponents = {
+  tableName: {
+    component: TableName,
+    defaultValue: "",
+    validation: [["string"]],
+  },
+  tableId: {
+    component: TableId,
+    defaultValue: "",
+    validation: [["string"]],
+  },
+  suggestedRules: {
+    component: SuggestedRules,
+    defaultValue: "",
+    validation: [["string"]],
+  },
+};
+
+export interface ITableSettingsProps {
   mode: TableSettingsDialogModes | null;
   clearDialog: () => void;
   data: Table | null;
@@ -42,7 +61,7 @@ export default function TableSettings({
   mode,
   clearDialog,
   data,
-}: ICreateTableDialogProps) {
+}: ITableSettingsProps) {
   const { settingsActions, roles, tables, rowyRun } = useProjectContext();
   const sectionNames = Array.from(
     new Set((tables ?? []).map((t) => t.section))
@@ -206,18 +225,6 @@ export default function TableSettings({
     ),
     Array.isArray(collections) ? collections.filter((x) => x !== CONFIG) : null
   );
-  const customComponents = {
-    tableId: {
-      component: TableId,
-      defaultValue: "",
-      validation: [["string"]],
-    },
-    suggestedRules: {
-      component: SuggestedRules,
-      defaultValue: "",
-      validation: [["string"]],
-    },
-  };
 
   return (
     <FormDialog