Merge pull request #2006 from Shopify/js-section-scrollview

Added docs and examples for scrollview and section

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

@@ -1,4 +1,8 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
+
+const generateCodeBlockForComponent = (title: string, fileName: string) =>
+  generateCodeBlock(title, 'scroll-view', fileName);
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'ScrollView',
@@ -9,6 +13,9 @@ const data: ReferenceEntityTemplateSchema = {
   definitions: [],
   category: 'Components',
   related: [],
+  defaultExample: {
+    codeblock: generateCodeBlockForComponent('ScrollView', 'default.example'),
+  },
 };
 
 export default data;

packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Secion.doc.ts → packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Section.doc.ts

@@ -1,4 +1,8 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
+
+const generateCodeBlockForComponent = (title: string, fileName: string) =>
+  generateCodeBlock(title, 'section', fileName);
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Section',
@@ -12,9 +16,17 @@ const data: ReferenceEntityTemplateSchema = {
       description: '',
       type: 'SectionProps',
     },
+    {
+      title: 'SectionHeaderAction',
+      description: '',
+      type: 'SectionHeaderAction',
+    },
   ],
   category: 'Components',
   related: [],
+  defaultExample: {
+    codeblock: generateCodeBlockForComponent('Section', 'default.example'),
+  },
 };
 
 export default data;

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

@@ -0,0 +1,42 @@
+import {
+  extension,
+  Screen,
+  ScrollView,
+  Stack,
+  Navigator,
+  Text,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension(
+  'pos.home.modal.render',
+  (root) => {
+    const screen = root.createComponent(Screen, {
+      name: 'ScrollView',
+      title: 'ScrollView',
+    });
+
+    const scrollView =
+      root.createComponent(ScrollView);
+
+    for (let i = 0; i < 25; i++) {
+      const stack = root.createComponent(Stack, {
+        paddingVertical: 'Small',
+        direction: 'vertical',
+        paddingHorizontal: 'Small',
+      });
+
+      const textElement =
+        root.createComponent(Text);
+      textElement.append(`Text element ${i}`);
+
+      stack.append(textElement);
+      scrollView.append(stack);
+    }
+
+    screen.append(scrollView);
+    const navigator =
+      root.createComponent(Navigator);
+    navigator.append(screen);
+    root.append(navigator);
+  },
+);

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

@@ -0,0 +1,47 @@
+import React, {ReactNode} from 'react';
+import {
+  Text,
+  Navigator,
+  Screen,
+  ScrollView,
+  Stack,
+  reactExtension,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const ModalComponent = () => {
+  const textElement = (
+    count: number,
+  ): ReactNode => {
+    return (
+      <Stack
+        direction="vertical"
+        paddingHorizontal="Small"
+        paddingVertical="Small"
+      >
+        <Text>{`Text element ${count}`}</Text>
+      </Stack>
+    );
+  };
+
+  return (
+    <Navigator>
+      <Screen
+        title="ScrollView"
+        name="ScrollView"
+      >
+        <ScrollView>
+          {Array.from(Array(25)).map((_, count) =>
+            textElement(count),
+          )}
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  );
+};
+
+export default reactExtension(
+  'pos.home.modal.render',
+  () => {
+    return <ModalComponent />;
+  },
+);

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

@@ -0,0 +1,74 @@
+import {
+  extension,
+  Screen,
+  ScrollView,
+  Stack,
+  Navigator,
+  Text,
+  Section,
+  Selectable,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension(
+  'pos.home.modal.render',
+  (root, api) => {
+    const screen = root.createComponent(Screen, {
+      name: 'Section',
+      title: 'Section',
+    });
+
+    const scrollView =
+      root.createComponent(ScrollView);
+
+    const section = root.createComponent(
+      Section,
+      {
+        title: 'Section',
+        action: {
+          title: 'Show toast',
+          onPress: () =>
+            api.toast.show('Hello world!'),
+        },
+      },
+    );
+
+    for (let i = 1; i < 5; i++) {
+      const selectable = root.createComponent(
+        Selectable,
+        {
+          onPress: () =>
+            api.toast.show(`Item ${i}!`),
+        },
+      );
+      const stack = root.createComponent(Stack, {
+        paddingVertical: 'Small',
+        direction: 'vertical',
+        paddingHorizontal: 'Small',
+      });
+
+      const textElement =
+        root.createComponent(Text);
+      textElement.append(`Item ${i}`);
+
+      stack.append(textElement);
+      selectable.append(stack);
+      section.append(selectable);
+    }
+
+    const rootStack = root.createComponent(
+      Stack,
+      {
+        paddingHorizontal: 'HalfPoint',
+        direction: 'vertical',
+      },
+    );
+    rootStack.append(section);
+
+    scrollView.append(rootStack);
+    screen.append(scrollView);
+    const navigator =
+      root.createComponent(Navigator);
+    navigator.append(screen);
+    root.append(navigator);
+  },
+);

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Text, Navigator, Screen, ScrollView, Stack, reactExtension, Section, useApi, Selectable } from '@shopify/ui-extensions-react/point-of-sale'
+
+const ModalComponent = () => {
+  const api = useApi<'pos.home.modal.render'>();
+
+  return (
+    <Navigator>
+      <Screen title="Section" name="Section">
+        <ScrollView>
+          <Stack direction="vertical" paddingHorizontal="HalfPoint">
+            <Section title='Items' action={{title: "Show toast", onPress: () => api.toast.show('Hello world!')}}>
+              <Selectable onPress={() => api.toast.show('Item 1!')}>
+                <Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
+                  <Text>Item 1</Text>
+                </Stack>  
+              </Selectable>
+              <Selectable onPress={() => api.toast.show('Item 2!')}>
+                <Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
+                  <Text>Item 2</Text>
+                </Stack>  
+              </Selectable>
+              <Selectable onPress={() => api.toast.show('Item 3!')}>
+                <Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
+                  <Text>Item 3</Text>
+                </Stack>  
+              </Selectable>
+              <Selectable onPress={() => api.toast.show('Item 4!')}>
+                <Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
+                  <Text>Item 4</Text>
+                </Stack>  
+              </Selectable>
+            </Section>
+          </Stack>
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  )
+}
+
+export default reactExtension('pos.home.modal.render', () => {
+  return <ModalComponent />
+}) 

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

@@ -1,12 +1,32 @@
 import {createRemoteComponent} from '@remote-ui/core';
 
+/** Allows the implementation of an action at the top right of a `Section`.
+ * @property `title` the title describing the action.
+ * @property `onPress` the callback when the action is tapped by the user.
+ */
 export interface SectionHeaderAction {
+  /**
+   * The title describing the action.
+   */
   title: string;
+  /**
+   * The callback when the action is tapped by the user.
+   */
   onPress: () => void;
 }
 
+/** Renders content that is bound by a border, with a title and a call to action at the top.
+ * @property `title` the title of the section.
+ * @property `action` the action in the top right of the section that can be triggered by a tap.
+ */
 export interface SectionProps {
+  /**
+   * The title of the section.
+   */
   title?: string;
+  /**
+   * The action in the top right of the section that can be triggered by a tap.
+   */
   action?: SectionHeaderAction;
 }