Skip to content

Commit

Permalink
add examples and definitions
Browse files Browse the repository at this point in the history
  • Loading branch information
merkoyep committed Dec 18, 2024
1 parent 1faa963 commit 348b4a1
Show file tree
Hide file tree
Showing 9 changed files with 164 additions and 35 deletions.
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
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: '100px',
paddingInlineEnd: '100px',
paddingBlockStart: '100px',
paddingBlockEnd: '100px',
});

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);
});
Original file line number Diff line number Diff line change
@@ -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 />,
);
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Screen,
ScrollView,
Navigator,
Box,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

Expand All @@ -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 />
));
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/**
* SizeKeyword maps to predetermined values in POS.
*/
export type SizeKeyword =
| '0'
| '025'
Expand Down

0 comments on commit 348b4a1

Please sign in to comment.