Merge pull request #656 from gadget-inc/mill/exportAutoRichTextField

Export AutoRichText component

Author: MillanWangGadget

packages/react/.changeset/shiny-fireants-learn.md

@@ -0,0 +1,5 @@
+---
+"@gadgetinc/react": patch
+---
+
+Made `AutoRichTextInput` available in `@gadgetinc/react/auto/polaris` to be used in AutoForm components

packages/react/src/auto/mui/inputs/LazyLoadedMUIAutoRichTextInput.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { AutoRichTextInputProps } from "../../../auto/shared/AutoRichTextInputProps.js";
+
+// lazy import for smaller bundle size by default
+const LazyLoadedMUIAutoRichTextInput = React.lazy(() => import("./MUIAutoRichTextInput.js"));
+
+export const MUIAutoRichTextInput = (props: AutoRichTextInputProps) => {
+  return (
+    <>
+      <LazyLoadedMUIAutoRichTextInput {...props} />
+    </>
+  );
+};

packages/react/src/auto/mui/inputs/MUIAutoInput.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FieldType } from "../../../metadata.js";
 import { useFieldMetadata } from "../../hooks/useFieldMetadata.js";
+import { MUIAutoRichTextInput } from "./LazyLoadedMUIAutoRichTextInput.js";
 import { MUIAutoBooleanInput } from "./MUIAutoBooleanInput.js";
 import MUIAutoDateTimePicker from "./MUIAutoDateTimePicker.js";
 import { MUIAutoEncryptedStringInput } from "./MUIAutoEncryptedStringInput.js";
@@ -14,9 +15,6 @@ import { MUIAutoTextInput } from "./MUIAutoTextInput.js";
 import { MUIAutoBelongsToInput } from "./relationships/MUIAutoBelongsToInput.js";
 import { MUIAutoHasManyInput } from "./relationships/MUIAutoHasManyInput.js";
 
