@shopify/ui-extensions 2023.7.2 → 2024.1.0

package/src/surfaces/point-of-sale/components/Icon/Icon.ts

@@ -0,0 +1,93 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type IconName =
+  | 'add-customer'
+  | 'analytics'
+  | 'apps'
+  | 'arrow'
+  | 'arrow-left'
+  | 'backspace'
+  | 'card-reader'
+  | 'call'
+  | 'cancel'
+  | 'not-stocked'
+  | 'cash'
+  | 'checkmark'
+  | 'caret-down'
+  | 'checkmark-active'
+  | 'checkmark-inactive'
+  | 'chevron-up'
+  | 'chevron-right'
+  | 'chevron-down'
+  | 'circle-alert'
+  | 'circle-cancel'
+  | 'circle-checkmark'
+  | 'circle-disconnected'
+  | 'circle-info'
+  | 'circle-outline'
+  | 'clock'
+  | 'collections'
+  | 'copy'
+  | 'credit-card'
+  | 'custom-payment'
+  | 'custom-sale'
+  | 'discount'
+  | 'external-link'
+  | 'flag'
+  | 'flip-camera'
+  | 'gallery-view'
+  | 'gift-card'
+  | 'help'
+  | 'hide-keyboard'
+  | 'home'
+  | 'horizontal-dots'
+  | 'keypad'
+  | 'lightning'
+  | 'link'
+  | 'list'
+  | 'list-view'
+  | 'lock'
+  | 'mail'
+  | 'available-at-other-locations'
+  | 'menu'
+  | 'minus'
+  | 'mobile'
+  | 'note-report'
+  | 'drawer'
+  | 'orders'
+  | 'shopify-payments'
+  | 'play-button'
+  | 'plus'
+  | 'products'
+  | 'radio-active'
+  | 'radio-inactive'
+  | 'rearrange'
+  | 'receipt'
+  | 'refresh'
+  | 'register'
+  | 'retrieve-cart'
+  | 'image-placeholder'
+  | 'save-cart'
+  | 'scan-barcode'
+  | 'search'
+  | 'send'
+  | 'settings'
+  | 'shipment'
+  | 'split-payment'
+  | 'sort'
+  | 'staff'
+  | 'star'
+  | 'unordered-list'
+  | 'connectivity-warning'
+  | 'internet'
+  | 'delivery'
+  | 'shop-pay';
+
+export type IconSize = 'minor' | 'major' | 'spot' | 'caption' | 'badge';
+
+export interface IconProps {
+  name: IconName;
+  size?: IconSize;
+}
+
+export const Icon = createRemoteComponent<'Icon', IconProps>('Icon');

package/src/surfaces/point-of-sale/components/Image/Image.ts

@@ -0,0 +1,7 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface ImageProps {
+  src?: string;
+}
+
+export const Image = createRemoteComponent<'Image', ImageProps>('Image');

package/src/surfaces/point-of-sale/components/List/List.ts

