Copy Admin components over to ui-extension/admin surface

.changeset/itchy-baboons-obey.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': patch
+'@shopify/ui-extensions-react': patch
+---
+
+Add Admin surface to packages

packages/ui-extensions-react/loom.config.ts

@@ -5,5 +5,6 @@ import {defaultProjectPlugin} from '../../config/loom';
 export default createPackage((pkg) => {
   pkg.entry({root: './src/index.ts'});
   pkg.entry({name: 'checkout', root: './src/surfaces/checkout.ts'});
+  pkg.entry({name: 'admin', root: './src/surfaces/admin.ts'});
   pkg.use(defaultProjectPlugin({react: true}));
 });

packages/ui-extensions-react/package.json

@@ -16,6 +16,9 @@
     "*": {
       "checkout": [
         "./build/ts/surfaces/checkout.d.ts"
+      ],
+      "admin": [
+        "./build/ts/surfaces/admin.d.ts"
       ]
     }
   },
@@ -31,6 +34,12 @@
       "esnext": "./build/esnext/surfaces/checkout.esnext",
       "import": "./build/esm/surfaces/checkout.mjs",
       "require": "./build/cjs/surfaces/checkout.js"
+    },
+    "./admin": {
+      "types": "./build/ts/surfaces/admin.d.ts",
+      "esnext": "./build/esnext/surfaces/admin.esnext",
+      "import": "./build/esm/surfaces/admin.mjs",
+      "require": "./build/cjs/surfaces/admin.js"
     }
   },
   "dependencies": {

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

@@ -0,0 +1,5 @@
+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.ts

@@ -0,0 +1,49 @@
+export {Badge} from './components/Badge/Badge';
+export type {BadgeProps} from './components/Badge/Badge';
+export {Banner} from './components/Banner/Banner';
+export type {BannerProps} from './components/Banner/Banner';
+export {BlockStack} from './components/BlockStack/BlockStack';
+export type {BlockStackProps} from './components/BlockStack/BlockStack';
+export {Button} from './components/Button/Button';
+export type {ButtonProps} from './components/Button/Button';
+export {Card} from './components/Card/Card';
+export type {CardProps} from './components/Card/Card';
+export {CardSection} from './components/CardSection/CardSection';
+export type {CardSectionProps} from './components/CardSection/CardSection';
+export {Checkbox} from './components/Checkbox/Checkbox';
+export type {CheckboxProps} from './components/Checkbox/Checkbox';
+export {Heading} from './components/Heading/Heading';
+export type {HeadingProps} from './components/Heading/Heading';
+export {Icon} from './components/Icon/Icon';
+export type {IconProps} from './components/Icon/Icon';
+export {InlineStack} from './components/InlineStack/InlineStack';
+export type {InlineStackProps} from './components/InlineStack/InlineStack';
+export {Modal} from './components/Modal/Modal';
+export type {ModalProps} from './components/Modal/Modal';
+export {Link} from './components/Link/Link';
+export type {LinkProps} from './components/Link/Link';
+export {OptionList} from './components/OptionList/OptionList';
+export type {OptionListProps} from './components/OptionList/OptionList';
+export {Pressable} from './components/Pressable/Pressable';
+export type {PressableProps} from './components/Pressable/Pressable';
+export {Radio} from './components/Radio/Radio';
+export type {RadioProps} from './components/Radio/Radio';
+export {ResourceItem} from './components/ResourceItem/ResourceItem';
+export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
+export {ResourceList} from './components/ResourceList/ResourceList';
+export type {ResourceListProps} from './components/ResourceList/ResourceList';
+export {Select} from './components/Select/Select';
+export type {SelectProps} from './components/Select/Select';
+export {Spinner} from './components/Spinner/Spinner';
+export type {SpinnerProps} from './components/Spinner/Spinner';
+export {StackItem} from './components/StackItem/StackItem';
+export type {StackItemProps} from './components/StackItem/StackItem';
+export {Text} from './components/Text/Text';
+export type {TextProps} from './components/Text/Text';
+export {TextBlock} from './components/TextBlock/TextBlock';
+export type {TextBlockProps} from './components/TextBlock/TextBlock';
+export {TextField} from './components/TextField/TextField';
+export type {TextFieldProps} from './components/TextField/TextField';
+export {Thumbnail} from './components/Thumbnail/Thumbnail';
+export type {ThumbnailProps} from './components/Thumbnail/Thumbnail';
+export type {DestructableAction, DisableableAction} from './components/shared';

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

@@ -0,0 +1,9 @@
+import {Badge as BaseBadge} from '@shopify/ui-extensions/admin';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export const Badge = createRemoteReactComponent(BaseBadge);
+
+export type BadgeProps = ReactPropsFromRemoteComponentType<typeof BaseBadge>;

packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/Badge.example.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {reactExtension, Badge} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return <Badge message="Example message" status="success" />;
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,8 @@
+import {Banner as BaseBanner} from '@shopify/ui-extensions/admin';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export const Banner = createRemoteReactComponent(BaseBanner);
+export type BannerProps = ReactPropsFromRemoteComponentType<typeof BaseBanner>;

packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/Banner.example.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {reactExtension, Banner} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <Banner
+      action={{
+        onAction: () => console.log('Pressed the action'),
+        content: 'Press me',
+      }}
+      status="warning"
+      title="This is a warning"
+      onDismiss={() => console.log('Closed')}
+    >
+      Here is the warning.
+    </Banner>
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,10 @@
+import {BlockStack as BaseBlockStack} from '@shopify/ui-extensions/admin';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export const BlockStack = createRemoteReactComponent(BaseBlockStack);
+export type BlockStackProps = ReactPropsFromRemoteComponentType<
+  typeof BaseBlockStack
+>;

packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/BlockStack.example.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {reactExtension, BlockStack, Text} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <BlockStack inlineAlignment="center" spacing="loose">
+      <Text>Items to stack</Text>
+      <Text>Items to stack</Text>
+      <Text>Items to stack</Text>
+    </BlockStack>
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,5 @@
+import {Button as BaseButton} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export {type ButtonProps} from '@shopify/ui-extensions/admin';
+export const Button = createRemoteReactComponent(BaseButton);

packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/Button.example.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {reactExtension, Button} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <Button
+      title="Settings"
+      kind="primary"
+      appearance="critical"
+      size="large"
+      inlineSize="fill"
+      accessibilityLabel="open settings"
+      disabled={false}
+      onPress={() => console.log('Pressed')}
+    />
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,8 @@
+import {Card as BaseCard} from '@shopify/ui-extensions/admin';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export const Card = createRemoteReactComponent(BaseCard);
+export type CardProps = ReactPropsFromRemoteComponentType<typeof BaseCard>;

packages/ui-extensions-react/src/surfaces/admin/components/Card/examples/Card.example.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {reactExtension, Card} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return <Card>This is the best extension.</Card>;
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,10 @@
+import {CardSection as BaseCardSection} from '@shopify/ui-extensions/admin';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export const CardSection = createRemoteReactComponent(BaseCardSection);
+export type CardSectionProps = ReactPropsFromRemoteComponentType<
+  typeof BaseCardSection
+>;

packages/ui-extensions-react/src/surfaces/admin/components/CardSection/examples/CardSection.example.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {reactExtension, Card, CardSection} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <Card>
+      <CardSection title="Sectional">This is the best section.</CardSection>
+      <CardSection title="Loveseat">No, this is the best section.</CardSection>
+    </Card>
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,5 @@
+import {Checkbox as BaseCheckbox} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const Checkbox = createRemoteReactComponent(BaseCheckbox);
+export type {CheckboxProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/Checkbox.example.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  extend,
+  render,
+  ExtensionPoint,
+  Checkbox,
+} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <Checkbox
+      label="Opt in to something cool"
+      checked
+      onChange={() => console.log('Checked')}
+    />
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,5 @@
+import {Heading as BaseHeading} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const Heading = createRemoteReactComponent(BaseHeading);
+export type {HeadingProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/Heading.example.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {reactExtension, Heading} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <Heading id="profile_heading" level={3}>
+      Heading
+    </Heading>
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,5 @@
+import {Icon as BaseIcon} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const Icon = createRemoteReactComponent(BaseIcon);
+export type {IconProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/Icon.example.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {reactExtension, Icon} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return <Icon source="cancelSmallMinor" />;
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,5 @@
+import {InlineStack as BaseInlineStack} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const InlineStack = createRemoteReactComponent(BaseInlineStack);
+export type {InlineStackProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/InlineStack.example.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {reactExtension, InlineStack, Text} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <InlineStack inlineAlignment="center" spacing="loose">
+      <Text>Items to stack</Text>
+      <Text>Items to stack</Text>
+      <Text>Items to stack</Text>
+    </InlineStack>
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,8 @@
+import {Link as BaseLink} from '@shopify/ui-extensions/admin';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export const Link = createRemoteReactComponent(BaseLink);
+export type LinkProps = ReactPropsFromRemoteComponentType<typeof BaseLink>;

packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/AbsoluteLink.example.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {reactExtension, Link} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <Link url="https://shopify.com" external>
+      The best product ever!
+    </Link>
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/LogLink.example.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {reactExtension, Link} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <Link onPress={() => console.log('I was pressed.')}>I don't do much.</Link>
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/RelativeLink.example.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {reactExtension, Link} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return <Link url="/admin/products/12345">View product</Link>;
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,8 @@
+import {Modal as BaseModal} from '@shopify/ui-extensions/admin';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export const Modal = createRemoteReactComponent(BaseModal);
+export type ModalProps = ReactPropsFromRemoteComponentType<typeof BaseModal>;

packages/ui-extensions-react/src/surfaces/admin/components/Modal/examples/Modal.example.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {reactExtension, Modal} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <Modal open title="The best modal" onClose={() => console.log('modal closed!')}>
+      This is the content of the modal.
+    </Modal>
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

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

@@ -0,0 +1,5 @@
+import {OptionList as BaseOptionList} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const OptionList = createRemoteReactComponent(BaseOptionList);
+export type {OptionListProps} from '@shopify/ui-extensions/admin';