@meaple-com/react-headless-components 1.0.5 → 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 (4) hide show
  1. package/README.md +123 -0
  2. package/dist/index.d.cts +10 -10
  3. package/dist/index.d.ts +10 -10
  4. package/package.json +4 -4
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, GetUserEventsProps, UserTicketProps, UserOrderProps } 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;
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, GetUserEventsProps, UserTicketProps, UserOrderProps } 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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meaple-com/react-headless-components",
3
- "version": "1.0.5",
3
+ "version": "2.0.0",
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": "^1.0.5"
31
+ "@meaple-com/types": "^3.0.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@eslint/js": "^9.36.0",
35
- "@meaple-com/react-query": "^1.0.5",
35
+ "@meaple-com/react-query": "^1.1.0",
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,7 +44,7 @@
44
44
  "rimraf": "^5.0.5"
45
45
  },
46
46
  "peerDependencies": {
47
- "@meaple-com/react-query": "^1.0.5",
47
+ "@meaple-com/react-query": "^1.1.0",
48
48
  "react": "^19.0.0"
49
49
  },
50
50
  "files": [