@shopify/ui-extensions 0.0.0-internal-20230622171951

package/README.md

@@ -0,0 +1,42 @@
+# `@shopify/ui-extensions`
+
+This package contains the public type definitions and utilities needed to create a Shopify UI extension. This is a generalized package that is intended to be the long-term home of the surface-specific UI extension packages, like [`@shopify/checkout-ui-extensions`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions) and [`@shopify/admin-ui-extensions`](https://github.com/Shopify/ui-extensions/tree/main/packages/admin-ui-extensions).
+
+> **Is your extension currently using `@shopify/checkout-ui-extensions`?** You can learn what you need to do to upgrade to this API versioned package in the [migration guide](../../documentation/upgrade/checkout-ui-extension-api-versioning.md).
+
+Currently, this package only contains the extension APIs for the [`checkout`](./src/surfaces/checkout) and [`admin`](./src/surfaces/admin) surfaces, but other Shopify surfaces will be added here soon.
+
+All extensions, regardless of where they appear in Shopify, make use the same [underlying technology](../../documentation/how-extensions-work.md), and most of the same “core” components (e.g., `BlockStack`, `Button`, `TextField`, etc) and capabilities (e.g., direct API access, session tokens). Separating APIs by surface makes it easier for a developer to see what is available to them in each context, and gives us a flexible system for introducing components and APIs available in only some areas of Shopify.
+
+A checkout extension using “vanilla” JavaScript would be written as follows:
+
+```ts
+import {extension, TextField} from '@shopify/ui-extensions/checkout';
+
+export default extension(
+  'Checkout::Dynamic::Render',
+  (root, {i18n, metafields, applyMetafieldChange}) => {
+    const metafield = metafields.current.find(
+      (metafield) =>
+        metafield.namespace === 'custom' && metafield.key === 'gift_note',
+    );
+
+    const textfield = root.createComponent(TextField, {
+      label: i18n.translate('gift_note.label'),
+      value: metafield?.value ?? '',
+      onChange(value) {
+        textfield.updateProps({value});
+
+        applyMetafieldChange({
+          namespace: 'custom',
+          key: 'gift_note',
+          value,
+          valueType: 'string',
+        });
+      },
+    });
+
+    root.appendChild(textfield);
+  },
+);
+```

package/build/cjs/index.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/build/cjs/surfaces/admin/components/Badge/Badge.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Badges are used to inform merchants of the status of an object, or the status of an action that’s been taken.
+ */
+const Badge = core.createRemoteComponent('Badge');
+
+exports.Badge = Badge;

package/build/cjs/surfaces/admin/components/Banner/Banner.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Banners inform merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way.
+ *
+ * [Learn more about best practices and guidelines on using Banners](https://polaris.shopify.com/components/feedback-indicators/banner#section-best-practices).
+ */
+const Banner = core.createRemoteComponent('Banner');
+
+exports.Banner = Banner;

package/build/cjs/surfaces/admin/components/BlockStack/BlockStack.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Use to achieve no-fuss vertical centering.
+ *
+ * A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the alignment and spacing of the items in the stack.
+ * Use `StackItem` to group multiple elements inside a `BlockStack` together.
+ */
+const BlockStack = core.createRemoteComponent('BlockStack');
+
+exports.BlockStack = BlockStack;

package/build/cjs/surfaces/admin/components/Button/Button.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.
+ */
+const Button = core.createRemoteComponent('Button');
+
+exports.Button = Button;

package/build/cjs/surfaces/admin/components/Card/Card.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.
+ *
+ * The action API should be used to create actionable components for the card.
+ * Cards should be contained, independent, and individual.
+ */
+const Card = core.createRemoteComponent('Card');
+
+exports.Card = Card;

package/build/cjs/surfaces/admin/components/CardSection/CardSection.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * CardSections are used to group similar concepts within a Card. CardSections add dividers, which visually separate regions within cards.
+ */
+const CardSection = core.createRemoteComponent('CardSection');
+
+exports.CardSection = CardSection;

package/build/cjs/surfaces/admin/components/Checkbox/Checkbox.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Checkboxes are most commonly used to give merchants a way to make a range of selections (zero, one, or multiple).
+ */
+const Checkbox = core.createRemoteComponent('Checkbox');
+
+exports.Checkbox = Checkbox;

package/build/cjs/surfaces/admin/components/CustomerSegmentationTemplate/CustomerSegmentationTemplate.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Customer segmentation templates are used to give merchants a starting point to create segments.
+ */
+const CustomerSegmentationTemplate = core.createRemoteComponent('CustomerSegmentationTemplate');
+
+exports.CustomerSegmentationTemplate = CustomerSegmentationTemplate;

package/build/cjs/surfaces/admin/components/Heading/Heading.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Headings are used as the titles of each major section of an extension.
+ */
+const Heading = core.createRemoteComponent('Heading');
+
+exports.Heading = Heading;

package/build/cjs/surfaces/admin/components/Icon/Icon.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Icons are small visual indicators from a set of pre-defined glyphs.
+ */
+const Icon = core.createRemoteComponent('Icon');
+
+exports.Icon = Icon;

package/build/cjs/surfaces/admin/components/InlineStack/InlineStack.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Use to lay out a horizontal row of components.
+ *
+ * A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the alignment and spacing of the items in the stack.
+ * Use `StackItem` to group multiple elements inside a `InlineStack` together.
+ */
+const InlineStack = core.createRemoteComponent('InlineStack');
+
+exports.InlineStack = InlineStack;

package/build/cjs/surfaces/admin/components/Link/Link.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Links take users to another place, and usually appear within or directly following a sentence.
+ */
+const Link = core.createRemoteComponent('Link');
+
+exports.Link = Link;

package/build/cjs/surfaces/admin/components/Modal/Modal.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Modals are overlays that prevent merchants from interacting with the rest of the application until a specific action is taken.
+ *
+ * Modals are disruptive by design, requiring merchants to take an action before they can continue, so use them thoughtfully and sparingly.
+ */
+const Modal = core.createRemoteComponent('Modal');
+
+exports.Modal = Modal;

package/build/cjs/surfaces/admin/components/OptionList/OptionList.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * **Note:** This component is not available in Product Subscription extensions.
+ *
+ * Option lists let you create grouped items. This can include single selection or multiple selection of options.
+ * Option lists are styled differently than choice lists and should not be used within a form, but as a standalone menu.
+ */
+const OptionList = core.createRemoteComponent('OptionList');
+
+exports.OptionList = OptionList;

package/build/cjs/surfaces/admin/components/Pressable/Pressable.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Pressable wraps components to add interactivity with rendering a UI element.
+ * Wrap small UI elements in Pressable to perform actions that don’t fit Button or Link.
+ */
+const Pressable = core.createRemoteComponent('Pressable');
+
+exports.Pressable = Pressable;

package/build/cjs/surfaces/admin/components/Radio/Radio.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Radio allows merchants to choose a single item from a list.
+ */
+const Radio = core.createRemoteComponent('Radio');
+
+exports.Radio = Radio;

package/build/cjs/surfaces/admin/components/ResourceItem/ResourceItem.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Resource items represent specific objects within a collection, such as products or orders. They provide contextual information on the resource type and link to the object’s detail page.
+ *
+ * A `ResourceItem` should be rendered within a `ResourceList`.
+ */
+const ResourceItem = core.createRemoteComponent('ResourceItem');
+
+exports.ResourceItem = ResourceItem;

package/build/cjs/surfaces/admin/components/ResourceList/ResourceList.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * `ResourceList` displays a filterable collection of objects of the same type, like products or customers.
+ *
+ * `ResourceList` should help merchants find an object and navigate to a full-page representation of it.
+ * A resource list should contain `ResourceItem` components.
+ */
+const ResourceList = core.createRemoteComponent('ResourceList');
+
+exports.ResourceList = ResourceList;

package/build/cjs/surfaces/admin/components/Select/Select.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Select allows merchants to choose one option from a dropdown menu.
+ *
+ * Consider Select when you have 4 or more options, to avoid creating clutter and make your component more scalable.
+ */
+const Select = core.createRemoteComponent('Select');
+
+exports.Select = Select;

package/build/cjs/surfaces/admin/components/Spinner/Spinner.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Spinners are used to show merchants that your app is loading, or an action is being performed. Generally when a spinner is being used, the user shouldn't be able to interact.
+ */
+const Spinner = core.createRemoteComponent('Spinner');
+
+exports.Spinner = Spinner;

package/build/cjs/surfaces/admin/components/StackItem/StackItem.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * By default, each individual element in a Stack is treated as one stack item.
+ *
+ * Wrap multiple elements in a `StackItem` component, and the `Stack` component will treat them as one item.
+ */
+const StackItem = core.createRemoteComponent('StackItem');
+
+exports.StackItem = StackItem;

package/build/cjs/surfaces/admin/components/Text/Text.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * The Text component is used to render text in different sizes, colors, and alignments.
+ */
+const Text = core.createRemoteComponent('Text');
+
+exports.Text = Text;

package/build/cjs/surfaces/admin/components/TextBlock/TextBlock.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * TextBlock is used to render a block of text that occupies the full width available.
+ * Usually used to render paragraphs of text.
+ */
+const TextBlock = core.createRemoteComponent('TextBlock');
+
+exports.TextBlock = TextBlock;

package/build/cjs/surfaces/admin/components/TextField/TextField.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * TextField is a versatile input field that merchants can type into.
+ *
+ * It supports several input formats including numbers.
+ */
+const TextField = core.createRemoteComponent('TextField');
+
+exports.TextField = TextField;

package/build/cjs/surfaces/admin/components/Thumbnail/Thumbnail.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Thumbnails are used as a visual anchor and identifier for an object. They should be used along with text to provide context.
+ */
+const Thumbnail = core.createRemoteComponent('Thumbnail');
+
+exports.Thumbnail = Thumbnail;

package/build/cjs/surfaces/admin/extension.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var registration = require('../../utilities/registration.js');
+
+const extension = registration.createExtensionRegistrationFunction();
+const extend = extension;
+
+exports.extend = extend;
+exports.extension = extension;

package/build/cjs/surfaces/admin.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var extension = require('./admin/extension.js');
+var Badge = require('./admin/components/Badge/Badge.js');
+var Banner = require('./admin/components/Banner/Banner.js');
+var BlockStack = require('./admin/components/BlockStack/BlockStack.js');
+var Button = require('./admin/components/Button/Button.js');
+var Card = require('./admin/components/Card/Card.js');
+var CardSection = require('./admin/components/CardSection/CardSection.js');
+var Checkbox = require('./admin/components/Checkbox/Checkbox.js');
+var CustomerSegmentationTemplate = require('./admin/components/CustomerSegmentationTemplate/CustomerSegmentationTemplate.js');
+var Heading = require('./admin/components/Heading/Heading.js');
+var Icon = require('./admin/components/Icon/Icon.js');
+var InlineStack = require('./admin/components/InlineStack/InlineStack.js');
+var Modal = require('./admin/components/Modal/Modal.js');
+var Link = require('./admin/components/Link/Link.js');
+var OptionList = require('./admin/components/OptionList/OptionList.js');
+var Pressable = require('./admin/components/Pressable/Pressable.js');
+var Radio = require('./admin/components/Radio/Radio.js');
+var ResourceItem = require('./admin/components/ResourceItem/ResourceItem.js');
+var ResourceList = require('./admin/components/ResourceList/ResourceList.js');
+var Select = require('./admin/components/Select/Select.js');
+var Spinner = require('./admin/components/Spinner/Spinner.js');
+var StackItem = require('./admin/components/StackItem/StackItem.js');
+var Text = require('./admin/components/Text/Text.js');
+var TextBlock = require('./admin/components/TextBlock/TextBlock.js');
+var TextField = require('./admin/components/TextField/TextField.js');
+var Thumbnail = require('./admin/components/Thumbnail/Thumbnail.js');
+
+
+
+exports.extend = extension.extend;
+exports.extension = extension.extension;
+exports.Badge = Badge.Badge;
+exports.Banner = Banner.Banner;
+exports.BlockStack = BlockStack.BlockStack;
+exports.Button = Button.Button;
+exports.Card = Card.Card;
+exports.CardSection = CardSection.CardSection;
+exports.Checkbox = Checkbox.Checkbox;
+exports.CustomerSegmentationTemplate = CustomerSegmentationTemplate.CustomerSegmentationTemplate;
+exports.Heading = Heading.Heading;
+exports.Icon = Icon.Icon;
+exports.InlineStack = InlineStack.InlineStack;
+exports.Modal = Modal.Modal;
+exports.Link = Link.Link;
+exports.OptionList = OptionList.OptionList;
+exports.Pressable = Pressable.Pressable;
+exports.Radio = Radio.Radio;
+exports.ResourceItem = ResourceItem.ResourceItem;
+exports.ResourceList = ResourceList.ResourceList;
+exports.Select = Select.Select;
+exports.Spinner = Spinner.Spinner;
+exports.StackItem = StackItem.StackItem;
+exports.Text = Text.Text;
+exports.TextBlock = TextBlock.TextBlock;
+exports.TextField = TextField.TextField;
+exports.Thumbnail = Thumbnail.Thumbnail;

package/build/cjs/surfaces/checkout/components/Banner/Banner.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Use banners to communicate important messages to customers in a prominent way.
+ */
+const Banner = core.createRemoteComponent('Banner');
+
+exports.Banner = Banner;

package/build/cjs/surfaces/checkout/components/BlockLayout/BlockLayout.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * BlockLayout is used to lay out content over multiple rows.
+ *
+ * By default, all rows fill the available block space, sharing it equally.
+ */
+const BlockLayout = core.createRemoteComponent('BlockLayout');
+
+exports.BlockLayout = BlockLayout;

package/build/cjs/surfaces/checkout/components/BlockSpacer/BlockSpacer.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * BlockSpacer is used to create empty block space, typically when variable spacing
+ * is needed between multiple elements.
+ *
+ * Note that you should favor BlockStack when spacing between all elements is the same.
+ */
+const BlockSpacer = core.createRemoteComponent('BlockSpacer');
+
+exports.BlockSpacer = BlockSpacer;

package/build/cjs/surfaces/checkout/components/BlockStack/BlockStack.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * BlockStack is used to vertically stack elements.
+ */
+const BlockStack = core.createRemoteComponent('BlockStack');
+
+exports.BlockStack = BlockStack;

package/build/cjs/surfaces/checkout/components/Button/Button.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.
+ */
+const Button = core.createRemoteComponent('Button');
+
+exports.Button = Button;

package/build/cjs/surfaces/checkout/components/Checkbox/Checkbox.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.
+ */
+const Checkbox = core.createRemoteComponent('Checkbox');
+
+exports.Checkbox = Checkbox;

package/build/cjs/surfaces/checkout/components/Choice/Choice.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Options inside a `ChoiceList`.
+ * The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes.
+ */
+const Choice = core.createRemoteComponent('Choice');
+
+exports.Choice = Choice;

package/build/cjs/surfaces/checkout/components/ChoiceList/ChoiceList.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * Use choice lists to present a list of choices where buyers can make
+ * a single selection or multiple selections.
+ */
+const ChoiceList = core.createRemoteComponent('ChoiceList');
+
+exports.ChoiceList = ChoiceList;

package/build/cjs/surfaces/checkout/components/Divider/Divider.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * A divider separates content and represents a thematic break between elements.
+ */
+const Divider = core.createRemoteComponent('Divider');
+
+exports.Divider = Divider;

package/build/cjs/surfaces/checkout/components/Form/Form.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@remote-ui/core');
+
+/**
+ * The form component should be used to wrap one or more form controls. This
+ * component provides an "implicit submit" behavior, where customers can submit
+ * the form from any input by pressing "Enter" on their keyboards. This
+ * behavior is widely expected, and should be respected as often as possible.
+ *
+ * Unlike an HTML `form` element, this component does not support configuring
+ * the descendant fields to be submitted via HTTP automatically. Instead, you
+ * must provide an `onSubmit` callback that will perform the necessary HTTP
+ * requests in JavaScript.
+ */
+const Form = core.createRemoteComponent('Form');
+
+exports.Form = Form;