@shopify/ui-extensions 0.0.0-internal-20230622171951

package/src/surfaces/checkout/components/ScrollView/examples/basic-scrollview.example.ts

@@ -0,0 +1,38 @@
+import {extend, ScrollView, View} from '@shopify/ui-extensions/checkout';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const scrollView = root.createComponent(ScrollView, {maxBlockSize: 400}, [
+    root.createComponent(
+      View,
+      {border: 'base', padding: 'base', minBlockSize: 50},
+      'View',
+    ),
+    root.createComponent(
+      View,
+      {border: 'base', padding: 'base', minBlockSize: 50},
+      'View',
+    ),
+    root.createComponent(
+      View,
+      {border: 'base', padding: 'base', minBlockSize: 50},
+      'View',
+    ),
+    root.createComponent(
+      View,
+      {border: 'base', padding: 'base', minBlockSize: 50},
+      'View',
+    ),
+    root.createComponent(
+      View,
+      {border: 'base', padding: 'base', minBlockSize: 50},
+      'View',
+    ),
+    root.createComponent(
+      View,
+      {border: 'base', padding: 'base', minBlockSize: 50},
+      'View',
+    ),
+  ]);
+
+  root.appendChild(scrollView);
+});

package/src/surfaces/checkout/components/Select/README.md

@@ -0,0 +1,41 @@
+# Select
+
+Selects let buyers choose one option from an options menu. Consider select
+when you have 4 or more options, to avoid cluttering the interface.
+
+## Props
+
+optional = ?
+
+| Name          | Type                                                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| ------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- |
+| id?           | <code>string</code>                                                  | A unique identifier for the field. When no `id` is set, a globally unique value will be used instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| label         | <code>string</code>                                                  | Content to use as the field label.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name?         | <code>string</code>                                                  | An identifier for the field that is unique within the nearest containing `Form` component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| value?        | <code>string</code>                                                  | The active option for the select. This should match to one of the `value` properties in the `options` prop. When not set, the value will default to an empty string, which will show the `placeholder` text as the &#34;selected value&#34;.                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| options       | <code><a href="#option">Option</a>[]</code>                          | The options a buyer can select from.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| required?     | <code>boolean</code>                                                 | Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` prop.                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| disabled?     | <code>boolean</code>                                                 | Whether the select can be changed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| readonly?     | <code>boolean</code>                                                 | Whether the field is read only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| error?        | <code>string</code>                                                  | Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| autocomplete? | <code><a href="#autocomplete">Autocomplete</a> &#124; boolean</code> | A hint as to the intended content of the field.<br /><br />When set to `true`, this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.<br /><br />When set to `false`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Note that it is impossible to prevent autocomplete in some browsers, so do not depend on its absence.<br /><br />Alternatively, you can provide an `Autocomplete` object, which describes the specific data you would like to be entered into this field during autocomplete. |
+| onChange?     | <code>(value: string) => void</code>                                 | A callback that is run whenever the selected option changes. This callback is called with the string `value` of the selected `option`. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `value` prop of the select.                                                                                                                                                                                                                                                                                                                                     | <a name="Autocomplete"></a> |
+
+### Autocomplete
+
+A descriptor for selecting the data a field would like to receive during
+autocomplete. This attribute is modeled off of a limited set of the autocomplete
+values supported in browsers.
+
+| Name   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                    |
+| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------- |
+| group? | <code>"shipping" &#124; "billing" &#124; "location"</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | The contact information “group” the autocomplete data should be sourced from.  |
+| field  | <code>"name" &#124; "honorific-prefix" &#124; "given-name" &#124; "additional-name" &#124; "family-name" &#124; "honorific-suffix" &#124; "nickname" &#124; "username" &#124; "new-password" &#124; "current-password" &#124; "one-time-code" &#124; "organization-title" &#124; "organization" &#124; "street-address" &#124; "address-line1" &#124; "address-line2" &#124; "address-line3" &#124; "address-level4" &#124; "address-level3" &#124; "address-level2" &#124; "address-level1" &#124; "country" &#124; "country-name" &#124; "postal-code" &#124; "credit-card-name" &#124; "credit-card-given-name" &#124; "credit-card-additional-name" &#124; "credit-card-family-name" &#124; "credit-card-number" &#124; "credit-card-expiry" &#124; "credit-card-expiry-month" &#124; "credit-card-expiry-year" &#124; "credit-card-security-code" &#124; "credit-card-type" &#124; "transaction-currency" &#124; "transaction-amount" &#124; "language" &#124; "birthday" &#124; "birthday-day" &#124; "birthday-month" &#124; "birthday-year" &#124; "sex" &#124; "url" &#124; "photo" &#124; "telephone" &#124; "telephone-country-code" &#124; "telephone-national" &#124; "telephone-area-code" &#124; "telephone-local" &#124; "telephone-local-prefix" &#124; "telephone-local-suffix" &#124; "telephone-extension" &#124; "email" &#124; "instant-message" &#124; "home telephone" &#124; "home telephone-country-code" &#124; "home telephone-national" &#124; "home telephone-area-code" &#124; "home telephone-local" &#124; "home telephone-local-prefix" &#124; "home telephone-local-suffix" &#124; "home telephone-extension" &#124; "home email" &#124; "home instant-message" &#124; "work telephone" &#124; "work telephone-country-code" &#124; "work telephone-national" &#124; "work telephone-area-code" &#124; "work telephone-local" &#124; "work telephone-local-prefix" &#124; "work telephone-local-suffix" &#124; "work telephone-extension" &#124; "work email" &#124; "work instant-message" &#124; "mobile telephone" &#124; "mobile telephone-country-code" &#124; "mobile telephone-national" &#124; "mobile telephone-area-code" &#124; "mobile telephone-local" &#124; "mobile telephone-local-prefix" &#124; "mobile telephone-local-suffix" &#124; "mobile telephone-extension" &#124; "mobile email" &#124; "mobile instant-message" &#124; "fax telephone" &#124; "fax telephone-country-code" &#124; "fax telephone-national" &#124; "fax telephone-area-code" &#124; "fax telephone-local" &#124; "fax telephone-local-prefix" &#124; "fax telephone-local-suffix" &#124; "fax telephone-extension" &#124; "fax email" &#124; "fax instant-message" &#124; "pager telephone" &#124; "pager telephone-country-code" &#124; "pager telephone-national" &#124; "pager telephone-area-code" &#124; "pager telephone-local" &#124; "pager telephone-local-prefix" &#124; "pager telephone-local-suffix" &#124; "pager telephone-extension" &#124; "pager email" &#124; "pager instant-message"</code> | The type of data that should be inserted into a field supporting autocomplete. | <a name="Option"></a> |
+
+### Option
+
+| Name      | Type                 | Description                                                                                     |
+| --------- | -------------------- | ----------------------------------------------------------------------------------------------- |
+| value     | <code>string</code>  | The value that will be passed to the select’s `onChange` callback when this option is selected. |
+| label     | <code>string</code>  | The buyer-facing label for this option.                                                         |
+| disabled? | <code>boolean</code> | Whether this option can be selected or not.                                                     |

