Skip to content

Commit 888a71f

Browse files
vividvioletvividviolet
committed
Add support for Function Settings component in Admin
1 parent 0df0640 commit 888a71f

File tree

11 files changed

+175
-21
lines changed

11 files changed

+175
-21
lines changed

‎.changeset/forty-wombats-yell.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/ui-extensions': patch
3+
---
4+
5+
Add support for Function Settings component for Admin

‎packages/ui-extensions/src/docs/shared/components/FunctionSettings.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
2+
3+
const data: SharedReferenceEntityTemplateSchema = {
4+
name: 'FunctionSettings',
5+
description:
6+
'FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.',
7+
category: 'Polaris web components',
8+
subCategory: 'Forms',
9+
related: [
10+
{
11+
type: 'component',
12+
name: 'TextField',
13+
url: '/docs/api/admin-extensions/components/forms/textfield',
14+
},
15+
{
16+
type: 'component',
17+
name: 'NumberField',
18+
url: '/docs/api/admin-extensions/components/forms/numberfield',
19+
},
20+
{
21+
type: 'component',
22+
name: 'ChoiceList',
23+
url: '/docs/api/admin-extensions/components/forms/choicelist',
24+
},
25+
],
26+
};
27+
28+
export default data;

‎packages/ui-extensions/src/surfaces/admin/components.d.ts‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export interface ExtendableEvent extends Event {
169169
interface AggregateError$1<T extends Error> extends Error {
170170
errors: T[];
171171
}
172-
export interface ArgregatedErrorEvent<T extends Error> extends ErrorEvent {
172+
export interface AggregateErrorEvent<T extends Error> extends ErrorEvent {
173173
error: AggregateError$1<T>;
174174
}
175175
export type SizeKeyword =
@@ -2100,7 +2100,7 @@ interface ColorPickerProps$1 extends GlobalProps, InputProps {
21002100
* For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.
21012101
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
21022102
*
2103-
* If the value is invalid, the component will select rgb(0, 0, 0).
2103+
* If the value is invalid, the component will return an empty string ''.
21042104
*
21052105
* Note that the `onChange` handler will emit the value in hex.
21062106
*/
@@ -2407,12 +2407,19 @@ interface DatePickerProps$1 extends GlobalProps, InputProps, FocusEventProps {
24072407
*/
24082408
value?: string;
24092409
/**
2410-
* Callback when any date is selected. Will fire before `onChange`.
2410+
* Callback when any date is selected.
2411+
*
2412+
* - If `type="single"`, fires when a date is selected and happens before `onChange`.
2413+
* - If `type="multiple"`, fires when a date is selected before `onChange`.
2414+
* - If `type="range"`, fires when a first date is selected (with the partial value formatted as `YYYY-MM-DD--`), and when the last date is selected before `onChange`.
24112415
*/
24122416
onInput?: (event: Event) => void;
24132417
/**
2414-
* Callback when the `value` is changed. For `type="single"` and `type="multiple"`, this is the same as `onInput`.
2415-
* For `type="range"`, this is only called when the range is completed by selecting the end date of the range.
2418+
* Callback when the value is committed.
2419+
*
2420+
* - If `type="single"`, fires when a date is selected after `onInput`.
2421+
* - If `type="multiple"`, fires when a date is selected after `onInput`.
2422+
* - If `type="range"`, fires when a range is completed by selecting the end date after `onInput`.
24162423
*/
24172424
onChange?: (event: Event) => void;
24182425
}
@@ -2432,6 +2439,16 @@ interface DateFieldProps$1
24322439
| 'onViewChange'
24332440
>,
24342441
AutocompleteProps<DateAutocompleteField> {
2442+
/**
2443+
* Callback when the user makes any changes in the field.
2444+
* Also triggered when a date is selected using the date picker popup before `onChange`.
2445+
*/
2446+
onInput?: (event: Event) => void;
2447+
/**
2448+
* Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
2449+
* Also triggered when a date is selected using the date picker popup after `onInput`.
2450+
*/
2451+
onChange?: (event: Event) => void;
24352452
/**
24362453
* Callback when the field has an invalid date.
24372454
* This callback will be called, if the date typed is invalid or disabled.
@@ -2562,7 +2579,7 @@ interface FunctionSettingsProps$1 extends GlobalProps, FormProps$1 {
25622579
* highlight the fields that caused the errors, and display the error messages
25632580
* to the user.
25642581
*/
2565-
onError?: (event: ArgregatedErrorEvent<FunctionSettingsError>) => void;
2582+
onError?: (event: AggregateErrorEvent<FunctionSettingsError>) => void;
25662583
}
25672584
export interface FunctionSettingsError extends Error {
25682585
/**
@@ -6205,7 +6222,7 @@ export interface ModalJSXProps
62056222
export type RequiredMoneyFieldProps = Required<MoneyFieldProps$1>;
62066223
export interface MoneyFieldProps
62076224
extends Omit<PreactFieldProps, 'value'>,
6208-
Pick<RequiredMoneyFieldProps, 'max' | 'min' | 'step'> {
6225+
Pick<RequiredMoneyFieldProps, 'max' | 'min'> {
62096226
value: Required<MoneyFieldProps$1>['value'];
62106227
}
62116228

@@ -6215,7 +6232,8 @@ declare class MoneyField
62156232
{
62166233
accessor max: MoneyFieldProps['max'];
62176234
accessor min: MoneyFieldProps['min'];
6218-
accessor step: MoneyFieldProps['step'];
6235+
get value(): string;
6236+
set value(value: string);
62196237
constructor();
62206238
}
62216239
declare global {
@@ -6255,6 +6273,8 @@ declare class NumberField
62556273
extends PreactFieldElement<NumberFieldProps['autocomplete']>
62566274
implements NumberFieldProps
62576275
{
6276+
get value(): string;
6277+
set value(value: string);
62586278
accessor inputMode: NumberFieldProps['inputMode'];
62596279
accessor step: NumberFieldProps['step'];
62606280
accessor max: NumberFieldProps['max'];

‎packages/ui-extensions/src/surfaces/admin/components/FormExtensionComponents.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {StandardComponents} from './StandardComponents';
2+
3+
export type FormExtensionComponents = StandardComponents | 'Form';
4+
5+
export default FormExtensionComponents;

‎packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ext.doc.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
import shared from '../../../../docs/shared/components/FunctionSettings';
3+
4+
const data: ReferenceEntityTemplateSchema = {
5+
...shared,
6+
category: 'Polaris web components',
7+
thumbnail: '/assets/templated-apis-screenshots/admin/components/form.png',
8+
isVisualComponent: true,
9+
definitions: [
10+
{
11+
title: 'Events',
12+
description:
13+
'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
14+
type: 'FormEvents',
15+
},
16+
],
17+
defaultExample: {
18+
codeblock: {
19+
title: '',
20+
tabs: [
21+
{
22+
title: 'JSX',
23+
code: './examples/default.tsx',
24+
language: 'jsx',
25+
},
26+
],
27+
},
28+
},
29+
};
30+
31+
export default data;

‎packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/examples/default.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {render} from 'preact';
2+
import {useState} from 'preact/hooks';
3+
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
7+
8+
function Extension() {
9+
const [percentage, setPercentage] = useState(
10+
shopify.data.metafields[0].value,
11+
);
12+
13+
async function applyExtensionMetafieldChange() {
14+
await shopify.applyMetafieldChange({
15+
type: 'updateMetafield',
16+
namespace: '$app:discounts-percentage',
17+
key: 'function-configuration',
18+
value: percentage,
19+
valueType: 'integer',
20+
});
21+
}
22+
23+
return (
24+
<s-function-settings
25+
onSubmit={(e) => e.waitUntil(applyExtensionMetafieldChange())}
26+
onReset={resetForm}
27+
>
28+
<s-number-field
29+
step="1"
30+
suffix="%"
31+
label="Percentage"
32+
name="percentage"
33+
value={shopify.data.metafields[0].value}
34+
onChange={(event) => setPercentage(event.currentTarget.value)}
35+
/>
36+
</s-function-settings>
37+
);
38+
}

‎packages/ui-extensions/src/surfaces/admin/components/FunctionSettingsComponents.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {FormExtensionComponents} from './FormExtensionComponents';
2+
3+
export type FunctionSettingsComponents =
4+
| FormExtensionComponents
5+
| 'FunctionSettings';
6+
7+
export default FunctionSettingsComponents;

‎packages/ui-extensions/src/surfaces/admin/components/MoneyField.d.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ declare class PreactFieldElement<Autocomplete extends string = string>
199199
export type RequiredMoneyFieldProps = Required<MoneyFieldProps$1>;
200200
export interface MoneyFieldProps
201201
extends Omit<PreactFieldProps, 'value'>,
202-
Pick<RequiredMoneyFieldProps, 'max' | 'min' | 'step'> {
202+
Pick<RequiredMoneyFieldProps, 'max' | 'min'> {
203203
value: Required<MoneyFieldProps$1>['value'];
204204
}
205205

@@ -209,7 +209,8 @@ declare class MoneyField
209209
{
210210
accessor max: MoneyFieldProps['max'];
211211
accessor min: MoneyFieldProps['min'];
212-
accessor step: MoneyFieldProps['step'];
212+
get value(): string;
213+
set value(value: string);
213214
constructor();
214215
}
215216
declare global {

‎packages/ui-extensions/src/surfaces/admin/components/NumberField.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,8 @@ declare class NumberField
214214
extends PreactFieldElement<NumberFieldProps['autocomplete']>
215215
implements NumberFieldProps
216216
{
217+
get value(): string;
218+
set value(value: string);
217219
accessor inputMode: NumberFieldProps['inputMode'];
218220
accessor step: NumberFieldProps['step'];
219221
accessor max: NumberFieldProps['max'];

‎packages/ui-extensions/src/surfaces/admin/components/shared.d.ts‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export interface ExtendableEvent extends Event {
167167
interface AggregateError$1<T extends Error> extends Error {
168168
errors: T[];
169169
}
170-
export interface ArgregatedErrorEvent<T extends Error> extends ErrorEvent {
170+
export interface AggregateErrorEvent<T extends Error> extends ErrorEvent {
171171
error: AggregateError$1<T>;
172172
}
173173
export type SizeKeyword =
@@ -2098,7 +2098,7 @@ interface ColorPickerProps$1 extends GlobalProps, InputProps {
20982098
* For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.
20992099
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
21002100
*
2101-
* If the value is invalid, the component will select rgb(0, 0, 0).
2101+
* If the value is invalid, the component will return an empty string ''.
21022102
*
21032103
* Note that the `onChange` handler will emit the value in hex.
21042104
*/
@@ -2405,12 +2405,19 @@ interface DatePickerProps$1 extends GlobalProps, InputProps, FocusEventProps {
24052405
*/
24062406
value?: string;
24072407
/**
2408-
* Callback when any date is selected. Will fire before `onChange`.
2408+
* Callback when any date is selected.
2409+
*
2410+
* - If `type="single"`, fires when a date is selected and happens before `onChange`.
2411+
* - If `type="multiple"`, fires when a date is selected before `onChange`.
2412+
* - If `type="range"`, fires when a first date is selected (with the partial value formatted as `YYYY-MM-DD--`), and when the last date is selected before `onChange`.
24092413
*/
24102414
onInput?: (event: Event) => void;
24112415
/**
2412-
* Callback when the `value` is changed. For `type="single"` and `type="multiple"`, this is the same as `onInput`.
2413-
* For `type="range"`, this is only called when the range is completed by selecting the end date of the range.
2416+
* Callback when the value is committed.
2417+
*
2418+
* - If `type="single"`, fires when a date is selected after `onInput`.
2419+
* - If `type="multiple"`, fires when a date is selected after `onInput`.
2420+
* - If `type="range"`, fires when a range is completed by selecting the end date after `onInput`.
24142421
*/
24152422
onChange?: (event: Event) => void;
24162423
}
@@ -2430,6 +2437,16 @@ interface DateFieldProps$1
24302437
| 'onViewChange'
24312438
>,
24322439
AutocompleteProps<DateAutocompleteField> {
2440+
/**
2441+
* Callback when the user makes any changes in the field.
2442+
* Also triggered when a date is selected using the date picker popup before `onChange`.
2443+
*/
2444+
onInput?: (event: Event) => void;
2445+
/**
2446+
* Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
2447+
* Also triggered when a date is selected using the date picker popup after `onInput`.
2448+
*/
2449+
onChange?: (event: Event) => void;
24332450
/**
24342451
* Callback when the field has an invalid date.
24352452
* This callback will be called, if the date typed is invalid or disabled.
@@ -2560,7 +2577,7 @@ interface FunctionSettingsProps$1 extends GlobalProps, FormProps$1 {
25602577
* highlight the fields that caused the errors, and display the error messages
25612578
* to the user.
25622579
*/
2563-
onError?: (event: ArgregatedErrorEvent<FunctionSettingsError>) => void;
2580+
onError?: (event: AggregateErrorEvent<FunctionSettingsError>) => void;
25642581
}
25652582
export interface FunctionSettingsError extends Error {
25662583
/**

0 commit comments

Comments
 (0)