Merge pull request #2791 from Shopify/customer-account-doc----add-preact-examples-for-components

customer account doc -  add preact examples for components

Author: brianshen1990

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

@@ -35,6 +35,11 @@ const data: ReferenceEntityTemplateSchema = {
     codeblock: {
       title: 'Basic CustomerAccountAction',
       tabs: [
+        {
+          title: 'Preact',
+          code: './examples/basic-CustomerAccountAction-preact.example.tsx',
+          language: 'tsx',
+        },
         {
           title: 'JS',
           code: './examples/basic-CustomerAccountAction-js.example.ts',

packages/ui-extensions/src/surfaces/customer-account/components/CustomerAccountAction/examples/basic-CustomerAccountAction-preact.example.tsx

@@ -0,0 +1,16 @@
+import {render} from 'preact';
+
+export default function extension() {
+  render(<App />, document.body);
+}
+
+function App() {
+  return (
+    <s-customer-account-action heading="Extension title">
+      Extension content
+      <s-button slot="primaryAction" onClick={() => shopify.close()}>
+        Click to close
+      </s-button>
+    </s-customer-account-action>
+  );
+}

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

@@ -23,6 +23,11 @@ const data: ReferenceEntityTemplateSchema = {
     codeblock: {
       title: 'Basic ImageGroup',
       tabs: [
+        {
+          title: 'Preact',
+          code: './examples/basic-ImageGroup-preact.example.tsx',
+          language: 'tsx',
+        },
         {
           title: 'JS',
           code: './examples/basic-ImageGroup-js.example.ts',

packages/ui-extensions/src/surfaces/customer-account/components/ImageGroup/examples/basic-ImageGroup-preact.example.tsx

@@ -0,0 +1,15 @@
+import {render} from 'preact';
+
+export default function extension() {
+  render(<App />, document.body);
+}
+
+function App() {
+  return (
+    <s-image-group>
+      <s-image src="../assets/flower.jpg" />
+      <s-image src="../assets/flower.jpg" />
+      <s-image src="../assets/flower.jpg" />
+    </s-image-group>
+  );
+}

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

@@ -41,6 +41,11 @@ const data: ReferenceEntityTemplateSchema = {
     codeblock: {
       title: 'Basic Page',
       tabs: [
+        {
+          title: 'Preact',
+          code: './examples/basic-Page-preact.example.tsx',
+          language: 'tsx',
+        },
         {
           title: 'JS',
           code: './examples/basic-Page-js.example.ts',

packages/ui-extensions/src/surfaces/customer-account/components/Page/examples/basic-Page-preact.example.tsx

@@ -0,0 +1,36 @@
+import {render} from 'preact';
+
+export default function extension() {
+  render(<App />, document.body);
+}
+
+function App() {
+  return (
+    <s-page heading="Order #1411" subheading="Confirmed Oct 5">
+      <s-button
+        slot="primaryAction"
+        onClick={() => console.log('Primary action')}
+      >
+        Primary action
+      </s-button>
+      <s-button
+        slot="secondaryActions"
+        onClick={() => console.log('Secondary action 1')}
+      >
+        Secondary action 1
+      </s-button>
+      <s-button
+        slot="secondaryActions"
+        onClick={() => console.log('Secondary action 2')}
+      >
+        Secondary action 2
+      </s-button>
+      <s-button
+        slot="breadcrumbActions"
+        accessibilitylabel="Button"
+        href="shopify://customer-account/orders"
+      />
+      Content
+    </s-page>
+  );
+}