package/src/surfaces/checkout/components/Select/Select.ts

@@ -0,0 +1,97 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import {Autocomplete} from '../shared';
+
+interface Option {
+  /**
+   * The value that will be passed to the select’s `onChange` callback
+   * when this option is selected.
+   */
+  value: string;
+  /**
+   * The buyer-facing label for this option.
+   */
+  label: string;
+  /**
+   * Whether this option can be selected or not.
+   */
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  /**
+   * A unique identifier for the field. When no `id` is set,
+   * a globally unique value will be used instead.
+   */
+  id?: string;
+  /**
+   * Content to use as the field label.
+   */
+  label: string;
+  /**
+   * An identifier for the field that is unique within the nearest
+   * containing `Form` component.
+   */
+  name?: string;
+  /**
+   * The active option for the select. This should match to one of the
+   * `value` properties in the `options` prop. When not set,
+   * the value will default to an empty string, which will show the
+   * `placeholder` text as the "selected value".
+   */
+  value?: string;
+  /**
+   * The options a buyer can select from.
+   */
+  options: Option[];
+  /**
+   * Whether the field needs a value. This requirement adds semantic value
+   * to the field, but it will not cause an error to appear automatically.
+   * If you want to present an error when this field is empty, you can do
+   * so with the `error` prop.
+   */
+  required?: boolean;
+  /**
+   * Whether the select can be changed.
+   */
+  disabled?: boolean;
+  /**
+   * Whether the field is read only
+   */
+  readonly?: boolean;
+  /**
+   * Indicate an error to the user. The field will be given a specific stylistic treatment
+   * to communicate problems that have to be resolved immediately.
+   */
+  error?: string;
+  /**
+   * A hint as to the intended content of the field.
+   *
+   * When set to `true`, this property indicates that the field should support
+   * autofill, but you do not have any more semantic information on the intended
+   * contents.
+   *
+   * When set to `false`, you are indicating that this field contains sensitive
+   * information, or contents that are never saved, like one-time codes. Note that
+   * it is impossible to prevent autocomplete in some browsers, so do not depend on
+   * its absence.
+   *
+   * Alternatively, you can provide an `Autocomplete` object, which describes the
+   * specific data you would like to be entered into this field during autocomplete.
+   */
+  autocomplete?: Autocomplete | boolean;
+  /**
+   * A callback that is run whenever the selected option changes. This callback
+   * is called with the string `value` of the selected `option`. This component
+   * is [controlled](https://reactjs.org/docs/forms.html#controlled-components),
+   * so you must store this value in state and reflect it back in the `value`
+   * prop of the select.
+   */
+  onChange?(value: string): void;
+}
+
+/**
+ * Selects let buyers choose one option from an options menu. Consider select
+ * when you have 4 or more options, to avoid cluttering the interface.
+ */
+export const Select = createRemoteComponent<'Select', SelectProps>('Select');