@@ -0,0 +1,110 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {BadgeProps} from '../Badge/Badge';
+import {ColorType} from '../Text/Text';
+
+export interface ToggleSwitch {
+  value?: boolean;
+  disabled?: boolean;
+}
+
+export interface SubtitleType {
+  content: string;
+  color?: ColorType;
+}
+
+export type ListRowSubtitle = string | SubtitleType;
+
+export interface ListRowLeftSide {
+  /**
+   * The main label that will be displayed on the left side of the row.
+   */
+  label: string;
+  /**
+   * The subtitles to display beneath the main label. Up to 3 subtitles can be displayed.
+   * Subtitles can optionally be configured with colors by passing an object with a `content` and `color` properties.
+   */
+  subtitle?: readonly [ListRowSubtitle, ListRowSubtitle?, ListRowSubtitle?];
+  /**
+   * @deprecated
+   * badge will be removed in version 2.0.0 in favor of badges.
+   * Please migrate to using badges as soon as possible.
+   */
+  badge?: BadgeProps;
+  /**
+   * Colored badges that are displayed underneath the `title` and `subtitles`.
+   */
+  badges?: BadgeProps[];
+  image?: {
+    /**
+     * A link to an image to be displayed on the far left side of the row.
+     */
+    source?: string;
+    /**
+     * A number that is displayed on the top right of the image.
+     */
+    badge?: number;
+  };
+}
+
+export interface ListRowRightSide {
+  /**
+   * The main label that will be displayed on the right side of the row.
+   */
+  label?: string;
+  /**
+   * Show a chevron. Set this to true if pressing on the row navigates to another screen.
+   * @defaultValue `false`
+   */
+  showChevron?: boolean;
+  /**
+   * A toggle switch that is be displayed on the right side of the row.
+   */
+  toggleSwitch?: ToggleSwitch;
+}
+
+export interface ListRow {
+  /**
+   * The unique identifier for this list item.
+   */
+  id: string;
+  /**
+   * The user interface of the left side of the row.
+   */
+  leftSide: ListRowLeftSide;
+  /**
+   * The user interface of the right side of the row.
+   */
+  rightSide?: ListRowRightSide;
+  /**
+   * Callback for when the user taps the row.
+   */
+  onPress?: () => void;
+}
+
+export interface ListProps {
+  /**
+   * A large display title at the top of the `List`.
+   */
+  title?: string;
+  /**
+   * The array of `ListRow` which will be converted into rows for this list.
+   */
+  data: ListRow[];
+  /**
+   * Whether or not more data is being loaded. Set this to `true` when paginating and fetching more data for the list.
+   */
+  isLoadingMore?: boolean;
+  /**
+   * The logic behind displaying an image or placeholder. `automatic` will display an image or placeholder if it detects
+   * that a `ListItem` in `data` has an `imageUri` value. `never` will never display images or placeholders. `always` will
+   * always display images or placeholders if `imageUri` is undefined or empty.
+   * @defaultValue `automatic`
+   */
+  imageDisplayStrategy?: 'automatic' | 'always' | 'never';
+  /**
+   * Callback for when the user reaches the end of the `List`. This can be used to fire a request to load more data.
+   */
+  onEndReached?: () => void;
+}
+
+export const List = createRemoteComponent<'List', ListProps>('List');

package/src/surfaces/point-of-sale/components/Navigator/Navigator.ts

@@ -0,0 +1,12 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+/**
+ * @property `initialScreenName` sets the initial Screen by its `name` property.
+ */
+export interface NavigatorProps {
+  initialScreenName?: string;
+}
+
+export const Navigator = createRemoteComponent<'Navigator', NavigatorProps>(
+  'Navigator',
+);

package/src/surfaces/point-of-sale/components/NumberField/NumberField.ts

@@ -0,0 +1,20 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {InputProps, MinMaxLengthProps} from '../shared/InputField';
+
+/**
+ * Represents the properties for the NumberField component.
+ * @typedef {Object} NumberFieldProps
+ * @property {'decimal' | 'numeric'} [inputMode] - The mode of input, can be either 'decimal' or 'numeric'.
+ * @property {number} [max] - The highest decimal or integer to be accepted for the field.
+ * @property {number} [min] - The lowest decimal or integer to be accepted for the field.
+ */
+export interface NumberFieldProps extends InputProps, MinMaxLengthProps {
+  inputMode?: 'decimal' | 'numeric';
+  max?: number;
+  min?: number;
+}
+
+export const NumberField = createRemoteComponent<
+  'NumberField',
+  NumberFieldProps
+>('NumberField');

package/src/surfaces/point-of-sale/components/PinPad/PinPad.ts

