npm - @shopify/ui-extensions - Versions diffs - 2025.10.0-rc.5 → 2025.10.0-rc.7 - Mend

@shopify/ui-extensions 2025.10.0-rc.5 → 2025.10.0-rc.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (304) hide show

package/src/surfaces/admin/components/patterns/examples/index.html ADDED Viewed

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
+    <title>Pattern</title>
+  </head>
+  <body>
+    <!-- === -->
+    <!-- Index page pattern -->
+    <!-- === -->
+    <s-page>
+      <!-- === -->
+      <!-- Title Bar -->
+      <!-- Note: ui-title-bar requires AppBridge to render correctly -->
+      <!-- === -->
+      <ui-title-bar title="Puzzles">
+        <button variant="primary">Create puzzle</button>
+        <button>Export puzzles</button>
+        <button>Import puzzles</button>
+      </ui-title-bar>
+      <!-- === -->
+      <!-- Empty state -->
+      <!-- This should only be visible if the merchant has not created any puzzles yet. -->
+      <!-- === -->
+      <s-section accessibilityLabel="Empty state section">
+        <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
+          <s-box maxInlineSize="200px" maxBlockSize="200px">
+            <s-image
+              aspectRatio="1/0.5"
+              src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+              alt="A stylized graphic of four characters, each holding a puzzle piece"
+            />
+          </s-box>
+          <s-grid justifyItems="center" maxBlockSize="450px" maxInlineSize="450px">
+            <s-heading>Start creating puzzles</s-heading>
+            <s-paragraph>
+              Create and manage your collection of puzzles for players to enjoy.
+            </s-paragraph>
+            <s-stack
+              gap="small-200"
+              justifyContent="center"
+              padding="base"
+              paddingBlockEnd="none"
+              direction="inline"
+            >
+              <s-button aria-label="Learn more about creating puzzles"> Learn more </s-button>
+              <s-button variant="primary" aria-label="Add a new puzzle"> Create puzzle </s-button>
+            </s-stack>
+          </s-grid>
+        </s-grid>
+      </s-section>
+      <!-- === -->
+      <!-- Table -->
+      <!-- This should only be visible if the merchant has created one or more puzzles. -->
+      <!-- === -->
+      <s-section padding="none" accessibilityLabel="Puzzles table section">
+        <s-table fullwidth>
+          <s-table-header-row>
+            <s-table-header listSlot="primary">Puzzle</s-table-header>
+            <s-table-header>Type</s-table-header>
+            <s-table-header>Created</s-table-header>
+            <s-table-header>Status</s-table-header>
+          </s-table-header-row>
+          <s-table-body>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Mountain View puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image objectFit="cover" src="https://picsum.photos/id/29/80/80"></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Mountain View</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>16-piece</s-table-cell>
+              <s-table-cell>Today</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="success"> Active </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Ocean Sunset puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image objectFit="cover" src="https://picsum.photos/id/12/80/80"></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Ocean Sunset</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>9-piece</s-table-cell>
+              <s-table-cell>Yesterday</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="success"> Active </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Forest Animals puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image objectFit="cover" src="https://picsum.photos/id/324/80/80"></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Forest Animals</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>25-piece</s-table-cell>
+              <s-table-cell>Last week</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="neutral"> Draft </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <!-- Add more rows as needed here -->
+            <!-- If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) -->
+          </s-table-body>
+        </s-table>
+      </s-section>
+    </s-page>
+  </body>
+</html>

package/src/surfaces/admin/components/patterns/examples/index.jsx ADDED Viewed

