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

package/src/surfaces/admin/components/patterns/examples/homepage.jsx

@@ -0,0 +1,691 @@
+// ===
+// Home page pattern
+// ===
+
+import React, { useState } from "react";
+
+export default function HomePage() {
+  const [visible, setVisible] = useState({
+    banner: true,
+    setupGuide: true,
+    calloutCard: true,
+    featuredApps: true,
+  });
+  const [expanded, setExpanded] = useState({
+    setupGuide: true,
+    step1: false,
+    step2: false,
+    step3: false,
+  });
+  const [progress, setProgress] = useState(0);
+  return (
+    <s-page inlineSize="small">
+      {/* === */}
+      {/* Title Bar */}
+      {/* The ui-title-bar on the homepage should not have a title attribute */}
+      {/* Note: ui-title-bar requires AppBridge to render correctly */}
+      {/* === */}
+      <ui-title-bar>
+        <button variant="primary">Create puzzle</button>
+        <section>
+          <button>Browse templates</button>
+          <button>Import image</button>
+        </section>
+      </ui-title-bar>
+
+      {/* === */}
+      {/* Banner */}
+      {/* Use banners sparingly. Only one banner should be visible at a time. */}
+      {/* If dismissed, use local storage or a database entry to avoid showing this section again to the same user. */}
+      {/* === */}
+      {visible.banner && (
+        <s-banner
+          dismissible
+          onDismiss={() => setVisible({ ...visible, banner: false })}
+        >
+          3 of 5 puzzles created.{" "}
+          <s-link href="#">Upgrade to Puzzlify Pro</s-link> to create unlimited
+          puzzles.
+        </s-banner>
+      )}
+
+      {/* === */}
+      {/* Setup Guide */}
+      {/* Keep instructions brief and direct. Only ask merchants for required information. */}
+      {/* If dismissed, use local storage or a database entry to avoid showing this section again to the same user. */}
+      {/* === */}
+      {visible.setupGuide && (
+        <s-section>
+          <s-grid gap="base">
+            {/* Header */}
+            <s-grid gap="small-200">
+              <s-grid
+                gridTemplateColumns="1fr auto auto"
+                gap="small-300"
+                alignItems="center"
+              >
+                <s-heading>Setup Guide</s-heading>
+                <s-button
+                  accessibilityLabel="Dismiss Guide"
+                  onClick={() => setVisible({ ...visible, setupGuide: false })}
+                  variant="tertiary"
+                  tone="neutral"
+                  icon="x"
+                ></s-button>
+                <s-button
+                  accessibilityLabel="Toggle setup guide"
+                  onClick={(e) =>
+                    setExpanded({
+                      ...expanded,
+                      setupGuide: !expanded.setupGuide,
+                    })
+                  }
+                  variant="tertiary"
+                  tone="neutral"
+                  icon={expanded.setupGuide ? "chevron-up" : "chevron-down"}
+                ></s-button>
+              </s-grid>
+              <s-paragraph>
+                Use this personalized guide to get your store ready for sales.
+              </s-paragraph>
+              <s-stack direction="inline" gap="small-200" alignItems="center">
+                <s-paragraph tone="subdued">
+                  {progress} out of 3 steps completed
+                </s-paragraph>
+              </s-stack>
+            </s-grid>
+            {/* Steps Container */}
+            <s-box
+              borderRadius="base"
+              border="base"
+              background="base"
+              display={expanded.setupGuide ? "auto" : "none"}
+            >
+              {/* Step 1 */}
+              <s-box>
+                <s-box padding="small">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                    <s-checkbox
+                      label="Upload an image for your puzzle"
+                      onInput={(e) =>
+                        setProgress((prev) =>
+                          e.target.checked ? prev + 1 : prev - 1,
+                        )
+                      }
+                    ></s-checkbox>
+                    <s-button
+                      onClick={(e) => {
+                        console.log("Toggle step 1 details");
+                        setExpanded({ ...expanded, step1: !expanded.step1 });
+                      }
+                      }
+                      accessibilityLabel="Toggle step 1 details"
+                      variant="tertiary"
+                      icon={expanded.step1 ? "chevron-up" : "chevron-down"}
+                    ></s-button>
+                  </s-grid>
+                </s-box>
+                <s-box
+                  padding="small"
+                  paddingBlockStart="none"
+                  display={expanded.step1 ? "auto" : "none"}
+                >
+                  <s-box
+                    padding="base"
+                    background="subdued"
+                    borderRadius="base"
+                  >
+                    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                      <s-grid gap="small-200">
+                        <s-paragraph>
+                          Start by uploading a high-quality image that will be
+                          used to create your puzzle. For best results, use
+                          images that are at least 1200x1200 pixels.
+                        </s-paragraph>
+                        <s-stack direction="inline" gap="small-200">
+                          <s-button variant="primary">
+                            Upload image
+                          </s-button>
+                          <s-button variant="tertiary" tone="neutral">
+                            Image requirements
+                          </s-button>
+                        </s-stack>
+                      </s-grid>
+                      <s-box maxBlockSize="80px" maxInlineSize="80px">
+                        <s-image
+                          src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+                          alt="Customize checkout illustration"
+                        ></s-image>
+                      </s-box>
+                    </s-grid>
+                  </s-box>
+                </s-box>
+              </s-box>
+              {/* Step 2 */}
+              <s-divider></s-divider>
+              <s-box>
+                <s-box padding="small">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                    <s-checkbox
+                      label="Choose a puzzle template"
+                      onInput={(e) =>
+                        setProgress((prev) =>
+                          e.target.checked ? prev + 1 : prev - 1,
+                        )
+                      }
+                    ></s-checkbox>
+                    <s-button
+                      onClick={(e) =>
+                        setExpanded({ ...expanded, step2: !expanded.step2 })
+                      }
+                      accessibilityLabel="Toggle step 2 details"
+                      variant="tertiary"
+                      icon={expanded.step2 ? "chevron-up" : "chevron-down"}
+                    ></s-button>
+                  </s-grid>
+                </s-box>
+                <s-box
+                  padding="small"
+                  paddingBlockStart="none"
+                  display={expanded.step2 ? "auto" : "none"}
+                >
+                  <s-box
+                    padding="base"
+                    background="subdued"
+                    borderRadius="base"
+                  >
+                    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                      <s-grid gap="small-200">
+                        <s-paragraph>
+                          Select a template for your puzzle - choose between
+                          9-piece (beginner), 16-piece (intermediate), or
+                          25-piece (advanced) layouts.
+                        </s-paragraph>
+                        <s-stack direction="inline" gap="small-200">
+                          <s-button variant="primary">Choose template</s-button>
+                          <s-button variant="tertiary" tone="neutral">
+                            See all templates
+                          </s-button>
+                        </s-stack>
+                      </s-grid>
+                      <s-box maxBlockSize="80px" maxInlineSize="80px">
+                        <s-image
+                          src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+                          alt="Customize checkout illustration"
+                        ></s-image>
+                      </s-box>
+                    </s-grid>
+                  </s-box>
+                </s-box>
+              </s-box>
+              {/* Step 3 */}
+              <s-divider></s-divider>
+              <s-box>
+                <s-box padding="small">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                    <s-checkbox
+                      label="Customize puzzle piece shapes"
+                      onInput={(e) =>
+                        setProgress((prev) =>
+                          e.target.checked ? prev + 1 : prev - 1,
+                        )
+                      }
+                    ></s-checkbox>
+                    <s-button
+                      onClick={(e) =>
+                        setExpanded({ ...expanded, step3: !expanded.step3 })
+                      }
+                      accessibilityLabel="Toggle step 3 details"
+                      variant="tertiary"
+                      icon={expanded.step3 ? "chevron-up" : "chevron-down"}
+                    ></s-button>
+                  </s-grid>
+                </s-box>
+                <s-box
+                  padding="small"
+                  paddingBlockStart="none"
+                  display={expanded.step3 ? "auto" : "none"}
+                >
+                  <s-box
+                    padding="base"
+                    background="subdued"
+                    borderRadius="base"
+                  >
+                    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                      <s-grid gap="small-200">
+                        <s-paragraph>
+                          Make your puzzle unique by customizing the shapes of
+                          individual pieces. Choose from classic, curved, or
+                          themed piece styles.
+                        </s-paragraph>
+                        <s-stack direction="inline" gap="small-200">
+                          <s-button variant="primary">
+                            Customize pieces
+                          </s-button>
+                          <s-button variant="tertiary" tone="neutral">
+                            Learn about piece styles
+                          </s-button>
+                        </s-stack>
+                      </s-grid>
+                      <s-box maxBlockSize="80px" maxInlineSize="80px">
+                        <s-image
+                          src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+                          alt="Customize checkout illustration"
+                        ></s-image>
+                      </s-box>
+                    </s-grid>
+                  </s-box>
+                </s-box>
+              </s-box>
+              {/* Add additional steps here... */}
+            </s-box>
+          </s-grid>
+        </s-section>
+      )}
+
+      {/* === */}
+      {/* Metrics cards */}
+      {/* Your app homepage should provide merchants with quick statistics or status updates that help them understand how the app is performing for them. */}
+      {/* === */}
+      <s-section padding="none">
+        <s-box padding="small">
+          <s-grid
+            gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
+            gap="small"
+          >
+            <s-clickable
+              href="#"
+              paddingBlock="small-400"
+              paddingInline="small-100"
+              borderRadius="base"
+            >
+              <s-grid gap="small-300">
+                <s-heading>Total Designs</s-heading>
+                <s-stack direction="inline" gap="small-200">
+                  <s-text>156</s-text>
+                  <s-badge tone="success" icon="arrow-up">
+                    12%
+                  </s-badge>
+                </s-stack>
+              </s-grid>
+            </s-clickable>
+            <s-divider direction="block"></s-divider>
+            <s-clickable
+              href="#"
+              paddingBlock="small-400"
+              paddingInline="small-100"
+              borderRadius="base"
+            >
+              <s-grid gap="small-300">
+                <s-heading>Units Sold</s-heading>
+                <s-stack direction="inline" gap="small-200">
+                  <s-text>2,847</s-text>
+                  <s-badge tone="warning">0%</s-badge>
+                </s-stack>
+              </s-grid>
+            </s-clickable>
+            <s-divider direction="block"></s-divider>
+            <s-clickable
+              href="#"
+              paddingBlock="small-400"
+              paddingInline="small-100"
+              borderRadius="base"
+            >
+              <s-grid gap="small-300">
+                <s-heading>Return Rate</s-heading>
+                <s-stack direction="inline" gap="small-200">
+                  <s-text>3.2%</s-text>
+                  <s-badge tone="critical" icon="arrow-down">
+                    0.8%
+                  </s-badge>
+                </s-stack>
+              </s-grid>
+            </s-clickable>
+          </s-grid>
+        </s-box>
+      </s-section>
+
+      {/* === */}
+      {/* Callout Card */}
+      {/* If dismissed, use local storage or a database entry to avoid showing this section again to the same user. */}
+      {/* === */}
+      {visible.calloutCard && (
+        <s-section>
+          <s-grid
+            gridTemplateColumns="1fr auto"
+            gap="small-400"
+            alignItems="start"
+          >
+            <s-grid
+              gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
+              gap="base"
+              alignItems="center"
+            >
+              <s-grid gap="small-200">
+                <s-heading>Ready to create your custom puzzle?</s-heading>
+                <s-paragraph>
+                  Start by uploading an image to your gallery or choose from one
+                  of our templates.
+                </s-paragraph>
+                <s-stack direction="inline" gap="small-200" wrap="nowrap">
+                  <s-button onClick={() => console.log("Handle upload here")}>
+                    Upload image
+                  </s-button>
+                  <s-button tone="neutral" variant="tertiary">
+                    Browse templates
+                  </s-button>
+                </s-stack>
+              </s-grid>
+              <s-stack alignItems="center">
+                <s-box
+                  maxInlineSize="200px"
+                  borderRadius="base"
+                  overflow="hidden"
+                >
+                  <s-image
+                    src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+                    alt="Customize checkout illustration"
+                    aspectRatio="1/0.5"
+                  ></s-image>
+                </s-box>
+              </s-stack>
+            </s-grid>
+            <s-button
+              onClick={() => setVisible({ ...visible, calloutCard: false })}
+              icon="x"
+              tone="neutral"
+              variant="tertiary"
+              accessibilityLabel="Dismiss card"
+            ></s-button>
+          </s-grid>
+        </s-section>
+      )}
+
+      {/* === */}
+      {/* Puzzle templates */}
+      {/* === */}
+      <s-section>
+        <s-heading>Puzzle Templates</s-heading>
+        <s-grid
+          gridTemplateColumns="repeat(auto-fit, minmax(155px, 1fr))"
+          gap="base"
+        >
+          {/* Featured template 1 */}
+          <s-box border="base" borderRadius="base" overflow="hidden">
+            <s-clickable
+              href="/puzzles/4-piece"
+              accessibilityLabel="4-pieces puzzle template"
+            >
+              <s-image
+                aspectRatio="1/1"
+                objectFit="cover"
+                alt="Illustration of characters with a 4-piece puzzle"
+                src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png"
+              ></s-image>
+            </s-clickable>
+            <s-divider></s-divider>
+            <s-grid
+              gridTemplateColumns="1fr auto"
+              background="base"
+              padding="small"
+              gap="small"
+              alignItems="center"
+            >
+              <s-heading>4-Pieces</s-heading>
+              <s-button
+                href="/puzzles/4-piece"
+                accessibilityLabel="View 4-pieces puzzle template"
+              >
+                View
+              </s-button>
+            </s-grid>
+          </s-box>
+          {/* Featured template 2 */}
+          <s-box
+            border="base"
+            borderRadius="base"
+            background="transparent"
+            overflow="hidden"
+          >
+            <s-clickable
+              href="/puzzles/9-piece"
+              accessibilityLabel="9-pieces puzzle template"
+            >
+              <s-image
+                aspectRatio="1/1"
+                objectFit="cover"
+                src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"
+              ></s-image>
+            </s-clickable>
+            <s-divider></s-divider>
+            <s-grid
+              gridTemplateColumns="1fr auto"
+              background="base"
+              padding="small"
+              gap="small"
+              alignItems="center"
+            >
+              <s-heading>9-Pieces</s-heading>
+              <s-button
+                href="/puzzles/9-piece"
+                accessibilityLabel="View 9-pieces puzzle template"
+              >
+                View
+              </s-button>
+            </s-grid>
+          </s-box>
+          {/* Featured template 3 */}
+          <s-box
+            border="base"
+            borderRadius="base"
+            background="transparent"
+            overflow="hidden"
+          >
+            <s-clickable
+              href="/puzzles/16-piece"
+              accessibilityLabel="16-pieces puzzle template"
+            >
+              <s-image
+                aspectRatio="1/1"
+                objectFit="cover"
+                src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"
+              ></s-image>
+            </s-clickable>
+            <s-divider></s-divider>
+            <s-grid
+              gridTemplateColumns="1fr auto"
+              background="base"
+              padding="small"
+              gap="small"
+              alignItems="center"
+            >
+              <s-heading>16-Pieces</s-heading>
+              <s-button
+                href="/puzzles/16-piece"
+                accessibilityLabel="View 16-pieces puzzle template"
+              >
+                View
+              </s-button>
+            </s-grid>
+          </s-box>
+        </s-grid>
+        <s-stack
+          direction="inline"
+          alignItems="center"
+          justifyContent="center"
+          paddingBlockStart="base"
+        >
+          <s-link href="/puzzles">See all puzzle templates</s-link>
+        </s-stack>
+      </s-section>
+
+      {/* === */}
+      {/* News */}
+      {/* === */}
+      <s-section>
+        <s-heading>News</s-heading>
+        <s-grid
+          gridTemplateColumns="repeat(auto-fit, minmax(240px, 1fr))"
+          gap="base"
+        >
+          {/* News item 1 */}
+          <s-grid
+            background="base"
+            border="base"
+            borderRadius="base"
+            padding="base"
+            gap="small-400"
+          >
+            <s-text>Jan 21, 2025</s-text>
+            <s-link href="/news/new-shapes-and-themes">
+              <s-heading>New puzzle shapes and themes added</s-heading>
+            </s-link>
+            <s-paragraph>
+              We've added 5 new puzzle piece shapes and 3 seasonal themes to
+              help you create more engaging and unique puzzles for your
+              customers.
+            </s-paragraph>
+          </s-grid>
+          {/* News item 2 */}
+          <s-grid
+            background="base"
+            border="base"
+            borderRadius="base"
+            padding="base"
+            gap="small-400"
+          >
+            <s-text>Nov 6, 2024</s-text>
+            <s-link href="/news/puzzle-difficulty-customization">
+              <s-heading>Puzzle difficulty customization features</s-heading>
+            </s-link>
+            <s-paragraph>
+              Now you can fine-tune the difficulty of your puzzles with new
+              rotation controls, edge highlighting options, and piece
+              recognition settings.
+            </s-paragraph>
+          </s-grid>
+        </s-grid>
+        <s-stack
+          direction="inline"
+          alignItems="center"
+          justifyContent="center"
+          paddingBlockStart="base"
+        >
+          <s-link href="/news">See all news items</s-link>
+        </s-stack>
+      </s-section>
+
+      {/* === */}
+      {/* Featured apps */}
+      {/* If dismissed, use local storage or a database entry to avoid showing this section again to the same user. */}
+      {/* === */}
+      {visible.featuredApps && (
+        <s-section>
+          <s-grid
+            gridTemplateColumns="1fr auto"
+            alignItems="center"
+            paddingBlockEnd="small-400"
+          >
+            <s-heading>Featured apps</s-heading>
+            <s-button
+              onClick={() => setVisible({ ...visible, featuredApps: false })}
+              icon="x"
+              tone="neutral"
+              variant="tertiary"
+              accessibilityLabel="Dismiss featured apps section"
+            ></s-button>
+          </s-grid>
+          <s-grid
+            gridTemplateColumns="repeat(auto-fit, minmax(240px, 1fr))"
+            gap="base"
+          >
+            {/* Featured app 1 */}
+            <s-clickable
+              href="https://apps.shopify.com/flow"
+              border="base"
+              borderRadius="base"
+              padding="base"
+              inlineSize="100%"
+              accessibilityLabel="Download Shopify Flow"
+            >
+              <s-grid
+                gridTemplateColumns="auto 1fr auto"
+                alignItems="stretch"
+                gap="base"
+              >
+                <s-box
+                  border="base"
+                  borderRadius="base"
+                  overflow="hidden"
+                  maxInlineSize="40px"
+                  maxBlockSize="40px"
+                >
+                  <s-image
+                    src="https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png"
+                    alt="Shopify Flow icon"
+                  ></s-image>
+                </s-box>
+                <s-box>
+                  <s-heading>Shopify Flow</s-heading>
+                  <s-paragraph>Free</s-paragraph>
+                  <s-paragraph>
+                    Automate everything and get back to business.
+                  </s-paragraph>
+                </s-box>
+                <s-stack justifyContent="start">
+                  <s-button
+                    href="https://apps.shopify.com/flow"
+                    icon="download"
+                    accessibilityLabel="Download Shopify Flow"
+                  ></s-button>
+                </s-stack>
+              </s-grid>
+            </s-clickable>
+            {/* Featured app 2 */}
+            <s-clickable
+              href="https://apps.shopify.com/planet"
+              border="base"
+              borderRadius="base"
+              padding="base"
+              inlineSize="100%"
+              accessibilityLabel="Download Shopify Planet"
+            >
+              <s-grid
+                gridTemplateColumns="auto 1fr auto"
+                alignItems="stretch"
+                gap="base"
+              >
+                <s-box
+                  border="base"
+                  borderRadius="base"
+                  overflow="hidden"
+                  maxInlineSize="40px"
+                  maxBlockSize="40px"
+                >
+                  <s-image
+                    src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
+                    alt="Shopify Planet icon"
+                  ></s-image>
+                </s-box>
+                <s-box>
+                  <s-heading>Shopify Planet</s-heading>
+                  <s-paragraph>Free</s-paragraph>
+                  <s-paragraph>
+                    Offer carbon-neutral shipping and showcase your commitment.
+                  </s-paragraph>
+                </s-box>
+                <s-stack justifyContent="start">
+                  <s-button
+                    href="https://apps.shopify.com/planet"
+                    icon="download"
+                    accessibilityLabel="Download Shopify Planet"
+                  ></s-button>
+                </s-stack>
+              </s-grid>
+            </s-clickable>
+          </s-grid>
+        </s-section>
+      )}
+    </s-page>
+  );
+}