@magnet-cms/plugin-polar 0.1.0 → 2.0.0

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.
Files changed (8) hide show
  1. package/dist/frontend/bundle.iife.js +71 -61
  2. package/dist/frontend/bundle.iife.js.map +1 -1
  3. package/package.json +6 -6
  4. package/src/admin/pages/benefits.tsx +11 -9
  5. package/src/admin/pages/customers.tsx +12 -10
  6. package/src/admin/pages/orders.tsx +10 -8
  7. package/src/admin/pages/products.tsx +12 -10
  8. package/src/admin/pages/subscriptions.tsx +11 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magnet-cms/plugin-polar",
3
- "version": "0.1.0",
3
+ "version": "2.0.0",
4
4
  "description": "Polar.sh payments plugin for Magnet CMS — products, subscriptions, webhooks, and admin dashboard",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -63,11 +63,11 @@
63
63
  "vite": "^6.0.7"
64
64
  },
65
65
  "peerDependencies": {
66
- "@magnet-cms/admin": "^0.1.2",
67
- "@magnet-cms/common": "^0.1.0",
68
- "@magnet-cms/core": "^1.0.3",
69
- "@magnet-cms/ui": "^0.1.0",
70
- "@magnet-cms/utils": "^0.1.0",
66
+ "@magnet-cms/admin": "^0.3.0",
67
+ "@magnet-cms/common": "^0.3.0",
68
+ "@magnet-cms/core": "^3.0.0",
69
+ "@magnet-cms/ui": "^0.1.3",
70
+ "@magnet-cms/utils": "^0.1.1",
71
71
  "@nestjs/common": "^11.1.12",
72
72
  "@polar-sh/sdk": "^0.46.0",
73
73
  "lucide-react": ">=0.400.0",
package/src/admin/pages/benefits.tsx CHANGED
@@ -82,7 +82,7 @@ const BenefitsPage = () => {
82
82
  ]
83
83
 
84
84
  const renderToolbar = () => (
85
- <div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none bg-white border-b border-gray-200">
85
+ <div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none border-b border-border bg-background">
86
86
  <div className="relative w-full sm:w-80">
87
87
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
88
88
  <Input
@@ -104,11 +104,13 @@ const BenefitsPage = () => {
104
104
  const startRow = pageIndex * pageSize + 1
105
105
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
106
106
  return (
107
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
108
- <div className="text-xs text-gray-500">
109
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
110
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
111
- <span className="font-medium text-gray-900">{totalRows}</span> results
107
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
108
+ <div className="text-xs text-muted-foreground">
109
+ Showing{' '}
110
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
111
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
112
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
113
+ results
112
114
  </div>
113
115
  <div className="flex items-center gap-2">
114
116
  <Button
@@ -134,7 +136,7 @@ const BenefitsPage = () => {
134
136
 
135
137
  if (loading) {
136
138
  return (
137
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
139
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
138
140
  <PageHeader title="Benefits" />
139
141
  <div className="flex-1 p-6">
140
142
  <Skeleton className="h-96 w-full" />
@@ -144,12 +146,12 @@ const BenefitsPage = () => {
144
146
  }
145
147
 
146
148
  return (
147
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
149
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
148
150
  <PageHeader
149
151
  title="Benefits"
150
152
  description={`${benefits.length} benefit(s) total.`}
151
153
  />
152
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
154
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
153
155
  <div className="flex-1 overflow-hidden relative">
154
156
  <div className="absolute inset-0 overflow-auto">
155
157
  <DataTable
package/src/admin/pages/customers.tsx CHANGED
@@ -52,7 +52,7 @@ const CustomersPage = () => {
52
52
  header: 'Name',
53
53
  accessorKey: 'name',
54
54
  format: (value) => (
55
- <div className="text-sm font-medium text-gray-900">
55
+ <div className="text-sm font-medium text-foreground">
56
56
  {(value as string) ?? '—'}
57
57
  </div>
58
58
  ),
@@ -94,7 +94,7 @@ const CustomersPage = () => {
94
94
  ]
95
95
 
96
96
  const renderToolbar = () => (
97
- <div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none bg-white border-b border-gray-200">
97
+ <div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none border-b border-border bg-background">
98
98
  <div className="relative w-full sm:w-80">
99
99
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
100
100
  <Input
@@ -116,11 +116,13 @@ const CustomersPage = () => {
116
116
  const startRow = pageIndex * pageSize + 1
117
117
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
118
118
  return (
119
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
120
- <div className="text-xs text-gray-500">
121
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
122
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
123
- <span className="font-medium text-gray-900">{totalRows}</span> results
119
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
120
+ <div className="text-xs text-muted-foreground">
121
+ Showing{' '}
122
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
123
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
124
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
125
+ results
124
126
  </div>
125
127
  <div className="flex items-center gap-2">
126
128
  <Button
@@ -146,7 +148,7 @@ const CustomersPage = () => {
146
148
 
147
149
  if (loading) {
148
150
  return (
149
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
151
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
150
152
  <PageHeader title="Customers" />
151
153
  <div className="flex-1 p-6">
152
154
  <Skeleton className="h-96 w-full" />
@@ -156,12 +158,12 @@ const CustomersPage = () => {
156
158
  }
157
159
 
158
160
  return (
159
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
161
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
160
162
  <PageHeader
161
163
  title="Customers"
162
164
  description={`${customers.length} customer(s) total.`}
163
165
  />
164
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
166
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
165
167
  <div className="flex-1 overflow-hidden relative">
166
168
  <div className="absolute inset-0 overflow-auto">
167
169
  <DataTable
package/src/admin/pages/orders.tsx CHANGED
@@ -118,11 +118,13 @@ const OrdersPage = () => {
118
118
  const startRow = pageIndex * pageSize + 1
119
119
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
120
120
  return (
121
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
122
- <div className="text-xs text-gray-500">
123
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
124
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
125
- <span className="font-medium text-gray-900">{totalRows}</span> results
121
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
122
+ <div className="text-xs text-muted-foreground">
123
+ Showing{' '}
124
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
125
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
126
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
127
+ results
126
128
  </div>
127
129
  <div className="flex items-center gap-2">
128
130
  <Button
@@ -148,7 +150,7 @@ const OrdersPage = () => {
148
150
 
149
151
  if (loading) {
150
152
  return (
151
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
153
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
152
154
  <PageHeader title="Orders" />
153
155
  <div className="flex-1 p-6">
154
156
  <Skeleton className="h-96 w-full" />
@@ -158,12 +160,12 @@ const OrdersPage = () => {
158
160
  }
159
161
 
160
162
  return (
161
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
163
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
162
164
  <PageHeader
163
165
  title="Orders"
164
166
  description={`${orders.length} order(s) total.`}
165
167
  />
166
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
168
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
167
169
  <div className="flex-1 overflow-hidden relative">
168
170
  <div className="absolute inset-0 overflow-auto">
169
171
  <DataTable
package/src/admin/pages/products.tsx CHANGED
@@ -66,7 +66,7 @@ const ProductsPage = () => {
66
66
  header: 'Name',
67
67
  accessorKey: 'name',
68
68
  format: (value) => (
69
- <div className="text-sm font-medium text-gray-900">
69
+ <div className="text-sm font-medium text-foreground">
70
70
  {value as string}
71
71
  </div>
72
72
  ),
@@ -102,7 +102,7 @@ const ProductsPage = () => {
102
102
  ]
103
103
 
104
104
  const renderToolbar = () => (
105
- <div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none bg-white border-b border-gray-200">
105
+ <div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none border-b border-border bg-background">
106
106
  <div className="relative w-full sm:w-80">
107
107
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
108
108
  <Input
@@ -124,11 +124,13 @@ const ProductsPage = () => {
124
124
  const startRow = pageIndex * pageSize + 1
125
125
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
126
126
  return (
127
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
128
- <div className="text-xs text-gray-500">
129
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
130
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
131
- <span className="font-medium text-gray-900">{totalRows}</span> results
127
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
128
+ <div className="text-xs text-muted-foreground">
129
+ Showing{' '}
130
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
131
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
132
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
133
+ results
132
134
  </div>
133
135
  <div className="flex items-center gap-2">
134
136
  <Button
@@ -154,7 +156,7 @@ const ProductsPage = () => {
154
156
 
155
157
  if (loading) {
156
158
  return (
157
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
159
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
158
160
  <PageHeader title="Products" />
159
161
  <div className="flex-1 p-6">
160
162
  <Skeleton className="h-96 w-full" />
@@ -164,7 +166,7 @@ const ProductsPage = () => {
164
166
  }
165
167
 
166
168
  return (
167
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
169
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
168
170
  <PageHeader
169
171
  title="Products"
170
172
  description={`${products.length} product(s). Click "Sync from Polar" to import.`}
@@ -177,7 +179,7 @@ const ProductsPage = () => {
177
179
  </Button>
178
180
  }
179
181
  />
180
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
182
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
181
183
  <div className="flex-1 overflow-hidden relative">
182
184
  <div className="absolute inset-0 overflow-auto">
183
185
  <DataTable
package/src/admin/pages/subscriptions.tsx CHANGED
@@ -145,7 +145,7 @@ const SubscriptionsPage = () => {
145
145
  ]
146
146
 
147
147
  const renderToolbar = () => (
148
- <div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none bg-white border-b border-gray-200">
148
+ <div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none border-b border-border bg-background">
149
149
  <div className="max-w-[200px]">
150
150
  <Select value={statusFilter} onValueChange={setStatusFilter}>
151
151
  <SelectTrigger>
@@ -174,11 +174,13 @@ const SubscriptionsPage = () => {
174
174
  const startRow = pageIndex * pageSize + 1
175
175
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
176
176
  return (
177
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
178
- <div className="text-xs text-gray-500">
179
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
180
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
181
- <span className="font-medium text-gray-900">{totalRows}</span> results
177
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
178
+ <div className="text-xs text-muted-foreground">
179
+ Showing{' '}
180
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
181
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
182
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
183
+ results
182
184
  </div>
183
185
  <div className="flex items-center gap-2">
184
186
  <Button
@@ -204,7 +206,7 @@ const SubscriptionsPage = () => {
204
206
 
205
207
  if (loading) {
206
208
  return (
207
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
209
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
208
210
  <PageHeader title="Subscriptions" />
209
211
  <div className="flex-1 p-6">
210
212
  <Skeleton className="h-96 w-full" />
@@ -214,12 +216,12 @@ const SubscriptionsPage = () => {
214
216
  }
215
217
 
216
218
  return (
217
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
219
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
218
220
  <PageHeader
219
221
  title="Subscriptions"
220
222
  description={`${subscriptions.length} subscription(s) total.`}
221
223
  />
222
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
224
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
223
225
  <div className="flex-1 overflow-hidden relative">
224
226
  <div className="absolute inset-0 overflow-auto">
225
227
  <DataTable