@shopify/ui-extensions 0.0.0-internal-20230622171951

package/src/surfaces/admin/components/TextField/examples/TextField.example.ts

@@ -0,0 +1,23 @@
+import {extension, TextField} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  const textfield = root.createComponent(TextField, {
+    label: 'Super text field',
+    type: 'text',
+    value: 'I can fly!',
+    placeholder: 'Type a thing',
+    multiline: 3,
+    prefix: 'I typed:',
+    suffix: 'into this text field',
+    error: 'I hate to break this to you, but you cannot fly',
+    onChange: (value) => console.log(value, ' was typed'),
+    onInput: (value) => console.log(value, ' was typed'),
+    onFocus: () => console.log('Welcome to the super field!'),
+    onBlur: () => console.log('Left to do something else'),
+    clearButton: true,
+    onClearButtonPress: () => console.log('Clear that silly statement'),
+  });
+
+  root.appendChild(textfield);
+  root.mount();
+});

package/src/surfaces/admin/components/Thumbnail/Thumbnail.ts

@@ -0,0 +1,31 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type Size = 'small' | 'medium' | 'large';
+
+export type ScaleType =
+  // may stretch image to fit the content view
+  | 'fill'
+
+  // preserves aspect ratio, padding remaining space
+  | 'fit'
+
+  // preserves aspect ratio, fills content view, crops area outside content view
+  | 'crop';
+
+export interface ThumbnailProps {
+  size?: Size;
+  scaleType?: ScaleType;
+
+  /** URL for the thumbnail image. */
+  source: string;
+
+  /** Alt text for the thumbnail. */
+  alt: string;
+}
+
+/**
+ * Thumbnails are used as a visual anchor and identifier for an object. They should be used along with text to provide context.
+ */
+export const Thumbnail = createRemoteComponent<'Thumbnail', ThumbnailProps>(
+  'Thumbnail',
+);

package/src/surfaces/admin/components/Thumbnail/examples/Thumbnail.example.ts

@@ -0,0 +1,13 @@
+import {extension, Thumbnail} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  const thumbnail = root.createComponent(Thumbnail, {
+    size: 'small',
+    scaleType: 'fit',
+    source: 'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png',
+    alt: 'Shopify',
+  });
+
+  root.appendChild(thumbnail);
+  root.mount();
+});

package/src/surfaces/admin/components/shared.ts

@@ -0,0 +1,30 @@
+export type Spacing =
+  | 'none'
+  | 'extraTight'
+  | 'tight'
+  | 'base'
+  | 'loose'
+  | 'extraLoose';
+
+export interface Action {
+  /**
+   * Action label text.
+   */
+  content: string;
+  /**
+   * Callback for the action.
+   */
+  onAction?(): void;
+}
+
+export interface DisableableAction extends Action {
+  disabled?: boolean;
+}
+export interface DestructableAction extends Action {
+  /**
+   * Indicates a dangerous or potentially negative action.
+   */
+  destructive?: boolean;
+}
+
+export type ValueOf<T> = T[keyof T];

package/src/surfaces/admin/components.ts

@@ -0,0 +1,51 @@
+export {Badge} from './components/Badge/Badge';
+export type {BadgeProps} from './components/Badge/Badge';
+export {Banner} from './components/Banner/Banner';
+export type {BannerProps} from './components/Banner/Banner';
+export {BlockStack} from './components/BlockStack/BlockStack';
+export type {BlockStackProps} from './components/BlockStack/BlockStack';
+export {Button} from './components/Button/Button';
+export type {ButtonProps} from './components/Button/Button';
+export {Card} from './components/Card/Card';
+export type {CardProps} from './components/Card/Card';
+export {CardSection} from './components/CardSection/CardSection';
+export type {CardSectionProps} from './components/CardSection/CardSection';
+export {Checkbox} from './components/Checkbox/Checkbox';
+export type {CheckboxProps} from './components/Checkbox/Checkbox';
+export {CustomerSegmentationTemplate} from './components/CustomerSegmentationTemplate/CustomerSegmentationTemplate';
+export type {CustomerSegmentationTemplateProps} from './components/CustomerSegmentationTemplate/CustomerSegmentationTemplate';
+export {Heading} from './components/Heading/Heading';
+export type {HeadingProps} from './components/Heading/Heading';
+export {Icon} from './components/Icon/Icon';
+export type {IconProps} from './components/Icon/Icon';
+export {InlineStack} from './components/InlineStack/InlineStack';
+export type {InlineStackProps} from './components/InlineStack/InlineStack';
+export {Modal} from './components/Modal/Modal';
+export type {ModalProps} from './components/Modal/Modal';
+export {Link} from './components/Link/Link';
+export type {LinkProps} from './components/Link/Link';
+export {OptionList} from './components/OptionList/OptionList';
+export type {OptionListProps} from './components/OptionList/OptionList';
+export {Pressable} from './components/Pressable/Pressable';
+export type {PressableProps} from './components/Pressable/Pressable';
+export {Radio} from './components/Radio/Radio';
+export type {RadioProps} from './components/Radio/Radio';
+export {ResourceItem} from './components/ResourceItem/ResourceItem';
+export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
+export {ResourceList} from './components/ResourceList/ResourceList';
+export type {ResourceListProps} from './components/ResourceList/ResourceList';
+export {Select} from './components/Select/Select';
+export type {SelectProps} from './components/Select/Select';
+export {Spinner} from './components/Spinner/Spinner';
+export type {SpinnerProps} from './components/Spinner/Spinner';
+export {StackItem} from './components/StackItem/StackItem';
+export type {StackItemProps} from './components/StackItem/StackItem';
+export {Text} from './components/Text/Text';
+export type {TextProps} from './components/Text/Text';
+export {TextBlock} from './components/TextBlock/TextBlock';
+export type {TextBlockProps} from './components/TextBlock/TextBlock';
+export {TextField} from './components/TextField/TextField';
+export type {TextFieldProps} from './components/TextField/TextField';
+export {Thumbnail} from './components/Thumbnail/Thumbnail';
+export type {ThumbnailProps} from './components/Thumbnail/Thumbnail';
+export type {DestructableAction, DisableableAction} from './components/shared';

