Skip to content

Commit 64b0dab

Browse files
Kaviarasan-RKaviarasan-R
committed
--updated-version ^12.0.0-beta.0
1 parent db58384 commit 64b0dab

File tree

6 files changed

+257
-187
lines changed

6 files changed

+257
-187
lines changed

‎apps/client/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@
1212
"@shopify/app-bridge": "^3.7.9",
1313
"@shopify/app-bridge-react": "^3.7.9",
1414
"@shopify/app-bridge-types": "^0.0.3",
15-
"@shopify/polaris": "^11.14.0",
16-
"axios": "^1.5.0",
15+
"@shopify/polaris": "^12.0.0-beta.0",
16+
"install": "^0.13.0",
17+
"npm": "^10.1.0",
1718
"raviger": "^4.1.2",
1819
"react": "^18.2.0",
1920
"react-dom": "^18.2.0",

‎apps/client/src/pages/debug/DebugIndex.tsx

Lines changed: 84 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { Layout, LegacyCard, Page } from "@shopify/polaris";
1+
import {
2+
Layout,
3+
Card,
4+
Page,
5+
Button,
6+
Text,
7+
VerticalStack,
8+
HorizontalStack,
9+
} from "@shopify/polaris";
210
import { navigate } from "raviger";
311

412
const DebugIndex = () => {
@@ -10,63 +18,87 @@ const DebugIndex = () => {
1018
>
1119
<Layout>
1220
<Layout.Section oneHalf>
13-
<LegacyCard
14-
sectioned
15-
title="Webhooks"
16-
primaryFooterAction={{
17-
content: "Explore",
18-
onAction: () => {
19-
navigate("/debug/activeWebhooks");
20-
},
21-
}}
22-
>
23-
<p>Explore registered webhooks and endpoints.</p>
24-
</LegacyCard>
21+
<Card>
22+
<VerticalStack gap={"3"}>
23+
<Text variant="headingSm" as="h6">
24+
Webhooks
25+
</Text>
26+
<p>Explore registered webhooks and endpoints.</p>
27+
<HorizontalStack align="end">
28+
<Button
29+
onClick={() => {
30+
navigate("/debug/activeWebhooks");
31+
}}
32+
primary
33+
>
34+
Explore
35+
</Button>
36+
</HorizontalStack>
37+
</VerticalStack>
38+
</Card>
2539
</Layout.Section>
2640
<Layout.Section oneHalf>
27-
<LegacyCard
28-
sectioned
29-
title="Data Fetching"
30-
primaryFooterAction={{
31-
content: "Explore",
32-
onAction: () => {
33-
navigate("/debug/getData");
34-
},
35-
}}
36-
>
37-
<p>
38-
Run GET and POST requests to your server along with GraphQL
39-
queries.
40-
</p>
41-
</LegacyCard>
41+
<Card>
42+
<VerticalStack gap={"3"}>
43+
<Text variant="headingSm" as="h6">
44+
Data Fetching
45+
</Text>
46+
<p>
47+
Run GET and POST requests to your server along with GraphQL
48+
queries.
49+
</p>
50+
<HorizontalStack align="end">
51+
<Button
52+
onClick={() => {
53+
navigate("/debug/getData");
54+
}}
55+
primary
56+
>
57+
Explore
58+
</Button>
59+
</HorizontalStack>
60+
</VerticalStack>
61+
</Card>
4262
</Layout.Section>
4363
<Layout.Section oneHalf>
44-
<LegacyCard
45-
sectioned
46-
title="Billing API"
47-
primaryFooterAction={{
48-
content: "Subscribe",
49-
onAction: () => {
50-
navigate("/debug/billing");
51-
},
52-
}}
53-
>
54-
<p>Subscribe merchant to a plan and explore existing plans.</p>
55-
</LegacyCard>
64+
<Card>
65+
<VerticalStack gap={"3"}>
66+
<Text variant="headingSm" as="h6">
67+
Billing API
68+
</Text>
69+
<p>Subscribe merchant to a plan and explore existing plans.</p>
70+
<HorizontalStack align="end">
71+
<Button
72+
onClick={() => {
73+
navigate("/debug/billing");
74+
}}
75+
primary
76+
>
77+
Subscribe
78+
</Button>
79+
</HorizontalStack>
80+
</VerticalStack>
81+
</Card>
5682
</Layout.Section>
5783
<Layout.Section oneHalf>
58-
<LegacyCard
59-
sectioned
60-
title="Dev Notes"
61-
primaryFooterAction={{
62-
content: "Let's go",
63-
onAction: () => {
64-
navigate("/debug/devNotes");
65-
},
66-
}}
67-
>
68-
<p>Notes for devs on expectations.</p>
69-
</LegacyCard>
84+
<Card>
85+
<VerticalStack gap={"3"}>
86+
<Text variant="headingSm" as="h6">
87+
Dev Notes
88+
</Text>
89+
<p>Notes for devs on expectations.</p>
90+
<HorizontalStack align="end">
91+
<Button
92+
onClick={() => {
93+
navigate("/debug/devNotes");
94+
}}
95+
primary
96+
>
97+
Let's go
98+
</Button>
99+
</HorizontalStack>
100+
</VerticalStack>
101+
</Card>
70102
</Layout.Section>
71103
</Layout>
72104
</Page>

‎apps/client/src/pages/debug/DevNotes.tsx

Lines changed: 94 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Layout, LegacyCard, Page } from "@shopify/polaris";
1+
import { Layout, Card, Text, Page } from "@shopify/polaris";
22
import { navigate } from "raviger";
33

44
const DevNotes = () => {
@@ -11,84 +11,99 @@ const DevNotes = () => {
1111
>
1212
<Layout>
1313
<Layout.Section>
14-
<LegacyCard title="Notes">
15-
<LegacyCard.Section title="Creating Extensions">
16-
<li>
17-
Run <code>npm run s:e:create</code> to create an extension and{" "}
18-
<code>npm run s:e:deploy</code> to deploy said extension.
19-
</li>
20-
<li>
21-
If you get a message around "Invalid React hooks called" while
22-
deploying your extension, first run <code>npm ls react</code>{" "}
23-
and see if it throws any errors. If it doesn't, delete{" "}
24-
<code>package-lock.json</code> and <code>node_modules</code>{" "}
25-
and run <code>npm install --force</code> and the issue should
26-
be fixed. If you do get an error when you run{" "}
27-
<code>npm ls react</code>, override the dependency in the{" "}
28-
<code>overrides</code> area in <code>package.json</code> or
29-
downgrade <code>React</code> to <code>17.x.x</code>.
30-
</li>
31-
</LegacyCard.Section>
32-
<LegacyCard.Section title="Creating GraphQL and REST Clients">
33-
<li>
34-
Starting <code>Shopify API v6</code>, client providers require
35-
an additional few lines of setup. To avoid that, there's a new
36-
provider available at{" "}
37-
<strong>
38-
<code>@/apps/server/utils/client-provider.service.ts</code>
39-
</strong>{" "}
40-
</li>
41-
<li>
42-
Import <code>ClientProvider</code> and pass it the{" "}
43-
<code>req</code> and <code>res</code> objects, along with an{" "}
44-
<code>isOnline</code> Boolean value for using online / offline
45-
tokens.
46-
</li>
47-
<li>
48-
The{" "}
49-
<strong>
50-
<code>ClientProvider</code>
51-
</strong>{" "}
52-
returns
53-
<code>client, shop and session</code> as a single object, so
54-
you can destructure around your need.
55-
</li>
56-
<li>
57-
Examples can be found in{" "}
58-
<strong>
59-
<code>@/apps/server/apps/apps.controller.ts</code>
60-
</strong>
61-
</li>
62-
</LegacyCard.Section>
63-
<LegacyCard.Section title="Opening Issues and Asking for Help">
64-
<p>
65-
The idea behind creating the repo was to make it easier for
66-
you to get started with Shopify app dev and/or understand how
67-
to implement Auth, Webhooks, GDPR routes, etc. that come
68-
pre-setup with this repo, and is production ready. Before
69-
asking for help, please remember:
70-
</p>
71-
<br />
72-
<li>
73-
The maintainers will help you with setting up the boilerplate
74-
and/or pointing you in the right direction. They are NOT
75-
someone you can demand to work on your app if you can't pay
76-
for their time.
77-
</li>
78-
<li>
79-
If you're stuck understanding how to build on Shopify, please
80-
read docs and search the internet before asking for help.
81-
</li>
82-
<li>
83-
<strong>
84-
It is OK to message the maintainers as long as you're being
85-
civil about it - we do open source because we enjoy working
86-
with engineers and building things. Please don't ruin it for
87-
us.
88-
</strong>
89-
</li>
90-
</LegacyCard.Section>
91-
</LegacyCard>
14+
<Card>
15+
<Layout>
16+
<Layout.Section>
17+
<Text variant="headingSm" as="h6">
18+
Creating Extensions
19+
</Text>
20+
<li>
21+
Run <code>npm run s:e:create</code> to create an extension
22+
and <code>npm run s:e:deploy</code> to deploy said
23+
extension.
24+
</li>
25+
<li>
26+
If you get a message around "Invalid React hooks called"
27+
while deploying your extension, first run{" "}
28+
<code>npm ls react</code> and see if it throws any errors.
29+
If it doesn't, delete <code>package-lock.json</code> and{" "}
30+
<code>node_modules</code> and run{" "}
31+
<code>npm install --force</code> and the issue should be
32+
fixed. If you do get an error when you run{" "}
33+
<code>npm ls react</code>, override the dependency in the{" "}
34+
<code>overrides</code> area in <code>package.json</code> or
35+
downgrade <code>React</code> to <code>17.x.x</code>.
36+
</li>
37+
</Layout.Section>
38+
<Layout.Section>
39+
<Text variant="headingSm" as="h6">
40+
Creating GraphQL and REST Clients
41+
</Text>
42+
<li>
43+
Starting <code>Shopify API v6</code>, client providers
44+
require an additional few lines of setup. To avoid that,
45+
there's a new provider available at{" "}
46+
<strong>
47+
<code>
48+
@/apps/server/utils/client-provider.service.ts
49+
</code>
50+
</strong>{" "}
51+
</li>
52+
<li>
53+
Import <code>ClientProvider</code> and pass it the{" "}
54+
<code>req</code> and <code>res</code> objects, along with an{" "}
55+
<code>isOnline</code> Boolean value for using online /
56+
offline tokens.
57+
</li>
58+
<li>
59+
The{" "}
60+
<strong>
61+
<code>ClientProvider</code>
62+
</strong>{" "}
63+
returns
64+
<code>client, shop and session</code> as a single object, so
65+
you can destructure around your need.
66+
</li>
67+
<li>
68+
Examples can be found in{" "}
69+
<strong>
70+
<code>@/apps/server/apps/apps.controller.ts</code>
71+
</strong>
72+
</li>
73+
</Layout.Section>
74+
<Layout.Section>
75+
<Text variant="headingSm" as="h6">
76+
Opening Issues and Asking for Help
77+
</Text>
78+
<p>
79+
The idea behind creating the repo was to make it easier for
80+
you to get started with Shopify app dev and/or understand
81+
how to implement Auth, Webhooks, GDPR routes, etc. that come
82+
pre-setup with this repo, and is production ready. Before
83+
asking for help, please remember:
84+
</p>
85+
<li>
86+
The maintainers will help you with setting up the
87+
boilerplate and/or pointing you in the right direction. They
88+
are NOT someone you can demand to work on your app if you
89+
can't pay for their time.
90+
</li>
91+
<li>
92+
If you're stuck understanding how to build on Shopify,
93+
please read docs and search the internet before asking for
94+
help.
95+
</li>
96+
<li>
97+
<strong>
98+
It is OK to message the maintainers as long as you're
99+
being civil about it - we do open source because we enjoy
100+
working with engineers and building things. Please don't
101+
ruin it for us.
102+
</strong>
103+
</li>
104+
</Layout.Section>
105+
</Layout>
106+
</Card>
92107
</Layout.Section>
93108
</Layout>
94109
</Page>

0 commit comments

Comments
 (0)