Added TS example and made TSX examples consistent

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

@@ -9,6 +9,11 @@ const generateCodeBlockForStack = (title: string, fileName: string) => {
         code: `../examples/stack/${fileName}.tsx`,
         language: 'tsx',
       },
+      {
+        title: 'TS',
+        code: `../examples/stack/${fileName}.ts`,
+        language: 'ts',
+      },
     ],
   };
 };
@@ -123,16 +128,16 @@ You can center your block stack on the vertical axis by setting \`justifyContent
     },
     {
       type: 'Generic',
-      anchorLink: 'block-align-contents-stretch',
+      anchorLink: 'block-align-content-stretch',
       title: 'Block Stack with horizontal stretching',
       sectionContent: `
 This example demonstrates a block stack with elements stretched to fill the container width. By setting \`alignContents\` to \`stretch\`, the children will expand to fill the available horizontal space. This is useful when you want all elements to have consistent width, regardless of their content.
 `,
       codeblock: generateCodeBlockForStack(
         'Block Stack with stretched contents',
-        'block-align-contents-stretch',
+        'block-align-content-stretch',
       ),
-      image: 'extension-stack-block-align-contents-stretch.png',
+      image: 'extension-stack-block-align-content-stretch.png',
     },
     {
       type: 'Generic',

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-content-stretch.tsx

@@ -0,0 +1,27 @@
+import {
+  reactExtension,
+  SegmentedControl,
+  Stack,
+  Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+  <Screen name="Stack" title="Stack">
+    <Stack direction="block" gap="400" alignContent="stretch" padding="400">
+      <SegmentedControl
+        selected="1"
+        segments={[
+          {id: '1', label: 'Segment 1', disabled: false},
+          {id: '2', label: 'Segment 2', disabled: false},
+          {id: '3', label: 'Segment 3', disabled: false},
+          {id: '4', label: 'Segment 4', disabled: false},
+          {id: '5', label: 'Segment 5', disabled: false},
+          {id: '6', label: 'Segment 6', disabled: false},
+          {id: '7', label: 'Segment 7', disabled: false},
+        ]}
+        onSelect={(id) => console.log(`Selected segment with id: ${id}`)}
+      />
+    </Stack>
+  </Screen>
+));

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.ts

@@ -0,0 +1,37 @@
+import {
+  extension,
+  Button,
+  Screen,
+  Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+  const button1 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const button2 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const stack = root.createComponent(Stack, {
+    direction: 'block',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    inlineSize: '100%',
+    paddingInline: '450',
+    blockSize: '50%',
+    gap: '200',
+  });
+  stack.append(button1, button2);
+
+  const screen = root.createComponent(Screen, {
+    name: 'Stack',
+    title: 'Stack',
+  });
+  screen.append(stack);
+  root.append(screen);
+
+  root.mount();
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.tsx

@@ -1,15 +1,25 @@
-<Screen name="Stack" title="Stack">
-  <Stack
-    direction="block"
-    justifyContent="center"
-    alignContent="center"
-    alignItems="center"
-    inlineSize="100%"
-    paddingInline="450"
-    blockSize="50%"
-    gap="200"
-  >
-    <Button title="hello" />
-    <Button title="hello" />
-  </Stack>
-</Screen>;
+import {
+  reactExtension,
+  Button,
+  Stack,
+  Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+  <Screen name="Stack" title="Stack">
+    <Stack
+      direction="block"
+      gap="200"
+      justifyContent="center"
+      alignContent="center"
+      alignItems="center"
+      inlineSize="100%"
+      paddingInline="450"
+      blockSize="50%"
+    >
+      <Button title="Hello" />
+      <Button title="Hello" />
+    </Stack>
+  </Screen>
+));

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.ts

