Add new components

Author: vividviolet

packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx

@@ -0,0 +1,15 @@
+import {render, Button} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Button
+      onPress={() => {
+        console.log('onPress event');
+      }}
+    >
+      Click here
+    </Button>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx

@@ -0,0 +1,9 @@
+import {render, Image} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Image alt="Pickaxe" source="https://shopify.dev/assets/icons/64/pickaxe-1.png" />
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  render,
+  Link,
+} from '@shopify/ui-extensions-react/admin';
+
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Link href="app:bar">
+      Link to app path
+    </Link>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  render,
+  Link,
+} from '@shopify/ui-extensions-react/admin';
+
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Link href="https://www.shopify.ca/climate/sustainability-fund">
+      Sustainability fund
+    </Link>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  render,
+  Link,
+} from '@shopify/ui-extensions-react/admin';
+
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Link href="/baz">
+      Link relative to current path
+    </Link>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  render,
+  Link,
+} from '@shopify/ui-extensions-react/admin';
+
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Link href="shopify://admin/orders">
+      Shop's orders
+    </Link>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx

@@ -0,0 +1,23 @@
+import {
+  render,
+  Paragraph,
+  Stack,
+  Text,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Stack
+      direction="block"
+      alignment="center"
+      gap
+    >
+      <Paragraph>
+        <Text type="strong">Name:</Text>
+        <Text>Jane Doe</Text>
+      </Paragraph>
+    </Stack>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  render,
+  Select,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  const [value, setValue] = React.useState('2');
+
+  return (
+    <Select
+      label="Country"
+      value={value}
+      onChange={setValue}
+      options={[
+        {
+          value: '1',
+          label: 'Australia',
+        },
+        {
+          value: '2',
+          label: 'Canada',
+        },
+        {
+          value: '3',
+          label: 'France',
+        },
+        {
+          value: '4',
+          label: 'Japan',
+        },
+        {
+          value: '5',
+          label: 'Nigeria',
+        },
+        {
+          value: '6',
+          label: 'United States',
+        },
+      ]}
+    />
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  render,
+  Stack,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Stack gap>
+      <>Child 1</>
+      <>Child 2</>
+      <>Child 3</>
+      <>Child 4</>
+    </Stack>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/util.ts

@@ -0,0 +1,39 @@
+import {
+  createElement,
+  useRef,
+  useLayoutEffect,
+  useCallback,
+  forwardRef,
+  ComponentType,
+} from 'react';
+
+// These are the pieces of the passed-in copy of `react` we use:
+export interface InjectedReact {
+  createElement: typeof createElement;
+  useRef: typeof useRef;
+  useLayoutEffect: typeof useLayoutEffect;
+  useCallback: typeof useCallback;
+  forwardRef: typeof forwardRef;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace shopify {
+    const _createReactRemoteComponent: (
+      methods: InjectedReact,
+      name: string,
+    ) => ComponentType;
+  }
+}
+
+export const createRemoteComponent = (name: string) =>
+  shopify._createReactRemoteComponent(
+    {
+      createElement,
+      useRef,
+      useLayoutEffect,
+      useCallback,
+      forwardRef,
+    },
+    name,
+  );