Update components and types

Author: davejcameron

sample-apps/delivery-customizations/app/routes/app._index.tsx

@@ -104,12 +104,8 @@ export default function Index() {
   const generateProduct = () => fetcher.submit({}, { method: "POST" });
 
   return (
-    <s-page>
-      <TitleBar title="React Router app template">
-        <button variant="primary" onClick={generateProduct}>
-          Generate a product
-        </button>
-      </TitleBar>
+    <s-page heading="React Router app template">
+      <s-button variant="primary" onClick={generateProduct} slot="primary-action">Generate a product</s-button>
       <s-section heading="Congrats on creating a new Shopify app 🎉">
         <s-paragraph>
           This embedded app template uses{" "}

sample-apps/delivery-customizations/app/routes/app.additional.tsx

@@ -2,8 +2,7 @@ import { TitleBar } from "@shopify/app-bridge-react";
 
 export default function AdditionalPage() {
   return (
-    <s-page>
-      <TitleBar title="Additional page"></TitleBar>
+    <s-page heading="Additional page">
       <s-section heading="Multiple pages">
         <s-paragraph>
           The app template comes with an additional page which demonstrates how
@@ -19,7 +18,7 @@ export default function AdditionalPage() {
         <s-paragraph>
           To create your own page and have it show up in the app navigation, add
           a page inside <code>app/routes</code>, and a link to it in the{" "}
-          <code>&lt;NavMenu&gt;</code> component found in{" "}
+          <code>&lt;s-app-nav&gt;</code> component found in{" "}
           <code>app/routes/app.jsx</code>.
         </s-paragraph>
       </s-section>

sample-apps/delivery-customizations/app/routes/app.delivery-customization.$functionId.$id.tsx

@@ -155,10 +155,10 @@ export default function DeliveryCustomization() {
   const navigation = useNavigation();
   const loaderData = useLoaderData<LoaderData>();
 
-  const parsedLoaderData: DeliveryCustomizationData = loaderData?.body 
-    ? JSON.parse(loaderData.body) 
+  const parsedLoaderData: DeliveryCustomizationData = loaderData?.body
+    ? JSON.parse(loaderData.body)
     : { stateProvinceCode: "", message: "" };
-  
+
   const [stateProvinceCode, setStateProvinceCode] = useState(parsedLoaderData.stateProvinceCode);
   const [message, setMessage] = useState(parsedLoaderData.message);
 
@@ -200,20 +200,15 @@ const handleReset = () => {
 
 return (
   <form data-save-bar onSubmit={handleSubmit} onReset={handleReset}>
-    <s-page>
-      <ui-title-bar title="Change delivery message">
-        <button variant="breadcrumb" href="shopify:admin/settings/shipping/customizations">
-          Delivery customizations
-        </button>
-      </ui-title-bar>
+    <s-page heading="Change delivery message">
+        <s-link slot="breadcrumb-actions" href="shopify:admin/settings/shipping/customizations">Delivery customizations</s-link>
 
       {errorBanner}
 
       <s-section>
-        <s-grid gap="base">
+        <s-grid gap="base" gridTemplateColumns="1fr 1fr">
           <s-text-field
             name="stateProvinceCode"
-            type="text"
             label="State/Province code"
             value={stateProvinceCode}
             required
@@ -223,7 +218,6 @@ return (
 
           <s-text-field
             name="message"
-            type="text"
             label="Message"
             value={message}
             required
@@ -235,4 +229,4 @@ return (
     </s-page>
   </form>
 );
-}
+}

sample-apps/delivery-customizations/app/routes/app.tsx

@@ -17,12 +17,10 @@ export default function App() {
 
   return (
     <AppProvider embedded apiKey={apiKey}>
-      <NavMenu>
-        <Link to="/app" rel="home">
-          Home
-        </Link>
-        <Link to="/app/additional">Additional page</Link>
-      </NavMenu>
+      <s-app-nav>
+        <s-link href="/app" rel="home">Home</s-link>
+        <s-link href="/app/additional">Additional page</s-link>
+      </s-app-nav>
       <Outlet />
     </AppProvider>
   );

sample-apps/delivery-customizations/package.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@shopify/api-codegen-preset": "^1.1.1",
+    "@shopify/polaris-types": "^1.0.1",
     "@types/eslint": "^9.6.1",
     "@types/node": "^22.2.0",
     "@types/react": "^18.2.31",

sample-apps/delivery-customizations/tsconfig.json

@@ -16,7 +16,7 @@
     "moduleResolution": "Bundler",
     "target": "ES2022",
     "baseUrl": ".",
-    "types": ["@react-router/node", "vite/client"],
+    "types": ["@react-router/node", "vite/client", "@shopify/polaris-types"],
     "rootDirs": [".", "./.react-router/types"]
   }
 }