Merge pull request #2544 from Shopify/my/imageBoxDocumentation

POS UI Extensions API Component Documentation: Image and Box

packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Box.doc.ts

@@ -0,0 +1,29 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
+
+const generateCodeBlockForBanner = (title: string, fileName: string) =>
+  generateCodeBlock(title, 'box', fileName);
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Box',
+  description:
+    'A box component is a container that can be used to group and display content in a consistent manner.',
+  isVisualComponent: true,
+  type: 'component',
+  definitions: [
+    {
+      title: 'Box',
+      description: '',
+      type: 'BoxProps',
+    },
+  ],
+  category: 'Components',
+  related: [],
+  thumbnail: 'box-thumbnail.png',
+  defaultExample: {
+    image: 'box-default.png',
+    codeblock: generateCodeBlockForBanner('Box', 'default.example'),
+  },
+};
+
+export default data;

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/box/default.example.ts

@@ -0,0 +1,46 @@
+import {
+  extend,
+  Navigator,
+  Screen,
+  ScrollView,
+  Box,
+  Image,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extend(
+  'pos.home.modal.render',
+  (root) => {
+    const navigator =
+      root.createComponent(Navigator);
+
+    const imageBoxScreen =
+      navigator.createComponent(Screen, {
+        name: 'ImageBox',
+        title: 'ImageBox',
+      });
+
+    const scrollView =
+      imageBoxScreen.createComponent(ScrollView);
+
+    const box = scrollView.createComponent(Box, {
+      blockSize: '100px',
+      inlineSize: '100px',
+      paddingInlineStart: '100',
+      paddingInlineEnd: '100',
+      paddingBlockStart: '100',
+      paddingBlockEnd: '100',
+    });
+
+    const image = box.createComponent(Image, {
+      src: 'example.png',
+      size: 'contain',
+    });
+
+    box.appendChild(image);
+    scrollView.appendChild(box);
+    imageBoxScreen.appendChild(scrollView);
+    navigator.appendChild(imageBoxScreen);
+
+    root.appendChild(navigator);
+  },
+);

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/box/default.example.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {
+  Box,
+  Image,
+  Navigator,
+  Screen,
+  ScrollView,
+  reactExtension,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const ImageModal = () => {
+  return (
+    <Navigator>
+      <Screen name="ImageBox" title="ImageBox">
+        <ScrollView>
+          <Box
+            blockSize="100px"
+            inlineSize="100px"
+            paddingInlineStart="100"
+            paddingInlineEnd="100"
+            paddingBlockEnd="100"
+            paddingBlockStart="100"
+          >
+            <Image
+              src="example.png"
+              size="contain"
+            />
+          </Box>
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  );
+};
+
+export default reactExtension(
+  'pos.home.modal.render',
+  () => <ImageModal />,
+);

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/image/default-example.ts

@@ -4,29 +4,40 @@ import {
   ScrollView,
   Image,
   extension,
+  Box,
 } from '@shopify/ui-extensions/point-of-sale';
 
-export default extension(
-  'pos.home.modal.render',
-  (root, api) => {
-    const image = root.createComponent(Image, {
-      src: 'example.png',
-    });
-
-    const scrollView =
-      root.createComponent(ScrollView);
-    scrollView.append(image);
-
-    const screen = root.createComponent(Screen, {
-      name: 'Image',
-      title: 'Image Example',
-    });
-    screen.append(scrollView);
-
-    const navigator =
-      root.createComponent(Navigator);
-    navigator.append(screen);
-
-    root.append(navigator);
-  },
-);
+export default extension('pos.home.modal.render', (root, api) => {
+  const image = root.createComponent(Image, {
+    src: 'example.png',
+    size: 's',
+  });
+
+  const filledImage = root.createComponent(Image, {
+    src: 'example.png',
+    size: 'cover',
+  });
+
+  const scrollView = root.createComponent(ScrollView);
+  scrollView.append(image);
+
+  const box = scrollView.createComponent(Box, {
+    blockSize: '600px',
+    inlineSize: '600px',
+    padding: '400',
+  });
+
+  box.append(filledImage);
+  scrollView.append(box);
+
+  const screen = root.createComponent(Screen, {
+    name: 'Image',
+    title: 'Image Example',
+  });
+  screen.append(scrollView);
+
+  const navigator = root.createComponent(Navigator);
+  navigator.append(screen);
+
+  root.append(navigator);
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/image/default-example.tsx

@@ -5,6 +5,7 @@ import {
   Screen,
   ScrollView,
   Navigator,
+  Box,
   reactExtension,
 } from '@shopify/ui-extensions-react/point-of-sale';
 
@@ -13,14 +14,16 @@ const SmartGridModal = () => {
     <Navigator>
       <Screen name="Image" title="Image Example">
         <ScrollView>
-          <Image src="example.png" />
+          <Image src="example.png" size="s" />
+          <Box blockSize="600px" inlineSize="600px" padding="400">
+            <Image src="example.png" size="cover" />
+          </Box>
         </ScrollView>
       </Screen>
     </Navigator>
   );
 };
 
-export default reactExtension(
-  'pos.home.modal.render',
-  () => <SmartGridModal />,
-);
+export default reactExtension('pos.home.modal.render', () => (
+  <SmartGridModal />
+));

packages/ui-extensions/src/surfaces/point-of-sale/render/components/Image/Image.ts

@@ -2,13 +2,17 @@ import {createRemoteComponent} from '@remote-ui/core';
 
 export type ImageSize = 's' | 'm' | 'l' | 'xl';
 
+/**
+ * FillResizeMode will apply formatting to the image to fill the container.
+ *
+ * https://reactnative.dev/docs/image#resizemode
+ */
 export type FillResizeMode =
-  /**
-   * FillResizeMode will apply formatting to the image to fill the container.
-   *
-   * https://reactnative.dev/docs/image#resizemode
-   */
-  'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+  | 'cover'
+  | 'contain'
+  | 'stretch'
+  | 'repeat'
+  | 'center';
 
 export interface ImageProps {
   /**

packages/ui-extensions/src/surfaces/point-of-sale/render/components/shared/sizes.ts

@@ -1,3 +1,6 @@
+/**
+ * SizeKeyword maps to predetermined values in POS.
+ */
 export type SizeKeyword =
   | '0'
   | '025'