Merge pull request #2557 from Shopify/checkout-unstable-release

Unstable Release (checkout)

.changeset/spicy-peaches-travel.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': minor
+'@shopify/ui-extensions': minor
+---
+
+Addition of `DropZone` UI component for checkout UI extensions

packages/ui-extensions-react/README.md

@@ -2,11 +2,11 @@
 
 This package contains the public type definitions and utilities needed to create a Shopify UI extension with [React](https://reactjs.org/). This is a generalized package that is intended to be the long-term home of the surface-specific UI extension packages, like [`@shopify/checkout-ui-extensions-react`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions-react) and [`@shopify/admin-ui-extensions-react`](https://github.com/Shopify/ui-extensions/tree/main/packages/admin-ui-extensions-react).
 
-> **Is your extension currently using `@shopify/checkout-ui-extensions-react`?** You can learn what you need to do to upgrade to this API versioned package in the [migration guide](../../documentation/upgrade/checkout-ui-extension-api-versioning.md).
+> **Is your extension currently using `@shopify/checkout-ui-extensions-react`?** You can learn what you need to do to upgrade to this API versioned package in the [migration guide](../../documentation/upgrade/checkout-ui-extension-api-versioning.md).
 
 Currently, this package only contains the extension APIs for the [`checkout` surface](./src/surfaces/checkout), but other Shopify surfaces will be added here soon.
 
-All extensions, regardless of where they appear in Shopify, make use of the same [underlying technology](../../documentation/how-extensions-work.md), and most of the same “core” components (e.g., `BlockStack`, `Button`, `TextField`, etc) and capabilities (e.g., direct API access, session tokens). Separating APIs by surface makes it easier for a developer to see what is available to them in each context, and gives us a flexible system for introducing components and APIs available in only some areas of Shopify.
+All extensions, regardless of where they appear in Shopify, make use of the same [underlying technology](../../documentation/how-extensions-work.md), and most of the same “core” components (e.g., `BlockStack`, `Button`, `TextField`, etc) and capabilities (e.g., direct API access, session tokens). Separating APIs by surface makes it easier for a developer to see what is available to them in each context, and gives us a flexible system for introducing components and APIs available in only some areas of Shopify.
 
 A checkout extension using React would be written as follows:
 

packages/ui-extensions-react/src/surfaces/checkout.ts

@@ -138,6 +138,9 @@ export type {DisclosureProps} from './checkout/components/Disclosure/Disclosure'
 export {Divider} from './checkout/components/Divider/Divider';
 export type {DividerProps} from './checkout/components/Divider/Divider';
 
+export {DropZone} from './checkout/components/DropZone/DropZone';
+export type {DropZoneProps} from './checkout/components/DropZone/DropZone';
+
 export {Form} from './checkout/components/Form/Form';
 export type {FormProps} from './checkout/components/Form/Form';
 

packages/ui-extensions-react/src/surfaces/customer-account/components/DropZone/DropZone.ts → packages/ui-extensions-react/src/surfaces/checkout/components/DropZone/DropZone.ts

@@ -1,8 +1,6 @@
-import {DropZone as BaseDropZone} from '@shopify/ui-extensions/customer-account';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {DropZone as BaseDropZone} from '@shopify/ui-extensions/checkout';
+import type {ReactPropsFromRemoteComponentType} from '@remote-ui/react';
+import {createRemoteReactComponent} from '@remote-ui/react';
 
 export type DropZoneProps = ReactPropsFromRemoteComponentType<
   typeof BaseDropZone

packages/ui-extensions-react/src/surfaces/checkout/components/DropZone/examples/basic-DropZone-react.example.tsx

@@ -0,0 +1,13 @@
+import {
+  reactExtension,
+  DropZone,
+} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return <DropZone accept="image/*" />;
+}

packages/ui-extensions-react/src/surfaces/customer-account/components/index.ts

@@ -1,6 +1,5 @@
 export * from './Card';
 export * from './CustomerAccountAction';
-export * from './DropZone';
 export * from './Page';
 export * from './Avatar';
 export * from './Menu';

packages/ui-extensions-react/src/surfaces/customer-account/components/shared-checkout-components.ts

