Skip to content

Commit 1b1d0c3

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

Some content is hidden

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

41 files changed

+1152
-739
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.500.0-development.2018",
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

+2-1
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ 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",
163164
},
164165
};

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

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { AppProvider, Card, 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 ExampleAutoRelatedForm = (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+
<Text as="h2" variant="headingSm">
35+
Has Many Form -- Gizmos
36+
</Text>
37+
<PolarisAutoRelationshipForm
38+
field="gizmos"
39+
selectPaths={["name", "orientation"]}
40+
primaryLabel="name"
41+
secondaryLabel="orientation"
42+
>
43+
<PolarisAutoInput field="name" />
44+
<PolarisAutoInput field="orientation" />
45+
<PolarisAutoInput field="attachment" />
46+
</PolarisAutoRelationshipForm>
47+
</Card>
48+
<PolarisAutoSubmit />
49+
</PolarisAutoForm>
50+
</Page>
51+
);
52+
};
53+
54+
export default {
55+
title: "Polaris/AutoForm/AutoRelationshipForm",
56+
component: ExampleAutoRelatedForm,
57+
decorators: [
58+
(Story) => {
59+
return (
60+
<Provider api={api}>
61+
<AppProvider i18n={translations}>
62+
<FormProvider {...useForm()}>
63+
<Story />
64+
</FormProvider>
65+
</AppProvider>
66+
</Provider>
67+
);
68+
},
69+
],
70+
};
71+
72+
export const Create = {
73+
args: {
74+
action: api.widget.create,
75+
},
76+
};
77+
78+
export const Update = {
79+
args: {
80+
action: api.widget.update,
81+
findBy: "1",
82+
},
83+
};

‎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)