package/src/surfaces/admin/extension-points.ts

@@ -0,0 +1,85 @@
+import type {RenderExtension} from '../../extension';
+
+import type {AnyComponent, Components} from './shared';
+import type {StandardApi, CustomerSegmentationTemplateApi} from './api';
+import {AnyComponentBuilder} from '../../shared';
+
+type CustomerSegmentationTemplateComponent = AnyComponentBuilder<
+  Pick<Components, 'CustomerSegmentationTemplate'>
+>;
+
+export interface ExtensionPoints {
+  Playground: RenderExtension<StandardApi<'Playground'>, AnyComponent>;
+  'admin.customers.segmentation-templates.render': RenderExtension<
+    CustomerSegmentationTemplateApi<'admin.customers.segmentation-templates.render'>,
+    CustomerSegmentationTemplateComponent
+  >;
+}
+
+export type ExtensionPoint = keyof ExtensionPoints;
+
+export type ExtensionForExtensionPoint<T extends ExtensionPoint> =
+  ExtensionPoints[T];
+
+/**
+ * For a given extension point, returns the value that is expected to be
+ * returned by that extension point’s callback type.
+ */
+export type ReturnTypeForExtension<ID extends keyof ExtensionPoints> =
+  ReturnType<ExtensionPoints[ID]>;
+
+/**
+ * For a given extension point, returns the tuple of arguments that would
+ * be provided to that extension point’s callback type.
+ */
+export type ArgumentsForExtension<ID extends keyof ExtensionPoints> =
+  Parameters<ExtensionPoints[ID]>;
+
+/**
+ * A union type containing all of the extension points that follow the pattern of
+ * accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-ui/tree/main/packages/core)
+ * and an additional `api` argument, and using those arguments to render
+ * UI.
+ */
+export type RenderExtensionPoint = {
+  [ID in keyof ExtensionPoints]: ExtensionPoints[ID] extends RenderExtension<
+    any,
+    any
+  >
+    ? ID
+    : never;
+}[keyof ExtensionPoints];
+
+/**
+ * A mapping of each “render extension” name to its callback type.
+ */
+export type RenderExtensions = {
+  [ID in RenderExtensionPoint]: ExtensionPoints[ID];
+};
+
+type ExtractedApiFromRenderExtension<T> = T extends RenderExtension<
+  infer Api,
+  any
+>
+  ? Api
+  : never;
+
+type ExtractedAllowedComponentsFromRenderExtension<T> =
+  T extends RenderExtension<any, infer Components> ? Components : never;
+
+/**
+ * For a given rendering extension point, returns the type of the API that the
+ * extension will receive at runtime. This API type is the second argument to
+ * the callback for that extension point. The first callback for all of the rendering
+ * extension points each receive a `RemoteRoot` object.
+ */
+export type ApiForRenderExtension<ID extends keyof RenderExtensions> =
+  ExtractedApiFromRenderExtension<RenderExtensions[ID]>;
+
+/**
+ * For a given rendering extension point, returns the UI components that the
+ * extension point supports.
+ */
+export type AllowedComponentsForRenderExtension<
+  ID extends keyof RenderExtensions,
+> = ExtractedAllowedComponentsFromRenderExtension<RenderExtensions[ID]>;

package/src/surfaces/admin/extension.ts

@@ -0,0 +1,8 @@
+import {createExtensionRegistrationFunction} from '../../utilities/registration';
+
+import type {ExtensionPoints} from './extension-points';
+
+export * from '../../extension';
+
+export const extension = createExtensionRegistrationFunction<ExtensionPoints>();
+export const extend = extension;

package/src/surfaces/admin/globals.ts

@@ -0,0 +1,8 @@
+import type {ExtensionPoints} from './extension-points';
+
+export interface ShopifyGlobal {
+  extend<ExtensionPoint extends keyof ExtensionPoints>(
+    extensionPoint: ExtensionPoint,
+    extend: ExtensionPoints[ExtensionPoint],
+  ): void;
+}

package/src/surfaces/admin/shared.ts

@@ -0,0 +1,6 @@
+import type {ComponentsBuilder, AnyComponentBuilder} from '../../shared';
+
+type ComponentTypes = typeof import('./components');
+
+export type Components = ComponentsBuilder<ComponentTypes>;
+export type AnyComponent = AnyComponentBuilder<ComponentTypes>;

package/src/surfaces/admin.ts

@@ -0,0 +1,6 @@
+export * from './admin/api';
+export * from './admin/components';
+export * from './admin/extension-points';
+export * from './admin/extension';
+export * from './admin/shared';
+export * from './admin/globals';

package/src/surfaces/checkout/api/cart-line-details/README.md

@@ -0,0 +1 @@
+# Checkout cart line details API

package/src/surfaces/checkout/api/cart-line-details/render-after.ts

@@ -0,0 +1,11 @@
+import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+
+import type {PresentmentCartLine, StandardApi} from '../standard/standard';
+
+export interface CartLineDetailsRenderAfterApi
+  extends StandardApi<'Checkout::CartLineDetails::RenderAfter'> {
+  /**
+   * The cart line the extension is attached to.
+   */
+  target: StatefulRemoteSubscribable<PresentmentCartLine>;
+}