diff --git a/packages/react/.changeset/shiny-fireants-learn.md b/packages/react/.changeset/shiny-fireants-learn.md new file mode 100644 index 000000000..3a2afb26d --- /dev/null +++ b/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 diff --git a/packages/react/src/auto/mui/inputs/LazyLoadedMUIAutoRichTextInput.tsx b/packages/react/src/auto/mui/inputs/LazyLoadedMUIAutoRichTextInput.tsx new file mode 100644 index 000000000..8c0204f66 --- /dev/null +++ b/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 ( + <> + + + ); +}; diff --git a/packages/react/src/auto/mui/inputs/MUIAutoInput.tsx b/packages/react/src/auto/mui/inputs/MUIAutoInput.tsx index 45291cad3..68cdaf27e 100644 --- a/packages/react/src/auto/mui/inputs/MUIAutoInput.tsx +++ b/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; diff --git a/packages/react/src/auto/mui/inputs/MUIAutoRichTextInput.tsx b/packages/react/src/auto/mui/inputs/MUIAutoRichTextInput.tsx index 90b688fc8..49015521a 100644 --- a/packages/react/src/auto/mui/inputs/MUIAutoRichTextInput.tsx +++ b/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) { return ( diff --git a/packages/react/src/auto/mui/test-index.ts b/packages/react/src/auto/mui/test-index.ts index 096ebcaa8..d80f3d8a6 100644 --- a/packages/react/src/auto/mui/test-index.ts +++ b/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"; diff --git a/packages/react/src/auto/polaris/index.ts b/packages/react/src/auto/polaris/index.ts index 8fcd1af8d..0a29fce3e 100644 --- a/packages/react/src/auto/polaris/index.ts +++ b/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"; diff --git a/packages/react/src/auto/polaris/inputs/LazyLoadedPolarisAutoRichTextInput.tsx b/packages/react/src/auto/polaris/inputs/LazyLoadedPolarisAutoRichTextInput.tsx new file mode 100644 index 000000000..df7f8ebf0 --- /dev/null +++ b/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 ( + <> + + + ); +}; diff --git a/packages/react/src/auto/polaris/inputs/PolarisAutoInput.tsx b/packages/react/src/auto/polaris/inputs/PolarisAutoInput.tsx index 0b05fddf0..867da5f4f 100644 --- a/packages/react/src/auto/polaris/inputs/PolarisAutoInput.tsx +++ b/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; diff --git a/packages/react/src/auto/polaris/inputs/PolarisAutoRichTextInput.tsx b/packages/react/src/auto/polaris/inputs/PolarisAutoRichTextInput.tsx index d71f8780b..606115423 100644 --- a/packages/react/src/auto/polaris/inputs/PolarisAutoRichTextInput.tsx +++ b/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) { const controller = useStringInputController({ field: props.field, control: props.control }); diff --git a/packages/react/src/auto/shared/AutoRichTextInput.tsx b/packages/react/src/auto/shared/AutoRichTextInput.tsx index 4c78bb243..d7ca33f0f 100644 --- a/packages/react/src/auto/shared/AutoRichTextInput.tsx +++ b/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; - editorRef?: ForwardedRef | null; - label?: string; -} +import { AutoRichTextInputProps, MDXEditorMethods } from "./AutoRichTextInputProps.js"; const AutoRichTextInput: React.FC = (props) => { const { formState } = useFormContext(); diff --git a/packages/react/src/auto/shared/AutoRichTextInputProps.tsx b/packages/react/src/auto/shared/AutoRichTextInputProps.tsx new file mode 100644 index 000000000..8789f7437 --- /dev/null +++ b/packages/react/src/auto/shared/AutoRichTextInputProps.tsx @@ -0,0 +1,13 @@ +import type { ForwardedRef } from "react"; +import type { Control } from "react-hook-form"; + +export interface MDXEditorMethods { + setMarkdown: (markdown: string) => void; +} + +export interface AutoRichTextInputProps { + field: string; + control?: Control; + editorRef?: ForwardedRef | null; + label?: string; +}