polaris-plus-ui 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -0
- package/dist/index.d.mts +54 -0
- package/dist/index.d.ts +54 -0
- package/dist/index.js +105 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +76 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +55 -0
package/README.md
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# polaris-plus-ui
|
|
2
|
+
|
|
3
|
+
React wrappers for [Shopify Polaris Web Components](https://polaris.shopify.com/components/web-components).
|
|
4
|
+
No `@shopify/polaris` React dependency required — just the Polaris Web Components CDN script.
|
|
5
|
+
|
|
6
|
+
## Setup
|
|
7
|
+
|
|
8
|
+
Load the Polaris Web Components script once in your app's root:
|
|
9
|
+
|
|
10
|
+
```html
|
|
11
|
+
<!-- HTML / Next.js layout -->
|
|
12
|
+
<script src="https://cdn.shopify.com/polaris-web-components.js"></script>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Or with Next.js `Script`:
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import Script from "next/script";
|
|
19
|
+
|
|
20
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
21
|
+
return (
|
|
22
|
+
<html>
|
|
23
|
+
<body>
|
|
24
|
+
<Script src="https://cdn.shopify.com/polaris-web-components.js" strategy="beforeInteractive" />
|
|
25
|
+
{children}
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Installation
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
npm install polaris-plus-ui
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Components
|
|
39
|
+
|
|
40
|
+
### `AppPage`
|
|
41
|
+
|
|
42
|
+
A full page layout with title, optional subtitle, and a layout section.
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { AppPage } from "polaris-plus-ui";
|
|
46
|
+
|
|
47
|
+
<AppPage title="Orders" subtitle="Manage your store orders">
|
|
48
|
+
{/* page content */}
|
|
49
|
+
</AppPage>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
| Prop | Type | Required | Description |
|
|
53
|
+
|------|------|----------|-------------|
|
|
54
|
+
| `title` | `string` | ✅ | Page heading |
|
|
55
|
+
| `subtitle` | `string` | — | Page subheading |
|
|
56
|
+
| `children` | `ReactNode` | ✅ | Page content |
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
### `PageSection`
|
|
61
|
+
|
|
62
|
+
A typed wrapper for `polaris-layout-section`, for use inside `AppPage` or any `polaris-layout`.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { AppPage, PageSection } from "polaris-plus-ui";
|
|
66
|
+
|
|
67
|
+
<AppPage title="Dashboard">
|
|
68
|
+
<PageSection variant="oneHalf">
|
|
69
|
+
{/* left column */}
|
|
70
|
+
</PageSection>
|
|
71
|
+
<PageSection variant="oneHalf">
|
|
72
|
+
{/* right column */}
|
|
73
|
+
</PageSection>
|
|
74
|
+
</AppPage>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
| Prop | Type | Default | Description |
|
|
78
|
+
|------|------|---------|-------------|
|
|
79
|
+
| `children` | `ReactNode` | — | Section content |
|
|
80
|
+
| `variant` | `"oneThird" \| "oneHalf" \| "fullWidth"` | — | Layout width |
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
### `StatusCard`
|
|
85
|
+
|
|
86
|
+
A Polaris card with a header, optional status badge, content area, and optional footer.
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import { StatusCard } from "polaris-plus-ui";
|
|
90
|
+
|
|
91
|
+
<StatusCard
|
|
92
|
+
title="Payment gateway"
|
|
93
|
+
badge="Active"
|
|
94
|
+
badgeTone="success"
|
|
95
|
+
footer={<span>Last synced 5 minutes ago</span>}
|
|
96
|
+
>
|
|
97
|
+
<p>Stripe is connected and processing payments.</p>
|
|
98
|
+
</StatusCard>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
| Prop | Type | Default | Description |
|
|
102
|
+
|------|------|---------|-------------|
|
|
103
|
+
| `title` | `string` | — | Card heading |
|
|
104
|
+
| `badge` | `string` | — | Badge label |
|
|
105
|
+
| `badgeTone` | `"info" \| "success" \| "warning" \| "critical"` | `"info"` | Badge color |
|
|
106
|
+
| `children` | `ReactNode` | — | Card body content |
|
|
107
|
+
| `footer` | `ReactNode` | — | Footer content below divider |
|
|
108
|
+
|
|
109
|
+
## Peer Dependencies
|
|
110
|
+
|
|
111
|
+
| Package | Version |
|
|
112
|
+
|---------|---------|
|
|
113
|
+
| `react` | `>=18` |
|
|
114
|
+
| `react-dom` | `>=18` |
|
|
115
|
+
|
|
116
|
+
## License
|
|
117
|
+
|
|
118
|
+
MIT
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
interface AppPageProps {
|
|
5
|
+
/** Page heading */
|
|
6
|
+
heading: string;
|
|
7
|
+
/** Page subheading */
|
|
8
|
+
subheading?: string;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* AppPage
|
|
13
|
+
*
|
|
14
|
+
* Wraps `s-page` with an `s-section` layout section.
|
|
15
|
+
* Requires the Polaris CDN script in your app's <head>:
|
|
16
|
+
* https://cdn.shopify.com/shopifycloud/polaris.js
|
|
17
|
+
*/
|
|
18
|
+
declare function AppPage({ heading, subheading, children }: AppPageProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
type PageSectionVariant = "oneThird" | "oneHalf" | "fullWidth";
|
|
21
|
+
interface PageSectionProps {
|
|
22
|
+
/** Section heading */
|
|
23
|
+
heading?: string;
|
|
24
|
+
/** Content inside the section */
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* PageSection
|
|
29
|
+
*
|
|
30
|
+
* A typed wrapper around `s-section` for use inside an `AppPage`
|
|
31
|
+
* or directly within an `s-page`.
|
|
32
|
+
*
|
|
33
|
+
* CDN: https://cdn.shopify.com/shopifycloud/polaris.js
|
|
34
|
+
*/
|
|
35
|
+
declare function PageSection({ heading, children }: PageSectionProps): react_jsx_runtime.JSX.Element;
|
|
36
|
+
|
|
37
|
+
type StatusTone = "info" | "success" | "warning" | "critical";
|
|
38
|
+
interface DetailItem {
|
|
39
|
+
label: string;
|
|
40
|
+
value: string;
|
|
41
|
+
}
|
|
42
|
+
interface StatusCardsProps {
|
|
43
|
+
heading: string;
|
|
44
|
+
title: string;
|
|
45
|
+
status?: string;
|
|
46
|
+
tone?: StatusTone;
|
|
47
|
+
description?: string;
|
|
48
|
+
details?: DetailItem[];
|
|
49
|
+
meta?: string;
|
|
50
|
+
action?: string;
|
|
51
|
+
}
|
|
52
|
+
declare function StatusCard({ heading, title, status, tone, description, details, meta, action, }: StatusCardsProps): react_jsx_runtime.JSX.Element;
|
|
53
|
+
|
|
54
|
+
export { AppPage, type AppPageProps, PageSection, type PageSectionProps, type PageSectionVariant, StatusCard, type StatusCardsProps, type StatusTone };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
interface AppPageProps {
|
|
5
|
+
/** Page heading */
|
|
6
|
+
heading: string;
|
|
7
|
+
/** Page subheading */
|
|
8
|
+
subheading?: string;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* AppPage
|
|
13
|
+
*
|
|
14
|
+
* Wraps `s-page` with an `s-section` layout section.
|
|
15
|
+
* Requires the Polaris CDN script in your app's <head>:
|
|
16
|
+
* https://cdn.shopify.com/shopifycloud/polaris.js
|
|
17
|
+
*/
|
|
18
|
+
declare function AppPage({ heading, subheading, children }: AppPageProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
type PageSectionVariant = "oneThird" | "oneHalf" | "fullWidth";
|
|
21
|
+
interface PageSectionProps {
|
|
22
|
+
/** Section heading */
|
|
23
|
+
heading?: string;
|
|
24
|
+
/** Content inside the section */
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* PageSection
|
|
29
|
+
*
|
|
30
|
+
* A typed wrapper around `s-section` for use inside an `AppPage`
|
|
31
|
+
* or directly within an `s-page`.
|
|
32
|
+
*
|
|
33
|
+
* CDN: https://cdn.shopify.com/shopifycloud/polaris.js
|
|
34
|
+
*/
|
|
35
|
+
declare function PageSection({ heading, children }: PageSectionProps): react_jsx_runtime.JSX.Element;
|
|
36
|
+
|
|
37
|
+
type StatusTone = "info" | "success" | "warning" | "critical";
|
|
38
|
+
interface DetailItem {
|
|
39
|
+
label: string;
|
|
40
|
+
value: string;
|
|
41
|
+
}
|
|
42
|
+
interface StatusCardsProps {
|
|
43
|
+
heading: string;
|
|
44
|
+
title: string;
|
|
45
|
+
status?: string;
|
|
46
|
+
tone?: StatusTone;
|
|
47
|
+
description?: string;
|
|
48
|
+
details?: DetailItem[];
|
|
49
|
+
meta?: string;
|
|
50
|
+
action?: string;
|
|
51
|
+
}
|
|
52
|
+
declare function StatusCard({ heading, title, status, tone, description, details, meta, action, }: StatusCardsProps): react_jsx_runtime.JSX.Element;
|
|
53
|
+
|
|
54
|
+
export { AppPage, type AppPageProps, PageSection, type PageSectionProps, type PageSectionVariant, StatusCard, type StatusCardsProps, type StatusTone };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
AppPage: () => AppPage,
|
|
24
|
+
PageSection: () => PageSection,
|
|
25
|
+
StatusCard: () => StatusCard
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(index_exports);
|
|
28
|
+
|
|
29
|
+
// src/components/AppPage/AppPage.tsx
|
|
30
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
|
+
function AppPage({ heading, subheading, children }) {
|
|
32
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("s-page", { heading, children: [
|
|
33
|
+
subheading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("s-text", { as: "p", variant: "bodyMd", slot: "subtitle", children: subheading }),
|
|
34
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("s-section", { children })
|
|
35
|
+
] });
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// src/components/PageSection/PageSection.tsx
|
|
39
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
40
|
+
function PageSection({ heading, children }) {
|
|
41
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("s-section", { heading, children });
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// src/components/StatusCard/StatusCard.tsx
|
|
45
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
46
|
+
function StatusCard({
|
|
47
|
+
heading,
|
|
48
|
+
title,
|
|
49
|
+
status,
|
|
50
|
+
tone = "info",
|
|
51
|
+
description,
|
|
52
|
+
details = [],
|
|
53
|
+
meta,
|
|
54
|
+
action
|
|
55
|
+
}) {
|
|
56
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-section", { heading, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-card", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-box", { padding: "base", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("s-stack", { gap: "base", children: [
|
|
57
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("s-stack", { direction: "inline", alignItems: "center", gap: "small", children: [
|
|
58
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-text", { variant: "headingMd", fontWeight: "semibold", children: title }),
|
|
59
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-badge", { tone, children: status })
|
|
60
|
+
] }),
|
|
61
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-text", { variant: "bodyMd", tone: "subdued", children: description }),
|
|
62
|
+
details.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
63
|
+
"s-grid",
|
|
64
|
+
{
|
|
65
|
+
gap: "small",
|
|
66
|
+
gridTemplateColumns: "1fr 1fr",
|
|
67
|
+
children: details.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
68
|
+
"s-box",
|
|
69
|
+
{
|
|
70
|
+
padding: "base",
|
|
71
|
+
background: "strong",
|
|
72
|
+
borderRadius: "base",
|
|
73
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("s-stack", { gap: "small-100", children: [
|
|
74
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-text", { variant: "bodySm", tone: "subdued", children: item.label.toLocaleUpperCase() }),
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-text", { variant: "bodyMd", fontWeight: "medium", children: item.value })
|
|
76
|
+
] })
|
|
77
|
+
},
|
|
78
|
+
i
|
|
79
|
+
))
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
(meta || action) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-divider", {}),
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
85
|
+
"s-stack",
|
|
86
|
+
{
|
|
87
|
+
direction: "inline",
|
|
88
|
+
justifyContent: "space-between",
|
|
89
|
+
alignItems: "center",
|
|
90
|
+
children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-text", { variant: "bodySm", tone: "subdued", children: meta }),
|
|
92
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s-button", { variant: "secondary", children: action })
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
)
|
|
96
|
+
] })
|
|
97
|
+
] }) }) }) });
|
|
98
|
+
}
|
|
99
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
100
|
+
0 && (module.exports = {
|
|
101
|
+
AppPage,
|
|
102
|
+
PageSection,
|
|
103
|
+
StatusCard
|
|
104
|
+
});
|
|
105
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/AppPage/AppPage.tsx","../src/components/PageSection/PageSection.tsx","../src/components/StatusCard/StatusCard.tsx"],"sourcesContent":["// Core page components\nexport * from \"./components/AppPage\";\nexport * from \"./components/PageSection\";\n\n// UI components\nexport * from \"./components/StatusCard\";","import type { ReactNode } from \"react\";\n\nexport interface AppPageProps {\n /** Page heading */\n heading: string;\n /** Page subheading */\n subheading?: string;\n children: ReactNode;\n}\n\n/**\n * AppPage\n *\n * Wraps `s-page` with an `s-section` layout section.\n * Requires the Polaris CDN script in your app's <head>:\n * https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function AppPage({ heading, subheading, children }: AppPageProps) {\n return (\n <s-page heading={heading}>\n {subheading && (\n <s-text as=\"p\" variant=\"bodyMd\" slot=\"subtitle\">\n {subheading}\n </s-text>\n )}\n <s-section>\n {children}\n </s-section>\n </s-page>\n );\n}","import type { ReactNode } from \"react\";\n\nexport type PageSectionVariant = \"oneThird\" | \"oneHalf\" | \"fullWidth\";\n\nexport interface PageSectionProps {\n /** Section heading */\n heading?: string;\n /** Content inside the section */\n children: ReactNode;\n}\n\n/**\n * PageSection\n *\n * A typed wrapper around `s-section` for use inside an `AppPage`\n * or directly within an `s-page`.\n *\n * CDN: https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function PageSection({ heading, children }: PageSectionProps) {\n return (\n <s-section heading={heading}>\n {children}\n </s-section>\n );\n}\n","import type { ReactNode } from \"react\";\n\nexport type StatusTone = \"info\" | \"success\" | \"warning\" | \"critical\";\n\ninterface DetailItem {\n label: string;\n value: string;\n}\n\nexport interface StatusCardsProps {\n heading: string;\n title: string;\n status?: string;\n tone?: StatusTone;\n description?: string;\n details?: DetailItem[];\n meta?: string;\n action?: string;\n}\n\nexport function StatusCard({\n heading,\n title,\n status,\n tone = \"info\",\n description,\n details = [],\n meta,\n action,\n}: StatusCardsProps) {\n return (\n <s-section heading={heading}>\n <s-card>\n <s-box padding=\"base\">\n <s-stack gap=\"base\">\n\n {/* Header */}\n <s-stack direction=\"inline\" alignItems=\"center\" gap=\"small\">\n <s-text variant=\"headingMd\" fontWeight=\"semibold\">\n {title}\n </s-text>\n\n {status && (\n <s-badge tone={tone}>{status}</s-badge>\n )}\n </s-stack>\n\n {/* Description */}\n {description && (\n <s-text variant=\"bodyMd\" tone=\"subdued\">\n {description}\n </s-text>\n )}\n\n {/* Details → GRID (important change) */}\n {details.length > 0 && (\n <s-grid\n gap=\"small\"\n gridTemplateColumns=\"1fr 1fr\"\n >\n {details.map((item, i) => (\n <s-box\n key={i}\n padding=\"base\"\n background=\"strong\"\n borderRadius=\"base\"\n >\n <s-stack gap=\"small-100\">\n <s-text variant=\"bodySm\" tone=\"subdued\">\n {item.label.toLocaleUpperCase()}\n </s-text>\n\n <s-text variant=\"bodyMd\" fontWeight=\"medium\">\n {item.value}\n </s-text>\n </s-stack>\n </s-box>\n ))}\n </s-grid>\n )}\n\n {/* Footer */}\n {(meta || action) && (\n <>\n <s-divider />\n\n <s-stack\n direction=\"inline\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n >\n <s-text variant=\"bodySm\" tone=\"subdued\">\n {meta}\n </s-text>\n\n {action && (\n <s-button variant=\"secondary\">\n {action}\n </s-button>\n )}\n </s-stack>\n </>\n )}\n\n </s-stack>\n </s-box>\n </s-card>\n </s-section>\n );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACmBQ;AAFD,SAAS,QAAQ,EAAE,SAAS,YAAY,SAAS,GAAiB;AACrE,SACI,6CAAC,YAAO,SACH;AAAA,kBACG,4CAAC,YAAO,IAAG,KAAI,SAAQ,UAAS,MAAK,YAChC,sBACL;AAAA,IAEJ,4CAAC,eACI,UACL;AAAA,KACJ;AAER;;;ACTQ,IAAAA,sBAAA;AAFD,SAAS,YAAY,EAAE,SAAS,SAAS,GAAqB;AACjE,SACI,6CAAC,eAAU,SACN,UACL;AAER;;;ACYwB,IAAAC,sBAAA;AAjBjB,SAAS,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AACJ,GAAqB;AACjB,SACI,6CAAC,eAAU,SACP,uDAAC,YACG,uDAAC,WAAM,SAAQ,QACX,wDAAC,aAAQ,KAAI,QAGT;AAAA,kDAAC,aAAQ,WAAU,UAAS,YAAW,UAAS,KAAI,SAChD;AAAA,mDAAC,YAAO,SAAQ,aAAY,YAAW,YAClC,iBACL;AAAA,MAEC,UACG,6CAAC,aAAQ,MAAa,kBAAO;AAAA,OAErC;AAAA,IAGC,eACG,6CAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,uBACL;AAAA,IAIH,QAAQ,SAAS,KACd;AAAA,MAAC;AAAA;AAAA,QACG,KAAI;AAAA,QACJ,qBAAoB;AAAA,QAEnB,kBAAQ,IAAI,CAAC,MAAM,MAChB;AAAA,UAAC;AAAA;AAAA,YAEG,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,cAAa;AAAA,YAEb,wDAAC,aAAQ,KAAI,aACT;AAAA,2DAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,eAAK,MAAM,kBAAkB,GAClC;AAAA,cAEA,6CAAC,YAAO,SAAQ,UAAS,YAAW,UAC/B,eAAK,OACV;AAAA,eACJ;AAAA;AAAA,UAbK;AAAA,QAcT,CACH;AAAA;AAAA,IACL;AAAA,KAIF,QAAQ,WACN,8EACI;AAAA,mDAAC,eAAU;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACG,WAAU;AAAA,UACV,gBAAe;AAAA,UACf,YAAW;AAAA,UAEX;AAAA,yDAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,gBACL;AAAA,YAEC,UACG,6CAAC,cAAS,SAAQ,aACb,kBACL;AAAA;AAAA;AAAA,MAER;AAAA,OACJ;AAAA,KAGR,GACJ,GACJ,GACJ;AAER;","names":["import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
// src/components/AppPage/AppPage.tsx
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
function AppPage({ heading, subheading, children }) {
|
|
4
|
+
return /* @__PURE__ */ jsxs("s-page", { heading, children: [
|
|
5
|
+
subheading && /* @__PURE__ */ jsx("s-text", { as: "p", variant: "bodyMd", slot: "subtitle", children: subheading }),
|
|
6
|
+
/* @__PURE__ */ jsx("s-section", { children })
|
|
7
|
+
] });
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// src/components/PageSection/PageSection.tsx
|
|
11
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
12
|
+
function PageSection({ heading, children }) {
|
|
13
|
+
return /* @__PURE__ */ jsx2("s-section", { heading, children });
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// src/components/StatusCard/StatusCard.tsx
|
|
17
|
+
import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
18
|
+
function StatusCard({
|
|
19
|
+
heading,
|
|
20
|
+
title,
|
|
21
|
+
status,
|
|
22
|
+
tone = "info",
|
|
23
|
+
description,
|
|
24
|
+
details = [],
|
|
25
|
+
meta,
|
|
26
|
+
action
|
|
27
|
+
}) {
|
|
28
|
+
return /* @__PURE__ */ jsx3("s-section", { heading, children: /* @__PURE__ */ jsx3("s-card", { children: /* @__PURE__ */ jsx3("s-box", { padding: "base", children: /* @__PURE__ */ jsxs2("s-stack", { gap: "base", children: [
|
|
29
|
+
/* @__PURE__ */ jsxs2("s-stack", { direction: "inline", alignItems: "center", gap: "small", children: [
|
|
30
|
+
/* @__PURE__ */ jsx3("s-text", { variant: "headingMd", fontWeight: "semibold", children: title }),
|
|
31
|
+
status && /* @__PURE__ */ jsx3("s-badge", { tone, children: status })
|
|
32
|
+
] }),
|
|
33
|
+
description && /* @__PURE__ */ jsx3("s-text", { variant: "bodyMd", tone: "subdued", children: description }),
|
|
34
|
+
details.length > 0 && /* @__PURE__ */ jsx3(
|
|
35
|
+
"s-grid",
|
|
36
|
+
{
|
|
37
|
+
gap: "small",
|
|
38
|
+
gridTemplateColumns: "1fr 1fr",
|
|
39
|
+
children: details.map((item, i) => /* @__PURE__ */ jsx3(
|
|
40
|
+
"s-box",
|
|
41
|
+
{
|
|
42
|
+
padding: "base",
|
|
43
|
+
background: "strong",
|
|
44
|
+
borderRadius: "base",
|
|
45
|
+
children: /* @__PURE__ */ jsxs2("s-stack", { gap: "small-100", children: [
|
|
46
|
+
/* @__PURE__ */ jsx3("s-text", { variant: "bodySm", tone: "subdued", children: item.label.toLocaleUpperCase() }),
|
|
47
|
+
/* @__PURE__ */ jsx3("s-text", { variant: "bodyMd", fontWeight: "medium", children: item.value })
|
|
48
|
+
] })
|
|
49
|
+
},
|
|
50
|
+
i
|
|
51
|
+
))
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
(meta || action) && /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
55
|
+
/* @__PURE__ */ jsx3("s-divider", {}),
|
|
56
|
+
/* @__PURE__ */ jsxs2(
|
|
57
|
+
"s-stack",
|
|
58
|
+
{
|
|
59
|
+
direction: "inline",
|
|
60
|
+
justifyContent: "space-between",
|
|
61
|
+
alignItems: "center",
|
|
62
|
+
children: [
|
|
63
|
+
/* @__PURE__ */ jsx3("s-text", { variant: "bodySm", tone: "subdued", children: meta }),
|
|
64
|
+
action && /* @__PURE__ */ jsx3("s-button", { variant: "secondary", children: action })
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
] })
|
|
69
|
+
] }) }) }) });
|
|
70
|
+
}
|
|
71
|
+
export {
|
|
72
|
+
AppPage,
|
|
73
|
+
PageSection,
|
|
74
|
+
StatusCard
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AppPage/AppPage.tsx","../src/components/PageSection/PageSection.tsx","../src/components/StatusCard/StatusCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport interface AppPageProps {\n /** Page heading */\n heading: string;\n /** Page subheading */\n subheading?: string;\n children: ReactNode;\n}\n\n/**\n * AppPage\n *\n * Wraps `s-page` with an `s-section` layout section.\n * Requires the Polaris CDN script in your app's <head>:\n * https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function AppPage({ heading, subheading, children }: AppPageProps) {\n return (\n <s-page heading={heading}>\n {subheading && (\n <s-text as=\"p\" variant=\"bodyMd\" slot=\"subtitle\">\n {subheading}\n </s-text>\n )}\n <s-section>\n {children}\n </s-section>\n </s-page>\n );\n}","import type { ReactNode } from \"react\";\n\nexport type PageSectionVariant = \"oneThird\" | \"oneHalf\" | \"fullWidth\";\n\nexport interface PageSectionProps {\n /** Section heading */\n heading?: string;\n /** Content inside the section */\n children: ReactNode;\n}\n\n/**\n * PageSection\n *\n * A typed wrapper around `s-section` for use inside an `AppPage`\n * or directly within an `s-page`.\n *\n * CDN: https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function PageSection({ heading, children }: PageSectionProps) {\n return (\n <s-section heading={heading}>\n {children}\n </s-section>\n );\n}\n","import type { ReactNode } from \"react\";\n\nexport type StatusTone = \"info\" | \"success\" | \"warning\" | \"critical\";\n\ninterface DetailItem {\n label: string;\n value: string;\n}\n\nexport interface StatusCardsProps {\n heading: string;\n title: string;\n status?: string;\n tone?: StatusTone;\n description?: string;\n details?: DetailItem[];\n meta?: string;\n action?: string;\n}\n\nexport function StatusCard({\n heading,\n title,\n status,\n tone = \"info\",\n description,\n details = [],\n meta,\n action,\n}: StatusCardsProps) {\n return (\n <s-section heading={heading}>\n <s-card>\n <s-box padding=\"base\">\n <s-stack gap=\"base\">\n\n {/* Header */}\n <s-stack direction=\"inline\" alignItems=\"center\" gap=\"small\">\n <s-text variant=\"headingMd\" fontWeight=\"semibold\">\n {title}\n </s-text>\n\n {status && (\n <s-badge tone={tone}>{status}</s-badge>\n )}\n </s-stack>\n\n {/* Description */}\n {description && (\n <s-text variant=\"bodyMd\" tone=\"subdued\">\n {description}\n </s-text>\n )}\n\n {/* Details → GRID (important change) */}\n {details.length > 0 && (\n <s-grid\n gap=\"small\"\n gridTemplateColumns=\"1fr 1fr\"\n >\n {details.map((item, i) => (\n <s-box\n key={i}\n padding=\"base\"\n background=\"strong\"\n borderRadius=\"base\"\n >\n <s-stack gap=\"small-100\">\n <s-text variant=\"bodySm\" tone=\"subdued\">\n {item.label.toLocaleUpperCase()}\n </s-text>\n\n <s-text variant=\"bodyMd\" fontWeight=\"medium\">\n {item.value}\n </s-text>\n </s-stack>\n </s-box>\n ))}\n </s-grid>\n )}\n\n {/* Footer */}\n {(meta || action) && (\n <>\n <s-divider />\n\n <s-stack\n direction=\"inline\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n >\n <s-text variant=\"bodySm\" tone=\"subdued\">\n {meta}\n </s-text>\n\n {action && (\n <s-button variant=\"secondary\">\n {action}\n </s-button>\n )}\n </s-stack>\n </>\n )}\n\n </s-stack>\n </s-box>\n </s-card>\n </s-section>\n );\n}"],"mappings":";AAmBQ,SAEQ,KAFR;AAFD,SAAS,QAAQ,EAAE,SAAS,YAAY,SAAS,GAAiB;AACrE,SACI,qBAAC,YAAO,SACH;AAAA,kBACG,oBAAC,YAAO,IAAG,KAAI,SAAQ,UAAS,MAAK,YAChC,sBACL;AAAA,IAEJ,oBAAC,eACI,UACL;AAAA,KACJ;AAER;;;ACTQ,gBAAAA,YAAA;AAFD,SAAS,YAAY,EAAE,SAAS,SAAS,GAAqB;AACjE,SACI,gBAAAA,KAAC,eAAU,SACN,UACL;AAER;;;ACYwB,SA8CI,UA7CA,OAAAC,MADJ,QAAAC,aAAA;AAjBjB,SAAS,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AACJ,GAAqB;AACjB,SACI,gBAAAD,KAAC,eAAU,SACP,0BAAAA,KAAC,YACG,0BAAAA,KAAC,WAAM,SAAQ,QACX,0BAAAC,MAAC,aAAQ,KAAI,QAGT;AAAA,oBAAAA,MAAC,aAAQ,WAAU,UAAS,YAAW,UAAS,KAAI,SAChD;AAAA,sBAAAD,KAAC,YAAO,SAAQ,aAAY,YAAW,YAClC,iBACL;AAAA,MAEC,UACG,gBAAAA,KAAC,aAAQ,MAAa,kBAAO;AAAA,OAErC;AAAA,IAGC,eACG,gBAAAA,KAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,uBACL;AAAA,IAIH,QAAQ,SAAS,KACd,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACG,KAAI;AAAA,QACJ,qBAAoB;AAAA,QAEnB,kBAAQ,IAAI,CAAC,MAAM,MAChB,gBAAAA;AAAA,UAAC;AAAA;AAAA,YAEG,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,cAAa;AAAA,YAEb,0BAAAC,MAAC,aAAQ,KAAI,aACT;AAAA,8BAAAD,KAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,eAAK,MAAM,kBAAkB,GAClC;AAAA,cAEA,gBAAAA,KAAC,YAAO,SAAQ,UAAS,YAAW,UAC/B,eAAK,OACV;AAAA,eACJ;AAAA;AAAA,UAbK;AAAA,QAcT,CACH;AAAA;AAAA,IACL;AAAA,KAIF,QAAQ,WACN,gBAAAC,MAAA,YACI;AAAA,sBAAAD,KAAC,eAAU;AAAA,MAEX,gBAAAC;AAAA,QAAC;AAAA;AAAA,UACG,WAAU;AAAA,UACV,gBAAe;AAAA,UACf,YAAW;AAAA,UAEX;AAAA,4BAAAD,KAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,gBACL;AAAA,YAEC,UACG,gBAAAA,KAAC,cAAS,SAAQ,aACb,kBACL;AAAA;AAAA;AAAA,MAER;AAAA,OACJ;AAAA,KAGR,GACJ,GACJ,GACJ;AAER;","names":["jsx","jsx","jsxs"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "polaris-plus-ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "React wrappers for Shopify Polaris Web Components",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"shopify",
|
|
7
|
+
"polaris",
|
|
8
|
+
"web-components",
|
|
9
|
+
"react"
|
|
10
|
+
],
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"main": "dist/index.js",
|
|
13
|
+
"module": "dist/index.mjs",
|
|
14
|
+
"types": "dist/index.d.ts",
|
|
15
|
+
"sideEffects": false,
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"import": {
|
|
19
|
+
"types": "./dist/index.d.mts",
|
|
20
|
+
"default": "./dist/index.mjs"
|
|
21
|
+
},
|
|
22
|
+
"require": {
|
|
23
|
+
"types": "./dist/index.d.ts",
|
|
24
|
+
"default": "./dist/index.js"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"files": [
|
|
29
|
+
"dist",
|
|
30
|
+
"README.md"
|
|
31
|
+
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"build": "tsup",
|
|
34
|
+
"dev": "tsup --watch",
|
|
35
|
+
"lint": "eslint . --max-warnings 0",
|
|
36
|
+
"check-types": "tsc --noEmit"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"react": ">=18",
|
|
40
|
+
"react-dom": ">=18"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@repo/eslint-config": "*",
|
|
44
|
+
"@repo/typescript-config": "*",
|
|
45
|
+
"@types/node": "^22.15.3",
|
|
46
|
+
"@types/react": "19.2.2",
|
|
47
|
+
"@types/react-dom": "19.2.2",
|
|
48
|
+
"eslint": "^9.39.1",
|
|
49
|
+
"tsup": "^8.5.1",
|
|
50
|
+
"typescript": "5.9.2"
|
|
51
|
+
},
|
|
52
|
+
"dependencies": {
|
|
53
|
+
"@shopify/polaris-types": "^1.0.1"
|
|
54
|
+
}
|
|
55
|
+
}
|