@@ -0,0 +1,47 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+/**
+ * Represents the result of the pin pad onSubmit function.
+ * @typedef {('accept'|'reject')} PinValidationResult
+ */
+export type PinValidationResult = 'accept' | 'reject';
+
+/**
+ * Represents the allowed lengths of a PIN.
+ * @typedef {(4|5|6|7|8|9|10)} PinLength
+ */
+export type PinLength = 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
+/**
+ * Represents an action type for the PinPad component.
+ * @typedef {Object} PinPadActionType
+ * @property {string} label - The label for the action button.
+ * @property {function(): number[]} onPress - The function to be called when the action button is pressed.
+ */
+export interface PinPadActionType {
+  label: string;
+  onPress: () => Promise<number[]>;
+}
+
+/**
+ * Represents the properties for the PinPad component.
+ * @typedef {Object} PinPadProps
+ * @property {boolean} [masked] - Whether the entered PIN should be masked.
+ * @property {PinLength} [minPinLength] - The minimum length of the PIN.
+ * @property {PinLength} [maxPinLength] - The maximum length of the PIN.
+ * @property {string} [label] - The content for the prompt on the pin pad.
+ * @property {PinPadActionType} [pinPadAction] - The call to action between the entry view and the keypad, consisting of a label and function that returns the pin.
+ * @property {function(pin: number[]): Promise<PinValidationResult>} onSubmit - The function to be called when the PIN is submitted.
+ * @property {function(pin: number[]): void} [onPinEntry] - The function to be called when a PIN is entered.
+ */
+export interface PinPadProps {
+  masked?: boolean;
+  minPinLength?: PinLength;
+  maxPinLength?: PinLength;
+  label?: string;
+  pinPadAction?: PinPadActionType;
+  onSubmit: (pin: number[]) => Promise<PinValidationResult>;
+  onPinEntry?: (pin: number[]) => void;
+}
+
+export const PinPad = createRemoteComponent<'PinPad', PinPadProps>('PinPad');

package/src/surfaces/point-of-sale/components/RadioButtonList/RadioButtonList.ts

@@ -0,0 +1,13 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface RadioButtonListProps {
+  items: string[];
+  onItemSelected: (item: string) => void;
+  initialSelectedItem?: string;
+  initialOffsetToShowSelectedItem?: boolean;
+}
+
+export const RadioButtonList = createRemoteComponent<
+  'RadioButtonList',
+  RadioButtonListProps
+>('RadioButtonList');

package/src/surfaces/point-of-sale/components/Screen/Screen.ts

@@ -0,0 +1,43 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+/** Represents the presentation of a screen in the navigation stack.
+ * @property `sheet` displays the screen from the bottom on `navigate` when `true`.
+ */
+export interface ScreenPresentationProps {
+  sheet?: boolean;
+}
+
+/** Represents the secondary action button of a screen in the navigation stack.
+ * @property `text` displays the name of the secondary action in the action bar.
+ * @property `onPress` triggered when the secondary action button is pressed.
+ * @property `isEnabled` displays the secondary action button when set `true`.
+ */
+export interface SecondaryActionProps {
+  text: string;
+  onPress: () => void;
+  isEnabled?: boolean;
+}
+
+/** Represents a screen in the navigation stack.
+ * @property `name` used to identify this screen as a destination in the navigation stack.
+ * @property `title` the title of the screen which will be displayed on the UI.
+ * @property `isLoading` displays a loading indicator when `true`. Set this to `true` when performing an asynchronous task, and then to false when the data becomes available to the UI.
+ * @property `secondaryAction` displays a secondary action button on the screen.
+ * @property `onNavigate` triggered when the screen is navigated to.
+ * @property `onNavigateBack` triggered when the user navigates back from this screen. Runs after screen is unmounted.
+ * @property `overrideNavigateBack` is a callback that allows you to override the secondary navigation action. Runs when screen is mounted.
+ * @property `onReceiveParams` a callback that gets triggered when the navigation event completes and the screen receives the parameters.
+ */
+export interface ScreenProps {
+  name: string;
+  title: string;
+  isLoading?: boolean;
+  presentation?: ScreenPresentationProps;
+  secondaryAction?: SecondaryActionProps;
+  onNavigate?: () => void;
+  onNavigateBack?: () => void;
+  overrideNavigateBack?: () => void;
+  onReceiveParams?: (params: any) => void;
+}
+
+export const Screen = createRemoteComponent<'Screen', ScreenProps>('Screen');

package/src/surfaces/point-of-sale/components/ScrollView/ScrollView.ts

@@ -0,0 +1,3 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export const ScrollView = createRemoteComponent<'ScrollView'>('ScrollView');

package/src/surfaces/point-of-sale/components/SearchBar/SearchBar.ts