@@ -0,0 +1,162 @@
+// ===
+// Index page pattern
+// ===
+export default function IndexPage() {
+  return (
+    <s-page>
+      {/* === */}
+      {/* Title Bar */}
+      {/* Note: ui-title-bar requires AppBridge to render correctly */}
+      {/* === */}
+      <ui-title-bar title="Puzzles">
+        <button variant="primary">Create puzzle</button>
+        <button>Export puzzles</button>
+        <button>Import puzzles</button>
+      </ui-title-bar>
+      {/* === */}
+      {/* Empty state */}
+      {/* This should only be visible if the merchant has not created any puzzles yet. */}
+      {/* === */}
+      <s-section accessibilityLabel="Empty state section">
+        <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
+          <s-box maxInlineSize="200px" maxBlockSize="200px">
+            <s-image
+              aspectRatio="1/0.5"
+              src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+              alt="A stylized graphic of four characters, each holding a puzzle piece"
+            />
+          </s-box>
+          <s-grid
+            justifyItems="center"
+            maxBlockSize="450px"
+            maxInlineSize="450px"
+          >
+            <s-heading>Start creating puzzles</s-heading>
+            <s-paragraph>
+              Create and manage your collection of puzzles for players to enjoy.
+            </s-paragraph>
+            <s-stack
+              gap="small-200"
+              justifyContent="center"
+              padding="base"
+              paddingBlockEnd="none"
+              direction="inline"
+            >
+              <s-button aria-label="Learn more about creating puzzles">
+                Learn more
+              </s-button>
+              <s-button variant="primary" aria-label="Add a new puzzle">
+                Create puzzle
+              </s-button>
+            </s-stack>
+          </s-grid>
+        </s-grid>
+      </s-section>
+      {/* === */}
+      {/* Table */}
+      {/* This should only be visible if the merchant has created one or more puzzles. */}
+      {/* === */}
+      <s-section padding="none" accessibilityLabel="Puzzles table section">
+        <s-table fullwidth>
+          <s-table-header-row>
+            <s-table-header listSlot="primary">Puzzle</s-table-header>
+            <s-table-header>Type</s-table-header>
+            <s-table-header>Created</s-table-header>
+            <s-table-header>Status</s-table-header>
+          </s-table-header-row>
+          <s-table-body>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Mountain View puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image
+                      objectFit="cover"
+                      src="https://picsum.photos/id/29/80/80"
+                    ></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Mountain View</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>16-piece</s-table-cell>
+              <s-table-cell>Today</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="success">
+                  Active
+                </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Ocean Sunset puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image
+                      objectFit="cover"
+                      src="https://picsum.photos/id/12/80/80"
+                    ></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Ocean Sunset</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>9-piece</s-table-cell>
+              <s-table-cell>Yesterday</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="success">
+                  Active
+                </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Forest Animals puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image
+                      objectFit="cover"
+                      src="https://picsum.photos/id/324/80/80"
+                    ></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Forest Animals</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>25-piece</s-table-cell>
+              <s-table-cell>Last week</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="neutral">
+                  Draft
+                </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            {/* Add more rows as needed here */}
+            {/* If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) */}
+          </s-table-body>
+        </s-table>
+      </s-section>
+    </s-page>
+  );
+}

package/src/surfaces/admin/components/patterns/examples/settings.html ADDED Viewed