-// lazy import for smaller bundle size by default
-const MUIAutoRichTextInput = React.lazy(() => import("./MUIAutoRichTextInput.js"));
-
 export const MUIAutoInput = (props: { field: string; label?: string }) => {
   const { metadata } = useFieldMetadata(props.field);
   const config = metadata.configuration;

packages/react/src/auto/mui/inputs/MUIAutoRichTextInput.tsx

@@ -4,6 +4,9 @@ import AutoRichTextInput from "../../shared/AutoRichTextInput.js";
 import "../styles/rich-text.css";
 import { MUIAutoFormControl } from "./MUIAutoFormControl.js";
 
+/**
+ * Prefer using the LazyLoadedMUIAutoRichTextInput.tsx variant of this component to reduce the bundle size by default.
+ */
 export default function MUIAutoRichTextInput(props: ComponentProps<typeof AutoRichTextInput>) {
   return (
     <MUIAutoFormControl {...props}>

packages/react/src/auto/mui/test-index.ts

@@ -2,6 +2,7 @@
 export { MUIAutoButton as AutoButton } from "./MUIAutoButton.js";
 export * from "./MUIAutoForm.js";
 export { MUIAutoForm as AutoForm } from "./MUIAutoForm.js";
+export { MUIAutoRichTextInput as AutoRichTextInput } from "./inputs/LazyLoadedMUIAutoRichTextInput.js";
 export { MUIAutoBooleanInput as AutoBooleanInput } from "./inputs/MUIAutoBooleanInput.js";
 export { MUIAutoDateTimePicker as AutoDateTimePicker } from "./inputs/MUIAutoDateTimePicker.js";
 export { MUIAutoEnumInput as AutoEnumInput } from "./inputs/MUIAutoEnumInput.js";

packages/react/src/auto/polaris/index.ts

@@ -1,6 +1,7 @@
 export { PolarisAutoButton as AutoButton } from "./PolarisAutoButton.js";
 export { PolarisAutoForm as AutoForm, PolarisAutoFormSkeleton as AutoFormSkeleton } from "./PolarisAutoForm.js";
 export { PolarisAutoTable as AutoTable } from "./PolarisAutoTable.js";
+export { PolarisAutoRichTextInput as AutoRichTextInput } from "./inputs/LazyLoadedPolarisAutoRichTextInput.js";
 export { PolarisAutoBooleanInput as AutoBooleanInput } from "./inputs/PolarisAutoBooleanInput.js";
 export { PolarisAutoDateTimePicker as AutoDateTimePicker } from "./inputs/PolarisAutoDateTimePicker.js";
 export { PolarisAutoEncryptedStringInput as AutoEncryptedStringInput } from "./inputs/PolarisAutoEncryptedStringInput.js";

packages/react/src/auto/polaris/inputs/LazyLoadedPolarisAutoRichTextInput.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { AutoRichTextInputProps } from "../../shared/AutoRichTextInputProps.js";
+
+const LazyLoadedPolarisAutoRichTextInput = React.lazy(() => import("./PolarisAutoRichTextInput.js"));
+
+export const PolarisAutoRichTextInput = (props: AutoRichTextInputProps) => {
+  return (
+    <>
+      <LazyLoadedPolarisAutoRichTextInput {...props} />
+    </>
+  );
+};

packages/react/src/auto/polaris/inputs/PolarisAutoInput.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FieldType } from "../../../metadata.js";
 import { useFieldMetadata } from "../../hooks/useFieldMetadata.js";
+import { PolarisAutoRichTextInput } from "./LazyLoadedPolarisAutoRichTextInput.js";
 import { PolarisAutoBooleanInput } from "./PolarisAutoBooleanInput.js";
 import { PolarisAutoDateTimePicker } from "./PolarisAutoDateTimePicker.js";
 import { PolarisAutoEncryptedStringInput } from "./PolarisAutoEncryptedStringInput.js";
@@ -15,9 +16,6 @@ import { PolarisAutoTextInput } from "./PolarisAutoTextInput.js";
 import { PolarisAutoBelongsToInput } from "./relationships/PolarisAutoBelongsToInput.js";
 import { PolarisAutoHasManyInput } from "./relationships/PolarisAutoHasManyInput.js";
 
-// lazy import for smaller bundle size by default
-const PolarisAutoRichTextInput = React.lazy(() => import("./PolarisAutoRichTextInput.js"));
-
 export const PolarisAutoInput = (props: { field: string; label?: string }) => {
   const { metadata } = useFieldMetadata(props.field);
   const config = metadata.configuration;

packages/react/src/auto/polaris/inputs/PolarisAutoRichTextInput.tsx

@@ -5,6 +5,9 @@ import { useStringInputController } from "../../hooks/useStringInputController.j
 import AutoRichTextInput from "../../shared/AutoRichTextInput.js";
 import "../styles/rich-text.css";
 
+/**
+ * Prefer using the LazyLoadedMUIAutoRichTextInput.tsx variant of this component to reduce the bundle size by default.
+ */
 export default function PolarisAutoRichTextInput(props: ComponentProps<typeof AutoRichTextInput>) {
   const controller = useStringInputController({ field: props.field, control: props.control });
 

packages/react/src/auto/shared/AutoRichTextInput.tsx

@@ -1,21 +1,9 @@
-import type { ForwardedRef } from "react";
 import React, { useEffect, useRef, useState } from "react";
-import type { Control } from "react-hook-form";
 import { useFormContext } from "react-hook-form";
 import { get } from "../../utils.js";
 import { useStringInputController } from "../hooks/useStringInputController.js";
 import { multiref } from "../hooks/utils.js";
-
-interface MDXEditorMethods {
-  setMarkdown: (markdown: string) => void;
-}
-
-interface AutoRichTextInputProps {
-  field: string;
-  control?: Control<any>;
-  editorRef?: ForwardedRef<MDXEditorMethods> | null;
-  label?: string;
-}
+import { AutoRichTextInputProps, MDXEditorMethods } from "./AutoRichTextInputProps.js";
 
 const AutoRichTextInput: React.FC<AutoRichTextInputProps> = (props) => {
   const { formState } = useFormContext();