Merge pull request #748 from gadget-inc/feature/shadcn-auto-richtext

Feature/AutoRichTexts

Author: jadewale

packages/react/cypress/support/auto.tsx

@@ -24,7 +24,7 @@ const ONLY_RUN_SUITES = {
     "AutoForm - Default model field values",
     "AutoForm - FindBy object parameters",
     "AutoForm - Global actions",
-    // "AutoForm - HasManyThrough fields",
+    "AutoForm - HasManyThrough fields",
     "AutoForm - Dynamic form input changes",
     "AutoForm - Dynamic form input changes - FindBy object parameters",
     "AutoForm - Dynamic form input changes - Global actions",

packages/react/spec/auto/polaris/inputs/PolarisJsonInput.stories.jsx

@@ -6,6 +6,7 @@ import { PolarisAutoForm } from "../../../../src/auto/polaris/PolarisAutoForm.ts
 import { PolarisAutoJSONInput } from "../../../../src/auto/polaris/inputs/PolarisAutoJSONInput.tsx";
 import { FormProvider, useForm } from "../../../../src/useActionForm.ts";
 import { testApi as api } from "../../../apis.ts";
+
 const Component = (props) => {
   return (
     <PolarisAutoForm action={api.widget.create}>

packages/react/spec/auto/shadcn-defaults/components/Command.tsx

@@ -89,6 +89,13 @@ const CommandItem = React.forwardRef<
   />
 ));
 
+const CommandLoading = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Loading>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>
+>((props, ref) => <CommandPrimitive.Loading ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandLoading.displayName = CommandPrimitive.Loading.displayName;
+
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
-export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator };
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator };

packages/react/spec/auto/shadcn-defaults/index.tsx

@@ -6,7 +6,16 @@ import { Button } from "./components/Button.js";
 import { Calendar } from "./components/Calendar.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/Card.js";
 import { Checkbox } from "./components/Checkbox.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "./components/Command.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandLoading,
+  CommandSeparator,
+} from "./components/Command.js";
 import { Form } from "./components/Form.js";
 import { Input } from "./components/Input.js";
 import { Label } from "./components/Label.js";
