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 */