auto relationship forms

gadget-inc · Oct 22, 2024 · 75b855c · 75b855c
1 parent 400bdc2
commit 75b855c
Show file tree

Hide file tree

Showing 42 changed files with 1,235 additions and 752 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "@gadget-client/app-with-no-user-model": "^1.10.0",
     "@gadget-client/bulk-actions-test": "^1.113.0",
     "@gadget-client/full-auth": "^1.9.0",
-    "@gadget-client/js-clients-test": "1.499.0-development.2005",
+    "@gadget-client/js-clients-test": "1.500.0-development.2018",
     "@gadget-client/kitchen-sink": "1.5.0-development.200",
     "@gadget-client/related-products-example": "^1.865.0",
     "@gadget-client/zxcv-deeply-nested": "^1.212.0",

diff --git a/packages/react/spec/auto/MockForm.tsx b/packages/react/spec/auto/MockForm.tsx
@@ -15,7 +15,7 @@ export const MockForm = ({ submit, metadata, submitResult, resolver }: Partial<A
     return (
       <MockClientProvider api={api}>
         <FormProvider {...methods}>
-          <AutoFormMetadataContext.Provider value={{ submit: submit!, metadata, submitResult }}>
+          <AutoFormMetadataContext.Provider value={{ submit: submit!, metadata, submitResult, fields: [] }}>
             <AppProvider i18n={translations}>
               {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
               <form onSubmit={methods.handleSubmit(submit as any)}>

diff --git a/packages/react/spec/auto/PolarisAutoForm.stories.jsx b/packages/react/spec/auto/PolarisAutoForm.stories.jsx
@@ -159,6 +159,7 @@ export const onFailureCallback = {
 export const hasManyThrough = {
   name: "HasManyThrough fields",
   args: {
-    action: api.hasManyThrough.baseModel.create,
+    action: api.hasManyThrough.baseModel.update,
+    findBy: "1",
   },
 };
diff --git a/packages/react/spec/auto/form/PolarisAutoRelationshipForm.stories.jsx b/packages/react/spec/auto/form/PolarisAutoRelationshipForm.stories.jsx
@@ -0,0 +1,117 @@
+import { AppProvider, Card, Page, Text } from "@shopify/polaris";
+import translations from "@shopify/polaris/locales/en.json";
+import React from "react";
+import { Provider } from "../../../src/GadgetProvider.tsx";
+import { PolarisAutoForm } from "../../../src/auto/polaris/PolarisAutoForm.tsx";
+import { PolarisAutoInput } from "../../../src/auto/polaris/inputs/PolarisAutoInput.tsx";
+import { PolarisAutoBelongsToInput } from "../../../src/auto/polaris/inputs/relationships/PolarisAutoBelongsToInput.tsx";
+import { PolarisAutoRelationshipForm } from "../../../src/auto/polaris/inputs/relationships/PolarisAutoRelationshipForm.tsx";
+import { PolarisAutoSubmit } from "../../../src/auto/polaris/submit/PolarisAutoSubmit.tsx";
+import { FormProvider, useForm } from "../../../src/useActionForm.ts";
+import { testApi as api } from "../../apis.ts";
+
+const ExampleWidgetAutoRelatedForm = (props) => {
+  return (
+    <Page>
+      <PolarisAutoForm {...props}>
+        <Card>
+          <Text as="h2" variant="headingSm">
+            Top Level Form -- Widget
+          </Text>
+          <PolarisAutoInput field="name" />
+          <PolarisAutoInput field="description" />
+          <PolarisAutoInput field="inventoryCount" />
+        </Card>
+
+        <Card>
+          <Text as="h2" variant="headingSm">
+            Belongs To Form -- Section
+          </Text>
+          <PolarisAutoBelongsToInput field="section" optionLabel="id" />
+        </Card>
+
+        <Card>
+          <Text as="h2" variant="headingSm">
+            Has Many Form -- Gizmos
+          </Text>
+          <PolarisAutoRelationshipForm
+            field="gizmos"
+            selectPaths={["name", "orientation"]}
+            primaryLabel="name"
+            secondaryLabel="orientation"
+          >
+            <PolarisAutoInput field="name" />
+            <PolarisAutoInput field="orientation" />
+            <PolarisAutoInput field="attachment" />
+          </PolarisAutoRelationshipForm>
+        </Card>
+        <PolarisAutoSubmit />
+      </PolarisAutoForm>
+    </Page>
+  );
+};
+
+const ExampleSectionAutoRelatedForm = (props) => {
+  return (
+    <Page>
+      <PolarisAutoForm {...props}>
+        <Card>
+          <Text as="h2" variant="headingSm">
+            Top Level Form -- Section
+          </Text>
+          <PolarisAutoInput field="name" />
+          <PolarisAutoInput field="label" />
+        </Card>
+
+        <Card>
+          <Text as="h2" variant="headingSm">
+            Has Many Form -- Widgets
+          </Text>
+          <PolarisAutoRelationshipForm field="widgets">
+            <PolarisAutoInput field="name" />
+            <PolarisAutoInput field="inventoryCount" />
+          </PolarisAutoRelationshipForm>
+        </Card>
+        <PolarisAutoSubmit />
+      </PolarisAutoForm>
+    </Page>
+  );
+};
+
+export default {
+  title: "Polaris/AutoForm/AutoRelationshipForm",
+  component: ExampleWidgetAutoRelatedForm,
+  decorators: [
+    (Story) => {
+      return (
+        <Provider api={api}>
+          <AppProvider i18n={translations}>
+            <FormProvider {...useForm()}>
+              <Story />
+            </FormProvider>
+          </AppProvider>
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const Create = {
+  args: {
+    action: api.widget.create,
+  },
+};
+
+export const Update = {
+  args: {
+    action: api.widget.update,
+    findBy: "1",
+  },
+};
+
+export const CreateWithLargeHasMany = {
+  render: (args) => <ExampleSectionAutoRelatedForm {...args} />,
+  args: {
+    action: api.section.create,
+  },
+};
diff --git a/packages/react/spec/auto/inputs/PolarisAutoEnumInput.stories.jsx b/packages/react/spec/auto/inputs/PolarisAutoEnumInput.stories.jsx
@@ -6,10 +6,22 @@ import { PolarisAutoEnumInput } from "../../../src/auto/polaris/inputs/PolarisAu
 import { FormProvider, useForm } from "../../../src/useActionForm.ts";
 import { testApi as api } from "../../apis.ts";
 
+const Component = ({ field }) => {
+  return (
+    <PolarisAutoForm action={api.game.stadium.create}>
+      <Page>
+        <Card>
+          <PolarisAutoEnumInput field={field} />
+        </Card>
+      </Page>
+    </PolarisAutoForm>
+  );
+};
+
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
   title: "Polaris/EnumInput",
-  component: PolarisAutoEnumInput,
+  component: Component,
   decorators: [
     // 👇 Defining the decorator in the preview file applies it to all stories
     (Story, { parameters }) => {
@@ -19,13 +31,7 @@ export default {
         <Provider api={api}>
           <AppProvider>
             <FormProvider {...useForm()}>
-              <PolarisAutoForm action={api.game.stadium.create}>
-                <Page>
-                  <Card>
-                    <Story />
-                  </Card>
-                </Page>
-              </PolarisAutoForm>
+              <Story />
             </FormProvider>
           </AppProvider>
         </Provider>

diff --git a/packages/react/spec/auto/inputs/PolarisBooleanInput.stories.jsx b/packages/react/spec/auto/inputs/PolarisBooleanInput.stories.jsx
@@ -6,19 +6,26 @@ import { PolarisAutoForm } from "../../../src/auto/polaris/PolarisAutoForm.tsx";
 import { PolarisAutoBooleanInput } from "../../../src/auto/polaris/inputs/PolarisAutoBooleanInput.tsx";
 import { FormProvider, useForm } from "../../../src/useActionForm.ts";
 import { testApi as api } from "../../apis.ts";
+
+const Component = (props) => {
+  return (
+    <PolarisAutoForm action={api.widget.create}>
+      <PolarisAutoBooleanInput {...props} />
+    </PolarisAutoForm>
+  );
+};
+
 export default {
   title: "Polaris/BooleanInput",
-  component: PolarisAutoBooleanInput,
+  component: Component,
   decorators: [
     (Story, { parameters }) => {
       const { theme = "light" } = parameters;
       return (
         <AppProvider i18n={translations}>
           <FormProvider {...useForm()}>
             <Provider api={api}>
-              <PolarisAutoForm action={api.widget.create}>
-                <Story />
-              </PolarisAutoForm>
+              <Story />
             </Provider>
           </FormProvider>
         </AppProvider>

diff --git a/packages/react/spec/auto/inputs/PolarisFileInput.stories.jsx b/packages/react/spec/auto/inputs/PolarisFileInput.stories.jsx
@@ -7,18 +7,24 @@ import { PolarisAutoFileInput } from "../../../src/auto/polaris/inputs/PolarisAu
 import { FormProvider, useForm } from "../../../src/useActionForm.ts";
 import { testApi as api } from "../../apis.ts";
 
+const Component = (props) => {
+  return (
+    <PolarisAutoForm action={api.game.stadium.create}>
+      <PolarisAutoFileInput {...props} />
+    </PolarisAutoForm>
+  );
+};
+
 export default {
   title: "Polaris/FileInput",
-  component: PolarisAutoFileInput,
+  component: Component,
   decorators: [
     (Story, { parameters }) => {
       return (
         <AppProvider i18n={translations}>
           <FormProvider {...useForm()}>
             <Provider api={api}>
-              <PolarisAutoForm action={api.game.stadium.create}>
-                <Story />
-              </PolarisAutoForm>
+              <Story />
             </Provider>
           </FormProvider>
         </AppProvider>

diff --git a/packages/react/spec/auto/inputs/PolarisJsonInput.stories.jsx b/packages/react/spec/auto/inputs/PolarisJsonInput.stories.jsx
@@ -1,4 +1,4 @@
-import { AppProvider, Card, Page } from "@shopify/polaris";
+import { AppProvider } from "@shopify/polaris";
 import translations from "@shopify/polaris/locales/en.json";
 import React from "react";
 import { Provider } from "../../../src/GadgetProvider.tsx";
@@ -7,23 +7,25 @@ import { PolarisAutoJSONInput } from "../../../src/auto/polaris/inputs/PolarisAu
 import { FormProvider, useForm } from "../../../src/useActionForm.ts";
 import { testApi as api } from "../../apis.ts";
 
+const Component = (props) => {
+  return (
+    <PolarisAutoForm action={api.widget.create}>
+      <PolarisAutoJSONInput {...props} />
+    </PolarisAutoForm>
+  );
+};
+
 export default {
   title: "Polaris/JsonInput",
-  component: PolarisAutoJSONInput,
+  component: Component,
   decorators: [
     (Story, { parameters }) => {
       const { theme = "light" } = parameters;
       return (
         <Provider api={api}>
           <AppProvider i18n={translations}>
             <FormProvider {...useForm()}>
-              <PolarisAutoForm action={api.widget.create}>
-                <Page>
-                  <Card>
-                    <Story />
-                  </Card>
-                </Page>
-              </PolarisAutoForm>
+              <Story />
             </FormProvider>
           </AppProvider>
         </Provider>

diff --git a/packages/react/spec/auto/inputs/PolarisStringInput.stories.jsx b/packages/react/spec/auto/inputs/PolarisStringInput.stories.jsx
@@ -7,10 +7,22 @@ import { PolarisAutoTextInput } from "../../../src/auto/polaris/inputs/PolarisAu
 import { FormProvider, useForm } from "../../../src/useActionForm.ts";
 import { testApi as api } from "../../apis.ts";
 
+const Component = (props) => {
+  return (
+    <PolarisAutoForm action={api.widget.create}>
+      <Page>
+        <Card>
+          <PolarisAutoTextInput {...props} />
+        </Card>
+      </Page>
+    </PolarisAutoForm>
+  );
+};
+
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
   title: "Polaris/StringInput",
-  component: PolarisAutoTextInput,
+  component: Component,
   decorators: [
     // 👇 Defining the decorator in the preview file applies it to all stories
     (Story, { parameters }) => {
@@ -20,13 +32,7 @@ export default {
         <Provider api={api}>
           <AppProvider i18n={translations}>
             <FormProvider {...useForm()}>
-              <PolarisAutoForm action={api.widget.create}>
-                <Page>
-                  <Card>
-                    <Story />
-                  </Card>
-                </Page>
-              </PolarisAutoForm>
+              <Story />
             </FormProvider>
           </AppProvider>
         </Provider>