Skip to content

Commit 7fd8754

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

File tree

28 files changed

+688
-0
lines changed

28 files changed

+688
-0
lines changed
Lines changed: 15 additions & 0 deletions
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+
}
Lines changed: 9 additions & 0 deletions
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+
}
Lines changed: 16 additions & 0 deletions
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+
}
Lines changed: 16 additions & 0 deletions
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+
}
Lines changed: 16 additions & 0 deletions
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+
}
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+
}
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+
}
Lines changed: 45 additions & 0 deletions
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+
}
Lines changed: 18 additions & 0 deletions
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+
}
Lines changed: 39 additions & 0 deletions
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+
);

0 commit comments

Comments
 (0)