diff --git a/.changeset/pretty-terms-switch.md b/.changeset/pretty-terms-switch.md new file mode 100644 index 0000000000..a79f1505cf --- /dev/null +++ b/.changeset/pretty-terms-switch.md @@ -0,0 +1,6 @@ +--- +'@shopify/ui-extensions-react': minor +'@shopify/ui-extensions': minor +--- + +Support remote-dom for Admin surface diff --git a/.changeset/unlucky-cycles-invite.md b/.changeset/unlucky-cycles-invite.md new file mode 100644 index 0000000000..9e54cc9dd1 --- /dev/null +++ b/.changeset/unlucky-cycles-invite.md @@ -0,0 +1,6 @@ +--- +'@shopify/ui-extensions': patch +--- + +Fix return type for RenderExtension to optionally return a clean up function +Remove unused RunnableExtension interface for Admin diff --git a/.gitignore b/.gitignore index d25751c339..593976877c 100644 --- a/.gitignore +++ b/.gitignore @@ -12,7 +12,7 @@ packages/*/bin !packages/*/.eslintrc.js *.log packages/ui-extensions/docs/**/generated - +dist # IntelliJ IDE ignore .idea diff --git a/config/typescript/tsconfig.base.json b/config/typescript/tsconfig.base.json index 4a8d721c69..854b4a34bf 100644 --- a/config/typescript/tsconfig.base.json +++ b/config/typescript/tsconfig.base.json @@ -4,7 +4,7 @@ "strict": true, "composite": true, "isolatedModules": true, - "emitDeclarationOnly": true, + "emitDeclarationOnly": false, "lib": [ "es2015", "es2016", @@ -12,7 +12,7 @@ "es2018", "esnext", "esnext.asynciterable", - "WebWorker" + "DOM" ] } } diff --git a/package.json b/package.json index 89a4d1322d..ac7c5ab980 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "./packages/*" ], "scripts": { - "build": "loom build", - "build-consumer": "loom build && ./scripts/build-consumer.sh", - "build-consumer-spin": "loom build && ./scripts/build-consumer-spin.sh", + "build": "yarn workspace @shopify/ui-extensions build; yarn workspace @shopify/ui-extensions-react build", + "build-consumer": "yarn build && ./scripts/build-consumer.sh", + "build-consumer-spin": "yarn build && ./scripts/build-consumer-spin.sh", "generate-definition": "node ./scripts/generator.js", "clean": "git clean -xdf ./packages; rm -rf ./build", "predeploy": "yarn build", @@ -47,11 +47,14 @@ "@shopify/loom-plugin-eslint": "^2.0.0", "@shopify/loom-plugin-prettier": "^2.0.0", "@shopify/typescript-configs": "^5.1.0", + "@rollup/plugin-replace": "^6.0.1", "eslint": "^8.28.0", "nodemon": "^2.0.4", "prettier": "^2.8.0", "react": ">=18.0.0", - "typescript": "^4.9.0" + "typescript": "^4.9.0", + "vite-plugin-dts": "^4.3.0", + "vite": "^5.4.11" }, "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/packages/data-extensions/package.json b/packages/data-extensions/package.json index a8fc64878e..9f868c337b 100644 --- a/packages/data-extensions/package.json +++ b/packages/data-extensions/package.json @@ -29,7 +29,7 @@ "license": "MIT", "sideEffects": false, "devDependencies": { - "typescript": "^4.9.0" + "typescript": "^5.6.3" }, "publishConfig": { "access": "public", diff --git a/packages/ui-extensions-react/package.json b/packages/ui-extensions-react/package.json index d7523dc844..39acb951d9 100644 --- a/packages/ui-extensions-react/package.json +++ b/packages/ui-extensions-react/package.json @@ -1,6 +1,9 @@ { "name": "@shopify/ui-extensions-react", "version": "0.0.0-unstable", + "scripts": { + "build": "vite build" + }, "description": "React bindings for @shopify/ui-extensions", "publishConfig": { "access": "public", @@ -11,63 +14,51 @@ "main": "index.js", "module": "index.mjs", "esnext": "index.esnext", - "types": "./build/ts/index.d.ts", + "types": "./dist/index.d.ts", "typesVersions": { "*": { "admin": [ - "./build/ts/surfaces/admin.d.ts" + "./dist/surfaces/admin.d.ts" ], "checkout": [ - "./build/ts/surfaces/checkout.d.ts" + "./dist/surfaces/checkout.d.ts" ], "customer-account": [ - "./build/ts/surfaces/customer-account.d.ts" + "./dist/surfaces/customer-account.d.ts" ], "point-of-sale": [ - "./build/ts/surfaces/point-of-sale.d.ts" + "./dist/surfaces/point-of-sale.d.ts" ] } }, "exports": { - ".": { - "types": "./build/ts/index.d.ts", - "esnext": "./index.esnext", - "import": "./index.mjs", - "require": "./index.js" - }, "./admin": { - "types": "./build/ts/surfaces/admin.d.ts", - "esnext": "./build/esnext/surfaces/admin.esnext", - "import": "./build/esm/surfaces/admin.mjs", - "require": "./build/cjs/surfaces/admin.js" + "types": "./dist/surfaces/admin.d.ts", + "default": "./dist/admin.mjs" }, "./checkout": { - "types": "./build/ts/surfaces/checkout.d.ts", - "esnext": "./build/esnext/surfaces/checkout.esnext", - "import": "./build/esm/surfaces/checkout.mjs", - "require": "./build/cjs/surfaces/checkout.js" + "types": "./dist/surfaces/checkout.d.ts", + "default": "./dist/checkout.mjs" }, "./customer-account": { - "types": "./build/ts/surfaces/customer-account.d.ts", - "esnext": "./build/esnext/surfaces/customer-account.esnext", - "import": "./build/esm/surfaces/customer-account.mjs", - "require": "./build/cjs/surfaces/customer-account.js" + "types": "./dist/surfaces/customer-account.d.ts", + "default": "./dist/customer-account.mjs" }, "./point-of-sale": { - "types": "./build/ts/surfaces/point-of-sale.d.ts", - "esnext": "./build/esnext/surfaces/point-of-sale.esnext", - "import": "./build/esm/surfaces/point-of-sale.mjs", - "require": "./build/cjs/surfaces/point-of-sale.js" + "types": "./dist/surfaces/point-of-sale.d.ts", + "default": "./dist/point-of-sale.mjs" } }, "dependencies": { "@remote-ui/async-subscription": "^2.1.12", "@remote-ui/react": "^5.0.2", - "@types/react": ">=18.2.67" + "@types/react": ">=18.2.67", + "@types/react-dom": ">=18.2.67" }, "peerDependencies": { "@shopify/ui-extensions": "0.0.0-unstable", - "react": ">=18.0.0" + "react": ">=18.0.0", + "react-dom": ">=18.0.0" }, "peerDependenciesMeta": { "@shopify/ui-extensions": { @@ -75,6 +66,9 @@ }, "react": { "optional": false + }, + "react-dom": { + "optional": false } }, "devDependencies": { diff --git a/packages/ui-extensions-react/src/surfaces/admin.ts b/packages/ui-extensions-react/src/surfaces/admin.ts index 669f012748..b0df557577 100644 --- a/packages/ui-extensions-react/src/surfaces/admin.ts +++ b/packages/ui-extensions-react/src/surfaces/admin.ts @@ -1,5 +1,5 @@ export {extend, extension} from '@shopify/ui-extensions/admin'; -export * from './admin/components'; export * from './admin/hooks'; +// export type * from './admin/components'; export {render, reactExtension} from './admin/render'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.d.ts b/packages/ui-extensions-react/src/surfaces/admin/components.d.ts new file mode 100644 index 0000000000..1984b41e1b --- /dev/null +++ b/packages/ui-extensions-react/src/surfaces/admin/components.d.ts @@ -0,0 +1,737 @@ +import { TextProps as TextProps$2, BoxProps as BoxProps$2, StackProps as StackProps$2, SpinnerProps as SpinnerProps$2, TextFieldProps, SelectProps as SelectProps$1, SectionProps as SectionProps$2, ParagraphProps as ParagraphProps$2, OptionGroupProps as OptionGroupProps$1, OptionProps as OptionProps$1, LinkProps as LinkProps$2, ImageProps as ImageProps$2, IconProps as IconProps$2, HeadingProps as HeadingProps$2, DividerProps as DividerProps$2, CheckboxProps as CheckboxProps$2, ButtonProps as ButtonProps$2, BadgeProps as BadgeProps$2 } from '@shopify/ui-api-design'; +import { ComponentChild } from 'preact'; +import { MaybeAllValuesShorthandProperty } from '@shopify/ui-api-design/dist/shared/utils'; +import { IconType } from '@shopify/admin-ui-icons'; +import { InteractionProps } from '@shopify/ui-api-design/dist/shared/pressable'; +import * as React from 'react'; + +interface TextProps$1 extends Required> { + color: Extract; + type: Extract; + tone: Extract; + fontVariantNumeric: Extract; +} + +type Style = string | CSSStyleSheet; +type Styles = Style[] | Style; +type RenderImpl = Omit & { + ShadowRoot: (element: any) => ComponentChild; + styles?: Styles; +}; +interface ActivationEventEsque { + shiftKey: boolean; + metaKey: boolean; + ctrlKey: boolean; + button: number; +} +interface ClickOptions { + /** + * The event you want to influence the synthetic click. + */ + sourceEvent?: ActivationEventEsque; +} +/** + * Base class for creating custom elements with Preact. + * While this class could be used in both Node and the browser, the constructor will only be used in the browser. + * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser. + */ +declare const BaseClass: typeof globalThis.HTMLElement; +declare abstract class PreactCustomElement extends BaseClass { + #private; + static get observedAttributes(): string[]; + constructor({ styles, ShadowRoot: renderFunction, delegatesFocus, ...options }: RenderImpl); + attributeChangedCallback(name: string): void; + connectedCallback(): void; + disconnectedCallback(): void; + /** + * Queue a run of the render function. + * You shouldn't need to call this manually - it should be handled by changes to @property values. + */ + queueRender(): void; + /** + * Internal function to add styles for legacy browsers. + * + * @private + */ + _addLegacyStyleComponent(style: string): void; + /** + * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. + * + * For example, if the `sourceEvent` was a middle click, or has particular keys held down, + * components will attempt to produce the desired behavior on links, such as opening the page in the background tab. + * + * @param options + */ + click({ sourceEvent }?: ClickOptions): void; +} + +declare class Text$1 extends PreactCustomElement implements TextProps$1 { + accessor display: TextProps$1['display']; + accessor fontVariantNumeric: TextProps$1['fontVariantNumeric']; + accessor color: TextProps$1['color']; + accessor tone: TextProps$1['tone']; + accessor type: TextProps$1['type']; + accessor accessibilityVisibility: TextProps$1['accessibilityVisibility']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$g]: Text$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$g]: HTMLAttributes & ReactProps$g; + } + } +} + +declare const tagName$g = "shopify-text"; +interface ReactProps$g extends Partial, Pick { +} + +type MakeResponsive = T | `@media${string}`; + +type AlignedBox = Required; +interface BoxProps$1 { + accessibilityRole: AlignedBox['accessibilityRole']; + background: Extract; + blockSize: AlignedBox['blockSize']; + minBlockSize: AlignedBox['minBlockSize']; + maxBlockSize: AlignedBox['maxBlockSize']; + inlineSize: AlignedBox['inlineSize']; + minInlineSize: AlignedBox['minInlineSize']; + maxInlineSize: AlignedBox['maxInlineSize']; + padding: MakeResponsive; + paddingBlock: MakeResponsive; + paddingBlockStart: MakeResponsive; + paddingBlockEnd: MakeResponsive; + paddingInline: MakeResponsive; + paddingInlineStart: MakeResponsive; + paddingInlineEnd: MakeResponsive; + borderWidth: MaybeAllValuesShorthandProperty>; + borderStyle: MaybeAllValuesShorthandProperty>; + borderRadius: MaybeAllValuesShorthandProperty>; + borderColor: Extract; + accessibilityLabel: AlignedBox['accessibilityLabel']; + accessibilityVisibility: AlignedBox['accessibilityVisibility']; + display: AlignedBox['display']; +} + +type AlignedStackProps = Required; +interface StackProps$1 extends BoxProps$1 { + justifyContent: AlignedStackProps['justifyContent']; + alignItems: AlignedStackProps['alignItems']; + alignContent: AlignedStackProps['alignContent']; + gap: MakeResponsive; + rowGap: MakeResponsive; + columnGap: MakeResponsive; + direction: MakeResponsive; +} + +declare class BoxElement extends PreactCustomElement implements BoxProps$1 { + constructor(renderImpl: RenderImpl); + accessor accessibilityRole: BoxProps$1['accessibilityRole']; + accessor background: BoxProps$1['background']; + accessor blockSize: BoxProps$1['blockSize']; + accessor minBlockSize: BoxProps$1['minBlockSize']; + accessor maxBlockSize: BoxProps$1['maxBlockSize']; + accessor inlineSize: BoxProps$1['inlineSize']; + accessor minInlineSize: BoxProps$1['minInlineSize']; + accessor maxInlineSize: BoxProps$1['maxInlineSize']; + accessor padding: BoxProps$1['padding']; + accessor paddingBlock: BoxProps$1['paddingBlock']; + accessor paddingBlockStart: BoxProps$1['paddingBlockStart']; + accessor paddingBlockEnd: BoxProps$1['paddingBlockEnd']; + accessor paddingInline: BoxProps$1['paddingInline']; + accessor paddingInlineStart: BoxProps$1['paddingInlineStart']; + accessor paddingInlineEnd: BoxProps$1['paddingInlineEnd']; + accessor borderWidth: BoxProps$1['borderWidth']; + accessor borderStyle: BoxProps$1['borderStyle']; + accessor borderRadius: BoxProps$1['borderRadius']; + accessor borderColor: BoxProps$1['borderColor']; + accessor accessibilityLabel: BoxProps$1['accessibilityLabel']; + accessor accessibilityVisibility: BoxProps$1['accessibilityVisibility']; + accessor display: BoxProps$1['display']; +} + +declare class Stack$1 extends BoxElement implements StackProps$1 { + constructor(); + accessor direction: StackProps$1['direction']; + accessor justifyContent: StackProps$1['justifyContent']; + accessor alignItems: StackProps$1['alignItems']; + accessor alignContent: StackProps$1['alignContent']; + accessor gap: StackProps$1['gap']; + accessor rowGap: StackProps$1['rowGap']; + accessor columnGap: StackProps$1['columnGap']; +} +declare global { + interface HTMLElementTagNameMap { + [tagName$f]: Stack$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$f]: HTMLAttributes & ReactProps$f; + } + } +} + +declare const tagName$f = "shopify-stack"; +interface ReactProps$f extends Partial, Pick { +} + +interface SpinnerProps$1 extends Required> { + /** + * The size of the component. + * + * @default 'base' + */ + size: Extract; +} + +declare class Spinner$1 extends PreactCustomElement implements SpinnerProps$1 { + accessor accessibilityLabel: string; + accessor size: SpinnerProps$1['size']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$e]: Spinner$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$e]: HTMLAttributes & ReactProps$e; + } + } +} + +declare const tagName$e = "shopify-spinner"; +interface ReactProps$e extends Partial, Pick { +} + +type InputBaseProps = Required> & { + defaultValue: string; +}; +type InputReactProps = Pick; + +declare const internals: unique symbol; +declare class PreactInputElement extends PreactCustomElement implements Pick { + #private; + static formAssociated: boolean; + [internals]: ElementInternals; + accessor onchange: EventListener | null; + accessor oninput: EventListener | null; + accessor onfocus: EventListener | null; + accessor onblur: EventListener | null; + accessor name: InputBaseProps['name']; + accessor label: InputBaseProps['label']; + accessor error: InputBaseProps['error']; + accessor defaultValue: InputBaseProps['defaultValue']; + get value(): InputBaseProps['value']; + set value(value: InputBaseProps['value']); + accessor disabled: InputBaseProps['disabled']; + accessor required: InputBaseProps['required']; + constructor(renderImpl: RenderImpl); +} + +declare class PreactInputFieldElement extends PreactInputElement implements InputBaseProps { + accessor placeholder: InputBaseProps['placeholder']; + accessor readOnly: InputBaseProps['readOnly']; + constructor(renderImpl: RenderImpl); +} + +interface SharedProps$3 extends Pick { +} +declare class Select$1 extends PreactInputFieldElement implements SharedProps$3 { + #private; + connectedCallback(): void; + disconnectedCallback(): void; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$d]: Select$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$d]: HTMLAttributes & ReactProps$d; + } + } +} + +declare const tagName$d = "shopify-select"; +interface ReactProps$d extends Partial { +} + +type RequiredSectionProps = Required; +interface SectionProps$1 { + accessibilityLabel: RequiredSectionProps['accessibilityLabel']; + heading: RequiredSectionProps['heading']; + padding: RequiredSectionProps['padding']; +} + +declare class Section$1 extends PreactCustomElement implements SectionProps$1 { + #private; + constructor(); + connectedCallback(): void; + accessor accessibilityLabel: SectionProps$1['accessibilityLabel']; + accessor heading: SectionProps$1['heading']; + accessor padding: SectionProps$1['padding']; +} +declare global { + interface HTMLElementTagNameMap { + [tagName$c]: Section$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$c]: HTMLAttributes & ReactProps$c; + } + } +} + +declare const tagName$c = "shopify-section"; +interface ReactProps$c extends Partial, Pick { +} + +interface ParagraphProps$1 extends Required> { + color: Extract; +} + +declare class Paragraph$1 extends PreactCustomElement implements ParagraphProps$1 { + accessor fontVariantNumeric: ParagraphProps$1['fontVariantNumeric']; + accessor lineClamp: ParagraphProps$1['lineClamp']; + accessor tone: ParagraphProps$1['tone']; + accessor color: ParagraphProps$1['color']; + accessor accessibilityVisibility: ParagraphProps$1['accessibilityVisibility']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$b]: Paragraph$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$b]: HTMLAttributes & ReactProps$b; + } + } +} + +declare const tagName$b = "shopify-paragraph"; +interface ReactProps$b extends Partial, Pick { +} + +interface SharedProps$2 extends Required> { +} +declare class OptionGroup$1 extends PreactCustomElement implements SharedProps$2 { + accessor disabled: SharedProps$2['disabled']; + accessor label: SharedProps$2['label']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$a]: OptionGroup$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$a]: HTMLAttributes & ReactProps$a; + } + } +} + +declare const tagName$a = "shopify-option-group"; +interface ReactProps$a extends Partial { +} + +interface SharedProps$1 extends Required> { +} +declare class Option$1 extends PreactCustomElement implements SharedProps$1 { + accessor value: SharedProps$1['value']; + accessor disabled: SharedProps$1['disabled']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$9]: Option$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$9]: HTMLAttributes & ReactProps$9; + } + } +} + +declare const tagName$9 = "shopify-option"; +interface ReactProps$9 extends Partial { +} + +type RequiredLinkProps = Required; +interface LinkProps$1 { + tone: Extract; + accessibilityLabel: RequiredLinkProps['accessibilityLabel']; + href: RequiredLinkProps['href']; + target: RequiredLinkProps['target']; +} + +declare class Link$1 extends PreactCustomElement implements LinkProps$1 { + accessor tone: LinkProps$1['tone']; + accessor accessibilityLabel: LinkProps$1['accessibilityLabel']; + accessor href: LinkProps$1['href']; + accessor target: LinkProps$1['target']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$8]: Link$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$8]: HTMLAttributes & ReactProps$8; + } + } +} + +declare const tagName$8 = "shopify-link"; +interface ReactProps$8 extends Partial, Pick { +} + +interface ImageProps$1 { + accessibilityRole: Extract; + alt: NonNullable; + loading: Extract; + src: NonNullable; +} + +declare class Image$1 extends PreactCustomElement implements ImageProps$1 { + accessor src: ImageProps$1['src']; + accessor alt: ImageProps$1['alt']; + accessor loading: ImageProps$1['loading']; + accessor accessibilityRole: ImageProps$1['accessibilityRole']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$7]: Image$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$7]: HTMLAttributes & ReactProps$7; + } + } +} + +declare const tagName$7 = "shopify-image"; +interface ReactProps$7 extends Partial, Pick { +} + +interface IconProps$1 { + type: '' | IconType; + tone: Extract; + color: Extract; + size: Extract; +} + +declare class Icon$1 extends PreactCustomElement implements IconProps$1 { + accessor color: IconProps$1['color']; + accessor tone: IconProps$1['tone']; + accessor type: IconProps$1['type']; + accessor size: IconProps$1['size']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$6]: Icon$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$6]: Omit, 'size'> & ReactProps$6; + } + } +} + +declare const tagName$6 = "shopify-icon"; +interface ReactProps$6 extends Partial, Pick { +} + +type RequiredHeadingProps = Required; +interface HeadingProps$1 { + accessibilityRole: RequiredHeadingProps['accessibilityRole']; + accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility']; + lineClamp: RequiredHeadingProps['lineClamp']; +} + +declare class Heading$1 extends PreactCustomElement implements HeadingProps$1 { + accessor accessibilityRole: HeadingProps$1['accessibilityRole']; + accessor lineClamp: HeadingProps$1['lineClamp']; + accessor accessibilityVisibility: HeadingProps$1['accessibilityVisibility']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$5]: Heading$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$5]: HTMLAttributes & ReactProps$5; + } + } +} + +declare const tagName$5 = "shopify-heading"; +interface ReactProps$5 extends Partial, Pick { +} + +interface DividerProps$1 { + direction: Extract; + color: Extract; +} + +declare class Divider$1 extends PreactCustomElement implements DividerProps$1 { + accessor direction: DividerProps$1['direction']; + accessor color: DividerProps$1['color']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$4]: Divider$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$4]: HTMLAttributes & ReactProps$4; + } + } +} + +declare const tagName$4 = "shopify-divider"; +interface ReactProps$4 extends Partial, Pick { +} + +interface CheckboxProps$1 extends Required> { +} + +declare class Checkbox$1 extends PreactInputElement implements CheckboxProps$1 { + #private; + accessor indeterminate: CheckboxProps$1['indeterminate']; + get checked(): boolean; + set checked(checked: CheckboxProps$1['checked']); + accessor details: CheckboxProps$1['details']; + accessor accessibilityLabel: CheckboxProps$1['accessibilityLabel']; + get value(): string; + set value(value: string); + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$3]: Checkbox$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$3]: HTMLAttributes & ReactProps$3; + } + } +} + +declare const tagName$3 = "shopify-checkbox"; +interface ReactProps$3 extends Partial, Pick { +} + +type ButtonOnlyProps = Extract; +type ButtonBaseProps = Required>; +interface ButtonProps$1 extends ButtonBaseProps { + tone: Extract; + icon: IconProps$1['type']; +} + +interface SharedProps extends Required> { + activateAction: Extract; +} +declare class PreactOverlayControl extends PreactCustomElement implements SharedProps { + accessor activateTarget: SharedProps['activateTarget']; + accessor activateAction: SharedProps['activateAction']; + constructor(renderImpl: RenderImpl); +} + +declare class Button$1 extends PreactOverlayControl implements ButtonProps$1 { + accessor disabled: ButtonProps$1['disabled']; + accessor icon: ButtonProps$1['icon']; + accessor loading: ButtonProps$1['loading']; + accessor variant: ButtonProps$1['variant']; + accessor tone: ButtonProps$1['tone']; + accessor lang: ButtonProps$1['lang']; + accessor target: ButtonProps$1['target']; + accessor href: ButtonProps$1['href']; + accessor download: ButtonProps$1['download']; + accessor onclick: EventListener | null; + accessor onblur: EventListener | null; + accessor onfocus: EventListener | null; + accessor type: ButtonProps$1['type']; + accessor accessibilityLabel: ButtonProps$1['accessibilityLabel']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$2]: Button$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$2]: HTMLAttributes & ReactProps$2; + } + } +} + +declare const tagName$2 = "shopify-button"; +interface ReactProps$2 extends Partial, Pick { +} + +declare class Box$1 extends BoxElement implements BoxProps$1 { + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName$1]: Box$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName$1]: HTMLAttributes & ReactProps$1; + } + } +} + +declare const tagName$1 = "shopify-box"; +interface ReactProps$1 extends Partial, Pick { +} + +interface BadgeProps$1 { + accessibilityLabel: NonNullable; + color: Extract; + icon: IconProps$1['type'] | ''; + size: Extract; + tone: Extract; +} + +declare class Badge$1 extends PreactCustomElement implements BadgeProps$1 { + accessor accessibilityLabel: BadgeProps$1['accessibilityLabel']; + accessor color: BadgeProps$1['color']; + accessor icon: BadgeProps$1['icon']; + accessor size: BadgeProps$1['size']; + accessor tone: BadgeProps$1['tone']; + constructor(); +} +declare global { + interface HTMLElementTagNameMap { + [tagName]: Badge$1; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName]: HTMLAttributes & ReactProps; + } + } +} + +declare const tagName = "shopify-badge"; +interface ReactProps extends Partial, Pick { +} + +type BadgeProps = ReactProps; + +type BoxProps = ReactProps$1; + +type ButtonProps = ReactProps$2; + +type CheckboxProps = ReactProps$3; + +type DividerProps = ReactProps$4; + +type HeadingProps = ReactProps$5; + +type IconProps = ReactProps$6; + +type ImageProps = ReactProps$7; + +type LinkProps = ReactProps$8; + +type OptionProps = ReactProps$9; + +type OptionGroupProps = ReactProps$a; + +type ParagraphProps = ReactProps$b; + +type SectionProps = ReactProps$c; + +type SelectProps = ReactProps$d; + +type SpinnerProps = ReactProps$e; + +type StackProps = ReactProps$f; + +type TextProps = ReactProps$g; + +declare const Badge: React.ComponentType>; + +declare const Box: React.ComponentType>; + +declare const Button: React.ComponentType>; + +declare const Checkbox: React.ComponentType>; + +declare const Divider: React.ComponentType>; + +declare const Heading: React.ComponentType>; + +declare const Icon: React.ComponentType>; + +declare const Image: React.ComponentType>; + +declare const Link: React.ComponentType>; + +declare const Option: React.ComponentType>; + +declare const OptionGroup: React.ComponentType>; + +declare const Paragraph: React.ComponentType>; + +declare const Section: React.ComponentType>; + +declare const Select: React.ComponentType>; + +declare const Spinner: React.ComponentType>; + +declare const Stack: React.ComponentType>; + +declare const Text: React.ComponentType>; + +export { Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Divider, type DividerProps, Heading, type HeadingProps, Icon, type IconProps, Image, type ImageProps, Link, type LinkProps, Option, OptionGroup, type OptionGroupProps, type OptionProps, Paragraph, type ParagraphProps, Section, type SectionProps, Select, type SelectProps, Spinner, type SpinnerProps, Stack, type StackProps, Text, type TextProps }; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.ts b/packages/ui-extensions-react/src/surfaces/admin/components.ts deleted file mode 100644 index 258fbdddc4..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components.ts +++ /dev/null @@ -1,85 +0,0 @@ -export {AdminAction} from './components/AdminAction/AdminAction'; -export type {AdminActionProps} from './components/AdminAction/AdminAction'; -export {AdminPrintAction} from './components/AdminPrintAction/AdminPrintAction'; -export type {AdminPrintActionProps} from './components/AdminPrintAction/AdminPrintAction'; -export {AdminBlock} from './components/AdminBlock/AdminBlock'; -export type {AdminBlockProps} from './components/AdminBlock/AdminBlock'; -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 {Box} from './components/Box/Box'; -export type {BoxProps} from './components/Box/Box'; -export {Button} from './components/Button/Button'; -export type {ButtonProps} from './components/Button/Button'; -export {Checkbox} from './components/Checkbox/Checkbox'; -export type {CheckboxProps} from './components/Checkbox/Checkbox'; -export {ChoiceList} from './components/ChoiceList/ChoiceList'; -export type {ChoiceListProps} from './components/ChoiceList/ChoiceList'; -export {ColorPicker} from './components/ColorPicker/ColorPicker'; -export type {ColorPickerProps} from './components/ColorPicker/ColorPicker'; -export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate'; -export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate'; -export {DatePicker} from './components/DatePicker/DatePicker'; -export type {DatePickerProps} from './components/DatePicker/DatePicker'; -export {DateField} from './components/DateField/DateField'; -export type {DateFieldProps} from './components/DateField/DateField'; -export {Divider} from './components/Divider/Divider'; -export type {DividerProps} from './components/Divider/Divider'; -export {EmailField} from './components/EmailField/EmailField'; -export type {EmailFieldProps} from './components/EmailField/EmailField'; -export {Form} from './components/Form/Form'; -export type {FormProps} from './components/Form/Form'; -export {FunctionSettings} from './components/FunctionSettings/FunctionSettings'; -export type { - FunctionSettingsProps, - FunctionSettingsError, -} from './components/FunctionSettings/FunctionSettings'; -export {Heading} from './components/Heading/Heading'; -export type {HeadingProps} from './components/Heading/Heading'; -export {HeadingGroup} from './components/HeadingGroup/HeadingGroup'; -export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup'; -export {Icon} from './components/Icon/Icon'; -export type {IconProps} from './components/Icon/Icon'; -export {Image} from './components/Image/Image'; -export type {ImageProps} from './components/Image/Image'; -export {InlineStack} from './components/InlineStack/InlineStack'; -export type {InlineStackProps} from './components/InlineStack/InlineStack'; -export {InternalCustomerSegmentTemplate} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate'; -export type {InternalCustomerSegmentTemplateProps} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate'; -export {Link} from './components/Link/Link'; -export type {LinkProps} from './components/Link/Link'; -export {MoneyField} from './components/MoneyField/MoneyField'; -export type {MoneyFieldProps} from './components/MoneyField/MoneyField'; -export {NumberField} from './components/NumberField/NumberField'; -export type {NumberFieldProps} from './components/NumberField/NumberField'; -export {Paragraph} from './components/Paragraph/Paragraph'; -export type {ParagraphProps} from './components/Paragraph/Paragraph'; -export {PasswordField} from './components/PasswordField/PasswordField'; -export type {PasswordFieldProps} from './components/PasswordField/PasswordField'; -export {Pressable} from './components/Pressable/Pressable'; -export type {PressableProps} from './components/Pressable/Pressable'; -export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator'; -export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator'; -export {Section} from './components/Section/Section'; -export type {SectionProps} from './components/Section/Section'; -export {Select} from './components/Select/Select'; -export type { - OptionDescription, - OptionGroupDescription, - OptionGroupProps, - OptionProps, - SelectProps, -} from './components/Select/Select'; -export {Text} from './components/Text/Text'; -export type {TextProps} from './components/Text/Text'; -export {TextArea} from './components/TextArea/TextArea'; -export type {TextAreaProps} from './components/TextArea/TextArea'; -export {TextField} from './components/TextField/TextField'; -export type {TextFieldProps} from './components/TextField/TextField'; -export {URLField} from './components/URLField/URLField'; -export type {URLFieldProps} from './components/URLField/URLField'; -export {InternalLocationList} from './components/InternalLocationList/InternalLocationList'; -export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts deleted file mode 100644 index b2c2d76c21..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {AdminAction as BaseAdminAction} from '@shopify/ui-extensions/admin'; -import { - createRemoteReactComponent, - ReactPropsFromRemoteComponentType, -} from '@remote-ui/react'; - -export const AdminAction = createRemoteReactComponent(BaseAdminAction, { - fragmentProps: ['primaryAction', 'secondaryAction'], -}); - -export type AdminActionProps = ReactPropsFromRemoteComponentType< - typeof BaseAdminAction ->; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx deleted file mode 100644 index 3d59b1f3e0..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { - reactExtension, - AdminAction, - Button, - Text, -} from '@shopify/ui-extensions-react/admin'; - -function App() { - return ( - {}}>Action - } - secondaryAction={ - - } - > - Modal content - - ); -} - -export default reactExtension( - 'Playground', - () => , -); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts deleted file mode 100644 index a77456e099..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {AdminBlock as BaseAdminBlock} from '@shopify/ui-extensions/admin'; -import { - createRemoteReactComponent, - ReactPropsFromRemoteComponentType, -} from '@remote-ui/react'; - -export const AdminBlock = createRemoteReactComponent(BaseAdminBlock); - -export type AdminBlockProps = ReactPropsFromRemoteComponentType< - typeof BaseAdminBlock ->; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx deleted file mode 100644 index a7d3c00da0..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import {reactExtension, AdminBlock} from '@shopify/ui-extensions-react/admin'; - -function App() { - return ( - - Block content - - ); -} - -export default reactExtension('Playground', () => ); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts deleted file mode 100644 index 2a68dad70b..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {AdminPrintAction as BaseAdminPrintAction} from '@shopify/ui-extensions/admin'; -import { - createRemoteReactComponent, - ReactPropsFromRemoteComponentType, -} from '@remote-ui/react'; - -export const AdminPrintAction = - createRemoteReactComponent(BaseAdminPrintAction); - -export type AdminPrintActionProps = ReactPropsFromRemoteComponentType< - typeof BaseAdminPrintAction ->; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx deleted file mode 100644 index 601ed5454d..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { - reactExtension, - AdminPrintAction, - Text, -} from '@shopify/ui-extensions-react/admin'; - -function App() { - return ( - - Modal content - - ); -} - -export default reactExtension( - 'Playground', - () => , -); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts deleted file mode 100644 index 26ac638e51..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {Badge as BaseBadge} from '@shopify/ui-extensions/admin'; -import type {BadgeProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Badge = createRemoteReactComponent<'Badge', BadgeProps>(BaseBadge); -export type {BadgeProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx index 33dfa4e89d..319af1dfac 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx @@ -1,13 +1,10 @@ -import {render, Badge} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Badge, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { - return ( - - Fulfilled - - ); + return Fulfilled; } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts deleted file mode 100644 index 4ecdc31030..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {Banner as BaseBanner} from '@shopify/ui-extensions/admin'; -import { - createRemoteReactComponent, - ReactPropsFromRemoteComponentType, -} from '@remote-ui/react'; - -export const Banner = createRemoteReactComponent(BaseBanner, { - fragmentProps: ['primaryAction', 'secondaryAction'], -}); - -export type BannerProps = ReactPropsFromRemoteComponentType; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx deleted file mode 100644 index 8db34382e4..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - Banner, - Paragraph, -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - console.log('dismissed banner')}> - Your store may be affected - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts deleted file mode 100644 index dd606c36cc..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {BlockStack as BaseBlockStack} from '@shopify/ui-extensions/admin'; -import type {BlockStackProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const BlockStack = createRemoteReactComponent< - 'BlockStack', - BlockStackProps ->(BaseBlockStack); -export type {BlockStackProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts deleted file mode 100644 index 05a4ca92ed..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {Box as BaseBox} from '@shopify/ui-extensions/admin'; -import type {BoxProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Box = createRemoteReactComponent<'Box', BoxProps>(BaseBox); -export type {BoxProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx index 30be051844..18ee89ba8b 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx @@ -1,11 +1,10 @@ -import {render, Box} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Box, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { - return ( - - Box - - ); + return Box; } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts deleted file mode 100644 index 31376f27e9..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {Button as BaseButton} from '@shopify/ui-extensions/admin'; -import type {ButtonProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Button = createRemoteReactComponent<'Button', ButtonProps>( - BaseButton, -); -export type {ButtonProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts deleted file mode 100644 index 75ddfa2a82..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {Checkbox as BaseCheckbox} from '@shopify/ui-extensions/admin'; -import type {CheckboxProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Checkbox = createRemoteReactComponent<'Checkbox', CheckboxProps>( - BaseCheckbox, -); -export type {CheckboxProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx deleted file mode 100644 index 40644d7324..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {render, Checkbox} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - - Save this information for next time - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts deleted file mode 100644 index bc750e7cd9..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {ChoiceList as BaseChoiceList} from '@shopify/ui-extensions/admin'; -import type {ChoiceListProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const ChoiceList = createRemoteReactComponent< - 'ChoiceList', - ChoiceListProps ->(BaseChoiceList); -export type {ChoiceListProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx deleted file mode 100644 index f34899efed..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import {render, ChoiceList} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - - ); -} \ No newline at end of file diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts deleted file mode 100644 index 06217b89b1..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {ColorPicker as BaseColorPicker} from '@shopify/ui-extensions/admin'; -import type {ColorPickerProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const ColorPicker = createRemoteReactComponent< - 'ColorPicker', - ColorPickerProps ->(BaseColorPicker); -export type {ColorPickerProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx deleted file mode 100644 index bddc087269..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { - render, - ColorPicker, -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - { - console.log({value}); - }} - /> - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts deleted file mode 100644 index 71ec0058b4..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {CustomerSegmentTemplate as BaseCustomerSegmentTemplate} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const CustomerSegmentTemplate = createRemoteReactComponent( - BaseCustomerSegmentTemplate, -); -export type {CustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx deleted file mode 100644 index c4b5afd10f..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import {reactExtension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin'; - -function App() { - return ( - - ); -} - -export default reactExtension('Playground', () => ); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts deleted file mode 100644 index 9c2cbf3134..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {DateField as BaseDateField} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const DateField = createRemoteReactComponent(BaseDateField); -export type {DateFieldProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx deleted file mode 100644 index 13542e0195..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { useState } from 'react'; -import { - render, - DateField, - type Selected -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = useState('2023-11-08') - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx deleted file mode 100644 index 3e2914e80d..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - DateField, - type Selected, -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = React.useState(['2023-11-08']); - - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx deleted file mode 100644 index 8519b66dbb..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - DateField, - type Selected -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = React.useState({start: '2023-11-08', end: '2023-11-10' }); - - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts deleted file mode 100644 index 54923a8ad5..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {DatePicker as BaseDatePicker} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const DatePicker = createRemoteReactComponent(BaseDatePicker); -export type {DatePickerProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx deleted file mode 100644 index 4f36fd9329..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { useState } from 'react'; -import { - render, - DatePicker, - type Selected -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = useState('2023-11-08') - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx deleted file mode 100644 index c5dbf58921..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { - render, - DatePicker, - type Selected, -} from '@shopify/ui-extensions-react/admin'; - - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = React.useState(['2023-11-08']); - - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx deleted file mode 100644 index 209fe39f68..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - DatePicker, - type Selected -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = React.useState({start: '2023-11-08', end: '2023-11-10' }); - - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts deleted file mode 100644 index 0b2a3a535e..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {Divider as BaseDivider} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Divider = createRemoteReactComponent(BaseDivider); -export type {DividerProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx index 902ab9478f..331b1b0eda 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx @@ -2,17 +2,17 @@ import React from 'react'; import { render, Divider, - BlockStack, + Stack, } from '@shopify/ui-extensions-react/admin'; render('Playground', () => ); function App() { return ( - + <>First text <>Second Text - + ); } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts deleted file mode 100644 index fb96dc2f8e..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {EmailField as BaseEmailField} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const EmailField = createRemoteReactComponent(BaseEmailField); -export type {EmailFieldProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx deleted file mode 100644 index 2b4cdff6bf..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import {render, EmailField} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ; -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts deleted file mode 100644 index 68e3f4c308..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {Form as BaseForm} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Form = createRemoteReactComponent(BaseForm); -export type {FormProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx deleted file mode 100644 index c6d445ed83..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import { - reactExtension, - Form, - TextField, -} from '@shopify/ui-extensions-react/admin'; - -export default reactExtension("admin.product-details.block.render", () => ); - -function App() { - const [value, setValue] = useState(""); - const [error, setError] = useState(''); - - const onSubmit = useCallback( - async () => { - // API call to save the values - const res = await fetch('/save', {method:'POST', body: JSON.stringify({name: value})}); - if (!res.ok) { - const json = await res.json(); - const errors = json.errors.join(','); - setError(errors); - } - }, - [value] - ); - - const onReset = useCallback(async () => { - // Reset to initial value - setValue('') - // Clear errors - setError('') - }, []); - - const onInput = useCallback((nameValue) => { - if (!nameValue) { - setError("Please enter a name."); - } - }, []) - - // Field values can only be updated on change when using Remote UI. - const onChange = useCallback((nameValue) => { - setValue(nameValue); - }, []) - - - return ( -
- - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts b/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts deleted file mode 100644 index a656e3fd0e..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {FunctionSettings as BaseFunctionSettings} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const FunctionSettings = - createRemoteReactComponent(BaseFunctionSettings); -export type { - FunctionSettingsProps, - FunctionSettingsError, -} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx deleted file mode 100644 index f986411219..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { - reactExtension, - useApi, - FunctionSettings, - TextField, - Section, -} from '@shopify/ui-extensions-react/admin'; - -export default reactExtension( - 'admin.settings.validation.render', - async (api) => { - // Use Direct API access to fetch initial - // metafields from the server if we are - // rendering against a pre-existing `Validation` - const initialSettings = api.data.validation - ? await fetchSettings(api.data.validation.id) - : {}; - - return ; -}); - -function App({settings}) { - const [value, setValue] = useState(settings); - const [error, setError] = useState(); - - const {applyMetafieldsChange} = useApi(); - - return ( - { - setError(errors[0]?.message); - }} - > -
- { - setValue(value); - setError(undefined); - applyMetafieldsChange({ - type: 'updateMetafield', - namespace: '$app:my_namespace', - key: 'name', - value, - valueType: 'single_line_text_field', - }); - }} - /> -
- - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts deleted file mode 100644 index 771b352bea..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {Heading as BaseHeading} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Heading = createRemoteReactComponent(BaseHeading); -export type {HeadingProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx index b03a114e76..67f1979fc1 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx @@ -1,6 +1,9 @@ -import {render, Heading} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Heading, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { return Store name; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts deleted file mode 100644 index 32f411f5da..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {HeadingGroup as BaseHeadingGroup} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const HeadingGroup = createRemoteReactComponent(BaseHeadingGroup); -export type {HeadingGroupProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx deleted file mode 100644 index 7bcaef3901..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { - render, - HeadingGroup, - Heading, - } from '@shopify/ui-extensions-react/admin'; - - render('Playground', () => ); - - function App() { - return ( - <> - Heading <h1> - - - Heading <h2> - - - Heading <h3> - - - - ); - } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts deleted file mode 100644 index 45aaa47154..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {Icon as BaseIcon} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Icon = createRemoteReactComponent(BaseIcon); -export type {IconProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx index a3e8089a44..7ec7d6114b 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx @@ -1,7 +1,10 @@ -import {render, Icon} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Icon, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { - return ; + return ; } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts deleted file mode 100644 index 4440a48eb1..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {Image as BaseImage} from '@shopify/ui-extensions/admin'; -import type {ImageProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Image = createRemoteReactComponent<'Image', ImageProps>(BaseImage); -export type {ImageProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts deleted file mode 100644 index 7b8eba3454..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {InlineStack as BaseInlineStack} from '@shopify/ui-extensions/admin'; -import type {InlineStackProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const InlineStack = createRemoteReactComponent< - 'InlineStack', - InlineStackProps ->(BaseInlineStack); -export type {InlineStackProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx deleted file mode 100644 index d9fb203f83..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { - render, - InlineStack, -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - - <>Child 1 - <>Child 2 - <>Child 3 - <>Child 4 - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts deleted file mode 100644 index d41489cfbe..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {InternalCustomerSegmentTemplate as BaseInternalCustomerSegmentTemplate} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const InternalCustomerSegmentTemplate = createRemoteReactComponent( - BaseInternalCustomerSegmentTemplate, -); -export type {InternalCustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.tsx deleted file mode 100644 index a85de408d8..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { - reactExtension, - InternalCustomerSegmentTemplate, -} from '@shopify/ui-extensions-react/admin'; - -function App({i18n, enabledFeatures}) { - const productsPurchasedOnTagsEnabled = enabledFeatures.includes('productsPurchasedByTags'); - const query = productsPurchasedOnTagsEnabled - ? 'products_purchased(tag: (product_tag)) = true' - : 'products_purchased(id: (product_id)) = true'; - const queryToInsert = productsPurchasedOnTagsEnabled - ? 'products_purchased(tag:' - : 'products_purchased(id:'; - - return ( - <> - - - - ); -} - -reactExtension('admin.customers.segmentation-templates.render', ({i18n, __enabledFeatures}) => ); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts deleted file mode 100644 index 72e392ed18..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {InternalLocationList as BaseInternalLocationList} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const InternalLocationList = createRemoteReactComponent( - BaseInternalLocationList, -); -export type {InternalLocationListProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts deleted file mode 100644 index 7839408e6f..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {Link as BaseLink} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Link = createRemoteReactComponent(BaseLink); -export type {LinkProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts deleted file mode 100644 index d2f04f946b..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {MoneyField as BaseMoneyField} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const MoneyField = createRemoteReactComponent(BaseMoneyField); -export type {MoneyFieldProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx deleted file mode 100644 index bdd46cdcde..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import {render, MoneyField} from '@shopify/ui-extensions-react/admin'; -import {useState} from 'react'; - -render('Playground', () => ); - -function App() { - const [value, setValue] = useState({ amount: 100, currencyCode: 'USD' }); - - return ; -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts deleted file mode 100644 index dff37fc7ad..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {NumberField as BaseNumberField} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const NumberField = createRemoteReactComponent(BaseNumberField); -export type {NumberFieldProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx deleted file mode 100644 index 65dd16ea34..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import {render, NumberField} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ; -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts deleted file mode 100644 index 0a3ada05d5..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {Paragraph as BaseParagraph} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Paragraph = createRemoteReactComponent(BaseParagraph); -export type {ParagraphProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx index 022b4c2db6..2863f74333 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx @@ -1,16 +1,23 @@ import { - render, - BlockStack, - Paragraph, + render, + Paragraph, + Stack, + Text, } from '@shopify/ui-extensions-react/admin'; render('Playground', () => ); function App() { - return ( - - Name: - Jane Doe - - ) + return ( + + + Name: + Jane Doe + + + ); } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts deleted file mode 100644 index 42d1785e28..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {PasswordField as BasePasswordField} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const PasswordField = createRemoteReactComponent(BasePasswordField); -export type {PasswordFieldProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx deleted file mode 100644 index a2ca1d62e7..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { - render, - BlockStack, - TextField, - PasswordField -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - - - - - ) -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts deleted file mode 100644 index bac20a88a4..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {Pressable as BasePressable} from '@shopify/ui-extensions/admin'; -import type {PressableProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Pressable = createRemoteReactComponent< - 'Pressable', - PressableProps ->(BasePressable); -export type {PressableProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx deleted file mode 100644 index 67efde16b8..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { - reactExtension, - Icon, - InlineStack, - Pressable, - Text, -} from '@shopify/ui-extensions-react/admin'; - -reactExtension('Playground', () => ); - -function Extension() { - return ( - - - Go to Apps Dashboard - - - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts deleted file mode 100644 index 655e9ab99d..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {ProgressIndicator as BaseProgressIndicator} from '@shopify/ui-extensions/admin'; -import type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const ProgressIndicator = createRemoteReactComponent< - 'ProgressIndicator', - ProgressIndicatorProps ->(BaseProgressIndicator); -export type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx deleted file mode 100644 index 8b4968f5e9..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { - reactExtension, - ProgressIndicator, -} from '@shopify/ui-extensions-react/admin'; - -reactExtension('Playground', () => ); - -function App() { - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts deleted file mode 100644 index d4413c2db0..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {Section as BaseSection} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Section = createRemoteReactComponent(BaseSection); -export type {SectionProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx deleted file mode 100644 index 45538063f5..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - Section, -} from '@shopify/ui-extensions-react/admin'; - - -render('Playground', () => ); - -function App() { - return ( -
- Section content -
- ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts deleted file mode 100644 index 92bfcc35a4..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {Select as BaseSelect} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Select = createRemoteReactComponent(BaseSelect); -export type { - SelectProps, - OptionProps, - OptionGroupProps, - OptionDescription, - OptionGroupDescription, -} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx similarity index 81% rename from packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx rename to packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx index b2c2a1dab7..aa32498050 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx @@ -1,18 +1,18 @@ import React from 'react'; import { render, - BlockStack, + Stack, } from '@shopify/ui-extensions-react/admin'; render('Playground', () => ); function App() { return ( - + <>Child 1 <>Child 2 <>Child 3 <>Child 4 - + ); } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts deleted file mode 100644 index da9044c131..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {Text as BaseText} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const Text = createRemoteReactComponent(BaseText); -export type {TextProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx index eee51ee386..71aa4abfd3 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx @@ -1,12 +1,20 @@ -import {render, Text, BlockStack} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Text, + Stack, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { return ( - + Name: Jane Doe - + ); } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts deleted file mode 100644 index e0e88fe373..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {TextArea as BaseTextArea} from '@shopify/ui-extensions/admin'; -import type {TextAreaProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; - -export const TextArea = createRemoteReactComponent<'TextArea', TextAreaProps>( - BaseTextArea, -); -export type {TextAreaProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx deleted file mode 100644 index d135155076..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import {render, TextArea} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return