package/src/surfaces/checkout/components/Select/content/guidelines.md

@@ -0,0 +1,4 @@
+## Best practices
+
+- Use this component when customers need to choose between four or more predefined options.
+- Have a default option selected whenever possible. Use **Select** as placeholder text if there’s no logical default option.

package/src/surfaces/checkout/components/Select/examples/basic-select.example.ts

@@ -0,0 +1,36 @@
+import {extend, Select} from '@shopify/ui-extensions/checkout';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const select = root.createComponent(Select, {
+    label: 'Country',
+    value: '2',
+    options: [
+      {
+        value: '1',
+        label: 'Australia',
+      },
+      {
+        value: '2',
+        label: 'Canada',
+      },
+      {
+        value: '3',
+        label: 'France',
+      },
+      {
+        value: '4',
+        label: 'Japan',
+      },
+      {
+        value: '5',
+        label: 'Nigeria',
+      },
+      {
+        value: '6',
+        label: 'United States',
+      },
+    ],
+  });
+
+  root.appendChild(select);
+});

package/src/surfaces/checkout/components/SkeletonImage/README.md

@@ -0,0 +1,13 @@
+# SkeletonImage
+
+SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.
+
+## Props
+
+optional = ?
+
+| Name         | Type                                                                                                                                                                                | Description                                                                                                                    |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| blockSize?   | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code> | Adjust the block size of the skeleton.                                                                                         |
+| inlineSize?  | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code> | Adjust the inline size of the skeleton.                                                                                        |
+| aspectRatio? | <code>number</code>                                                                                                                                                                 | Displays the skeleton at the specified aspect ratio (fills the width of the parent container and sets the height accordingly). |

package/src/surfaces/checkout/components/SkeletonImage/SkeletonImage.ts

@@ -0,0 +1,28 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import {MaybeResponsiveConditionalStyle} from '../../style';
+
+export interface SkeletonImageProps {
+  /**
+   * Adjust the block size of the skeleton.
+   */
+  blockSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
+
+  /**
+   * Adjust the inline size of the skeleton.
+   */
+  inlineSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
+
+  /**
+   * Displays the skeleton at the specified aspect ratio (fills the width of the
+   * parent container and sets the height accordingly).
+   */
+  aspectRatio?: number;
+}
+/**
+ * SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.
+ */
+export const SkeletonImage = createRemoteComponent<
+  'SkeletonImage',
+  SkeletonImageProps
+>('SkeletonImage');

package/src/surfaces/checkout/components/SkeletonImage/examples/basic-skeletonimage.example.ts

@@ -0,0 +1,10 @@
+import {extend, SkeletonImage} from '@shopify/ui-extensions/checkout';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const skeletonImage = root.createComponent(SkeletonImage, {
+    inlineSize: 300,
+    blockSize: 300,
+  });
+
+  root.appendChild(skeletonImage);
+});

package/src/surfaces/checkout/components/SkeletonText/README.md

@@ -0,0 +1,13 @@
+# SkeletonText
+
+SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.
+
+## Props
+
+optional = ?
+
+| Name        | Type                                                                                                      | Description                                                |
+| ----------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| emphasis?   | <code>"bold"</code>                                                                                       | Use to emphasize a word or a group of words.               |
+| inlineSize? | <code>"small" &#124; "base" &#124; "large"</code>                                                         | Adjust the length of the text when no children are passed. |
+| size?       | <code>"extraSmall" &#124; "small" &#124; "base" &#124; "large" &#124; "extraLarge" &#124; "medium"</code> | Size of the text                                           |

package/src/surfaces/checkout/components/SkeletonText/SkeletonText.ts

@@ -0,0 +1,23 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {Size} from '../shared';
+import type {TextProps} from '../Text/Text';
+
+export interface SkeletonTextProps extends Pick<TextProps, 'size'> {
+  /**
+   * Use to emphasize a word or a group of words.
+   */
+  emphasis?: 'bold';
+  /**
+   * Adjust the length of the text when no children are passed.
+   */
+  inlineSize?: Extract<Size, 'small' | 'base' | 'large'>;
+}
+
+/**
+ * SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.
+ */
+export const SkeletonText = createRemoteComponent<
+  'SkeletonText',
+  SkeletonTextProps
+>('SkeletonText');

