Skip to content

Commit 7fd8754

Browse files
vividvioletvividviolet
committed
Add new components
1 parent 4d88470 commit 7fd8754

28 files changed

+688
-0
lines changed

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {render, Button} from '@shopify/ui-extensions-react/admin';
2+
3+
render('Playground', () => <App />);
4+
5+
function App() {
6+
return (
7+
<Button
8+
onPress={() => {
9+
console.log('onPress event');
10+
}}
11+
>
12+
Click here
13+
</Button>
14+
);
15+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {render, Image} from '@shopify/ui-extensions-react/admin';
2+
3+
render('Playground', () => <App />);
4+
5+
function App() {
6+
return (
7+
<Image alt="Pickaxe" source="https://shopify.dev/assets/icons/64/pickaxe-1.png" />
8+
);
9+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import {
3+
render,
4+
Link,
5+
} from '@shopify/ui-extensions-react/admin';
6+
7+
8+
render('Playground', () => <App />);
9+
10+
function App() {
11+
return (
12+
<Link href="app:bar">
13+
Link to app path
14+
</Link>
15+
);
16+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import {
3+
render,
4+
Link,
5+
} from '@shopify/ui-extensions-react/admin';
6+
7+
8+
render('Playground', () => <App />);
9+
10+
function App() {
11+
return (
12+
<Link href="https://www.shopify.ca/climate/sustainability-fund">
13+
Sustainability fund
14+
</Link>
15+
);
16+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import {
3+
render,
4+
Link,
5+
} from '@shopify/ui-extensions-react/admin';
6+
7+
8+
render('Playground', () => <App />);
9+
10+
function App() {
11+
return (
12+
<Link href="/baz">
13+
Link relative to current path
14+
</Link>
15+
);
16+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import {
3+
render,
4+
Link,
5+
} from '@shopify/ui-extensions-react/admin';
6+
7+
8+
render('Playground', () => <App />);
9+
10+
function App() {
11+
return (
12+
<Link href="shopify://admin/orders">
13+
Shop's orders
14+
</Link>
15+
);
16+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {
2+
render,
3+
Paragraph,
4+
Stack,
5+
Text,
6+
} from '@shopify/ui-extensions-react/admin';
7+
8+
render('Playground', () => <App />);
9+
10+
function App() {
11+
return (
12+
<Stack
13+
direction="block"
14+
alignment="center"
15+
gap
16+
>
17+
<Paragraph>
18+
<Text type="strong">Name:</Text>
19+
<Text>Jane Doe</Text>
20+
</Paragraph>
21+
</Stack>
22+
);
23+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import {
3+
render,
4+
Select,
5+
} from '@shopify/ui-extensions-react/admin';
6+
7+
render('Playground', () => <App />);
8+
9+
function App() {
10+
const [value, setValue] = React.useState('2');
11+
12+
return (
13+
<Select
14+
label="Country"
15+
value={value}
16+
onChange={setValue}
17+
options={[
18+
{
19+
value: '1',
20+
label: 'Australia',
21+
},
22+
{
23+
value: '2',
24+
label: 'Canada',
25+
},
26+
{
27+
value: '3',
28+
label: 'France',
29+
},
30+
{
31+
value: '4',
32+
label: 'Japan',
33+
},
34+
{
35+
value: '5',
36+
label: 'Nigeria',
37+
},
38+
{
39+
value: '6',
40+
label: 'United States',
41+
},
42+
]}
43+
/>
44+
);
45+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import {
3+
render,
4+
Stack,
5+
} from '@shopify/ui-extensions-react/admin';
6+
7+
render('Playground', () => <App />);
8+
9+
function App() {
10+
return (
11+
<Stack gap>
12+
<>Child 1</>
13+
<>Child 2</>
14+
<>Child 3</>
15+
<>Child 4</>
16+
</Stack>
17+
);
18+
}

Diff for: ‎packages/ui-extensions-react/src/surfaces/admin/components/util.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
createElement,
3+
useRef,
4+
useLayoutEffect,
5+
useCallback,
6+
forwardRef,
7+
ComponentType,
8+
} from 'react';
9+
10+
// These are the pieces of the passed-in copy of `react` we use:
11+
export interface InjectedReact {
12+
createElement: typeof createElement;
13+
useRef: typeof useRef;
14+
useLayoutEffect: typeof useLayoutEffect;
15+
useCallback: typeof useCallback;
16+
forwardRef: typeof forwardRef;
17+
}
18+
19+
declare global {
20+
// eslint-disable-next-line @typescript-eslint/no-namespace
21+
namespace shopify {
22+
const _createReactRemoteComponent: (
23+
methods: InjectedReact,
24+
name: string,
25+
) => ComponentType;
26+
}
27+
}
28+
29+
export const createRemoteComponent = (name: string) =>
30+
shopify._createReactRemoteComponent(
31+
{
32+
createElement,
33+
useRef,
34+
useLayoutEffect,
35+
useCallback,
36+
forwardRef,
37+
},
38+
name,
39+
);

Diff for: ‎packages/ui-extensions/src/surfaces/admin/components/Button/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Button
2+
3+
Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.

Diff for: ‎packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {extend, Button} from '@shopify/ui-extensions/admin';
2+
3+
extend('Playground', (root) => {
4+
const button = document.createElement('shopify-button');
5+
button.onpress = () => console.log('onPress event');
6+
button.textContent = 'Click here';
7+
root.appendChild(button);
8+
});

Diff for: ‎packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {extension} from '@shopify/ui-extensions/admin';
2+
3+
extension('Playground', (root) => {
4+
const checkbox = document.createElement('shopify-checkbox');
5+
checkbox.id = 'checkbox';
6+
checkbox.name = 'checkbox';
7+
checkbox.onchange = (event) => {
8+
console.log('checked: ', event.target.checked);
9+
};
10+
11+
root.innerHTML =
12+
'<shopify-checkbox id="checkbox" name="checkbox">Save this information for next time</shopify-checkbox>';
13+
});

Diff for: ‎packages/ui-extensions/src/surfaces/admin/components/Image/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Image
2+
3+
The Image component is used to embed an image into the document and control its presentation. It should be used for large format, responsive images.
4+
5+
## Examples
6+
7+
### Basic usage
8+
9+
```tsx
10+
export function MyComponent() {
11+
return (
12+
<Image
13+
// or accessibilityLabel
14+
alt="A red shirt"
15+
// or source
16+
src="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
17+
/>
18+
);
19+
}
20+
```

Diff for: ‎packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {extension} from '@shopify/ui-extensions/admin';
2+
3+
extension('Playground', (root) => {
4+
root.innerHTML =
5+
'<shopify-image alt="Pickaxe" source="https://shopify.dev/assets/icons/64/pickaxe-1.png"></shopify-image>';
6+
});

Diff for: ‎packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
3+
const data: ReferenceEntityTemplateSchema = {
4+
name: 'Link',
5+
description:
6+
'This is an interactive component that directs users to a specified URL. It even supports custom protocols.',
7+
requires: '',
8+
thumbnail: 'link-thumbnail.png',
9+
isVisualComponent: true,
10+
type: '',
11+
definitions: [
12+
{
13+
title: 'Link',
14+
description: '',
15+
type: 'Link',
16+
},
17+
],
18+
category: 'Components',
19+
subCategory: 'Actions',
20+
defaultExample: {
21+
image: 'link-default.png',
22+
codeblock: {
23+
title: 'Link to an app page',
24+
tabs: [
25+
{
26+
title: 'React',
27+
code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx',
28+
language: 'tsx',
29+
},
30+
{
31+
title: 'JS',
32+
code: './examples/app-link.example.ts',
33+
language: 'js',
34+
},
35+
],
36+
},
37+
},
38+
examples: {
39+
description: '',
40+
examples: [
41+
{
42+
description: 'Link to an external URL',
43+
image: 'external-link.png',
44+
codeblock: {
45+
tabs: [
46+
{
47+
title: 'React',
48+
code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx',
49+
language: 'typescript',
50+
},
51+
{
52+
title: 'JS',
53+
code: './examples/external-link.example.ts',
54+
language: 'typescript',
55+
},
56+
],
57+
title: 'External Link',
58+
},
59+
},
60+
{
61+
description: 'Link to a relative URL',
62+
image: 'relative-link.png',
63+
codeblock: {
64+
tabs: [
65+
{
66+
title: 'React',
67+
code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx',
68+
language: 'typescript',
69+
},
70+
{
71+
title: 'JS',
72+
code: './examples/relative-link.example.ts',
73+
language: 'typescript',
74+
},
75+
],
76+
title: 'Relative Link',
77+
},
78+
},
79+
{
80+
description: 'Link to a Shopify admin page',
81+
image: 'shopify-section-link.png',
82+
codeblock: {
83+
tabs: [
84+
{
85+
title: 'React',
86+
code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx',
87+
language: 'typescript',
88+
},
89+
{
90+
title: 'JS',
91+
code: './examples/shopify-section-link.example.ts',
92+
language: 'typescript',
93+
},
94+
],
95+
title: 'Shopify Section Link',
96+
},
97+
},
98+
],
99+
},
100+
related: [
101+
{
102+
type: 'component',
103+
name: 'Button',
104+
url: '/docs/api/admin-extensions/components/actions/button',
105+
},
106+
],
107+
};
108+
109+
export default data;

Diff for: ‎packages/ui-extensions/src/surfaces/admin/components/Link/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Link
2+
3+
Link makes text interactive so users can perform an action, such as navigating to another location.
4+
5+
## Expected HTML in Web host
6+
7+
When `href` is set the expected HTML element is an anchor element
8+
`<a href="#">View email settings</a>`
9+
10+
When `onPress` or `onClick` are set, the expected HTML element is a button element
11+
`<button type="button">Edit</button>`

0 commit comments

Comments
 (0)