@magnet-cms/plugin-stripe 0.1.0 → 1.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 +73 -112
  2. package/dist/frontend/bundle.iife.js.map +1 -1
  3. package/package.json +6 -6
  4. package/src/admin/components/recent-payments.tsx +0 -10
  5. package/src/admin/pages/customers.tsx +15 -23
  6. package/src/admin/pages/payments.tsx +11 -19
  7. package/src/admin/pages/products.tsx +12 -20
  8. package/src/admin/pages/subscriptions.tsx +11 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magnet-cms/plugin-stripe",
3
- "version": "0.1.0",
3
+ "version": "1.0.0",
4
4
  "description": "Stripe 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.2.0",
67
+ "@magnet-cms/common": "^0.2.0",
68
+ "@magnet-cms/core": "^2.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
  "lucide-react": ">=0.400.0",
73
73
  "react": ">=18.0.0",
package/src/admin/components/recent-payments.tsx CHANGED
@@ -4,15 +4,6 @@ import {
4
4
  type DataTableColumn,
5
5
  } from '@magnet-cms/ui/components'
6
6
 
7
- const contentManagerStyles = `
8
- .table-row-hover:hover td {
9
- background-color: #F9FAFB;
10
- }
11
- .table-row-hover.group:hover td {
12
- background-color: #F9FAFB;
13
- }
14
- `
15
-
16
7
  interface Payment {
17
8
  id: string
18
9
  amount: number
@@ -87,7 +78,6 @@ export function RecentPayments({ payments }: RecentPaymentsProps) {
87
78
 
88
79
  return (
89
80
  <>
90
- <style>{contentManagerStyles}</style>
91
81
  <DataTable
92
82
  data={payments}
93
83
  columns={columns}
package/src/admin/pages/customers.tsx CHANGED
@@ -10,15 +10,6 @@ import {
10
10
  import { ExternalLink, Search } from 'lucide-react'
11
11
  import { useEffect, useState } from 'react'
12
12
 
13
- const contentManagerStyles = `
14
- .table-row-hover:hover td {
15
- background-color: #F9FAFB;
16
- }
17
- .table-row-hover.group:hover td {
18
- background-color: #F9FAFB;
19
- }
20
- `
21
-
22
13
  interface Customer {
23
14
  id: string
24
15
  stripeCustomerId: string
@@ -62,7 +53,7 @@ const CustomersPage = () => {
62
53
  header: 'Name',
63
54
  accessorKey: 'name',
64
55
  format: (value, row) => (
65
- <div className="text-sm font-medium text-gray-900">
56
+ <div className="text-sm font-medium text-foreground">
66
57
  {(value as string) ?? row.original.name ?? '—'}
67
58
  </div>
68
59
  ),
@@ -72,7 +63,7 @@ const CustomersPage = () => {
72
63
  header: 'Email',
73
64
  accessorKey: 'email',
74
65
  format: (value) => (
75
- <div className="text-sm text-gray-600">{value as string}</div>
66
+ <div className="text-sm text-muted-foreground">{value as string}</div>
76
67
  ),
77
68
  },
78
69
  {
@@ -80,7 +71,7 @@ const CustomersPage = () => {
80
71
  header: 'User ID',
81
72
  cell: (row) =>
82
73
  row.original.userId ? (
83
- <span className="inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20">
74
+ <span className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground ring-1 ring-inset ring-border">
84
75
  {row.original.userId}
85
76
  </span>
86
77
  ) : (
@@ -92,7 +83,7 @@ const CustomersPage = () => {
92
83
  header: 'Created',
93
84
  accessorKey: 'createdAt',
94
85
  format: (value) => (
95
- <span className="text-sm text-gray-500">
86
+ <span className="text-sm text-muted-foreground">
96
87
  {new Date(value as string).toLocaleDateString()}
97
88
  </span>
98
89
  ),
@@ -115,7 +106,7 @@ const CustomersPage = () => {
115
106
  ]
116
107
 
117
108
  const renderToolbar = () => (
118
- <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">
109
+ <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">
119
110
  <div className="relative w-full sm:w-80">
120
111
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
121
112
  <Input
@@ -137,11 +128,13 @@ const CustomersPage = () => {
137
128
  const startRow = pageIndex * pageSize + 1
138
129
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
139
130
  return (
140
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
141
- <div className="text-xs text-gray-500">
142
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
143
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
144
- <span className="font-medium text-gray-900">{totalRows}</span> results
131
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
132
+ <div className="text-xs text-muted-foreground">
133
+ Showing{' '}
134
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
135
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
136
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
137
+ results
145
138
  </div>
146
139
  <div className="flex items-center gap-2">
147
140
  <Button
@@ -167,7 +160,7 @@ const CustomersPage = () => {
167
160
 
168
161
  if (loading) {
169
162
  return (
170
- <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">
171
164
  <PageHeader title="Customers" />
172
165
  <div className="flex-1 p-6">
173
166
  <Skeleton className="h-96 w-full" />
@@ -177,13 +170,12 @@ const CustomersPage = () => {
177
170
  }
178
171
 
179
172
  return (
180
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
181
- <style>{contentManagerStyles}</style>
173
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
182
174
  <PageHeader
183
175
  title="Customers"
184
176
  description={`${customers.length} customer(s) total.`}
185
177
  />
186
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
178
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
187
179
  <div className="flex-1 overflow-hidden relative">
188
180
  <div className="absolute inset-0 overflow-auto">
189
181
  <DataTable
package/src/admin/pages/payments.tsx CHANGED
@@ -14,15 +14,6 @@ import {
14
14
  } from '@magnet-cms/ui/components'
15
15
  import { useEffect, useState } from 'react'
16
16
 
17
- const contentManagerStyles = `
18
- .table-row-hover:hover td {
19
- background-color: #F9FAFB;
20
- }
21
- .table-row-hover.group:hover td {
22
- background-color: #F9FAFB;
23
- }
24
- `
25
-
26
17
  interface Payment {
27
18
  id: string
28
19
  stripePaymentIntentId: string
@@ -153,7 +144,7 @@ const PaymentsPage = () => {
153
144
  ]
154
145
 
155
146
  const renderToolbar = () => (
156
- <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">
147
+ <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">
157
148
  <div className="max-w-[200px]">
158
149
  <Select value={statusFilter} onValueChange={setStatusFilter}>
159
150
  <SelectTrigger>
@@ -179,11 +170,13 @@ const PaymentsPage = () => {
179
170
  const startRow = pageIndex * pageSize + 1
180
171
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
181
172
  return (
182
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
183
- <div className="text-xs text-gray-500">
184
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
185
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
186
- <span className="font-medium text-gray-900">{totalRows}</span> results
173
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
174
+ <div className="text-xs text-muted-foreground">
175
+ Showing{' '}
176
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
177
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
178
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
179
+ results
187
180
  </div>
188
181
  <div className="flex items-center gap-2">
189
182
  <Button
@@ -209,7 +202,7 @@ const PaymentsPage = () => {
209
202
 
210
203
  if (loading) {
211
204
  return (
212
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
205
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
213
206
  <PageHeader title="Payments" />
214
207
  <div className="flex-1 p-6">
215
208
  <Skeleton className="h-96 w-full" />
@@ -219,13 +212,12 @@ const PaymentsPage = () => {
219
212
  }
220
213
 
221
214
  return (
222
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
223
- <style>{contentManagerStyles}</style>
215
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
224
216
  <PageHeader
225
217
  title="Payments"
226
218
  description={`${payments.length} payment(s) total.`}
227
219
  />
228
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
220
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
229
221
  <div className="flex-1 overflow-hidden relative">
230
222
  <div className="absolute inset-0 overflow-auto">
231
223
  <DataTable
package/src/admin/pages/products.tsx CHANGED
@@ -11,15 +11,6 @@ import {
11
11
  import { ExternalLink, RefreshCw, Search } from 'lucide-react'
12
12
  import { useCallback, useEffect, useState } from 'react'
13
13
 
14
- const contentManagerStyles = `
15
- .table-row-hover:hover td {
16
- background-color: #F9FAFB;
17
- }
18
- .table-row-hover.group:hover td {
19
- background-color: #F9FAFB;
20
- }
21
- `
22
-
23
14
  interface Product {
24
15
  id: string
25
16
  stripeProductId: string
@@ -76,7 +67,7 @@ const ProductsPage = () => {
76
67
  header: 'Name',
77
68
  accessorKey: 'name',
78
69
  format: (value) => (
79
- <div className="text-sm font-medium text-gray-900">
70
+ <div className="text-sm font-medium text-foreground">
80
71
  {value as string}
81
72
  </div>
82
73
  ),
@@ -118,7 +109,7 @@ const ProductsPage = () => {
118
109
  ]
119
110
 
120
111
  const renderToolbar = () => (
121
- <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">
112
+ <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">
122
113
  <div className="relative w-full sm:w-80">
123
114
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
124
115
  <Input
@@ -140,11 +131,13 @@ const ProductsPage = () => {
140
131
  const startRow = pageIndex * pageSize + 1
141
132
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
142
133
  return (
143
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
144
- <div className="text-xs text-gray-500">
145
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
146
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
147
- <span className="font-medium text-gray-900">{totalRows}</span> results
134
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
135
+ <div className="text-xs text-muted-foreground">
136
+ Showing{' '}
137
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
138
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
139
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
140
+ results
148
141
  </div>
149
142
  <div className="flex items-center gap-2">
150
143
  <Button
@@ -170,7 +163,7 @@ const ProductsPage = () => {
170
163
 
171
164
  if (loading) {
172
165
  return (
173
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
166
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
174
167
  <PageHeader title="Products" />
175
168
  <div className="flex-1 p-6">
176
169
  <Skeleton className="h-96 w-full" />
@@ -180,8 +173,7 @@ const ProductsPage = () => {
180
173
  }
181
174
 
182
175
  return (
183
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
184
- <style>{contentManagerStyles}</style>
176
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
185
177
  <PageHeader
186
178
  title="Products"
187
179
  description={`${products.length} product(s). Click "Sync from Stripe" to import.`}
@@ -194,7 +186,7 @@ const ProductsPage = () => {
194
186
  </Button>
195
187
  }
196
188
  />
197
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
189
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
198
190
  <div className="flex-1 overflow-hidden relative">
199
191
  <div className="absolute inset-0 overflow-auto">
200
192
  <DataTable
package/src/admin/pages/subscriptions.tsx CHANGED
@@ -14,15 +14,6 @@ import {
14
14
  } from '@magnet-cms/ui/components'
15
15
  import { useEffect, useState } from 'react'
16
16
 
17
- const contentManagerStyles = `
18
- .table-row-hover:hover td {
19
- background-color: #F9FAFB;
20
- }
21
- .table-row-hover.group:hover td {
22
- background-color: #F9FAFB;
23
- }
24
- `
25
-
26
17
  interface Subscription {
27
18
  id: string
28
19
  stripeSubscriptionId: string
@@ -151,7 +142,7 @@ const SubscriptionsPage = () => {
151
142
  ]
152
143
 
153
144
  const renderToolbar = () => (
154
- <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">
145
+ <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">
155
146
  <div className="max-w-[200px]">
156
147
  <Select value={statusFilter} onValueChange={setStatusFilter}>
157
148
  <SelectTrigger>
@@ -179,11 +170,13 @@ const SubscriptionsPage = () => {
179
170
  const startRow = pageIndex * pageSize + 1
180
171
  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
181
172
  return (
182
- <div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
183
- <div className="text-xs text-gray-500">
184
- Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
185
- to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
186
- <span className="font-medium text-gray-900">{totalRows}</span> results
173
+ <div className="flex-none px-6 py-4 border-t border-border bg-background flex items-center justify-between">
174
+ <div className="text-xs text-muted-foreground">
175
+ Showing{' '}
176
+ <span className="font-medium text-foreground">{startRow}</span> to{' '}
177
+ <span className="font-medium text-foreground">{endRow}</span> of{' '}
178
+ <span className="font-medium text-foreground">{totalRows}</span>{' '}
179
+ results
187
180
  </div>
188
181
  <div className="flex items-center gap-2">
189
182
  <Button
@@ -209,7 +202,7 @@ const SubscriptionsPage = () => {
209
202
 
210
203
  if (loading) {
211
204
  return (
212
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
205
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
213
206
  <PageHeader title="Subscriptions" />
214
207
  <div className="flex-1 p-6">
215
208
  <Skeleton className="h-96 w-full" />
@@ -219,13 +212,12 @@ const SubscriptionsPage = () => {
219
212
  }
220
213
 
221
214
  return (
222
- <div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
223
- <style>{contentManagerStyles}</style>
215
+ <div className="flex-1 flex flex-col min-w-0 bg-background h-full relative overflow-hidden">
224
216
  <PageHeader
225
217
  title="Subscriptions"
226
218
  description={`${subscriptions.length} subscription(s) total.`}
227
219
  />
228
- <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
220
+ <div className="flex-1 flex flex-col overflow-hidden bg-muted/50">
229
221
  <div className="flex-1 overflow-hidden relative">
230
222
  <div className="absolute inset-0 overflow-auto">
231
223
  <DataTable