Skip to content

Commit 37292e5

Browse files
infitoninfiton
committed
auto relationship forms
1 parent 400bdc2 commit 37292e5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1809
-763
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"@gadget-client/app-with-no-user-model": "^1.10.0",
2828
"@gadget-client/bulk-actions-test": "^1.113.0",
2929
"@gadget-client/full-auth": "^1.9.0",
30-
"@gadget-client/js-clients-test": "1.499.0-development.2005",
30+
"@gadget-client/js-clients-test": "1.503.0",
3131
"@gadget-client/kitchen-sink": "1.5.0-development.200",
3232
"@gadget-client/related-products-example": "^1.865.0",
3333
"@gadget-client/zxcv-deeply-nested": "^1.212.0",

‎packages/react/spec/auto/MockForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const MockForm = ({ submit, metadata, submitResult, resolver }: Partial<A
1515
return (
1616
<MockClientProvider api={api}>
1717
<FormProvider {...methods}>
18-
<AutoFormMetadataContext.Provider value={{ submit: submit!, metadata, submitResult }}>
18+
<AutoFormMetadataContext.Provider value={{ submit: submit!, metadata, submitResult, fields: [] }}>
1919
<AppProvider i18n={translations}>
2020
{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
2121
<form onSubmit={methods.handleSubmit(submit as any)}>

‎packages/react/spec/auto/PolarisAutoForm.stories.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,8 @@ export const onFailureCallback = {
159159
export const hasManyThrough = {
160160
name: "HasManyThrough fields",
161161
args: {
162-
action: api.hasManyThrough.baseModel.create,
162+
action: api.hasManyThrough.baseModel.update,
163+
findBy: "1",
164+
debug: true,
163165
},
164166
};

‎packages/react/spec/auto/form/PolarisAutoRelationshipForm.stories.jsx

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import { AppProvider, BlockStack, Card, FormLayout, InlineStack, Page, Text } from "@shopify/polaris";
2+
import translations from "@shopify/polaris/locales/en.json";
3+
import React from "react";
4+
import { Provider } from "../../../src/GadgetProvider.tsx";
5+
import { PolarisAutoForm } from "../../../src/auto/polaris/PolarisAutoForm.tsx";
6+
import { PolarisAutoInput } from "../../../src/auto/polaris/inputs/PolarisAutoInput.tsx";
7+
import { PolarisAutoBelongsToInput } from "../../../src/auto/polaris/inputs/relationships/PolarisAutoBelongsToInput.tsx";
8+
import { PolarisAutoRelationshipForm } from "../../../src/auto/polaris/inputs/relationships/PolarisAutoRelationshipForm.tsx";
9+
import { PolarisAutoSubmit } from "../../../src/auto/polaris/submit/PolarisAutoSubmit.tsx";
10+
import { FormProvider, useForm } from "../../../src/useActionForm.ts";
11+
import { testApi as api } from "../../apis.ts";
12+
13+
const ExampleWidgetAutoRelatedForm = (props) => {
14+
return (
15+
<Page>
16+
<PolarisAutoForm {...props}>
17+
<Card>
18+
<Text as="h2" variant="headingSm">
19+
Top Level Form -- Widget
20+
</Text>
21+
<PolarisAutoInput field="name" />
22+
<PolarisAutoInput field="description" />
23+
<PolarisAutoInput field="inventoryCount" />
24+
</Card>
25+
26+
<Card>
27+
<Text as="h2" variant="headingSm">
28+
Belongs To Form -- Section
29+
</Text>
30+
<PolarisAutoBelongsToInput field="section" optionLabel="id" />
31+
</Card>
32+
33+
<Card>
34+
<PolarisAutoInput field="gizmos" />
35+
</Card>
36+
37+
<Card>
38+
<Text as="h2" variant="headingSm">
39+
Has Many Form -- Gizmos
40+
</Text>
41+
<PolarisAutoRelationshipForm
42+
field="gizmos"
43+
selectPaths={["name", "orientation"]}
44+
primaryLabel="name"
45+
secondaryLabel="orientation"
46+
>
47+
<PolarisAutoInput field="name" />
48+
<PolarisAutoInput field="orientation" />
49+
<PolarisAutoInput field="attachment" />
50+
</PolarisAutoRelationshipForm>
51+
</Card>
52+
<PolarisAutoSubmit />
53+
</PolarisAutoForm>
54+
</Page>
55+
);
56+
};
57+
58+
const ExampleSectionAutoRelatedForm = (props) => {
59+
return (
60+
<Page>
61+
<PolarisAutoForm {...props}>
62+
<Card>
63+
<Text as="h2" variant="headingSm">
64+
Top Level Form -- Section
65+
</Text>
66+
<PolarisAutoInput field="name" />
67+
<PolarisAutoInput field="label" />
68+
</Card>
69+
70+
<Card>
71+
<Text as="h2" variant="headingSm">
72+
Has Many Form -- Widgets
73+
</Text>
74+
<PolarisAutoRelationshipForm field="widgets">
75+
<PolarisAutoInput field="name" />
76+
<PolarisAutoInput field="inventoryCount" />
77+
</PolarisAutoRelationshipForm>
78+
</Card>
79+
<PolarisAutoSubmit />
80+
</PolarisAutoForm>
81+
</Page>
82+
);
83+
};
84+
85+
const ExampleCourseCreateRelatedForm = (props) => {
86+
return (
87+
<Page>
88+
<PolarisAutoForm {...props}>
89+
<Card>
90+
<BlockStack gap="300">
91+
<Text as="h2" variant="headingSm">
92+
Top Level Form -- Course
93+
</Text>
94+
<FormLayout>
95+
<PolarisAutoInput field="title" />
96+
<PolarisAutoInput field="description" />
97+
</FormLayout>
98+
</BlockStack>
99+
</Card>
100+
101+
<Card>
102+
<PolarisAutoRelationshipForm
103+
field="students"
104+
selectPaths={["firstName", "lastName", "year", "department"]}
105+
primaryLabel={["firstName", "lastName"]}
106+
secondaryLabel={(record) => {
107+
if (record.year <= 1) {
108+
return "Freshman";
109+
} else if (record.year <= 2) {
110+
return "Sophomore";
111+
} else if (record.year <= 3) {
112+
return "Junior";
113+
} else if (record.year <= 4) {
114+
return "Senior";
115+
} else {
116+
return "Mature";
117+
}
118+
}}
119+
tertiaryLabel="department"
120+
>
121+
<InlineStack>
122+
<PolarisAutoInput field="registration.effectiveFrom" />
123+
<PolarisAutoInput field="registration.effectiveTo" />
124+
</InlineStack>
125+
</PolarisAutoRelationshipForm>
126+
</Card>
127+
128+
<Card>
129+
<PolarisAutoRelationshipForm
130+
field="professors"
131+
selectPaths={["title", "firstName", "lastName"]}
132+
primaryLabel={["title", "firstName", "lastName"]}
133+
/>
134+
</Card>
135+
<PolarisAutoSubmit />
136+
</PolarisAutoForm>
137+
</Page>
138+
);
139+
};
140+
141+
export default {
142+
title: "Polaris/AutoForm/AutoRelationshipForm",
143+
component: ExampleWidgetAutoRelatedForm,
144+
decorators: [
145+
(Story) => {
146+
return (
147+
<Provider api={api}>
148+
<AppProvider i18n={translations}>
149+
<FormProvider {...useForm()}>
150+
<Story />
151+
</FormProvider>
152+
</AppProvider>
153+
</Provider>
154+
);
155+
},
156+
],
157+
};
158+
159+
export const Create = {
160+
args: {
161+
action: api.widget.create,
162+
},
163+
};
164+
165+
export const Update = {
166+
args: {
167+
action: api.widget.update,
168+
findBy: "1",
169+
},
170+
};
171+
172+
export const CreateWithLargeHasMany = {
173+
render: (args) => <ExampleSectionAutoRelatedForm {...args} />,
174+
args: {
175+
action: api.section.create,
176+
},
177+
};
178+
179+
export const CreateWithHasManyThrough = {
180+
render: (args) => <ExampleCourseCreateRelatedForm {...args} />,
181+
args: {
182+
action: api.university.course.create,
183+
},
184+
};
185+
186+
export const UpdateWithHasManyThrough = {
187+
render: (args) => <ExampleCourseCreateRelatedForm {...args} />,
188+
args: {
189+
action: api.university.course.update,
190+
findBy: "3",
191+
},
192+
};

‎packages/react/spec/auto/inputs/PolarisAutoEnumInput.stories.jsx

+14-8
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,22 @@ import { PolarisAutoEnumInput } from "../../../src/auto/polaris/inputs/PolarisAu
66
import { FormProvider, useForm } from "../../../src/useActionForm.ts";
77
import { testApi as api } from "../../apis.ts";
88

9+
const Component = ({ field }) => {
10+
return (
11+
<PolarisAutoForm action={api.game.stadium.create}>
12+
<Page>
13+
<Card>
14+
<PolarisAutoEnumInput field={field} />
15+
</Card>
16+
</Page>
17+
</PolarisAutoForm>
18+
);
19+
};
20+
921
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
1022
export default {
1123
title: "Polaris/EnumInput",
12-
component: PolarisAutoEnumInput,
24+
component: Component,
1325
decorators: [
1426
// 👇 Defining the decorator in the preview file applies it to all stories
1527
(Story, { parameters }) => {
@@ -19,13 +31,7 @@ export default {
1931
<Provider api={api}>
2032
<AppProvider>
2133
<FormProvider {...useForm()}>
22-
<PolarisAutoForm action={api.game.stadium.create}>
23-
<Page>
24-
<Card>
25-
<Story />
26-
</Card>
27-
</Page>
28-
</PolarisAutoForm>
34+
<Story />
2935
</FormProvider>
3036
</AppProvider>
3137
</Provider>

‎packages/react/spec/auto/inputs/PolarisBooleanInput.stories.jsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,26 @@ import { PolarisAutoForm } from "../../../src/auto/polaris/PolarisAutoForm.tsx";
66
import { PolarisAutoBooleanInput } from "../../../src/auto/polaris/inputs/PolarisAutoBooleanInput.tsx";
77
import { FormProvider, useForm } from "../../../src/useActionForm.ts";
88
import { testApi as api } from "../../apis.ts";
9+
10+
const Component = (props) => {
11+
return (
12+
<PolarisAutoForm action={api.widget.create}>
13+
<PolarisAutoBooleanInput {...props} />
14+
</PolarisAutoForm>
15+
);
16+
};
17+
918
export default {
1019
title: "Polaris/BooleanInput",
11-
component: PolarisAutoBooleanInput,
20+
component: Component,
1221
decorators: [
1322
(Story, { parameters }) => {
1423
const { theme = "light" } = parameters;
1524
return (
1625
<AppProvider i18n={translations}>
1726
<FormProvider {...useForm()}>
1827
<Provider api={api}>
19-
<PolarisAutoForm action={api.widget.create}>
20-
<Story />
21-
</PolarisAutoForm>
28+
<Story />
2229
</Provider>
2330
</FormProvider>
2431
</AppProvider>

‎packages/react/spec/auto/inputs/PolarisFileInput.stories.jsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,24 @@ import { PolarisAutoFileInput } from "../../../src/auto/polaris/inputs/PolarisAu
77
import { FormProvider, useForm } from "../../../src/useActionForm.ts";
88
import { testApi as api } from "../../apis.ts";
99

10+
const Component = (props) => {
11+
return (
12+
<PolarisAutoForm action={api.game.stadium.create}>
13+
<PolarisAutoFileInput {...props} />
14+
</PolarisAutoForm>
15+
);
16+
};
17+
1018
export default {
1119
title: "Polaris/FileInput",
12-
component: PolarisAutoFileInput,
20+
component: Component,
1321
decorators: [
1422
(Story, { parameters }) => {
1523
return (
1624
<AppProvider i18n={translations}>
1725
<FormProvider {...useForm()}>
1826
<Provider api={api}>
19-
<PolarisAutoForm action={api.game.stadium.create}>
20-
<Story />
21-
</PolarisAutoForm>
27+
<Story />
2228
</Provider>
2329
</FormProvider>
2430
</AppProvider>

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

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AppProvider, Card, Page } from "@shopify/polaris";
1+
import { AppProvider } from "@shopify/polaris";
22
import translations from "@shopify/polaris/locales/en.json";
33
import React from "react";
44
import { Provider } from "../../../src/GadgetProvider.tsx";
@@ -7,23 +7,25 @@ import { PolarisAutoJSONInput } from "../../../src/auto/polaris/inputs/PolarisAu
77
import { FormProvider, useForm } from "../../../src/useActionForm.ts";
88
import { testApi as api } from "../../apis.ts";
99

10+
const Component = (props) => {
11+
return (
12+
<PolarisAutoForm action={api.widget.create}>
13+
<PolarisAutoJSONInput {...props} />
14+
</PolarisAutoForm>
15+
);
16+
};
17+
1018
export default {
1119
title: "Polaris/JsonInput",
12-
component: PolarisAutoJSONInput,
20+
component: Component,
1321
decorators: [
1422
(Story, { parameters }) => {
1523
const { theme = "light" } = parameters;
1624
return (
1725
<Provider api={api}>
1826
<AppProvider i18n={translations}>
1927
<FormProvider {...useForm()}>
20-
<PolarisAutoForm action={api.widget.create}>
21-
<Page>
22-
<Card>
23-
<Story />
24-
</Card>
25-
</Page>
26-
</PolarisAutoForm>
28+
<Story />
2729
</FormProvider>
2830
</AppProvider>
2931
</Provider>

‎packages/react/spec/auto/inputs/PolarisStringInput.stories.jsx

+14-8
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,22 @@ import { PolarisAutoTextInput } from "../../../src/auto/polaris/inputs/PolarisAu
77
import { FormProvider, useForm } from "../../../src/useActionForm.ts";
88
import { testApi as api } from "../../apis.ts";
99

10+
const Component = (props) => {
11+
return (
12+
<PolarisAutoForm action={api.widget.create}>
13+
<Page>
14+
<Card>
15+
<PolarisAutoTextInput {...props} />
16+
</Card>
17+
</Page>
18+
</PolarisAutoForm>
19+
);
20+
};
21+
1022
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
1123
export default {
1224
title: "Polaris/StringInput",
13-
component: PolarisAutoTextInput,
25+
component: Component,
1426
decorators: [
1527
// 👇 Defining the decorator in the preview file applies it to all stories
1628
(Story, { parameters }) => {
@@ -20,13 +32,7 @@ export default {
2032
<Provider api={api}>
2133
<AppProvider i18n={translations}>
2234
<FormProvider {...useForm()}>
23-
<PolarisAutoForm action={api.widget.create}>
24-
<Page>
25-
<Card>
26-
<Story />
27-
</Card>
28-
</Page>
29-
</PolarisAutoForm>
35+
<Story />
3036
</FormProvider>
3137
</AppProvider>
3238
</Provider>

0 commit comments

Comments
 (0)