Merge pull request #2502 from Shopify/remote-dom-admin

Add remote-dom components for Admin

.changeset/wet-laws-explain.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': patch
+'@shopify/ui-extensions': patch
+---
+
+Add new remote-dom components for Admin

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

@@ -1,5 +1,4 @@
 export {extend, extension} from '@shopify/ui-extensions/admin';
 
-export * from './admin/components';
 export * from './admin/hooks';
 export {render, reactExtension} from './admin/render';

packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx

@@ -1,13 +1,10 @@
-import {render, Badge} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Badge,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('Playground', () => <App />);
 
 function App() {
-  return (
-    <Badge
-      tone="info"
-    >
-      Fulfilled
-    </Badge>
-  );
+  return <Badge tone="info">Fulfilled</Badge>;
 }

packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx

@@ -1,11 +1,10 @@
-import {render, Box} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Box,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('Playground', () => <App />);
 
 function App() {
-  return (
-    <Box padding="base">
-      Box
-    </Box>
-  );
+  return <Box padding="base">Box</Box>;
 }

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

@@ -1,6 +1,7 @@
-import {render, Button} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
+import {
+  reactExtension,
+  Button,
+} from '@shopify/ui-extensions-react/admin';
 
 function App() {
   return (
@@ -13,3 +14,8 @@ function App() {
     </Button>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);

packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx

@@ -1,6 +1,9 @@
-import {render, Checkbox} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Checkbox,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('Playground', () => <App />);
 
 function App() {
   return (