[ui-extensions]: Changes from checkout-web (#2840)

* changes from checkout-web

build docs script

lint

type check

type check

updated files

lint

* remove not ready components

Author: oliverigor

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
     'packages/*/*.node',
     'packages/*/*.esnext',
     'packages/ui-extensions/src/surfaces/checkout/**/*.d.ts',
+    'packages/ui-extensions/src/surfaces/checkout/preact/tests/',
   ],
   rules: {
     // Codebase was originally written without some strict Shopify conventions

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

@@ -1,6 +1,8 @@
 API_VERSION=$1
 DOCS_PATH=docs/surfaces/checkout
 SRC_PATH=src/surfaces/checkout
+COMPONENTS_DEFINITIONS=src/surfaces/checkout/components/components.d.ts
+COMPONENTS_TS=src/surfaces/checkout/components/components.ts
 
 fail_and_exit() {
   echo "** Failed to generate docs"
@@ -11,10 +13,10 @@ fail_and_exit() {
 run_sed() {
   if [[ "$OSTYPE" == "darwin"* ]]; then
     # macOS
-    sed -i '' "$1" "$2"
+    sed -Ei '' "$1" "$2"
   else
     # Linux and other Unix-like systems
-    sed -i "$1" "$2"
+    sed -ri "$1" "$2"
   fi
 }
 
@@ -31,9 +33,11 @@ else
   echo "Building docs for '$API_VERSION' checkout UI extensions API."
 fi
 
-COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH  --output ./$DOCS_PATH/generated"
+COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH --output ./$DOCS_PATH/generated"
 COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated"
 
+# Rename components.d.ts to components.ts so it can be picked up be the generate-docs tool
+cp $COMPONENTS_DEFINITIONS $COMPONENTS_TS
 
 if echo "$PWD" | grep -q '\checkout-web'; then
   # We are generating docs from the private package, which does not have other surfaces aside from checkout
@@ -44,10 +48,12 @@ else
   # so we erase their contents and replace them afterwards
   echo "export {}" > src/surfaces/customer-account.ts
   echo "export {}" > src/surfaces/admin.ts
+  echo "export {}" > src/surfaces/point-of-sale.ts
   eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES
   build_exit=$?
   git checkout HEAD -- src/surfaces/customer-account.ts
   git checkout HEAD -- src/surfaces/admin.ts
+  git checkout HEAD -- src/surfaces/point-of-sale.ts
 fi
 
 # TODO: get generate-docs to stop requiring JS files:
@@ -66,6 +72,21 @@ if [ $sed_exit -ne 0 ]; then
   fail_and_exit $sed_exit
 fi
 
+echo
+if [ $API_VERSION == "2025-10-rc" ]
+then
+  echo "**** ${API_VERSION}: prefixing generate commands with POLARIS_UNIFIED=true"
+  run_sed 's/(npm run shopify app generate extension)/POLARIS_UNIFIED=true \1/gi' \
+    ./$DOCS_PATH/generated/generated_static_pages.json
+  run_sed 's/(pnpm shopify app generate extension)/POLARIS_UNIFIED=true \1/gi' \
+    ./$DOCS_PATH/generated/generated_static_pages.json
+  run_sed 's/(yarn shopify app generate extension)/POLARIS_UNIFIED=true \1/gi' \
+    ./$DOCS_PATH/generated/generated_static_pages.json
+else
+  echo "**** ${API_VERSION}: NOT prefixing generate commands with POLARIS_UNIFIED=true"
+fi
+echo
+
 
 
 copy_generated_docs_to_shopify_dev() {
@@ -99,7 +120,7 @@ SHOPIFY_DEV_PATH="../../../shopify-dev"
 if [ -d $SHOPIFY_DEV_PATH ]; then
   copy_generated_docs_to_shopify_dev
 else
-  # We could be in the shop/world repo and its in a different location on your local machine
+  # We could be in the shop/world repo and it's in a different location on your local machine
   # This is a best guess as to where it might be located in local dev environments
   SHOPIFY_DEV_PATH="$HOME/src/github.com/Shopify/shopify-dev"
   copy_generated_docs_to_shopify_dev

packages/ui-extensions/docs/surfaces/checkout/reference/apis/analytics.doc.ts

@@ -19,10 +19,10 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'Docs_Standard_AnalyticsApi',
     },
   ],
-  defaultExample: getExample('analytics-publish', ['jsx', 'js']),
+  defaultExample: getExample('analytics-publish', ['jsx']),
   examples: {
     description: '',
-    examples: [getExample('analytics-visitor', ['jsx', 'js'])],
+    examples: [getExample('analytics-visitor', ['jsx'])],
   },
   related: getLinksByTag('apis'),
 };

packages/ui-extensions/docs/surfaces/checkout/reference/apis/attributes.doc.ts

@@ -43,10 +43,10 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'UseAttributeValuesGeneratedType',
     },
   ],