@@ -47,7 +56,7 @@ export const elements: ShadcnElements = {
   CommandItem,
   CommandList,
   CommandSeparator,
-
+  CommandLoading,
   Popover,
   PopoverAnchor,
   PopoverContent,

packages/react/spec/auto/shadcn-defaults/inputs/ShadcnAutoJSONInput.stories.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Provider } from "../../../../src/GadgetProvider.tsx";
+import { FormProvider, useForm } from "../../../../src/useActionForm.ts";
+import { testApi as api } from "../../../apis.ts";
+import { makeAutocomponents } from "../../../../src/auto/shadcn/index.ts";
+import { elements } from "../index";
+import { makeShadcnAutoJSONInput } from "../../../../src/auto/shadcn/inputs/ShadcnAutoJSONInput.tsx";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+
+const ShadcnAutoForm = makeAutocomponents(elements).AutoForm;
+const ShadcnAutoJSONInput = makeShadcnAutoJSONInput(elements);
+
+const Component = (props) => {
+  return (
+    <ShadcnAutoForm action={api.widget.create}>
+      <ShadcnAutoJSONInput {...props} />
+    </ShadcnAutoForm>
+  );
+};
+export default {
+  title: "Shadcn/JsonInput",
+  component: Component,
+  decorators: [
+    (Story, { parameters }) => {
+      const { theme = "light" } = parameters;
+      return (
+        <Provider api={api}>
+          <FormProvider {...useForm()}>
+            <elements.Card className="p-6 w-full bg-white shadow-lg rounded-lg">
+              <Story />
+            </elements.Card>
+          </FormProvider>
+        </Provider>
+      );
+    },
+  ],
+
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export const Primary = {
+  args: {
+    field: "metafields",
+  },
+};

packages/react/spec/auto/shadcn-defaults/inputs/ShadcnFileInput.stories.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Provider } from "../../../../src/GadgetProvider.tsx";
+import { FormProvider, useForm } from "../../../../src/useActionForm.ts";
+import { testApi as api } from "../../../apis.ts";
+import { makeAutocomponents } from "../../../../src/auto/shadcn/index.ts";
+import { elements } from "../index";
+import { makeShadcnAutoFileInput } from "../../../../src/auto/shadcn/inputs/ShadcnAutoFileInput.tsx";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+
+const ShadcnAutoForm = makeAutocomponents(elements).AutoForm;
+const ShadcnAutoFileInput = makeShadcnAutoFileInput(elements);
+
+const Component = (props) => {
+  return (
+    <ShadcnAutoForm action={api.widget.create}>
+      <ShadcnAutoFileInput {...props} />
+    </ShadcnAutoForm>
+  );
+};
+
+export default {
+  title: "Shadcn/FileInput",
+  component: Component,
+  decorators: [
+    (Story, { parameters }) => {
+      const { theme = "light" } = parameters;
+      return (
+        <Provider api={api}>
+          <FormProvider {...useForm()}>
+            <elements.Card className="p-6 w-full bg-white shadow-lg rounded-lg">
+              <Story />
+            </elements.Card>
+          </FormProvider>
+        </Provider>
+      );
+    },
+  ],
+
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export const Primary = {
+  args: {
+    field: "metafields",
+  },
+};

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

@@ -4,7 +4,7 @@ import React from "react";
 import { autoInput } from "../../AutoInput.js";
 import { useStringInputController } from "../../hooks/useStringInputController.js";
 import AutoRichTextInput from "../../shared/AutoRichTextInput.js";
-import "../styles/rich-text.css";
+import "../../shared/styles/rich-text.css";
 
 /**
  * Prefer using the LazyLoadedMUIAutoRichTextInput.tsx variant of this component to reduce the bundle size by default.

packages/react/src/auto/shadcn/ShadcnAutoForm.tsx

@@ -30,6 +30,7 @@ export const makeAutoForm = <Elements extends ShadcnElements>({
   CommandInput,
   CommandItem,
   CommandList,
+  CommandLoading,
   CommandEmpty,
   CommandGroup,
   Calendar,
@@ -61,6 +62,7 @@ export const makeAutoForm = <Elements extends ShadcnElements>({
     Checkbox,
     Badge,
     Command,
+    CommandLoading,
     CommandInput,
     CommandItem,
     CommandList,

packages/react/src/auto/shadcn/ShadcnRequired.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const ShadcnRequired = ({ children }: { children: React.ReactNode }) => {
+  return <span className="text-red-500">{children}</span>;
+};

packages/react/src/auto/shadcn/elements.tsx

@@ -139,6 +139,9 @@ export interface ShadcnElements {
   /** The Calendar component from shadcn */
   Calendar: React.ComponentType<any>;
 
+  /** The CommandLoading component from shadcn */
+  CommandLoading: React.ComponentType<React.HTMLAttributes<HTMLDivElement>>;
+
   /** The CardHeader component from shadcn */
   CardHeader: React.ComponentType<CardHeaderProps>;
   /** The CardFooter component from shadcn */

packages/react/src/auto/shadcn/inputs/ShadcnAutoBooleanInput.tsx

@@ -4,6 +4,7 @@ import { useController, useFormContext } from "../../../useActionForm.js";
 import { get } from "../../../utils.js";
 import { autoInput } from "../../AutoInput.js";
 import { useFieldMetadata } from "../../hooks/useFieldMetadata.js";
+import { ShadcnRequired } from "../ShadcnRequired.js";
 import type { CheckboxProps, ShadcnElements } from "../elements.js";
 
 export const makeShadcnAutoBooleanInput = ({ Checkbox, Label }: Pick<ShadcnElements, "Checkbox" | "Label">) => {
@@ -56,7 +57,7 @@ export const makeShadcnAutoBooleanInput = ({ Checkbox, Label }: Pick<ShadcnEleme
         <Label htmlFor={path} className={`${props.className ?? ""} ${error ? "text-red-500" : ""}`}>
           {label}
         </Label>
-        {error && <span className="text-sm text-red-500">{error.message}</span>}
+        {error && <ShadcnRequired>{error.message}</ShadcnRequired>}
       </div>
     );
   }

packages/react/src/auto/shadcn/inputs/ShadcnAutoComboInput.tsx

@@ -1,10 +1,12 @@
 import React, { useRef, useState } from "react";
 import type { FieldMetadata } from "../../../metadata.js";
+import { useClickOutside } from "../../../useClickOutside.js";
+import { useIntersectionObserver } from "../../../useIntersectionObserver.js";
 import type { AutoRelationshipInputProps } from "../../interfaces/AutoRelationshipInputProps.js";
+import { ShadcnRequired } from "../ShadcnRequired.js";
 import type { ShadcnElements } from "../elements.js";
 import type { RelatedModelOptionsProps } from "./relationships/RelatedModelOption.js";
 import { makeRelatedModelOption } from "./relationships/RelatedModelOption.js";
-
 interface ShadcnComboInputProps extends AutoRelationshipInputProps, RelatedModelOptionsProps {
   selectedRecordTag: React.JSX.Element | null;
   path: string;
@@ -16,6 +18,9 @@ interface ShadcnComboInputProps extends AutoRelationshipInputProps, RelatedModel
   formatOptionText?: (option: string) => React.ReactNode;
   emptyMessage?: string;
   defaultValue?: string;
+  onScrolledToBottom?: () => void;
+  willLoadMoreOptions?: boolean;
+  onChange?: (value: string) => void;
 }
 
 export const makeShadcnAutoComboInput = ({
@@ -24,12 +29,22 @@ export const makeShadcnAutoComboInput = ({
   Label,
   CommandItem,
   CommandList,
+  CommandLoading,
   CommandEmpty,
   CommandGroup,
   Checkbox,
 }: Pick<
   ShadcnElements,
-  "Command" | "CommandInput" | "Label" | "CommandItem" | "CommandList" | "CommandEmpty" | "CommandGroup" | "Checkbox" | "CommandGroup"
+  | "Command"
+  | "CommandInput"
+  | "Label"
+  | "CommandItem"
+  | "CommandList"
+  | "CommandEmpty"
+  | "CommandGroup"
+  | "Checkbox"
+  | "ScrollArea"
+  | "CommandLoading"
 >) => {
   const RelatedModelOption = makeRelatedModelOption({
     CommandItem,
@@ -38,19 +53,34 @@ export const makeShadcnAutoComboInput = ({
     CommandGroup,
     Checkbox,
     Label,
+    CommandLoading,
   });
 
   function ShadcnAutoComboInput(props: ShadcnComboInputProps) {
     const inputRef = useRef<HTMLInputElement>(null);
+    const outsideBoxRef = useRef<HTMLDivElement>(null);
+    const sentinelRef = useIntersectionObserver(
+      () => {
+        props.onScrolledToBottom?.();
+      },
+      outsideBoxRef,
+      { threshold: 1.0 }
+    );
     const [open, setOpen] = useState(false);
     const [inputValue, setInputValue] = useState(props.defaultValue || "");
     const id = props.id || `${props.path}-input`;
     const inputLabel = props.label || props.metadata.name;
 
-    const requiredIndicator = props.metadata.requiredArgumentForInput ? <span className="text-red-500">*</span> : null;
+    const requiredIndicator = props.metadata.requiredArgumentForInput ? <ShadcnRequired>*</ShadcnRequired> : null;
+
+    useClickOutside(outsideBoxRef, () => {
+      if (open) {
+        setOpen(false);
+      }
+    });
 
     return (
-      <div>
+      <div ref={outsideBoxRef}>
         <Label htmlFor={id}>
           {inputLabel} {requiredIndicator}
         </Label>
@@ -62,34 +92,35 @@ export const makeShadcnAutoComboInput = ({
               ref={inputRef}
               data-testid={id}
               value={inputValue}
-              onValueChange={setInputValue}
-              onBlur={() => setOpen(false)}
+              onValueChange={(value: string) => {
+                setInputValue(value);
+                props.onChange?.(value);
+              }}
               onFocus={() => setOpen(true)}
               placeholder={"Search"}
               className="ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1"
             />
-            <div className="relative">
-              {open && props.options.length > 0 ? (
-                <div className="">
-                  <RelatedModelOption
-                    onAddExtraOption={props.onAddExtraOption}
-                    isLoading={props.isLoading}
-                    errorMessage={props.errorMessage}
-                    options={props.options}
-                    records={props.records}
-                    onSelect={props.onSelect}
-                    checkSelected={props.checkSelected}
-                    allowMultiple={props.allowMultiple}
-                    renderOption={props.renderOption}
-                    allowOther={props.allowOther}
-                    searchValue={inputValue}
-                    setSearchValue={setInputValue}
-                    formatOptionText={props.formatOptionText}
-                    emptyMessage={props.emptyMessage ? `${props.emptyMessage} "${inputValue}"` : ""}
-                  />
-                </div>
-              ) : null}
-            </div>
+            {open && (
+              <>
+                <RelatedModelOption
+                  onAddExtraOption={props.onAddExtraOption}
+                  isLoading={props.isLoading}
+                  errorMessage={props.errorMessage}
+                  options={props.options}
+                  records={props.records}
+                  onSelect={props.onSelect}
+                  checkSelected={props.checkSelected}
+                  allowMultiple={props.allowMultiple}
+                  renderOption={props.renderOption}
+                  allowOther={props.allowOther}
+                  searchValue={inputValue}
+                  setSearchValue={setInputValue}
+                  formatOptionText={props.formatOptionText}
+                  emptyMessage={props.emptyMessage ? `${props.emptyMessage} "${inputValue}"` : undefined}
+                  loadMoreRef={props.willLoadMoreOptions ? sentinelRef : undefined}
+                />
+              </>
+            )}
           </Command>
         </div>
       </div>

packages/react/src/auto/shadcn/inputs/ShadcnAutoDateTimePicker.tsx

@@ -13,6 +13,7 @@ import type { GadgetDateTimeConfig } from "../../../internal/gql/graphql.js";
 import { useController } from "../../../useActionForm.js";
 import { autoInput } from "../../AutoInput.js";
 import { useFieldMetadata } from "../../hooks/useFieldMetadata.js";
+import { ShadcnRequired } from "../ShadcnRequired.js";
 import type { ShadcnElements } from "../elements.js";
 
 export interface Range {
@@ -137,7 +138,7 @@ export const makeShadcnAutoDateTimePicker = ({
           <div>
             <Label htmlFor={props.id ? `${props.id}-date` : undefined}>
               {props.label ?? metadata.name ?? "Date"}
-              {metadata.requiredArgumentForInput && <span className="text-red-500 ml-1">*</span>}
+              {metadata.requiredArgumentForInput && <ShadcnRequired>*</ShadcnRequired>}
             </Label>
             <Button
               id={props.id ? `${props.id}-date` : undefined}