@@ -0,0 +1,14 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface SearchBarProps {
+  initialValue?: string;
+  onTextChange?: (value: string) => void;
+  onSearch: (value: string) => void;
+  onFocus?: () => void;
+  editable?: boolean;
+  placeholder?: string;
+}
+
+export const SearchBar = createRemoteComponent<'SearchBar', SearchBarProps>(
+  'SearchBar',
+);

package/src/surfaces/point-of-sale/components/Section/Section.ts

@@ -0,0 +1,15 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface SectionHeaderAction {
+  title: string;
+  onPress: () => void;
+}
+
+export interface SectionProps {
+  title?: string;
+  action?: SectionHeaderAction;
+}
+
+export const Section = createRemoteComponent<'Section', SectionProps>(
+  'Section',
+);

package/src/surfaces/point-of-sale/components/SegmentedControl/SegmentedControl.ts

@@ -0,0 +1,18 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface Segment {
+  id: string;
+  label: string;
+  disabled: boolean;
+}
+
+export interface SegmentedControlProps {
+  segments: Segment[];
+  selected: string;
+  onSelect: (id: string) => void;
+}
+
+export const SegmentedControl = createRemoteComponent<
+  'SegmentedControl',
+  SegmentedControlProps
+>('SegmentedControl');

package/src/surfaces/point-of-sale/components/Selectable/Selectable.ts

@@ -0,0 +1,10 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface SelectableProps {
+  onPress: () => void;
+  disabled?: boolean;
+}
+
+export const Selectable = createRemoteComponent<'Selectable', SelectableProps>(
+  'Selectable',
+);

package/src/surfaces/point-of-sale/components/Spacing/Spacing.ts

@@ -0,0 +1,16 @@
+export type VerticalSpacing =
+  | 'HalfPoint'
+  | 'ExtraSmall'
+  | 'Small'
+  | 'Medium'
+  | 'Large'
+  | 'ExtraLarge';
+
+export type HorizontalSpacing =
+  | 'HalfPoint'
+  | 'ExtraSmall'
+  | 'Small'
+  | 'Medium'
+  | 'Large'
+  | 'ExtraLarge'
+  | 'ExtraExtraLarge';

package/src/surfaces/point-of-sale/components/Stack/Stack.ts

@@ -0,0 +1,37 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {HorizontalSpacing, VerticalSpacing} from '../Spacing/Spacing';
+
+export type Spacing =
+  | 0.5
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 13
+  | 16;
+
+export interface StackProps {
+  direction: 'vertical' | 'horizontal';
+  alignment?:
+    | 'flex-end'
+    | 'center'
+    | 'flex-start'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly';
+  paddingVertical?: VerticalSpacing;
+  paddingHorizontal?: HorizontalSpacing;
+  spacing?: Spacing;
+  flexChildren?: boolean;
+  flex?: number;
+  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
+}
+
+export const Stack = createRemoteComponent<'Stack', StackProps>('Stack');

package/src/surfaces/point-of-sale/components/Stepper/Stepper.ts

@@ -0,0 +1,39 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface StepperProps {
+  /**
+   * The initial value of the stepper.
+   */
+  initialValue: number;
+
+  /**
+   * A callback that is called when the value of the stepper changes.
+   */
+  onValueChanged: (value: number) => void;
+
+  /**
+   * @defaultValue 1
+   * Use to set the minimum value of the stepper.
+   */
+  minimumValue?: number;
+
+  /**
+   * Use to set the maximum value of the stepper.
+   */
+  maximumValue?: number;
+
+  /**
+   * Only use this field if you wish to override the internal state of this component.
+   */
+  value?: number;
+
+  /**
+   * @defaultValue false
+   * Whether the field can be modified.
+   */
+  disabled?: boolean;
+}
+
+export const Stepper = createRemoteComponent<'Stepper', StepperProps>(
+  'Stepper',
+);

package/src/surfaces/point-of-sale/components/Text/Text.ts