-  defaultExample: getExample('attribute-values', ['jsx', 'js']),
+  defaultExample: getExample('attribute-values', ['jsx']),
   examples: {
     description: '',
-    examples: [getExample('attributes/attribute-change', ['jsx', 'js'])],
+    examples: [getExample('attributes/attribute-change', ['jsx'])],
   },
   related: getLinksByTag('apis'),
 };

packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-journey.doc.ts

@@ -59,14 +59,13 @@ const data: ReferenceEntityTemplateSchema = {
   ],
   defaultExample: getExample('buyer-journey-intercept/target-native-field', [
     'jsx',
-    'js',
   ]),
   examples: {
     description:
       'In addition to targeting checkout UI fields, you can also pass errors to the page level or render the error in your extension.',
     examples: [
-      getExample('buyer-journey-intercept/page-level-error', ['jsx', 'js']),
-      getExample('buyer-journey-intercept/extension-banner', ['jsx', 'js']),
+      getExample('buyer-journey-intercept/page-level-error', ['jsx']),
+      getExample('buyer-journey-intercept/extension-banner', ['jsx']),
     ],
   },
   related: [

packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-instructions.doc.ts

@@ -25,17 +25,17 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'UseInstructionsGeneratedType',
     },
   ],
-  defaultExample: getExample('cart-instructions/discounts', ['jsx', 'js']),
+  defaultExample: getExample('cart-instructions/discounts', ['jsx']),
   examples: {
     description:
       'Use the cart instructions API to determine if the affected APIs are available in checkout.',
     examples: [
-      getExample('cart-instructions/attributes', ['jsx', 'js']),
-      getExample('cart-instructions/delivery', ['jsx', 'js']),
-      getExample('cart-instructions/discounts', ['jsx', 'js']),
-      getExample('cart-instructions/cart-lines-add', ['jsx', 'js']),
-      getExample('cart-instructions/metafields', ['jsx', 'js']),
-      getExample('cart-instructions/notes', ['jsx', 'js']),
+      getExample('cart-instructions/attributes', ['jsx']),
+      getExample('cart-instructions/delivery', ['jsx']),
+      getExample('cart-instructions/discounts', ['jsx']),
+      getExample('cart-instructions/cart-lines-add', ['jsx']),
+      getExample('cart-instructions/metafields', ['jsx']),
+      getExample('cart-instructions/notes', ['jsx']),
     ],
   },
   related: getLinksByTag('apis'),

packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-lines.doc.ts

@@ -55,7 +55,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'UseCartLineTargetGeneratedType',
     },
   ],
-  defaultExample: getExample('cart-line-item/default', ['jsx', 'js']),
+  defaultExample: getExample('cart-line-item/default', ['jsx']),
   related: getLinksByTag('apis'),
 };
 

packages/ui-extensions/docs/surfaces/checkout/reference/apis/cost.doc.ts

@@ -38,7 +38,7 @@ const data: ReferenceEntityTemplateSchema = {
     {
       title: 'useTotalAmount',
       description:
-        'Returns a `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated.',
+        'Returns a `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated. Applied gift cards and store credit are excluded.',
       type: 'UseTotalAmountGeneratedType',
     },
   ],

packages/ui-extensions/docs/surfaces/checkout/reference/apis/customer-privacy.doc.ts

@@ -30,16 +30,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'UseCustomerPrivacyGeneratedType',
     },
   ],
-  defaultExample: getExample('customer-privacy/default', ['jsx', 'js']),
-  examples: {
-    description: '',
-    examples: [
-      getExample('customer-privacy/sheet-consent-banner-with-form', [
-        'jsx',
-        'js',
-      ]),
-    ],
-  },
+  defaultExample: getExample('customer-privacy/default', ['jsx']),
   related: getLinksByTag('apis'),
 };
 

packages/ui-extensions/docs/surfaces/checkout/reference/apis/delivery.doc.ts

@@ -103,12 +103,12 @@ const data: ReferenceEntityTemplateSchema = {
     description:
       'Learn how to use the API with JavaScript (JS) and React. See [React Hooks](../react-hooks) for all available hooks.',
     examples: [
-      getExample('shipping-option-item/default', ['jsx', 'js']),
+      getExample('shipping-option-item/default', ['jsx']),
       getExample(
         'purchase.checkout.pickup-location-option-item.render-after/default',
-        ['jsx', 'js'],
+        ['jsx'],
       ),
-      getExample('pickup-point-list/default', ['jsx', 'js']),
+      getExample('pickup-point-list/default', ['jsx']),
       getHookExample('delivery-groups'),
     ],
   },