package/src/surfaces/checkout/components/SkeletonText/examples/basic-skeletontext.example.ts

@@ -0,0 +1,7 @@
+import {extend, SkeletonText} from '@shopify/ui-extensions/checkout';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const skeletonText = root.createComponent(SkeletonText);
+
+  root.appendChild(skeletonText);
+});

package/src/surfaces/checkout/components/SkeletonTextBlock/README.md

@@ -0,0 +1,13 @@
+# SkeletonTextBlock
+
+SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.
+
+## Props
+
+optional = ?
+
+| Name      | Type                                                                                                      | Description                                                                                      |
+| --------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| emphasis? | <code>"bold"</code>                                                                                       | Use to emphasize a word or a group of words.                                                     |
+| lines?    | <code>number</code>                                                                                       | Number of lines to display when no children are passed.<br /><br />Default value: <code>1</code> |
+| size?     | <code>"extraSmall" &#124; "small" &#124; "base" &#124; "large" &#124; "extraLarge" &#124; "medium"</code> | Size of the text                                                                                 |

package/src/surfaces/checkout/components/SkeletonTextBlock/SkeletonTextBlock.ts

@@ -0,0 +1,24 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {TextBlockProps} from '../TextBlock/TextBlock';
+
+export interface SkeletonTextBlockProps extends Pick<TextBlockProps, 'size'> {
+  /**
+   * Use to emphasize a word or a group of words.
+   */
+  emphasis?: 'bold';
+  /**
+   * Number of lines to display when no children are passed.
+   *
+   * @defaultValue 1
+   */
+  lines?: number;
+}
+
+/**
+ * SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.
+ */
+export const SkeletonTextBlock = createRemoteComponent<
+  'SkeletonTextBlock',
+  SkeletonTextBlockProps
+>('SkeletonTextBlock');

package/src/surfaces/checkout/components/SkeletonTextBlock/examples/basic-skeletontextblock.example.ts

@@ -0,0 +1,7 @@
+import {extend, SkeletonTextBlock} from '@shopify/ui-extensions/checkout';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const skeletonTextBlock = root.createComponent(SkeletonTextBlock);
+
+  root.appendChild(skeletonTextBlock);
+});

package/src/surfaces/checkout/components/Spinner/README.md

@@ -0,0 +1,14 @@
+# Spinner
+
+Spinner is used to notify buyers that their action is being processed.
+The Spinner is usually used when sending or receiving data from a server.
+
+## Props
+
+optional = ?
+
+| Name                | Type                                                                                | Description                                                                                                                                                                                                                                                                         |
+| ------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| size?               | <code>"extraSmall" &#124; "small" &#124; "base" &#124; "large" &#124; "fill"</code> | Adjusts the size of the icon.<br /><br />Default value: <code>'base'</code>                                                                                                                                                                                                         |
+| appearance?         | <code>"accent" &#124; "monochrome"</code>                                           | Sets the appearance (color) of the icon.<br /><br /><code>"accent"</code>: Use to convey emphasis and draw attention to the icon.<br /><br /><code>"monochrome"</code>: Will take the color of its parent<br /><br />Default value: <code>'accent'</code>                           |
+| accessibilityLabel? | <code>string</code>                                                                 | A label to use for the Spinner that will be used for buyers using assistive technologies like screen readers. If will also be used to replace the animated loading indicator when buyers prefers reduced motion. If not included, it will use the loading indicator for all buyers. |

package/src/surfaces/checkout/components/Spinner/Spinner.ts

@@ -0,0 +1,35 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {Size, Appearance} from '../shared';
+
+export interface SpinnerProps {
+  /**
+   * Adjusts the size of the icon.
+   *
+   * @defaultValue 'base'
+   */
+  size?: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>;
+
+  /**
+   * Sets the appearance (color) of the icon.
+   *
+   * @defaultValue 'accent'
+   */
+  appearance?: Extract<Appearance, 'accent' | 'monochrome'>;
+
+  /**
+   * A label to use for the Spinner that will be used for buyers using
+   * assistive technologies like screen readers. If will also be used to replace
+   * the animated loading indicator when buyers prefers reduced motion. If not included,
+   * it will use the loading indicator for all buyers.
+   */
+  accessibilityLabel?: string;
+}
+
+/**
+ * Spinner is used to notify buyers that their action is being processed.
+ * The Spinner is usually used when sending or receiving data from a server.
+ */
+export const Spinner = createRemoteComponent<'Spinner', SpinnerProps>(
+  'Spinner',
+);

package/src/surfaces/checkout/components/Spinner/examples/basic-spinner.example.ts

@@ -0,0 +1,7 @@
+import {extend, Spinner} from '@shopify/ui-extensions/checkout';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const spinner = root.createComponent(Spinner);
+
+  root.appendChild(spinner);
+});