[polaris.shopify.com] Move examples to app directory

.changeset/tough-nails-thank.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Move code examples to examples the app directory to avoid conflicting stylesheets on the website

polaris.shopify.com/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

polaris.shopify.com/app/examples/account-connection-default/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import {Link, AccountConnection} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function AccountConnectionExample() {
+  const [connected, setConnected] = useState(false);
+  const accountName = connected ? 'Jane Appleseed' : '';
+
+  const handleAction = useCallback(() => {
+    setConnected((connected) => !connected);
+  }, []);
+
+  const buttonText = connected ? 'Disconnect' : 'Connect';
+  const details = connected ? 'Account connected' : 'No account connected';
+  const terms = connected ? null : (
+    <p>
+      By clicking <strong>Connect</strong>, you agree to accept Sample App’s{' '}
+      <Link url="Example App">terms and conditions</Link>. You’ll pay a
+      commission rate of 15% on sales made through Sample App.
+    </p>
+  );
+
+  return (
+    <AccountConnection
+      accountName={accountName}
+      connected={connected}
+      title="Example App"
+      action={{
+        content: buttonText,
+        onAction: handleAction,
+      }}
+      details={details}
+      termsOfService={terms}
+    />
+  );
+}
+
+export default withPolarisExample(AccountConnectionExample);

polaris.shopify.com/app/examples/action-list-in-a-popover/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import {Button, Popover, ActionList} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ActionListInPopoverExample() {
+  const [active, setActive] = useState(true);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const handleImportedAction = useCallback(
+    () => console.log('Imported action'),
+    [],
+  );
+
+  const handleExportedAction = useCallback(
+    () => console.log('Exported action'),
+    [],
+  );
+
+  const activator = (
+    <Button onClick={toggleActive} disclosure>
+      More actions
+    </Button>
+  );
+
+  return (
+    <div style={{height: '250px'}}>
+      <Popover
+        active={active}
+        activator={activator}
+        autofocusTarget="first-node"
+        onClose={toggleActive}
+      >
+        <ActionList
+          actionRole="menuitem"
+          items={[
+            {
+              content: 'Import file',
+              onAction: handleImportedAction,
+            },
+            {
+              content: 'Export file',
+              onAction: handleExportedAction,
+            },
+          ]}
+        />
+      </Popover>
+    </div>
+  );
+}
+
+export default withPolarisExample(ActionListInPopoverExample);

