@meaple-com/react-headless-components 1.0.6 → 2.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.
Files changed (4) hide show
  1. package/README.md +123 -0
  2. package/dist/index.d.cts +12 -12
  3. package/dist/index.d.ts +12 -12
  4. package/package.json +5 -5
package/README.md ADDED
@@ -0,0 +1,123 @@
1
+ # @meaple-com/react-headless-components
2
+
3
+ Headless React components for the [Meaple](https://meaple.com) ticketing platform. They handle data (via `@meaple-com/react-query`) and cart logic; you supply the UI with render props.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @meaple-com/react-headless-components @meaple-com/react-query @meaple-com/core @meaple-com/types
9
+ # or
10
+ pnpm add @meaple-com/react-headless-components @meaple-com/react-query @meaple-com/core @meaple-com/types
11
+ # or
12
+ bun add @meaple-com/react-headless-components @meaple-com/react-query @meaple-com/core @meaple-com/types
13
+ ```
14
+
15
+ **Peer dependencies:**
16
+
17
+ - `react` ^19.0.0
18
+ - `@meaple-com/react-query` ^1.0.6
19
+
20
+ Make sure the app is wrapped with `QueryClientProvider` and `MeapleSDKProvider` as described in [@meaple-com/react-query](https://www.npmjs.com/package/@meaple-com/react-query).
21
+
22
+ ## Setup: Cart and coupon
23
+
24
+ For checkout flows, wrap the relevant tree with `CartProvider`:
25
+
26
+ ```tsx
27
+ import { CartProvider } from '@meaple-com/react-headless-components';
28
+
29
+ <CartProvider initialCoupon={null}>
30
+ {/* Components that use Cart, Coupon, ListEventTickets, etc. */}
31
+ </CartProvider>
32
+ ```
33
+
34
+ ## Components
35
+
36
+ Components use a **render-props** API: they call `children` with data and state so you can render your own UI.
37
+
38
+ ### Lists (read-only)
39
+
40
+ | Component | Description | Render props |
41
+ |-----------|-------------|--------------|
42
+ | **`ListEvents`** | List events (uses `useEvents`) | `events`, `isPending`, `error` |
43
+ | **`ListCategories`** | List categories | `categories`, `isPending`, `error` |
44
+ | **`ListEventTickets`** | Tickets for an event | `tickets`, `isPending`, `error` |
45
+ | **`ListEventProducts`** | Products for an event | `products`, `isPending`, `error` |
46
+ | **`ListUserEvents`** | Current user’s events | `events`, `isPending`, `error` |
47
+ | **`ListUserEventTickets`** | Current user’s tickets for an event | `tickets`, `isPending`, `error` |
48
+ | **`ListUserOrders`** | Current user’s orders | `orders`, `isPending`, `error` |
49
+
50
+ ### Order and coupon
51
+
52
+ | Component | Description | Render props |
53
+ |-----------|-------------|--------------|
54
+ | **`GetOrder`** | Single order by ID | order data, `isPending`, `error` |
55
+ | **`Coupon`** | Check and apply coupon | mutation + coupon state |
56
+ | **`Cart`** | Cart totals, items, clear | `items`, `totalAmount`, `totalPrice`, `totalDiscount`, `clearCart`, etc. |
57
+ | **`TicketQuantityController`** | Add/remove ticket to/from cart | quantity controls (uses `useTicketQuantity`) |
58
+
59
+ ### Hooks
60
+
61
+ - **`useCart()`** – Cart context (items, increment, decrement, clear, coupon, applyCoupon, computeItemDiscount). Use inside `CartProvider`.
62
+ - **`useTicketQuantity(ticket, options?)`** – Quantity in cart for a ticket (and optional seat), plus increment/decrement.
63
+
64
+ ## Example: Event list and cart
65
+
66
+ ```tsx
67
+ import {
68
+ ListEvents,
69
+ ListEventTickets,
70
+ Cart,
71
+ CartProvider,
72
+ TicketQuantityController,
73
+ } from '@meaple-com/react-headless-components';
74
+
75
+ function EventsPage() {
76
+ return (
77
+ <ListEvents params={{ limit: 10 }}>
78
+ {({ events, isPending, error }) => {
79
+ if (isPending) return <p>Loading...</p>;
80
+ if (error) return <p>Error: {error.message}</p>;
81
+ return (
82
+ <ul>
83
+ {events.map((e) => (
84
+ <li key={e.id}>
85
+ <a href={`/event/${e.id}/${e.slug}`}>{e.name}</a>
86
+ </li>
87
+ ))}
88
+ </ul>
89
+ );
90
+ }}
91
+ </ListEvents>
92
+ );
93
+ }
94
+
95
+ function TicketSelection({ eventId, slug }) {
96
+ return (
97
+ <CartProvider initialCoupon={null}>
98
+ <ListEventTickets eventId={eventId} slug={slug}>
99
+ {({ tickets, isPending, error }) => (
100
+ // ... render tickets, each wrapped in TicketQuantityController
101
+ )}
102
+ </ListEventTickets>
103
+
104
+ <Cart>
105
+ {({ items, totalPrice, clearCart }) => (
106
+ <div>
107
+ <p>Items: {items.length}, Total: {totalPrice}</p>
108
+ <button onClick={clearCart}>Clear</button>
109
+ </div>
110
+ )}
111
+ </Cart>
112
+ </CartProvider>
113
+ );
114
+ }
115
+ ```
116
+
117
+ ## Styling
118
+
119
+ These components do not ship styles. You style the UI inside the render props (CSS, Tailwind, CSS-in-JS, etc.).
120
+
121
+ ## Documentation
122
+
123
+ [https://docs.meaple.com.br/](https://docs.meaple.com.br/)
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import * as _meaple_com_types from '@meaple-com/types';
3
- import { TicketProps, GroupProps, CouponProps, GetOrderProps as GetOrderProps$1, CategoryProps, FindEventProductItemProps, FindEventItemProps, FindEventsParams, FindEventTicketItemProps, FindEventTicketGroupProps, GetUserEventsProps, UserTicketProps, UserOrderProps } from '@meaple-com/types';
3
+ import { TicketProps, GroupProps, CouponProps, GetOrderResponseProps as GetOrderResponseProps$1, CategoryProps, GetEventProductProps, FindEventProps, FindEventsParams, GetEventTicketProps, GetEventTicketGroupProps, GetUserEventProps, UserTicketProps, GetUserOrderProps } from '@meaple-com/types';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { useCheckCoupon, useOrder, useCategories, useEventProducts, useEvents, useEventTickets, useUserEvents, useUserEventTickets, useUserOrders } from '@meaple-com/react-query';
6
6
 
@@ -92,18 +92,18 @@ declare function mapCouponData(cart: ReturnType<typeof useCart>, couponState: {
92
92
  };
93
93
  declare const Coupon: ({ children, eventId, options }: CouponHeadlessProps) => react_jsx_runtime.JSX.Element;
94
94
 
95
- type GetOrderProps = {
95
+ type GetOrderResponseProps = {
96
96
  children: (props: {
97
- order: GetOrderProps$1['order'] | null;
98
- paidTickets: GetOrderProps$1['paidTickets'] | null;
99
- paymentIntent: GetOrderProps$1['paymentIntent'];
97
+ order: GetOrderResponseProps$1['order'] | null;
98
+ paidTickets: GetOrderResponseProps$1['paidTickets'] | null;
99
+ paymentIntent: GetOrderResponseProps$1['paymentIntent'];
100
100
  isPending: boolean;
101
101
  error: Error | null;
102
102
  }) => ReactNode;
103
103
  orderId: string;
104
104
  options?: Parameters<typeof useOrder>[1];
105
105
  };
106
- declare const GetOrder: ({ children, orderId, options }: GetOrderProps) => ReactNode;
106
+ declare const GetOrder: ({ children, orderId, options }: GetOrderResponseProps) => ReactNode;
107
107
 
108
108
  type ListCategoriesProps = {
109
109
  children: (props: {
@@ -117,7 +117,7 @@ declare const ListCategories: ({ children, options }: ListCategoriesProps) => Re
117
117
 
118
118
  type ListEventProductsProps = {
119
119
  children: (props: {
120
- products: FindEventProductItemProps[];
120
+ products: GetEventProductProps[];
121
121
  fee: number;
122
122
  isPending: boolean;
123
123
  error: Error | null;
@@ -130,7 +130,7 @@ declare const ListEventProducts: ({ children, eventId, privateToken, options, }:
130
130
 
131
131
  type ListEventsProps = {
132
132
  children: (props: {
133
- events: FindEventItemProps[];
133
+ events: FindEventProps[];
134
134
  isPending: boolean;
135
135
  error: Error | null;
136
136
  }) => ReactNode;
@@ -141,8 +141,8 @@ declare const ListEvents: ({ children, params, options }: ListEventsProps) => Re
141
141
 
142
142
  type ListEventTicketsProps = {
143
143
  children: (props: {
144
- tickets: FindEventTicketItemProps[];
145
- groups: FindEventTicketGroupProps[];
144
+ tickets: GetEventTicketProps[];
145
+ groups: GetEventTicketGroupProps[];
146
146
  fee: number;
147
147
  isPending: boolean;
148
148
  error: Error | null;
@@ -157,7 +157,7 @@ declare const ListEventTickets: ({ children, eventId, privateToken, predecessorI
157
157
  type SectionType = 'coming_soon' | 'past' | 'awards';
158
158
  type ListUserEventsProps = {
159
159
  children: (props: {
160
- events: GetUserEventsProps[];
160
+ events: GetUserEventProps[];
161
161
  isPending: boolean;
162
162
  error: Error | null;
163
163
  }) => ReactNode;
@@ -180,7 +180,7 @@ declare const ListUserEventTickets: ({ children, eventId, options, }: ListUserEv
180
180
  type SectionStatus = 'PAID' | 'REFUNDED';
181
181
  type ListUserOrdersProps = {
182
182
  children: (props: {
183
- orders: UserOrderProps[];
183
+ orders: GetUserOrderProps[];
184
184
  isPending: boolean;
185
185
  error: Error | null;
186
186
  }) => ReactNode;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import * as _meaple_com_types from '@meaple-com/types';
3
- import { TicketProps, GroupProps, CouponProps, GetOrderProps as GetOrderProps$1, CategoryProps, FindEventProductItemProps, FindEventItemProps, FindEventsParams, FindEventTicketItemProps, FindEventTicketGroupProps, GetUserEventsProps, UserTicketProps, UserOrderProps } from '@meaple-com/types';
3
+ import { TicketProps, GroupProps, CouponProps, GetOrderResponseProps as GetOrderResponseProps$1, CategoryProps, GetEventProductProps, FindEventProps, FindEventsParams, GetEventTicketProps, GetEventTicketGroupProps, GetUserEventProps, UserTicketProps, GetUserOrderProps } from '@meaple-com/types';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { useCheckCoupon, useOrder, useCategories, useEventProducts, useEvents, useEventTickets, useUserEvents, useUserEventTickets, useUserOrders } from '@meaple-com/react-query';
6
6
 
@@ -92,18 +92,18 @@ declare function mapCouponData(cart: ReturnType<typeof useCart>, couponState: {
92
92
  };
93
93
  declare const Coupon: ({ children, eventId, options }: CouponHeadlessProps) => react_jsx_runtime.JSX.Element;
94
94
 
95
- type GetOrderProps = {
95
+ type GetOrderResponseProps = {
96
96
  children: (props: {
97
- order: GetOrderProps$1['order'] | null;
98
- paidTickets: GetOrderProps$1['paidTickets'] | null;
99
- paymentIntent: GetOrderProps$1['paymentIntent'];
97
+ order: GetOrderResponseProps$1['order'] | null;
98
+ paidTickets: GetOrderResponseProps$1['paidTickets'] | null;
99
+ paymentIntent: GetOrderResponseProps$1['paymentIntent'];
100
100
  isPending: boolean;
101
101
  error: Error | null;
102
102
  }) => ReactNode;
103
103
  orderId: string;
104
104
  options?: Parameters<typeof useOrder>[1];
105
105
  };
106
- declare const GetOrder: ({ children, orderId, options }: GetOrderProps) => ReactNode;
106
+ declare const GetOrder: ({ children, orderId, options }: GetOrderResponseProps) => ReactNode;
107
107
 
108
108
  type ListCategoriesProps = {
109
109
  children: (props: {
@@ -117,7 +117,7 @@ declare const ListCategories: ({ children, options }: ListCategoriesProps) => Re
117
117
 
118
118
  type ListEventProductsProps = {
119
119
  children: (props: {
120
- products: FindEventProductItemProps[];
120
+ products: GetEventProductProps[];
121
121
  fee: number;
122
122
  isPending: boolean;
123
123
  error: Error | null;
@@ -130,7 +130,7 @@ declare const ListEventProducts: ({ children, eventId, privateToken, options, }:
130
130
 
131
131
  type ListEventsProps = {
132
132
  children: (props: {
133
- events: FindEventItemProps[];
133
+ events: FindEventProps[];
134
134
  isPending: boolean;
135
135
  error: Error | null;
136
136
  }) => ReactNode;
@@ -141,8 +141,8 @@ declare const ListEvents: ({ children, params, options }: ListEventsProps) => Re
141
141
 
142
142
  type ListEventTicketsProps = {
143
143
  children: (props: {
144
- tickets: FindEventTicketItemProps[];
145
- groups: FindEventTicketGroupProps[];
144
+ tickets: GetEventTicketProps[];
145
+ groups: GetEventTicketGroupProps[];
146
146
  fee: number;
147
147
  isPending: boolean;
148
148
  error: Error | null;
@@ -157,7 +157,7 @@ declare const ListEventTickets: ({ children, eventId, privateToken, predecessorI
157
157
  type SectionType = 'coming_soon' | 'past' | 'awards';
158
158
  type ListUserEventsProps = {
159
159
  children: (props: {
160
- events: GetUserEventsProps[];
160
+ events: GetUserEventProps[];
161
161
  isPending: boolean;
162
162
  error: Error | null;
163
163
  }) => ReactNode;
@@ -180,7 +180,7 @@ declare const ListUserEventTickets: ({ children, eventId, options, }: ListUserEv
180
180
  type SectionStatus = 'PAID' | 'REFUNDED';
181
181
  type ListUserOrdersProps = {
182
182
  children: (props: {
183
- orders: UserOrderProps[];
183
+ orders: GetUserOrderProps[];
184
184
  isPending: boolean;
185
185
  error: Error | null;
186
186
  }) => ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meaple-com/react-headless-components",
3
- "version": "1.0.6",
3
+ "version": "2.0.1",
4
4
  "description": "Headless React components for Meaple SDK",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -28,11 +28,11 @@
28
28
  "clean": "rimraf dist"
29
29
  },
30
30
  "dependencies": {
31
- "@meaple-com/types": "^2.0.0"
31
+ "@meaple-com/types": "^4.0.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@eslint/js": "^9.36.0",
35
- "@meaple-com/react-query": "^1.0.6",
35
+ "@meaple-com/react-query": "^1.1.1",
36
36
  "@types/react": "^19.0.0",
37
37
  "@typescript-eslint/eslint-plugin": "^7.18.0",
38
38
  "@typescript-eslint/parser": "^7.18.0",
@@ -44,8 +44,8 @@
44
44
  "rimraf": "^5.0.5"
45
45
  },
46
46
  "peerDependencies": {
47
- "@meaple-com/react-query": "^1.0.6",
48
- "react": "^19.0.0"
47
+ "@meaple-com/react-query": "^1.1.1",
48
+ "react": "^19.2.4"
49
49
  },
50
50
  "files": [
51
51
  "dist"