@@ -0,0 +1,38 @@
+import {
+  extension,
+  Button,
+  Screen,
+  Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+  const button1 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const button2 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const button3 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const stack = root.createComponent(Stack, {
+    direction: 'block',
+    gap: '200',
+    justifyContent: 'space-between',
+    blockSize: '50%',
+    paddingInline: '450',
+  });
+  stack.append(button1, button2, button3);
+
+  const screen = root.createComponent(Screen, {
+    name: 'Stack',
+    title: 'Stack',
+  });
+  screen.append(stack);
+  root.append(screen);
+
+  root.mount();
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.tsx

@@ -1,12 +1,23 @@
-<Screen name="Stack" title="Stack">
-  <Stack
-    direction="block"
-    justifyContent="space-between"
-    paddingInline="450"
-    blockSize="50%"
-    gap="200"
-  >
-    <Button title="hello" />
-    <Button title="hello" />
-  </Stack>
-</Screen>;
+import {
+  reactExtension,
+  Button,
+  Stack,
+  Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+  <Screen name="Stack" title="Stack">
+    <Stack
+      direction="block"
+      gap="200"
+      justifyContent="space-between"
+      blockSize="50%"
+      paddingInline="450"
+    >
+      <Button title="Hello" />
+      <Button title="Hello" />
+      <Button title="Hello" />
+    </Stack>
+  </Screen>
+));

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.ts

@@ -0,0 +1,36 @@
+import {
+  extension,
+  Button,
+  Screen,
+  Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+  const button1 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const button2 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const button3 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const stack = root.createComponent(Stack, {
+    direction: 'block',
+    gap: '200',
+    paddingInline: '450',
+  });
+  stack.append(button1, button2, button3);
+
+  const screen = root.createComponent(Screen, {
+    name: 'Stack',
+    title: 'Stack',
+  });
+  screen.append(stack);
+  root.append(screen);
+
+  root.mount();
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.tsx

@@ -1,6 +1,17 @@
-<Screen name="Stack" title="Stack">
-  <Stack direction="block" paddingInline="450" gap="200">
-    <Button title="hello" />
-    <Button title="hello" />
-  </Stack>
-</Screen>;
+import {
+  reactExtension,
+  Button,
+  Stack,
+  Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+  <Screen name="Stack" title="Stack">
+    <Stack direction="block" gap="200" paddingInline="450">
+      <Button title="Hello" />
+      <Button title="Hello" />
+      <Button title="Hello" />
+    </Stack>
+  </Screen>
+));

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.ts

@@ -0,0 +1,47 @@
+import {
+  extension,
+  Button,
+  Screen,
+  Stack,
+  ScrollView,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+  const button1 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const button2 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const button3 = root.createComponent(Button, {
+    title: 'Hello',
+  });
+
+  const innerStack = root.createComponent(Stack, {
+    direction: 'block',
+    gap: '200',
+  });
+  innerStack.append(button1, button2);
+
+  const mainStack = root.createComponent(Stack, {
+    direction: 'inline',
+    gap: '200',
+    alignItems: 'center',
+    alignContent: 'center',
+  });
+  mainStack.append(innerStack, button3);
+
+  const scrollView = root.createComponent(ScrollView);
+  scrollView.append(mainStack);
+
+  const screen = root.createComponent(Screen, {
+    name: 'Stack',
+    title: 'Stack',
+  });
+  screen.append(scrollView);
+  root.append(screen);
+
+  root.mount();
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.tsx

@@ -1,16 +1,27 @@
-<Screen name="Stack" title="Stack">
-  <ScrollView>
-    <Stack
-      direction="inline"
-      alignItems="center"
-      alignContent="center"
-      gap="200"
-    >
-      <Stack direction="block" gap="200">
-        <Button title="hello" />
-        <Button title="hello" />
+import {
+  reactExtension,
+  Button,
+  Stack,
+  Screen,
+  ScrollView,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+  <Screen name="Stack" title="Stack">
+    <ScrollView>
+      <Stack
+        direction="inline"
+        gap="200"
+        alignItems="center"
+        alignContent="center"
+      >
+        <Stack direction="block" gap="200">
+          <Button title="Hello" />
+          <Button title="Hello" />
+        </Stack>
+        <Button title="Hello" />
       </Stack>
-      <Button title="hello" />
-    </Stack>
-  </ScrollView>
-</Screen>;
+    </ScrollView>
+  </Screen>
+));