@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
+    <title>Pattern</title>
+  </head>
+  <body>
+    <!-- === -->
+    <!-- Settings page pattern -->
+    <!-- === -->
+    <form data-save-bar onSubmit="" onReset="">
+      <s-page>
+        <!-- === -->
+        <!-- Title Bar -->
+        <!-- Note: ui-title-bar requires AppBridge to render correctly -->
+        <!-- === -->
+        <ui-title-bar title="Settings"></ui-title-bar>
+        <!-- === -->
+        <!-- Store settings -->
+        <!-- === -->
+        <s-grid gap="base">
+          <s-grid gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr" gap="base">
+            <!-- Left column -->
+            <s-box>
+              <s-heading>Store Settings</s-heading>
+              <s-paragraph>Manage your store information</s-paragraph>
+            </s-box>
+            <!-- Right column -->
+            <s-section accessibilityLabel="Store information section">
+              <!-- Card-like container with border and padding -->
+              <s-box padding="base" border="base" borderStyle="solid" borderRadius="base">
+                <s-grid gap="base">
+                  <s-stack direction="inline" justifyContent="space-between">
+                    <s-stack direction="inline" alignItems="center" gap="small-200">
+                      <s-icon type="store"></s-icon>
+                      <s-paragraph>Puzzlify Store</s-paragraph>
+                    </s-stack>
+                    <!-- Icon-only button requires accessibilityLabel for screen readers -->
+                    <s-button
+                      icon="edit"
+                      variant="tertiary"
+                      tone="neutral"
+                      accessibilityLabel="Edit store name"
+                    ></s-button>
+                  </s-stack>
+                  <s-divider></s-divider>
+                  <s-stack direction="inline" justifyContent="space-between" alignItems="center">
+                    <s-stack direction="inline" alignItems="center" gap="small-200">
+                      <s-icon type="location"></s-icon>
+                      <s-box>
+                        <s-paragraph>Business address</s-paragraph>
+                        <s-paragraph>Puzzle Retailer</s-paragraph>
+                      </s-box>
+                    </s-stack>
+                    <s-box>
+                      <!-- Icon-only button requires accessibilityLabel for screen readers -->
+                      <s-button
+                        icon="edit"
+                        variant="tertiary"
+                        tone="neutral"
+                        accessibilityLabel="Edit business address"
+                      ></s-button>
+                    </s-box>
+                  </s-stack>
+                </s-grid>
+              </s-box>
+            </s-section>
+          </s-grid>
+          <!-- === -->
+          <!-- Product defaults -->
+          <!-- === -->
+          <s-grid gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr" gap="base">
+            <!-- Left column -->
+            <s-box>
+              <s-heading>Product Defaults</s-heading>
+              <s-paragraph>Set default options for new puzzles</s-paragraph>
+            </s-box>
+            <!-- Right column -->
+            <s-section accessibilityLabel="Product defaults section">
+              <s-grid gap="base">
+                <s-grid gap="base">
+                  <s-select label="Default puzzle size" name="default-puzzle-size">
+                    <s-option value="small">Small (9" x 9")</s-option>
+                    <s-option value="medium" selected> Medium (18" x 24") </s-option>
+                    <s-option value="large">Large (24" x 36")</s-option>
+                  </s-select>
+                  <s-select label="Default piece count" name="default-piece-count">
+                    <s-option value="250" selected> 250 pieces (Easy) </s-option>
+                    <s-option value="500">500 pieces (Medium)</s-option>
+                    <s-option value="1000">1000 pieces (Hard)</s-option>
+                    <s-option value="2000">2000 pieces (Expert)</s-option>
+                  </s-select>
+                  <s-select label="Default material" name="default-material">
+                    <s-option value="standard" selected> Standard cardboard </s-option>
+                    <s-option value="premium">Premium cardboard</s-option>
+                    <s-option value="wooden">Wooden pieces</s-option>
+                  </s-select>
+                  <!-- switches (rather than checkboxes) should be used to enable/disable a single option -->
+                  <s-switch
+                    label="Include reference image"
+                    name="include-reference-image"
+                    details="Ship a reference image with the puzzle"
+                  ></s-switch>
+                </s-grid>
+              </s-grid>
+            </s-section>
+          </s-grid>
+          <!-- === -->
+          <!-- Customer experience -->
+          <!-- === -->
+          <s-grid gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr" gap="base">
+            <!-- Left column -->
+            <s-box>
+              <s-heading>Puzzle Experience</s-heading>
+              <s-paragraph> Configure how customers interact with your puzzles </s-paragraph>
+            </s-box>
+            <!-- Right column -->
+            <s-section accessibilityLabel="Puzzle experience settings">
+              <s-grid gap="base">
+                <s-choice-list
+                  label="Default puzzle packaging style"
+                  name="packaging-style"
+                  details="This will be used for all new puzzles"
+                >
+                  <s-choice
+                    label="Standard box with preview image"
+                    value="standard-preview"
+                    selected
+                  ></s-choice>
+                  <s-choice label="Mystery box (no preview)" value="mystery"></s-choice>
+                  <s-choice label="Gift packaging with ribbon" value="gift"></s-choice>
+                  <s-choice label="Eco-friendly minimal packaging" value="eco"></s-choice>
+                </s-choice-list>
+              </s-grid>
+            </s-section>
+          </s-grid>
+          <!-- === -->
+          <!-- Catalog settings -->
+          <!-- === -->
+          <s-grid gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr" gap="base">
+            <!-- Left column -->
+            <s-box>
+              <s-heading>Catalog Settings</s-heading>
+              <s-paragraph>Configure your online puzzle catalog</s-paragraph>
+            </s-box>
+            <!-- Right column -->
+            <s-section accessibilityLabel="Catalog settings section">
+              <s-grid gap="base">
+                <s-grid gap="base">
+                  <s-select label="Default sorting" name="default-sorting">
+                    <s-option value="newest" selected> Newest first </s-option>
+                    <s-option value="bestselling">Best selling</s-option>
+                    <s-option value="price-low">Price: Low to high</s-option>
+                    <s-option value="price-high">Price: High to low</s-option>
+                  </s-select>
+                  <s-choice-list label="Display options" name="display-options" multiple>
+                    <s-choice
+                      label="Show difficulty levels"
+                      value="show-difficulty"
+                      selected
+                    ></s-choice>
+                    <s-choice label="Show piece counts" value="show-piece-count"></s-choice>
+                    <s-choice label="Show dimensions" value="show-dimensions"></s-choice>
+                  </s-choice-list>
+                </s-grid>
+              </s-grid>
+            </s-section>
+          </s-grid>
+          <!-- === -->
+          <!-- Order notifications -->
+          <!-- === -->
+          <s-grid gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr" gap="base">
+            <!-- Left column -->
+            <s-box>
+              <s-heading>Order Notifications</s-heading>
+              <s-paragraph>Manage your business notifications</s-paragraph>
+            </s-box>
+            <!-- Right column -->
+            <s-section accessibilityLabel="Order notifications section">
+              <s-grid gap="base">
+                <s-grid gap="base">
+                  <s-select label="Notification frequency" name="notification-frequency">
+                    <s-option value="immediately" selected> Immediately </s-option>
+                    <s-option value="hourly">Hourly digest</s-option>
+                    <s-option value="daily">Daily digest</s-option>
+                  </s-select>
+                  <s-choice-list label="Notifications type" name="notifications-type" multiple>
+                    <s-choice label="New order notifications" value="new-order" selected></s-choice>
+                    <s-choice label="Low stock alerts" value="low-stock"></s-choice>
+                    <s-choice
+                      label="Customer review notifications"
+                      value="customer-review"
+                    ></s-choice>
+                    <s-choice label="Shipping updates" value="shipping-updates"></s-choice>
+                  </s-choice-list>
+                </s-grid>
+              </s-grid>
+            </s-section>
+          </s-grid>
+          <!-- === -->
+          <!-- Shipping settings -->
+          <!-- === -->
+          <s-grid gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr" gap="base">
+            <!-- Left column -->
+            <s-box>
+              <s-heading>Shipping</s-heading>
+              <s-paragraph>Configure shipping settings</s-paragraph>
+            </s-box>
+            <!-- Right column -->
+            <s-section accessibilityLabel="Shipping settings section">
+              <s-grid gap="base">
+                <s-select label="Default shipping method" name="default-shipping-method">
+                  <s-option value="standard" selected> Standard shipping </s-option>
+                  <s-option value="express">Express shipping</s-option>
+                  <s-option value="free">Free shipping (over $50)</s-option>
+                </s-select>
+                <s-choice-list label="Shipping preferences" name="shipping-preferences" multiple>
+                  <s-choice
+                    label="Calculate shipping based on weight"
+                    value="calculate-shipping"
+                    selected
+                  ></s-choice>
+                  <s-choice
+                    label="Offer international shipping"
+                    value="international-shipping"
+                  ></s-choice>
+                  <s-choice
+                    label="Show estimated delivery dates"
+                    value="estimated-delivery-dates"
+                  ></s-choice>
+                </s-choice-list>
+              </s-grid>
+            </s-section>
+          </s-grid>
+        </s-grid>
+      </s-page>
+    </form>
+  </body>
+</html>