@@ -33,6 +33,8 @@ export {
   type DisclosureProps,
   Divider,
   type DividerProps,
+  DropZone,
+  type DropZoneProps,
   Form,
   type FormProps,
   Grid,

packages/ui-extensions/docs/surfaces/checkout/build-docs.sh

@@ -72,6 +72,7 @@ if [ $sed_exit -ne 0 ]; then
   fail_and_exit $sed_exit
 fi
 
+copy_generated_docs_to_shopify_dev() {
 # Copy the generated docs to shopify-dev
 if [ -d $SHOPIFY_DEV_PATH ]; then
   mkdir -p $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/checkout_extensions/$API_VERSION
@@ -92,5 +93,14 @@ if [ -d $SHOPIFY_DEV_PATH ]; then
     echo "Docs: https://shopify-dev.myshopify.io/docs/api/checkout-ui-extensions"
   fi
 else
-  echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH."
+    echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH."
+  fi
+}
+
+if [ -d $SHOPIFY_DEV_PATH ]; then
+  copy_generated_docs_to_shopify_dev
+else
+  # We could be in the monorepo and need to go up several more directories to find shopify-dev
+  SHOPIFY_DEV_PATH="../../../../../../shopify-dev"
+  copy_generated_docs_to_shopify_dev
 fi

packages/ui-extensions/src/index.ts

@@ -1,2 +1,3 @@
 export * from './api';
+
 export * from './extension';

packages/ui-extensions/src/surfaces/checkout/components.ts

@@ -60,6 +60,9 @@ export type {DisclosureProps} from './components/Disclosure/Disclosure';
 export {Divider} from './components/Divider/Divider';
 export type {DividerProps} from './components/Divider/Divider';
 
+export {DropZone} from './components/DropZone/DropZone';
+export type {DropZoneProps} from './components/DropZone/DropZone';
+
 export {Form} from './components/Form/Form';
 export type {FormProps} from './components/Form/Form';
 

packages/ui-extensions/src/surfaces/checkout/components/Checkbox/content/guidelines.md

@@ -6,4 +6,4 @@
 
 ## Related components
 
-- [`ChoiceList`](https://github.com/Shopify/checkout-web/tree/main/packages/checkout-ui-extensions/src/components/ChoiceList): Creates a group of related options for customers to choose from. `ChoiceList` can be made up of radio buttons or checkboxes.
+- [`ChoiceList`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/ChoiceList): Creates a group of related options for customers to choose from. `ChoiceList` can be made up of radio buttons or checkboxes.

packages/ui-extensions/src/surfaces/checkout/components/ChoiceList/content/guidelines.md

@@ -6,5 +6,5 @@
 
 ## Related components
 
-- [`Choice`](https://github.com/Shopify/checkout-web/tree/main/packages/checkout-ui-extensions/src/components/Choice): The options inside the `ChoiceList` component.
-- [`Checkbox`](https://github.com/Shopify/checkout-web/tree/main/packages/checkout-ui-extensions/src/components/Checkbox): Gives customers a single binary option, such as signed up for marketing, or agreeing to terms and conditions.
+- [`Choice`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/Choice): The options inside the `ChoiceList` component.
+- [`Checkbox`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/Checkbox): Gives customers a single binary option, such as signed up for marketing, or agreeing to terms and conditions.

packages/ui-extensions/src/surfaces/customer-account/components/DropZone/DropZone.doc.ts → packages/ui-extensions/src/surfaces/checkout/components/DropZone/DropZone.doc.ts

@@ -2,7 +2,7 @@ import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'DropZone',
-  description: `Dropzone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, Dropzone does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains.
+  description: `DropZone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, DropZone does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains.
     \n Any element focused within the Dropzone component, including child elements such as the 'Add file' button, will initiate the file selector when the Enter or Spacebar key is pressed.
     `,
   thumbnail: 'dropzone-thumbnail.png',
@@ -16,7 +16,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'DropZoneProps',
     },
   ],
-  category: 'components',
+  category: 'Components',
+  subCategory: 'Forms',
   defaultExample: {
     image: 'dropzone-preview.png',
     altText:
@@ -26,7 +27,7 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/customer-account/components/DropZone/examples/basic-DropZone-react.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/DropZone/examples/basic-DropZone-react.example.tsx',
           language: 'tsx',
         },
         {
@@ -45,19 +46,19 @@ const data: ReferenceEntityTemplateSchema = {
       sectionContent: `
 ### File storage
 
-File storage for uploads must be implemented separately. Metafields and [the Customer Account API](https://shopify.dev/docs/api/customer/latest/mutations/metafieldsSet) can be utilized to store references to files alongside the relevant objects.
+File storage for uploads must be implemented separately. Metafields and the corresponding [Checkout API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/metafields) or [Customer Accounts API](https://shopify.dev/docs/api/customer/latest/mutations/metafieldsSet) can be utilized to store references to files alongside the relevant objects.
 
 ### Mobile
 
-Remember that the drag and drop feature won't be effective on mobile devices. Adding a button can offer additional context and guide users through the next steps.
+Remember that the drag and drop feature won’t be effective on mobile devices. Adding a button can offer additional context and guide users through the next steps.
 
-<img src='/assets/templated-apis-screenshots/customer-account-ui-extensions/unstable/dropzone-mobile-example.png' alt="An example showing DropZone with custom content optimized for mobile devices" />
+<img src='/assets/templated-apis-screenshots/checkout-ui-extensions/unstable/dropzone-mobile-example.png' alt="An example showing DropZone with custom content optimized for mobile devices" />
 
 ### Minimum size
 
-To prevent cut-off text and spacing issues, the minimum size of a Dropzone should be 100px x 100px.
+To prevent cut-off text and spacing issues, the minimum size of a Dropzone should be 100px by 100px.
 
-<img src='/assets/templated-apis-screenshots/customer-account-ui-extensions/unstable/dropzone-minimum-size.png' alt="An example showing DropZone with correct minimum size" />
+<img src='/assets/templated-apis-screenshots/checkout-ui-extensions/unstable/dropzone-minimum-size.png' alt="An example showing DropZone with correct minimum size" />
       `,
     },
   ],

packages/ui-extensions/src/surfaces/customer-account/components/DropZone/DropZone.ts → packages/ui-extensions/src/surfaces/checkout/components/DropZone/DropZone.ts

@@ -1,5 +1,6 @@
 import {createRemoteComponent} from '@remote-ui/core';
-import {IdProps} from '../shared';
+
+import type {IdProps} from '../shared';
 
 export interface DropZoneProps extends IdProps {
   /**
@@ -19,7 +20,7 @@ export interface DropZoneProps extends IdProps {
    * Indicate an error to the user. The field will be given a specific stylistic treatment
    * to communicate problems that have to be resolved immediately.
    */
-  error?: string | boolean;
+  error?: string;
 
   /**
    * Content to use as the field label.
@@ -66,7 +67,6 @@ export interface DropZoneProps extends IdProps {
 
   /**
    * Callback when rejected files are dropped. Files are rejected based on the `accept` prop.
-   *
    */
   onDropRejected?(files: File[]): void;
 }

packages/ui-extensions/src/surfaces/checkout/components/DropZone/examples/basic-DropZone-js.example.ts

@@ -0,0 +1,9 @@
+import {DropZone, extension} from '@shopify/ui-extensions/checkout';
+
+export default extension('purchase.checkout.block.render', (root) => {
+  const dropZone = root.createComponent(DropZone, {
+    accept: 'image/*',
+  });
+
+  root.appendChild(dropZone);
+});

packages/ui-extensions/src/surfaces/customer-account/components/index.ts

@@ -1,6 +1,5 @@
 export * from './Card';
 export * from './CustomerAccountAction';
-export * from './DropZone';
 export * from './Page';
 export * from './Avatar';
 export * from './Menu';

packages/ui-extensions/src/surfaces/customer-account/components/shared-checkout-components.ts

@@ -33,6 +33,8 @@ export {
   type DisclosureProps,
   Divider,
   type DividerProps,
+  DropZone,
+  type DropZoneProps,
   Form,
   type FormProps,
   Grid,