polaris.shopify.com/app/examples/action-list-with-a-prefix-and-a-suffix/page.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import {ActionList, Thumbnail, Icon, Avatar} from '@shopify/polaris';
+import {ChevronRightMinor} from '@shopify/polaris-icons';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ActionListWithPrefixSuffixExample() {
+  return (
+    <div style={{height: '250px', maxWidth: '350px'}}>
+      <ActionList
+        actionRole="menuitem"
+        items={[
+          {
+            content: 'Go here',
+            prefix: (
+              <Thumbnail
+                source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
+                size="small"
+                alt="Black leather pet collar"
+              />
+            ),
+            suffix: <Icon source={ChevronRightMinor} />,
+          },
+          {
+            content: 'Or there',
+            prefix: <Avatar customer name="Farrah" size="small" />,
+            suffix: <Icon source={ChevronRightMinor} />,
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+export default withPolarisExample(ActionListWithPrefixSuffixExample);

polaris.shopify.com/app/examples/action-list-with-an-icon-and-a-suffix/page.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import {Button, Popover, ActionList, Icon} from '@shopify/polaris';
+import {ImportMinor, TickSmallMinor, ExportMinor} from '@shopify/polaris-icons';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ActionListWithSuffixExample() {
+  const [active, setActive] = useState(true);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const activator = (
+    <Button onClick={toggleActive} disclosure>
+      More actions
+    </Button>
+  );
+
+  return (
+    <div style={{height: '200px'}}>
+      <Popover
+        active={active}
+        activator={activator}
+        autofocusTarget="first-node"
+        onClose={toggleActive}
+      >
+        <ActionList
+          actionRole="menuitem"
+          items={[
+            {
+              active: true,
+              content: 'Import file',
+              icon: ImportMinor,
+              suffix: <Icon source={TickSmallMinor} />,
+            },
+            {content: 'Export file', icon: ExportMinor},
+          ]}
+        />
+      </Popover>
+    </div>
+  );
+}
+
+export default withPolarisExample(ActionListWithSuffixExample);

polaris.shopify.com/app/examples/action-list-with-destructive-item/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import {Button, Popover, ActionList} from '@shopify/polaris';
+import {ImportMinor, ExportMinor, DeleteMinor} from '@shopify/polaris-icons';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ActionListWithDestructiveItemExample() {
+  const [active, setActive] = useState(true);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const activator = (
+    <Button onClick={toggleActive} disclosure>
+      More actions
+    </Button>
+  );
+
+  return (
+    <div style={{height: '250px'}}>
+      <Popover
+        active={active}
+        activator={activator}
+        autofocusTarget="first-node"
+        onClose={toggleActive}
+      >
+        <ActionList
+          actionRole="menuitem"
+          sections={[
+            {
+              title: 'File options',
+              items: [
+                {
+                  active: true,
+                  content: 'Import file',
+                  icon: ImportMinor,
+                },
+                {content: 'Export file', icon: ExportMinor},
+                {
+                  destructive: true,
+                  content: 'Delete file',
+                  icon: DeleteMinor,
+                },
+              ],
+            },
+          ]}
+        />
+      </Popover>
+    </div>
+  );
+}
+
+export default withPolarisExample(ActionListWithDestructiveItemExample);

polaris.shopify.com/app/examples/action-list-with-help-text/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import {Button, Popover, ActionList} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ActionListWithHelpTextExample() {
+  const [active, setActive] = useState(true);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const activator = (
+    <Button onClick={toggleActive} disclosure>
+      More actions
+    </Button>
+  );
+
+  return (
+    <div style={{height: '250px'}}>
+      <Popover
+        active={active}
+        activator={activator}
+        autofocusTarget="first-node"
+        onClose={toggleActive}
+      >
+        <ActionList
+          actionRole="menuitem"
+          sections={[
+            {
+              items: [
+                {
+                  content: 'Blog posts',
+                  helpText: 'Manage your blog articles',
+                },
+                {
+                  content: 'Blogs',
+                  helpText: 'Manage blogs published to your Online Store',
+                },
+              ],
+            },
+          ]}
+        />
+      </Popover>
+    </div>
+  );
+}
+
+export default withPolarisExample(ActionListWithHelpTextExample);

polaris.shopify.com/app/examples/action-list-with-icons-or-image/page.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import {Button, Popover, ActionList} from '@shopify/polaris';
+import {ImportMinor, ExportMinor} from '@shopify/polaris-icons';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ActionListWithMediaExample() {
+  const [active, setActive] = useState(true);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const activator = (
+    <Button onClick={toggleActive} disclosure>
+      More actions
+    </Button>
+  );
+
+  return (
+    <div style={{height: '200px'}}>
+      <Popover
+        active={active}
+        activator={activator}
+        autofocusTarget="first-node"
+        onClose={toggleActive}
+      >
+        <ActionList
+          actionRole="menuitem"
+          items={[
+            {content: 'Import file', icon: ImportMinor},
+            {content: 'Export file', icon: ExportMinor},
+          ]}
+        />
+      </Popover>
+    </div>
+  );
+}
+
+export default withPolarisExample(ActionListWithMediaExample);

polaris.shopify.com/app/examples/action-list-with-sections/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import {Button, Popover, ActionList} from '@shopify/polaris';
+import {
+  ImportMinor,
+  ExportMinor,
+  EditMinor,
+  DeleteMinor,
+} from '@shopify/polaris-icons';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function SectionedActionListExample() {
+  const [active, setActive] = useState(true);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const activator = (
+    <Button onClick={toggleActive} disclosure>
+      More actions
+    </Button>
+  );
+
+  return (
+    <div style={{height: '250px'}}>
+      <Popover
+        active={active}
+        activator={activator}
+        autofocusTarget="first-node"
+        onClose={toggleActive}
+      >
+        <ActionList
+          actionRole="menuitem"
+          sections={[
+            {
+              title: 'File options',
+              items: [
+                {content: 'Import file', icon: ImportMinor},
+                {content: 'Export file', icon: ExportMinor},
+              ],
+            },
+            {
+              title: 'Bulk actions',
+              items: [
+                {content: 'Edit', icon: EditMinor},
+                {content: 'Delete', icon: DeleteMinor},
+              ],
+            },
+          ]}
+        />
+      </Popover>
+    </div>
+  );
+}
+
+export default withPolarisExample(SectionedActionListExample);