@@ -0,0 +1,28 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type TextVariant =
+  | 'sectionHeader'
+  | 'captionRegular'
+  | 'captionRegularTall'
+  | 'captionMedium'
+  | 'body'
+  | 'headingSmall'
+  | 'headingLarge'
+  | 'display';
+
+export type ColorType =
+  | 'TextNeutral'
+  | 'TextSubdued'
+  | 'TextDisabled'
+  | 'TextWarning'
+  | 'TextCritical'
+  | 'TextSuccess'
+  | 'TextInteractive'
+  | 'TextHighlight';
+
+export interface TextProps {
+  variant?: TextVariant;
+  color?: ColorType;
+}
+
+export const Text = createRemoteComponent<'Text', TextProps>('Text');

package/src/surfaces/point-of-sale/components/TextArea/TextArea.ts

@@ -0,0 +1,15 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {InputProps, MinMaxLengthProps} from '../shared/InputField';
+
+/**
+ * Represents the properties for the TextField component.
+ * @typedef {Object} TextAreaProps
+ * @property {number} [rows] - The initial number of lines to be displayed. Maximum of 8 lines.
+ */
+export interface TextAreaProps extends InputProps, MinMaxLengthProps {
+  rows?: number;
+}
+
+export const TextArea = createRemoteComponent<'TextArea', TextAreaProps>(
+  'TextArea',
+);

package/src/surfaces/point-of-sale/components/TextField/TextField.ts

@@ -0,0 +1,47 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {BaseTextFieldProps} from '../shared/BaseTextField';
+import type {InputProps} from '../shared/InputField';
+
+export interface ActionProps {
+  type: 'action';
+  message: string;
+  onPress: (value: string) => void;
+}
+
+export interface InfoProps {
+  type: 'info';
+  message: string;
+  alwaysShow?: boolean;
+}
+
+export interface SuccessProps {
+  type: 'success';
+  message?: string;
+}
+
+export interface PasswordProps {
+  type: 'password';
+  onPress: (value: string) => void;
+}
+
+export type EmbeddedElementProps =
+  | ActionProps
+  | InfoProps
+  | SuccessProps
+  | PasswordProps;
+
+export interface NewTextFieldProps extends InputProps {}
+
+/**
+ * @deprecated
+ * This TextField component will only support NewTextFieldProps in version 2.0.0.
+ * Please migrate to using NewTextFieldProps as soon as possible.
+ */
+export interface TextFieldProps extends BaseTextFieldProps {
+  rightElementStyle?: EmbeddedElementProps;
+}
+
+export const TextField = createRemoteComponent<
+  'TextField',
+  TextFieldProps | NewTextFieldProps
+>('TextField');

package/src/surfaces/point-of-sale/components/Tile/Tile.ts

@@ -0,0 +1,12 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface TileProps {
+  title: string;
+  subtitle?: string;
+  enabled?: boolean;
+  destructive?: boolean;
+  badgeValue?: number;
+  onPress?: () => void;
+}
+
+export const Tile = createRemoteComponent<'Tile', TileProps>('Tile');

package/src/surfaces/point-of-sale/components/TimeField/TimeField.ts

@@ -0,0 +1,22 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {InputProps} from '../shared/InputField';
+
+export interface TimeFieldProps
+  extends Pick<
+    InputProps,
+    | 'value'
+    | 'error'
+    | 'label'
+    | 'disabled'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'action'
+    | 'helpText'
+  > {
+  is24Hour?: boolean;
+}
+
+export const TimeField = createRemoteComponent<'TimeField', TimeFieldProps>(
+  'TimeField',
+);

package/src/surfaces/point-of-sale/components/TimePicker/TimePicker.ts

@@ -0,0 +1,13 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface TimePickerProps {
+  selected?: string;
+  onChange?(selected: string): void;
+  visibleState: [boolean, (visible: boolean) => void];
+  is24Hour?: boolean;
+  inputMode?: 'inline' | 'spinner';
+}
+
+export const TimePicker = createRemoteComponent<'TimePicker', TimePickerProps>(
+  'TimePicker',
+);

package/src/surfaces/point-of-sale/components/shared/BaseTextField.ts

@@ -0,0 +1,9 @@
+export interface BaseTextFieldProps {
+  title?: string;
+  subtitle?: string;
+  initialValue?: string;
+  placeholder?: string;
+  isValid?: boolean;
+  errorMessage?: string;
+  onChangeText?: (value: string) => void;
+}