From babd0446ba556899bde4074b1f80b2071b32534e Mon Sep 17 00:00:00 2001 From: Marco Yip Date: Tue, 21 May 2024 14:47:26 +0000 Subject: [PATCH 1/5] update timefield and datefield docs --- .../reference/components/DateField.doc.ts | 14 ++++++ .../reference/components/TimeField.doc.ts | 14 ++++++ .../examples/date-field/date-input.ts | 46 ++++++++++++++++++ .../examples/date-field/date-input.tsx | 35 ++++++++++++++ .../examples/time-field/time-input.ts | 41 ++++++++++++++++ .../examples/time-field/time-input.tsx | 27 +++++++++++ .../components/TimeField/TimeField.ts | 3 ++ .../components/shared/InputField.ts | 48 +++++++++++++++++++ 8 files changed, 228 insertions(+) create mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.ts create mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.tsx create mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.ts create mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.tsx diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts index c01194f31..9e965740c 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts @@ -1,4 +1,5 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; +import {generateCodeBlock} from '../helpers/generateCodeBlock'; const data: ReferenceEntityTemplateSchema = { name: 'DateField', @@ -15,6 +16,19 @@ const data: ReferenceEntityTemplateSchema = { ], category: 'Components', related: [], + defaultExample: { + codeblock: generateCodeBlock('Date Input', 'date-field', 'date-input'), + }, + subSections: [ + { + type: 'Generic', + anchorLink: 'guidelines', + title: 'Guidelines', + sectionContent: ` +- Use a smart default date for common selections. + `, + }, + ], }; export default data; diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts index 059eab521..301f1422c 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts @@ -1,4 +1,5 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; +import {generateCodeBlock} from '../helpers/generateCodeBlock'; const data: ReferenceEntityTemplateSchema = { name: 'TimeField', @@ -15,6 +16,19 @@ const data: ReferenceEntityTemplateSchema = { ], category: 'Components', related: [], + defaultExample: { + codeblock: generateCodeBlock('Time Input', 'time-field', 'time-input'), + }, + subSections: [ + { + type: 'Generic', + anchorLink: 'guidelines', + title: 'Guidelines', + sectionContent: ` +- Use a smart default time for common selections. + `, + }, + ], }; export default data; diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.ts new file mode 100644 index 000000000..5ffcc6a74 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.ts @@ -0,0 +1,46 @@ +import { + Navigator, + Screen, + ScrollView, + Text, + DateField, + extension, +} from '@shopify/ui-extensions/point-of-sale'; + +export default extension('pos.home.modal.render', (root, api) => { + const clearHandler = () => { + dateField.updateProps({value: ''}); + textBox.replaceChildren(''); + }; + const dateField = root.createComponent(DateField, { + label: 'Select Date', + value: '', + action: {label: 'Clear', onPress: clearHandler}, + }); + + const textBox = root.createComponent(Text); + + const onChangeHandler = (newValue: string) => { + dateField.updateProps({value: newValue}); + + const textContent = `Selected Date: ${newValue}`; + textBox.replaceChildren(textContent); + }; + + dateField.updateProps({onChange: onChangeHandler}); + + const scrollView = root.createComponent(ScrollView); + scrollView.append(dateField); + scrollView.append(textBox); + + const screen = root.createComponent(Screen, { + name: 'DateField', + title: 'Date Field Example', + }); + screen.append(scrollView); + + const navigator = root.createComponent(Navigator); + navigator.append(screen); + + root.append(navigator); +}); diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.tsx new file mode 100644 index 000000000..1355974c4 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.tsx @@ -0,0 +1,35 @@ +import React, {useState} from 'react'; +import { + DateField, + Screen, + ScrollView, + Navigator, + Text, + reactExtension, +} from '@shopify/ui-extensions-react/point-of-sale'; + +const SmartGridModal = () => { + const [date, setDate] = useState(''); + return ( + + + + setDate(''), + }} + /> + Selected Date: {date} + + + + ); +}; + +export default reactExtension('pos.home.modal.render', () => ( + +)); diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.ts new file mode 100644 index 000000000..20b811a60 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.ts @@ -0,0 +1,41 @@ +import { + Navigator, + Screen, + ScrollView, + Text, + TimeField, + extension, +} from '@shopify/ui-extensions/point-of-sale'; + +export default extension('pos.home.modal.render', (root, api) => { + const timeField = root.createComponent(TimeField, { + label: 'Select Time', + value: '', + }); + + const textBox = root.createComponent(Text); + + const onChangeHandler = (newValue: string) => { + timeField.updateProps({value: newValue}); + + const textContent = `Selected Time: ${newValue}`; + textBox.replaceChildren(textContent); + }; + + timeField.updateProps({onChange: onChangeHandler}); + + const scrollView = root.createComponent(ScrollView); + scrollView.append(timeField); + scrollView.append(textBox); + + const screen = root.createComponent(Screen, { + name: 'TimeField', + title: 'Time Field Example', + }); + screen.append(scrollView); + + const navigator = root.createComponent(Navigator); + navigator.append(screen); + + root.append(navigator); +}); diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.tsx new file mode 100644 index 000000000..c3f25807b --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.tsx @@ -0,0 +1,27 @@ +import React, {useState} from 'react'; +import { + TimeField, + Screen, + ScrollView, + Navigator, + Text, + reactExtension, +} from '@shopify/ui-extensions-react/point-of-sale'; + +const SmartGridModal = () => { + const [time, setTime] = useState(''); + return ( + + + + + Selected Time: {time} + + + + ); +}; + +export default reactExtension('pos.home.modal.render', () => ( + +)); diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts index 2c1c984eb..fbe28b38e 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts @@ -14,6 +14,9 @@ export interface TimeFieldProps | 'action' | 'helpText' > { + /** + * (Android only) Whether the clock displays in 24 hour time instead of 12 hour time. Defaults to `false`. + */ is24Hour?: boolean; } diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/shared/InputField.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/shared/InputField.ts index fa8e95f8e..dec14127f 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/shared/InputField.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/shared/InputField.ts @@ -6,8 +6,17 @@ * @property {function(): void} onPress - A callback to be performed. */ export interface InputAction { + /** + * The text displayed in the button. + */ label: string; + /** + * A callback to be performed. + */ onPress: () => void; + /** + * Whether the button can be pressed. + */ disabled?: boolean; } @@ -29,17 +38,56 @@ export interface InputAction { * @property {number?} [maxLength] - Specifies the maximum number of characters allowed. */ export interface InputProps { + /** + * Whether the field can be modified. + */ disabled?: boolean; + /** + * Indicates an error to the user. The field is given specific stylistic treatment to communicate problems that have to be resolved immediately. + */ error?: string; + /** + * The content to use as the field label. + */ label: string; + /** + * The callback when focus is removed. + */ onBlur?: () => void; + /** + * The callback when the user has finished editing a field. + */ onChange?: (value: string) => void; + /** + * The callback when input is focused. + */ onFocus?: () => void; + /** + * Callback when the user makes any changes in the field. As noted in the documentation for `onChange`, you **must not** use this to update `value` — use the `onChange` callback for that purpose. Use the `onInput` prop when you need to do something as soon as the user makes a change, like clearing validation errors that apply to the field as soon as the user begins making the necessary adjustments. + */ onInput?: (value: string) => void; + /** + * A short hint that describes the expected value of the field. + */ placeholder?: string; + /** + * Whether the field needs a value. + */ required?: boolean; + /** + * The current value for the field. You should update this value in response to the `onChange` callback. + */ value?: string; + /** + * The label under the text field which provides guidance or instructions that assist users. + */ helpText?: string; + /** + * A button under the text field to provide extra functionality. + */ action?: InputAction; + /** + * The maximum number of characters allowed in the input field. + */ maxLength?: number; } From ef619986fe0fb144e75e538b06bfffc78c574d9e Mon Sep 17 00:00:00 2001 From: Marco Yip <81783308+merkoyep@users.noreply.github.com> Date: Wed, 29 May 2024 09:14:47 -0400 Subject: [PATCH 2/5] Update packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts Co-authored-by: Nathan Oliveira --- .../point-of-sale/reference/components/DateField.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts index 9e965740c..beb689937 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts @@ -17,7 +17,7 @@ const data: ReferenceEntityTemplateSchema = { category: 'Components', related: [], defaultExample: { - codeblock: generateCodeBlock('Date Input', 'date-field', 'date-input'), + codeblock: generateCodeBlock('Date input', 'date-field', 'date-input'), }, subSections: [ { From dfdb03114ae1c46ae9b835e5a43d01d487bcb9d8 Mon Sep 17 00:00:00 2001 From: Marco Yip <81783308+merkoyep@users.noreply.github.com> Date: Wed, 29 May 2024 09:14:55 -0400 Subject: [PATCH 3/5] Update packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts Co-authored-by: Nathan Oliveira --- .../surfaces/point-of-sale/components/TimeField/TimeField.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts index fbe28b38e..fe122fa65 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts @@ -15,7 +15,8 @@ export interface TimeFieldProps | 'helpText' > { /** - * (Android only) Whether the clock displays in 24 hour time instead of 12 hour time. Defaults to `false`. + * (Android only) Whether the clock displays in 24 hour time instead of 12 hour time. + * @defaultValue false */ is24Hour?: boolean; } From 0073dfcc139da3b2eccfb5bec64976da33b744f4 Mon Sep 17 00:00:00 2001 From: Marco Yip <81783308+merkoyep@users.noreply.github.com> Date: Wed, 29 May 2024 09:15:06 -0400 Subject: [PATCH 4/5] Update packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts Co-authored-by: Nathan Oliveira --- .../point-of-sale/reference/components/TimeField.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts index 301f1422c..1e9e12c17 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts @@ -17,7 +17,7 @@ const data: ReferenceEntityTemplateSchema = { category: 'Components', related: [], defaultExample: { - codeblock: generateCodeBlock('Time Input', 'time-field', 'time-input'), + codeblock: generateCodeBlock('Time input', 'time-field', 'time-input'), }, subSections: [ { From f7739b4fedf1700dea7de32520ce9cc1af396028 Mon Sep 17 00:00:00 2001 From: Marco Yip <81783308+merkoyep@users.noreply.github.com> Date: Wed, 29 May 2024 09:20:20 -0400 Subject: [PATCH 5/5] Update TimeField.ts --- .../surfaces/point-of-sale/components/TimeField/TimeField.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts index fe122fa65..dd92aa327 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts @@ -15,7 +15,7 @@ export interface TimeFieldProps | 'helpText' > { /** - * (Android only) Whether the clock displays in 24 hour time instead of 12 hour time. + * (Android only) Whether the clock displays in 24 hour time instead of 12 hour time. * @defaultValue false */ is24Hour?: boolean;