@preprio/prepr-nextjs 1.0.0-beta.0 → 1.0.0-beta.10

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 (14) hide show
  1. package/README.md +47 -14
  2. package/dist/components.css +0 -15
  3. package/dist/components.css.map +1 -1
  4. package/dist/components.js +7 -1
  5. package/dist/components.js.map +1 -1
  6. package/dist/components.mjs +7 -1
  7. package/dist/components.mjs.map +1 -1
  8. package/dist/index.d.mts +8 -14
  9. package/dist/index.d.ts +8 -14
  10. package/dist/index.js +25 -26
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.mjs +24 -24
  13. package/dist/index.mjs.map +1 -1
  14. package/package.json +2 -2
package/README.md CHANGED
@@ -10,31 +10,40 @@ easier personalization & A/B testing implementation in your NextJS project.
10
10
  To install the Prepr NextJS package, run the following command:
11
11
 
12
12
  ```bash
13
- npm install @prepr/prepr-nextjs
13
+ npm install @preprio/prepr-nextjs
14
14
  ```
15
15
 
16
- Next you should navigate to your .env file and add the following environment variables:
16
+ Next you should navigate to your `.env` file and add the following environment variable:
17
17
 
18
18
  ```bash
19
19
  PREPR_ENV=
20
20
  ```
21
21
 
22
- Certain functionality like the PreviewBar component requires the `PREPR_ENV` environment variable to be set to `preview`.
23
- To prevent unwanted display of the PreviewBar component in production, you can set the `PREPR_ENV` environment variable to `production`.
22
+ If you want to include the PreviewBar component in your project, set the `PREPR_ENV` environment variable to `preview`.
23
+ When you're launching your project to production, then set the `PREPR_ENV` environment variable to `production`. This way, the PreviewBar component doesn't get displayed on a live web app.
24
24
 
25
- Next we will implement the PreprMiddleware function, navigate to your `middleware.js|middleware.ts`
25
+ Next, we will implement the PreprMiddleware function. Navigate to your `middleware.js` or the `middleware.ts`
26
26
  file. If you don't have this file, you can create it in the root of your project.
27
27
 
28
- Then add the following code to the `middleware.js|middleware.ts` file:
28
+ Then add the following code to the `middleware.ts` file:
29
29
  ```javascript
30
30
  import type { NextRequest } from 'next/server'
31
- import { PreprMiddleware } from 'prepr-nextjs'
31
+ import { PreprMiddleware } from '@preprio/prepr-nextjs'
32
32
 
33
33
  export function middleware(request: NextRequest) {
34
34
  return PreprMiddleware(request)
35
35
  }
36
36
  ```
37
37
 
38
+ Or add the following code to the `middleware.js` file:
39
+ ```javascript
40
+ import { PreprMiddleware } from '@preprio/prepr-nextjs'
41
+
42
+ export function middleware(request) {
43
+ return PreprMiddleware(request)
44
+ }
45
+ ```
46
+
38
47
  The PreprMiddleware accepts a request and optional response property and returns a `NextRequest` object.
39
48
  This is done so you are able to chain your own middleware to it.
40
49
 
@@ -46,12 +55,13 @@ If the `PREPR_ENV` environment variable is set to `preview`, the PreprMiddleware
46
55
  If these searchParams are set, the PreprMiddleware will set the `Prepr-Segments` and `Prepr-AB-Testing` headers with the values of the searchParams, and store its value in a cookie.
47
56
 
48
57
  ## Usage
49
- To setup the headers with your API calls, you can call the `getPreprHeaders()` helper function. This will return an array of headers that you can spread in your fetch call.
58
+ To set up the headers with your API calls, you can call the `getPreprHeaders()` helper function. This will return an array of headers that you can spread in your fetch call.
59
+ See the example code below in the `page.tsx` file.
50
60
 
51
61
  ```javascript
52
62
  import { getClient } from '@/lib/client'
53
63
  import { GetPageBySlugDocument, GetPageBySlugQuery } from '@/gql/graphql'
54
- import { getPreprHeaders } from 'prepr-nextjs'
64
+ import { getPreprHeaders } from '@preprio/prepr-nextjs'
55
65
 
56
66
  const getData = async () => {
57
67
  // Fetching the data using Apollo Client
@@ -68,13 +78,36 @@ const getData = async () => {
68
78
  })
69
79
  }
70
80
  ```
81
+ See the javascript example code below in the `page.js`file.
82
+
83
+ ```javascript
84
+ import { getClient } from '@/lib/client'
85
+ import { GetPageBySlug } from '@/queries/get-page-by-slug';
86
+ import { getPreprHeaders } from '@preprio/prepr-nextjs'
87
+
88
+ const getData = async () => {
89
+ // Fetching the data using Apollo Client
90
+ const { data } = await client.query({
91
+ query: GetPageBySlug,
92
+ variables: {
93
+ slug: '/',
94
+ },
95
+ context: {
96
+ // Call the getPreprHeaders function to get the appropriate headers
97
+ headers: getPreprHeaders(),
98
+ },
99
+ fetchPolicy: 'no-cache',
100
+ })
101
+ return data;
102
+ }
103
+ ```
71
104
 
72
105
  ### Installing the PreviewBar component
73
106
 
74
107
  For the PreviewBar to work we need to fetch all the segments from the Prepr API. To do this navigate to Prepr -> Settings -> Access tokens and create a new access token with the following scopes:
75
108
  - `segments`
76
109
 
77
- THen copy the access token and navigate to your `.env` file and add the following environment variable:
110
+ Then copy the access token and navigate to your `.env` file and add the following environment variable:
78
111
  ```bash
79
112
  PREPR_SEGMENTS_ACCESS_TOKEN=<YOUR_ACCESS_TOKEN>
80
113
  ```
@@ -85,11 +118,11 @@ Then add the following code to the `layout.tsx` file:
85
118
 
86
119
  ```javascript
87
120
  // Helper function to get all the props for the PreviewBar component (this needs a server component)
88
- import { getPreviewBarProps } from 'prepr-nextjs'
121
+ import { getPreviewBarProps } from '@preprio/prepr-nextjs'
89
122
  // Import the PreviewBar component
90
- import { PreprPreviewBar } from 'prepr-nextjs/components'
123
+ import { PreprPreviewBar } from '@preprio/prepr-nextjs/components'
91
124
  // Import the PreviewBar CSS
92
- import 'prepr-nextjs/dist/components.css'
125
+ import '@preprio/prepr-nextjs/dist/components.css'
93
126
 
94
127
 
95
128
  export default async function RootLayout({children}: {children: React.ReactNode}) {
@@ -123,7 +156,7 @@ The `getPreprUUID()` function will return the value of the `__prepr_uid` cookie.
123
156
  Returns the active segment from the `Prepr-Segments` header.
124
157
 
125
158
  #### getActiveVariant()
126
- Returns the active variant from the `Prepr-AB-Testing` header.
159
+ Returns the active variant from the `Prepr-ABTesting` header.
127
160
 
128
161
  #### getPreviewHeaders()
129
162
  Helper function to only get the preview headers.
package/dist/components.css CHANGED
@@ -85,9 +85,6 @@
85
85
  .prp-gap-4 {
86
86
  gap: 1rem;
87
87
  }
88
- .prp-gap-8 {
89
- gap: 2rem;
90
- }
91
88
  .prp-gap-6 {
92
89
  gap: 1.5rem;
93
90
  }
@@ -108,9 +105,6 @@
108
105
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
109
106
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
110
107
  }
111
- .prp-self-center {
112
- align-self: center;
113
- }
114
108
  .prp-rounded-lg {
115
109
  border-radius: 0.5rem;
116
110
  }
@@ -177,15 +171,9 @@
177
171
  .prp-pb-0\.5 {
178
172
  padding-bottom: 0.125rem;
179
173
  }
180
- .prp-pb-1 {
181
- padding-bottom: 0.25rem;
182
- }
183
174
  .prp-pb-2 {
184
175
  padding-bottom: 0.5rem;
185
176
  }
186
- .prp-pb-\[2px\] {
187
- padding-bottom: 2px;
188
- }
189
177
  .prp-text-center {
190
178
  text-align: center;
191
179
  }
@@ -211,9 +199,6 @@
211
199
  .prp-font-bold {
212
200
  font-weight: 700;
213
201
  }
214
- .prp-leading-\[1\.375rem\] {
215
- line-height: 1.375rem;
216
- }
217
202
  .prp-leading-tight {
218
203
  line-height: 1.25;
219
204
  }
package/dist/components.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/main.css"],"sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');\n.prp-sticky{\n position: sticky;\n}\n.prp-top-0{\n top: 0px;\n}\n.prp-z-\\[1000\\]{\n z-index: 1000;\n}\n.prp-z-\\[100\\]{\n z-index: 100;\n}\n.prp-z-\\[9999\\]{\n z-index: 9999;\n}\n.prp-mr-1{\n margin-right: 0.25rem;\n}\n.prp-mr-10{\n margin-right: 2.5rem;\n}\n.prp-block{\n display: block;\n}\n.prp-flex{\n display: flex;\n}\n.prp-hidden{\n display: none;\n}\n.prp-h-10{\n height: 2.5rem;\n}\n.prp-h-8{\n height: 2rem;\n}\n.prp-h-full{\n height: 100%;\n}\n.prp-w-3{\n width: 0.75rem;\n}\n.prp-w-\\[13rem\\]{\n width: 13rem;\n}\n.prp-w-\\[var\\(--button-width\\)\\]{\n width: var(--button-width);\n}\n.prp-w-full{\n width: 100%;\n}\n.prp-max-w-\\[15rem\\]{\n max-width: 15rem;\n}\n.prp-max-w-\\[312px\\]{\n max-width: 312px;\n}\n.prp-flex-initial{\n flex: 0 1 auto;\n}\n.prp-cursor-pointer{\n cursor: pointer;\n}\n.prp-flex-wrap{\n flex-wrap: wrap;\n}\n.prp-items-center{\n align-items: center;\n}\n.prp-justify-center{\n justify-content: center;\n}\n.prp-justify-between{\n justify-content: space-between;\n}\n.prp-gap-1{\n gap: 0.25rem;\n}\n.prp-gap-2{\n gap: 0.5rem;\n}\n.prp-gap-4{\n gap: 1rem;\n}\n.prp-gap-8{\n gap: 2rem;\n}\n.prp-gap-6{\n gap: 1.5rem;\n}\n.prp-gap-x-6{\n -moz-column-gap: 1.5rem;\n column-gap: 1.5rem;\n}\n.prp-gap-y-4{\n row-gap: 1rem;\n}\n.prp-space-y-2 > :not([hidden]) ~ :not([hidden]){\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.prp-space-y-3 > :not([hidden]) ~ :not([hidden]){\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.prp-self-center{\n align-self: center;\n}\n.prp-rounded-lg{\n border-radius: 0.5rem;\n}\n.prp-rounded-md{\n border-radius: 0.375rem;\n}\n.prp-rounded-b-md{\n border-bottom-right-radius: 0.375rem;\n border-bottom-left-radius: 0.375rem;\n}\n.prp-border{\n border-width: 1px;\n}\n.prp-border-gray-300{\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.prp-bg-grey-400{\n --tw-bg-opacity: 1;\n background-color: rgb(156 163 175 / var(--tw-bg-opacity));\n}\n.prp-bg-indigo-default{\n --tw-bg-opacity: 1;\n background-color: rgb(67 56 202 / var(--tw-bg-opacity));\n}\n.prp-bg-orange-400{\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n.prp-bg-white{\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.prp-p-1{\n padding: 0.25rem;\n}\n.prp-p-4{\n padding: 1rem;\n}\n.prp-px-3{\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.prp-px-4{\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.prp-px-5{\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.prp-py-2{\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.prp-py-3{\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.prp-py-4{\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.prp-pb-0\\.5{\n padding-bottom: 0.125rem;\n}\n.prp-pb-1{\n padding-bottom: 0.25rem;\n}\n.prp-pb-2{\n padding-bottom: 0.5rem;\n}\n.prp-pb-\\[2px\\]{\n padding-bottom: 2px;\n}\n.prp-text-center{\n text-align: center;\n}\n.prp-text-base{\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.prp-text-lg{\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.prp-text-sm{\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.prp-text-xs{\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.prp-font-black{\n font-weight: 900;\n}\n.prp-font-bold{\n font-weight: 700;\n}\n.prp-leading-\\[1\\.375rem\\]{\n line-height: 1.375rem;\n}\n.prp-leading-tight{\n line-height: 1.25;\n}\n.prp-text-gray-500{\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.prp-text-gray-900{\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.prp-text-indigo-300{\n --tw-text-opacity: 1;\n color: rgb(165 180 252 / var(--tw-text-opacity));\n}\n.prp-text-indigo-700{\n --tw-text-opacity: 1;\n color: rgb(67 56 202 / var(--tw-text-opacity));\n}\n.prp-text-white{\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.prp-ring-0{\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.prp-regular-text{\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n line-height: 1.5;\n}\n\n.prp-base {\n font-family: Inter, sans-serif;\n}\n\n.prp-dropshadow {\n box-shadow: 0px 0px 12px 0px #C3C3C3;\n}\n\n.prp-dropshadow-popover {\n box-shadow: 0px 3px 16px 0px rgba(84, 84, 84, 0.45);\n}\n\n.hover\\:prp-cursor-pointer:hover{\n cursor: pointer;\n}\n\n.hover\\:prp-bg-gray-100:hover{\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:prp-text-indigo-400:hover{\n --tw-text-opacity: 1;\n color: rgb(129 140 248 / var(--tw-text-opacity));\n}\n\n.focus\\:prp-ring-0:focus{\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.data-\\[open\\]\\:prp-rounded-b-none[data-open]{\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n.data-\\[open\\]\\:prp-border-b-white[data-open]{\n --tw-border-opacity: 1;\n border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.data-\\[checked\\]\\:prp-bg-indigo-600[data-checked]{\n --tw-bg-opacity: 1;\n background-color: rgb(67 56 202 / var(--tw-bg-opacity));\n}\n\n.data-\\[checked\\]\\:prp-text-white[data-checked]{\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n@media (min-width: 768px){\n .md\\:prp-inline{\n display: inline;\n }\n .md\\:prp-w-\\[15rem\\]{\n width: 15rem;\n }\n .md\\:prp-w-auto{\n width: auto;\n }\n .md\\:prp-px-19\\.5{\n padding-left: 4.875rem;\n padding-right: 4.875rem;\n }\n}\n\n@media (min-width: 1024px){\n .lg\\:prp-block{\n display: block;\n }\n .lg\\:prp-gap-6{\n gap: 1.5rem;\n }\n}\n\n@media (min-width: 1440px){\n .\\32xl\\:prp-flex{\n display: flex;\n }\n}"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/main.css"],"sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');\n.prp-sticky{\n position: sticky;\n}\n.prp-top-0{\n top: 0px;\n}\n.prp-z-\\[1000\\]{\n z-index: 1000;\n}\n.prp-z-\\[100\\]{\n z-index: 100;\n}\n.prp-z-\\[9999\\]{\n z-index: 9999;\n}\n.prp-mr-1{\n margin-right: 0.25rem;\n}\n.prp-mr-10{\n margin-right: 2.5rem;\n}\n.prp-block{\n display: block;\n}\n.prp-flex{\n display: flex;\n}\n.prp-hidden{\n display: none;\n}\n.prp-h-10{\n height: 2.5rem;\n}\n.prp-h-8{\n height: 2rem;\n}\n.prp-h-full{\n height: 100%;\n}\n.prp-w-3{\n width: 0.75rem;\n}\n.prp-w-\\[13rem\\]{\n width: 13rem;\n}\n.prp-w-\\[var\\(--button-width\\)\\]{\n width: var(--button-width);\n}\n.prp-w-full{\n width: 100%;\n}\n.prp-max-w-\\[15rem\\]{\n max-width: 15rem;\n}\n.prp-max-w-\\[312px\\]{\n max-width: 312px;\n}\n.prp-flex-initial{\n flex: 0 1 auto;\n}\n.prp-cursor-pointer{\n cursor: pointer;\n}\n.prp-flex-wrap{\n flex-wrap: wrap;\n}\n.prp-items-center{\n align-items: center;\n}\n.prp-justify-center{\n justify-content: center;\n}\n.prp-justify-between{\n justify-content: space-between;\n}\n.prp-gap-1{\n gap: 0.25rem;\n}\n.prp-gap-2{\n gap: 0.5rem;\n}\n.prp-gap-4{\n gap: 1rem;\n}\n.prp-gap-6{\n gap: 1.5rem;\n}\n.prp-gap-x-6{\n -moz-column-gap: 1.5rem;\n column-gap: 1.5rem;\n}\n.prp-gap-y-4{\n row-gap: 1rem;\n}\n.prp-space-y-2 > :not([hidden]) ~ :not([hidden]){\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.prp-space-y-3 > :not([hidden]) ~ :not([hidden]){\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.prp-rounded-lg{\n border-radius: 0.5rem;\n}\n.prp-rounded-md{\n border-radius: 0.375rem;\n}\n.prp-rounded-b-md{\n border-bottom-right-radius: 0.375rem;\n border-bottom-left-radius: 0.375rem;\n}\n.prp-border{\n border-width: 1px;\n}\n.prp-border-gray-300{\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.prp-bg-grey-400{\n --tw-bg-opacity: 1;\n background-color: rgb(156 163 175 / var(--tw-bg-opacity));\n}\n.prp-bg-indigo-default{\n --tw-bg-opacity: 1;\n background-color: rgb(67 56 202 / var(--tw-bg-opacity));\n}\n.prp-bg-orange-400{\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n.prp-bg-white{\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.prp-p-1{\n padding: 0.25rem;\n}\n.prp-p-4{\n padding: 1rem;\n}\n.prp-px-3{\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.prp-px-4{\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.prp-px-5{\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.prp-py-2{\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.prp-py-3{\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.prp-py-4{\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.prp-pb-0\\.5{\n padding-bottom: 0.125rem;\n}\n.prp-pb-2{\n padding-bottom: 0.5rem;\n}\n.prp-text-center{\n text-align: center;\n}\n.prp-text-base{\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.prp-text-lg{\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.prp-text-sm{\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.prp-text-xs{\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.prp-font-black{\n font-weight: 900;\n}\n.prp-font-bold{\n font-weight: 700;\n}\n.prp-leading-tight{\n line-height: 1.25;\n}\n.prp-text-gray-500{\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.prp-text-gray-900{\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.prp-text-indigo-300{\n --tw-text-opacity: 1;\n color: rgb(165 180 252 / var(--tw-text-opacity));\n}\n.prp-text-indigo-700{\n --tw-text-opacity: 1;\n color: rgb(67 56 202 / var(--tw-text-opacity));\n}\n.prp-text-white{\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.prp-ring-0{\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.prp-regular-text{\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n line-height: 1.5;\n}\n\n.prp-base {\n font-family: Inter, sans-serif;\n}\n\n.prp-dropshadow {\n box-shadow: 0px 0px 12px 0px #C3C3C3;\n}\n\n.prp-dropshadow-popover {\n box-shadow: 0px 3px 16px 0px rgba(84, 84, 84, 0.45);\n}\n\n.hover\\:prp-cursor-pointer:hover{\n cursor: pointer;\n}\n\n.hover\\:prp-bg-gray-100:hover{\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:prp-text-indigo-400:hover{\n --tw-text-opacity: 1;\n color: rgb(129 140 248 / var(--tw-text-opacity));\n}\n\n.focus\\:prp-ring-0:focus{\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.data-\\[open\\]\\:prp-rounded-b-none[data-open]{\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n.data-\\[open\\]\\:prp-border-b-white[data-open]{\n --tw-border-opacity: 1;\n border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.data-\\[checked\\]\\:prp-bg-indigo-600[data-checked]{\n --tw-bg-opacity: 1;\n background-color: rgb(67 56 202 / var(--tw-bg-opacity));\n}\n\n.data-\\[checked\\]\\:prp-text-white[data-checked]{\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n@media (min-width: 768px){\n .md\\:prp-inline{\n display: inline;\n }\n .md\\:prp-w-\\[15rem\\]{\n width: 15rem;\n }\n .md\\:prp-w-auto{\n width: auto;\n }\n .md\\:prp-px-19\\.5{\n padding-left: 4.875rem;\n padding-right: 4.875rem;\n }\n}\n\n@media (min-width: 1024px){\n .lg\\:prp-block{\n display: block;\n }\n .lg\\:prp-gap-6{\n gap: 1.5rem;\n }\n}\n\n@media (min-width: 1440px){\n .\\32xl\\:prp-flex{\n display: flex;\n }\n}"],"mappings":"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","names":[]}
package/dist/components.js CHANGED
@@ -142,12 +142,18 @@ function InfoPopover({ title, text, link }) {
142
142
  function PreprPreviewBar(props) {
143
143
  var _a;
144
144
  const { activeSegment, activeVariant, data } = props;
145
+ if ((data == null ? void 0 : data.items) && (data == null ? void 0 : data.items[(data == null ? void 0 : data.items.length) - 1].reference_id) !== "null") {
146
+ data.items.push({
147
+ reference_id: "null",
148
+ body: "All other users"
149
+ });
150
+ }
145
151
  const emptyVariant = "A";
146
152
  const emptySegment = {
147
153
  body: "Choose segment"
148
154
  };
149
155
  const [selectedSegment, setSelectedSegment] = (0, import_react5.useState)(
150
- data.items.filter(
156
+ data.items && data.items.filter(
151
157
  (segmentData) => segmentData === activeSegment
152
158
  )[0] || emptySegment
153
159
  );
package/dist/components.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components.ts","../src/components/PreprPreviewBar.tsx","../src/components/PreprLogo.tsx","../src/components/ResetButton.tsx","../src/components/InfoPopover.tsx"],"sourcesContent":["'use client'\n\nimport \"./main.css\"\nimport {PreprPreviewBar} from './components/PreprPreviewBar'\n\nexport {PreprPreviewBar}","'use client'\n\nimport { usePathname, useRouter } from 'next/navigation'\nimport React, { useState } from 'react'\n\nimport '../main.css'\nimport PreprLogo from './PreprLogo'\nimport ResetButton from './ResetButton'\nimport {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Radio,\n RadioGroup,\n} from '@headlessui/react'\nimport { FaCaretDown } from 'react-icons/fa6'\nimport InfoPopover from './InfoPopover'\n\nexport function PreprPreviewBar(props: {\n activeSegment?: string | null\n activeVariant?: string | null\n data?: any\n}) {\n const { activeSegment, activeVariant, data } = props\n\n const emptyVariant = 'A'\n const emptySegment = {\n body: 'Choose segment',\n }\n const [selectedSegment, setSelectedSegment] = useState(\n data.items.filter(\n (segmentData: any) => segmentData === activeSegment\n )[0] || emptySegment\n )\n\n const [selectedVariant, setSelectedVariant] = useState<string | null>(\n activeVariant || 'A'\n )\n\n const router = useRouter()\n const pathname = usePathname()\n\n const handleUpdateVariant = (variant: any) => {\n setSelectedVariant(variant)\n\n const params = new URLSearchParams({})\n\n params.append('a-b-testing', variant as string)\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n const handleUpdateSegment = (value: any) => {\n setSelectedSegment(value)\n\n const segment = value.reference_id\n\n if (!segment) {\n return\n }\n\n const params = new URLSearchParams({})\n\n if (segment !== 'Choose segment') {\n params.append('segments', segment as string)\n } else {\n params.append('segments', 'null')\n }\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n const handleReset = () => {\n setSelectedSegment(emptySegment)\n setSelectedVariant(emptyVariant)\n\n const params = new URLSearchParams({})\n params.append('segments', 'null')\n params.append('a-b-testing', 'null')\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n return (\n <div className=\"prp-py-4 prp-px-5 md:prp-px-19.5 prp-bg-indigo-default prp-sticky prp-top-0 prp-z-[1000] prp-base\">\n <div className=\"prp-flex prp-gap-y-4 prp-gap-x-6 prp-flex-wrap prp-justify-between\">\n {/* Logo & Text */}\n <div className=\"prp-flex prp-gap-6 prp-items-center\">\n <div className=\"prp-h-full prp-flex prp-justify-center prp-items-center\">\n <PreprLogo />\n </div>\n <div className=\"prp-hidden lg:prp-block prp-pb-0.5 prp-text-white prp-text-lg prp-text-bold prp-mr-10\">\n Adaptive Preview\n </div>\n </div>\n\n <div className=\"prp-flex prp-w-full md:prp-w-auto prp-gap-4 lg:prp-gap-6 prp-items-center\">\n <div className=\"prp-flex prp-gap-4\">\n <div className=\"prp-regular-text prp-text-white 2xl:prp-flex prp-items-center prp-gap-2 prp-hidden\">\n <span className=\"prp-pb-0.5\">Apply segment</span>\n <InfoPopover\n title={'Adaptive Preview'}\n text={\n \"Choose a segment to see how it's displayed.\"\n }\n link={'Learn more'}\n />\n </div>\n <Listbox\n value={selectedSegment.slug}\n onChange={handleUpdateSegment}\n >\n <ListboxButton className=\"prp-h-10 prp-flex-initial prp-w-[13rem] md:prp-w-[15rem] prp-max-w-[15rem] prp-rounded-md data-[open]:prp-rounded-b-none data-[open]:prp-border-b-white prp-border prp-border-gray-300 prp-items-center prp-bg-white prp-justify-center prp-px-4 prp-regular-text prp-text-gray-500\">\n <span className=\"prp-flex prp-items-center prp-justify-between\">\n <span>{selectedSegment.body}</span>\n <span className=\"prp-text-gray-900\">\n <FaCaretDown className=\"prp-w-3\" />\n </span>\n </span>\n </ListboxButton>\n <ListboxOptions\n anchor=\"bottom\"\n className=\"prp-z-[9999] prp-w-[var(--button-width)] prp-pb-2 prp-rounded-b-md prp-bg-white\"\n >\n {data?.items?.map((segment: any) => (\n <ListboxOption\n className=\"prp-px-4 prp-py-2 hover:prp-bg-gray-100 prp-bg-white prp-text-gray-900 prp-regular-text prp-z-[100] hover:prp-cursor-pointer prp-w-full\"\n key={segment.reference_id}\n value={segment}\n >\n {segment.body}\n </ListboxOption>\n ))}\n </ListboxOptions>\n </Listbox>\n </div>\n\n <div className=\"prp-flex prp-gap-4\">\n <div className=\"prp-regular-text prp-text-white 2xl:prp-flex prp-items-center prp-gap-2 prp-hidden\">\n <span className=\"prp-pb-0.5\">Show A/B variant</span>\n <InfoPopover\n title={'A/B Testing'}\n text={\n 'Choose between two different versions of a page to see which one performs better.'\n }\n link={'Learn more'}\n />\n </div>\n\n <RadioGroup\n className=\"prp-rounded-lg prp-p-1 prp-border prp-border-gray-300 prp-bg-white prp-flex prp-gap-1 prp-h-10 prp-items-center\"\n value={selectedVariant}\n onChange={handleUpdateVariant}\n >\n <Radio\n value={'A'}\n className=\"prp-py-2 prp-px-3 prp-rounded-md prp-text-gray-900 prp-regular-text data-[checked]:prp-dropshadow\n data-[checked]:prp-bg-indigo-600 data-[checked]:prp-text-white prp-h-8 prp-text-center prp-flex prp-items-center hover:prp-cursor-pointer\n \"\n >\n <span className=\"prp-hidden md:prp-inline prp-mr-1\">\n Variant{' '}\n </span>\n A\n </Radio>\n <Radio\n value={'B'}\n className=\"prp-py-2 prp-px-3 prp-rounded-md prp-text-gray-900 prp-regular-text data-[checked]:prp-dropshadow\n data-[checked]:prp-bg-indigo-600 data-[checked]:prp-text-white prp-h-8 prp-text-center prp-flex prp-items-center hover:prp-cursor-pointer\n \"\n >\n <span className=\"prp-hidden md:prp-inline prp-mr-1\">\n Variant{' '}\n </span>\n B\n </Radio>\n </RadioGroup>\n </div>\n\n <ResetButton\n handleClick={handleReset}\n enabled={\n selectedSegment.reference_id ||\n selectedVariant !== 'A'\n }\n />\n </div>\n </div>\n </div>\n )\n}\n","import React from \"react\";\n\nexport default function PreprLogo() {\n return (\n <svg width=\"75\" height=\"20\" viewBox=\"0 0 75 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M28.8527 1.56704C28.8588 1.55728 28.8647 1.54752 28.8701 1.53728L28.872 1.53392C28.872 1.53392 28.8719 1.53376 28.8718 1.5337C28.9044 1.47094 28.9231 1.4001 28.9231 1.32481C28.9231 1.15609 28.8307 1.00899 28.6932 0.928662C28.6918 0.927198 28.6902 0.924705 28.6888 0.923892C25.7969 -0.628737 21.9356 -0.26169 19.3787 2.32725C17.9433 3.78059 17.2104 5.64985 17.1726 7.52828H17.1702V14.903C17.1702 14.9031 17.1702 14.9031 17.1702 14.9031C17.1702 15.1575 17.3798 15.3639 17.6384 15.3639H19.8237C20.0823 15.3639 20.292 15.1575 20.292 14.9031C20.292 14.9031 20.292 14.9031 20.292 14.903V7.68194H20.2932C20.2931 6.52406 20.7324 5.36498 21.617 4.4692C23.1961 2.8704 25.5272 2.75034 27.1344 3.59213C27.1394 3.59484 27.1446 3.59728 27.1496 3.59988C27.1532 3.60178 27.1569 3.60346 27.1605 3.60541L27.161 3.6053C27.2219 3.63376 27.2898 3.65018 27.3617 3.65018C27.5444 3.65018 27.7024 3.54676 27.7796 3.39641L28.8527 1.56704Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M7.80452 0C3.49433 0 0 3.43924 0 7.68195V19.5124C0 19.7667 0.209581 19.9732 0.468282 19.9732H2.65358C2.65363 19.9732 2.65363 19.9732 2.65363 19.9732C2.91222 19.9732 3.12186 19.7667 3.12186 19.5124V13.8279C4.42627 14.7924 6.04758 15.364 7.80457 15.364C12.1147 15.364 15.6094 11.9247 15.6094 7.68206C15.6094 3.4393 12.1147 0 7.80452 0ZM7.80457 12.2912C5.21845 12.2912 3.12186 10.2275 3.12186 7.68195C3.12186 5.13631 5.21845 3.07279 7.80457 3.07279C10.3906 3.07279 12.4874 5.13631 12.4874 7.68195C12.4874 10.2275 10.3906 12.2912 7.80457 12.2912Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M53.8288 0C49.5187 0 46.0243 3.43924 46.0243 7.68195V19.5124C46.0243 19.7667 46.2339 19.9731 46.4926 19.9732H48.6779C48.9365 19.9732 49.1462 19.7667 49.1462 19.5124V13.828C50.4506 14.7924 52.0719 15.364 53.8289 15.364C58.139 15.364 61.6337 11.9247 61.6337 7.68211C61.6337 3.4393 58.139 0 53.8288 0ZM53.8289 12.2912C51.2427 12.2912 49.1462 10.2276 49.1462 7.68195C49.1462 5.13631 51.2427 3.07279 53.8289 3.07279C56.4149 3.07279 58.5117 5.13631 58.5117 7.68195C58.5117 10.2276 56.4149 12.2912 53.8289 12.2912Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M44.4094 7.83561C44.4094 3.59285 40.9148 0 36.6046 0C32.2944 0 28.8 3.4393 28.8 7.68206C28.8 11.9247 32.2944 15.364 36.6046 15.364C39.0444 15.364 41.0568 14.2635 42.3189 12.9136C42.3191 12.9135 42.3193 12.9133 42.3194 12.9132C42.3204 12.9121 42.3214 12.9112 42.3224 12.9101V12.91C42.4051 12.8268 42.4563 12.7131 42.4563 12.5876C42.4563 12.4549 42.3989 12.3357 42.3077 12.2515V12.2509L42.3012 12.2456C42.2893 12.2351 42.2769 12.2251 42.2639 12.2158L40.5942 10.8782C40.5118 10.8069 40.4041 10.7634 40.2857 10.7634C40.1386 10.7634 40.0075 10.8302 39.9217 10.9346C39.1801 11.6777 38.0073 12.2911 36.6047 12.2911C34.0186 12.2911 31.922 10.2275 31.922 7.68184C31.922 5.13621 34.0186 3.07268 36.6047 3.07268C38.6433 3.07268 40.377 4.3555 41.02 6.14547H36.9949C36.7362 6.14553 36.5266 6.35187 36.5266 6.6064L36.5265 8.75734C36.5265 9.01182 36.7361 9.21827 36.9949 9.21827H43.7851C43.7978 9.21827 43.8104 9.21734 43.823 9.21637C43.8356 9.2174 43.8481 9.21827 43.8608 9.21827C44.0687 9.21827 44.2449 9.08466 44.3059 8.90011L44.3113 8.90098C44.314 8.88434 44.3166 8.86829 44.3192 8.85219C44.3225 8.83653 44.325 8.8206 44.3268 8.80434C44.3809 8.46076 44.4094 8.21572 44.4094 7.83561Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M74.8943 1.53668L74.8963 1.53332C74.8963 1.53332 74.8962 1.53316 74.8961 1.53311C74.9287 1.47034 74.9474 1.3995 74.9474 1.32422C74.9474 1.15549 74.855 1.00839 74.7175 0.928067C74.7161 0.926603 74.7145 0.92411 74.7131 0.923297C71.8212 -0.629332 67.9599 -0.26234 65.403 2.32666C63.9676 3.77999 63.2347 5.64926 63.1969 7.52769H63.1945V14.9024C63.1945 14.9025 63.1945 14.9025 63.1945 14.9025C63.1945 15.1569 63.4041 15.3634 63.6627 15.3634H65.8481C66.1066 15.3634 66.3164 15.1569 66.3164 14.9025C66.3164 14.9025 66.3164 14.9025 66.3164 14.9024V7.68135H66.3175C66.3174 6.52346 66.7567 5.36438 67.6414 4.46861C69.2204 2.8698 71.5515 2.74975 73.1587 3.59154C73.1637 3.59425 73.1689 3.59668 73.174 3.59929C73.1776 3.60118 73.1813 3.60286 73.1849 3.60481L73.1854 3.60471C73.2462 3.63316 73.3141 3.64958 73.386 3.64958C73.5688 3.64958 73.7268 3.54617 73.8039 3.39582L74.8769 1.56644C74.8831 1.55668 74.889 1.54687 74.8943 1.53668Z\"\n fill=\"white\"/>\n </svg>\n\n )\n}","import React from 'react'\nimport classNames from 'classnames'\nimport { FaRotate } from 'react-icons/fa6'\n\ninterface ResetButtonProps {\n enabled?: boolean\n handleClick?: () => void\n}\n\nexport default function ResetButton({\n enabled = false,\n handleClick,\n}: ResetButtonProps) {\n const classes = classNames(\n 'prp-py-3 prp-px-4 prp-flex prp-gap-2 prp-items-center rounded-md prp-regular-text h-10',\n enabled &&\n 'prp-bg-orange-400 hover:prp-orange-500 prp-cursor-pointer prp-text-white',\n !enabled && 'prp-bg-grey-400 prp-text-gray-500'\n )\n\n return (\n <button\n onClick={handleClick}\n className={classes}\n disabled={!enabled}\n >\n <FaRotate />\n <span className=\"prp-hidden lg:prp-block\">Reset</span>\n </button>\n )\n}\n","import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'\nimport { FaInfoCircle } from 'react-icons/fa'\nimport React from 'react'\nimport { FaArrowUpRightFromSquare } from 'react-icons/fa6'\n\ninterface InfoPopoverProps {\n title: string\n text: string\n link: string\n}\n\nexport default function InfoPopover({ title, text, link }: InfoPopoverProps) {\n return (\n <Popover>\n <PopoverButton className=\"prp-ring-0 focus:prp-ring-0 prp-font-bold prp-text-indigo-300 prp-text-xs hover:prp-text-indigo-400 prp-block\">\n <FaInfoCircle />\n </PopoverButton>\n <PopoverPanel\n transition\n anchor=\"bottom\"\n className=\"prp-z-[1000] prp-p-4\"\n >\n <div className=\" prp-bg-white rounded-lg p-6 prp-dropshadow-popover prp-space-y-3 prp-max-w-[312px]\">\n <span className=\"prp-text-base prp-font-bold prp-leading-tight prp-text-gray-900\">\n {title}\n </span>\n <div className=\"prp-space-y-2\">\n <span className=\"prp-text-sm\">{text}</span>\n <a\n href={link}\n className=\"prp-font-black prp-text-sm prp-flex prp-gap-1 prp-items-center prp-text-indigo-700\"\n >\n Learn more <FaArrowUpRightFromSquare />\n </a>\n </div>\n </div>\n </PopoverPanel>\n </Popover>\n )\n}\n"],"mappings":"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","names":["import_react","React","import_react","classNames","React","import_react","import_fa6","import_react","import_fa6","React","React"]}
1
+ {"version":3,"sources":["../src/components.ts","../src/components/PreprPreviewBar.tsx","../src/components/PreprLogo.tsx","../src/components/ResetButton.tsx","../src/components/InfoPopover.tsx"],"sourcesContent":["'use client'\n\nimport \"./main.css\"\nimport {PreprPreviewBar} from './components/PreprPreviewBar'\n\nexport {PreprPreviewBar}","'use client'\n\nimport { usePathname, useRouter } from 'next/navigation'\nimport React, { useState } from 'react'\n\nimport '../main.css'\nimport PreprLogo from './PreprLogo'\nimport ResetButton from './ResetButton'\nimport {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Radio,\n RadioGroup,\n} from '@headlessui/react'\nimport { FaCaretDown } from 'react-icons/fa6'\nimport InfoPopover from './InfoPopover'\n\nexport function PreprPreviewBar(props: {\n activeSegment?: string | null\n activeVariant?: string | null\n data?: any\n}) {\n const { activeSegment, activeVariant, data } = props\n\n if (\n data?.items &&\n data?.items[data?.items.length - 1].reference_id !== 'null'\n ) {\n data.items.push({\n reference_id: 'null',\n body: 'All other users',\n })\n }\n\n const emptyVariant = 'A'\n const emptySegment = {\n body: 'Choose segment',\n }\n const [selectedSegment, setSelectedSegment] = useState(\n (data.items &&\n data.items.filter(\n (segmentData: any) => segmentData === activeSegment\n )[0]) ||\n emptySegment\n )\n\n const [selectedVariant, setSelectedVariant] = useState<string | null>(\n activeVariant || 'A'\n )\n\n const router = useRouter()\n const pathname = usePathname()\n\n const handleUpdateVariant = (variant: any) => {\n setSelectedVariant(variant)\n\n const params = new URLSearchParams({})\n\n params.append('a-b-testing', variant as string)\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n const handleUpdateSegment = (value: any) => {\n setSelectedSegment(value)\n\n const segment = value.reference_id\n\n if (!segment) {\n return\n }\n\n const params = new URLSearchParams({})\n\n if (segment !== 'Choose segment') {\n params.append('segments', segment as string)\n } else {\n params.append('segments', 'null')\n }\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n const handleReset = () => {\n setSelectedSegment(emptySegment)\n setSelectedVariant(emptyVariant)\n\n const params = new URLSearchParams({})\n params.append('segments', 'null')\n params.append('a-b-testing', 'null')\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n return (\n <div className=\"prp-py-4 prp-px-5 md:prp-px-19.5 prp-bg-indigo-default prp-sticky prp-top-0 prp-z-[1000] prp-base\">\n <div className=\"prp-flex prp-gap-y-4 prp-gap-x-6 prp-flex-wrap prp-justify-between\">\n {/* Logo & Text */}\n <div className=\"prp-flex prp-gap-6 prp-items-center\">\n <div className=\"prp-h-full prp-flex prp-justify-center prp-items-center\">\n <PreprLogo />\n </div>\n <div className=\"prp-hidden lg:prp-block prp-pb-0.5 prp-text-white prp-text-lg prp-text-bold prp-mr-10\">\n Adaptive Preview\n </div>\n </div>\n\n <div className=\"prp-flex prp-w-full md:prp-w-auto prp-gap-4 lg:prp-gap-6 prp-items-center\">\n <div className=\"prp-flex prp-gap-4\">\n <div className=\"prp-regular-text prp-text-white 2xl:prp-flex prp-items-center prp-gap-2 prp-hidden\">\n <span className=\"prp-pb-0.5\">Apply segment</span>\n <InfoPopover\n title={'Adaptive Preview'}\n text={\n \"Choose a segment to see how it's displayed.\"\n }\n link={'Learn more'}\n />\n </div>\n <Listbox\n value={selectedSegment.slug}\n onChange={handleUpdateSegment}\n >\n <ListboxButton className=\"prp-h-10 prp-flex-initial prp-w-[13rem] md:prp-w-[15rem] prp-max-w-[15rem] prp-rounded-md data-[open]:prp-rounded-b-none data-[open]:prp-border-b-white prp-border prp-border-gray-300 prp-items-center prp-bg-white prp-justify-center prp-px-4 prp-regular-text prp-text-gray-500\">\n <span className=\"prp-flex prp-items-center prp-justify-between\">\n <span>{selectedSegment.body}</span>\n <span className=\"prp-text-gray-900\">\n <FaCaretDown className=\"prp-w-3\" />\n </span>\n </span>\n </ListboxButton>\n <ListboxOptions\n anchor=\"bottom\"\n className=\"prp-z-[9999] prp-w-[var(--button-width)] prp-pb-2 prp-rounded-b-md prp-bg-white\"\n >\n {data?.items?.map((segment: any) => (\n <ListboxOption\n className=\"prp-px-4 prp-py-2 hover:prp-bg-gray-100 prp-bg-white prp-text-gray-900 prp-regular-text prp-z-[100] hover:prp-cursor-pointer prp-w-full\"\n key={segment.reference_id}\n value={segment}\n >\n {segment.body}\n </ListboxOption>\n ))}\n </ListboxOptions>\n </Listbox>\n </div>\n\n <div className=\"prp-flex prp-gap-4\">\n <div className=\"prp-regular-text prp-text-white 2xl:prp-flex prp-items-center prp-gap-2 prp-hidden\">\n <span className=\"prp-pb-0.5\">Show A/B variant</span>\n <InfoPopover\n title={'A/B Testing'}\n text={\n 'Choose between two different versions of a page to see which one performs better.'\n }\n link={'Learn more'}\n />\n </div>\n\n <RadioGroup\n className=\"prp-rounded-lg prp-p-1 prp-border prp-border-gray-300 prp-bg-white prp-flex prp-gap-1 prp-h-10 prp-items-center\"\n value={selectedVariant}\n onChange={handleUpdateVariant}\n >\n <Radio\n value={'A'}\n className=\"prp-py-2 prp-px-3 prp-rounded-md prp-text-gray-900 prp-regular-text data-[checked]:prp-dropshadow\n data-[checked]:prp-bg-indigo-600 data-[checked]:prp-text-white prp-h-8 prp-text-center prp-flex prp-items-center hover:prp-cursor-pointer\n \"\n >\n <span className=\"prp-hidden md:prp-inline prp-mr-1\">\n Variant{' '}\n </span>\n A\n </Radio>\n <Radio\n value={'B'}\n className=\"prp-py-2 prp-px-3 prp-rounded-md prp-text-gray-900 prp-regular-text data-[checked]:prp-dropshadow\n data-[checked]:prp-bg-indigo-600 data-[checked]:prp-text-white prp-h-8 prp-text-center prp-flex prp-items-center hover:prp-cursor-pointer\n \"\n >\n <span className=\"prp-hidden md:prp-inline prp-mr-1\">\n Variant{' '}\n </span>\n B\n </Radio>\n </RadioGroup>\n </div>\n\n <ResetButton\n handleClick={handleReset}\n enabled={\n selectedSegment.reference_id ||\n selectedVariant !== 'A'\n }\n />\n </div>\n </div>\n </div>\n )\n}\n","import React from \"react\";\n\nexport default function PreprLogo() {\n return (\n <svg width=\"75\" height=\"20\" viewBox=\"0 0 75 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M28.8527 1.56704C28.8588 1.55728 28.8647 1.54752 28.8701 1.53728L28.872 1.53392C28.872 1.53392 28.8719 1.53376 28.8718 1.5337C28.9044 1.47094 28.9231 1.4001 28.9231 1.32481C28.9231 1.15609 28.8307 1.00899 28.6932 0.928662C28.6918 0.927198 28.6902 0.924705 28.6888 0.923892C25.7969 -0.628737 21.9356 -0.26169 19.3787 2.32725C17.9433 3.78059 17.2104 5.64985 17.1726 7.52828H17.1702V14.903C17.1702 14.9031 17.1702 14.9031 17.1702 14.9031C17.1702 15.1575 17.3798 15.3639 17.6384 15.3639H19.8237C20.0823 15.3639 20.292 15.1575 20.292 14.9031C20.292 14.9031 20.292 14.9031 20.292 14.903V7.68194H20.2932C20.2931 6.52406 20.7324 5.36498 21.617 4.4692C23.1961 2.8704 25.5272 2.75034 27.1344 3.59213C27.1394 3.59484 27.1446 3.59728 27.1496 3.59988C27.1532 3.60178 27.1569 3.60346 27.1605 3.60541L27.161 3.6053C27.2219 3.63376 27.2898 3.65018 27.3617 3.65018C27.5444 3.65018 27.7024 3.54676 27.7796 3.39641L28.8527 1.56704Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M7.80452 0C3.49433 0 0 3.43924 0 7.68195V19.5124C0 19.7667 0.209581 19.9732 0.468282 19.9732H2.65358C2.65363 19.9732 2.65363 19.9732 2.65363 19.9732C2.91222 19.9732 3.12186 19.7667 3.12186 19.5124V13.8279C4.42627 14.7924 6.04758 15.364 7.80457 15.364C12.1147 15.364 15.6094 11.9247 15.6094 7.68206C15.6094 3.4393 12.1147 0 7.80452 0ZM7.80457 12.2912C5.21845 12.2912 3.12186 10.2275 3.12186 7.68195C3.12186 5.13631 5.21845 3.07279 7.80457 3.07279C10.3906 3.07279 12.4874 5.13631 12.4874 7.68195C12.4874 10.2275 10.3906 12.2912 7.80457 12.2912Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M53.8288 0C49.5187 0 46.0243 3.43924 46.0243 7.68195V19.5124C46.0243 19.7667 46.2339 19.9731 46.4926 19.9732H48.6779C48.9365 19.9732 49.1462 19.7667 49.1462 19.5124V13.828C50.4506 14.7924 52.0719 15.364 53.8289 15.364C58.139 15.364 61.6337 11.9247 61.6337 7.68211C61.6337 3.4393 58.139 0 53.8288 0ZM53.8289 12.2912C51.2427 12.2912 49.1462 10.2276 49.1462 7.68195C49.1462 5.13631 51.2427 3.07279 53.8289 3.07279C56.4149 3.07279 58.5117 5.13631 58.5117 7.68195C58.5117 10.2276 56.4149 12.2912 53.8289 12.2912Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M44.4094 7.83561C44.4094 3.59285 40.9148 0 36.6046 0C32.2944 0 28.8 3.4393 28.8 7.68206C28.8 11.9247 32.2944 15.364 36.6046 15.364C39.0444 15.364 41.0568 14.2635 42.3189 12.9136C42.3191 12.9135 42.3193 12.9133 42.3194 12.9132C42.3204 12.9121 42.3214 12.9112 42.3224 12.9101V12.91C42.4051 12.8268 42.4563 12.7131 42.4563 12.5876C42.4563 12.4549 42.3989 12.3357 42.3077 12.2515V12.2509L42.3012 12.2456C42.2893 12.2351 42.2769 12.2251 42.2639 12.2158L40.5942 10.8782C40.5118 10.8069 40.4041 10.7634 40.2857 10.7634C40.1386 10.7634 40.0075 10.8302 39.9217 10.9346C39.1801 11.6777 38.0073 12.2911 36.6047 12.2911C34.0186 12.2911 31.922 10.2275 31.922 7.68184C31.922 5.13621 34.0186 3.07268 36.6047 3.07268C38.6433 3.07268 40.377 4.3555 41.02 6.14547H36.9949C36.7362 6.14553 36.5266 6.35187 36.5266 6.6064L36.5265 8.75734C36.5265 9.01182 36.7361 9.21827 36.9949 9.21827H43.7851C43.7978 9.21827 43.8104 9.21734 43.823 9.21637C43.8356 9.2174 43.8481 9.21827 43.8608 9.21827C44.0687 9.21827 44.2449 9.08466 44.3059 8.90011L44.3113 8.90098C44.314 8.88434 44.3166 8.86829 44.3192 8.85219C44.3225 8.83653 44.325 8.8206 44.3268 8.80434C44.3809 8.46076 44.4094 8.21572 44.4094 7.83561Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M74.8943 1.53668L74.8963 1.53332C74.8963 1.53332 74.8962 1.53316 74.8961 1.53311C74.9287 1.47034 74.9474 1.3995 74.9474 1.32422C74.9474 1.15549 74.855 1.00839 74.7175 0.928067C74.7161 0.926603 74.7145 0.92411 74.7131 0.923297C71.8212 -0.629332 67.9599 -0.26234 65.403 2.32666C63.9676 3.77999 63.2347 5.64926 63.1969 7.52769H63.1945V14.9024C63.1945 14.9025 63.1945 14.9025 63.1945 14.9025C63.1945 15.1569 63.4041 15.3634 63.6627 15.3634H65.8481C66.1066 15.3634 66.3164 15.1569 66.3164 14.9025C66.3164 14.9025 66.3164 14.9025 66.3164 14.9024V7.68135H66.3175C66.3174 6.52346 66.7567 5.36438 67.6414 4.46861C69.2204 2.8698 71.5515 2.74975 73.1587 3.59154C73.1637 3.59425 73.1689 3.59668 73.174 3.59929C73.1776 3.60118 73.1813 3.60286 73.1849 3.60481L73.1854 3.60471C73.2462 3.63316 73.3141 3.64958 73.386 3.64958C73.5688 3.64958 73.7268 3.54617 73.8039 3.39582L74.8769 1.56644C74.8831 1.55668 74.889 1.54687 74.8943 1.53668Z\"\n fill=\"white\"/>\n </svg>\n\n )\n}","import React from 'react'\nimport classNames from 'classnames'\nimport { FaRotate } from 'react-icons/fa6'\n\ninterface ResetButtonProps {\n enabled?: boolean\n handleClick?: () => void\n}\n\nexport default function ResetButton({\n enabled = false,\n handleClick,\n}: ResetButtonProps) {\n const classes = classNames(\n 'prp-py-3 prp-px-4 prp-flex prp-gap-2 prp-items-center rounded-md prp-regular-text h-10',\n enabled &&\n 'prp-bg-orange-400 hover:prp-orange-500 prp-cursor-pointer prp-text-white',\n !enabled && 'prp-bg-grey-400 prp-text-gray-500'\n )\n\n return (\n <button\n onClick={handleClick}\n className={classes}\n disabled={!enabled}\n >\n <FaRotate />\n <span className=\"prp-hidden lg:prp-block\">Reset</span>\n </button>\n )\n}\n","import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'\nimport { FaInfoCircle } from 'react-icons/fa'\nimport React from 'react'\nimport { FaArrowUpRightFromSquare } from 'react-icons/fa6'\n\ninterface InfoPopoverProps {\n title: string\n text: string\n link: string\n}\n\nexport default function InfoPopover({ title, text, link }: InfoPopoverProps) {\n return (\n <Popover>\n <PopoverButton className=\"prp-ring-0 focus:prp-ring-0 prp-font-bold prp-text-indigo-300 prp-text-xs hover:prp-text-indigo-400 prp-block\">\n <FaInfoCircle />\n </PopoverButton>\n <PopoverPanel\n transition\n anchor=\"bottom\"\n className=\"prp-z-[1000] prp-p-4\"\n >\n <div className=\" prp-bg-white rounded-lg p-6 prp-dropshadow-popover prp-space-y-3 prp-max-w-[312px]\">\n <span className=\"prp-text-base prp-font-bold prp-leading-tight prp-text-gray-900\">\n {title}\n </span>\n <div className=\"prp-space-y-2\">\n <span className=\"prp-text-sm\">{text}</span>\n <a\n href={link}\n className=\"prp-font-black prp-text-sm prp-flex prp-gap-1 prp-items-center prp-text-indigo-700\"\n >\n Learn more <FaArrowUpRightFromSquare />\n </a>\n </div>\n </div>\n </PopoverPanel>\n </Popover>\n )\n}\n"],"mappings":"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","names":["import_react","React","import_react","classNames","React","import_react","import_fa6","import_react","import_fa6","React","React"]}
package/dist/components.mjs CHANGED
@@ -116,12 +116,18 @@ function InfoPopover({ title, text, link }) {
116
116
  function PreprPreviewBar(props) {
117
117
  var _a;
118
118
  const { activeSegment, activeVariant, data } = props;
119
+ if ((data == null ? void 0 : data.items) && (data == null ? void 0 : data.items[(data == null ? void 0 : data.items.length) - 1].reference_id) !== "null") {
120
+ data.items.push({
121
+ reference_id: "null",
122
+ body: "All other users"
123
+ });
124
+ }
119
125
  const emptyVariant = "A";
120
126
  const emptySegment = {
121
127
  body: "Choose segment"
122
128
  };
123
129
  const [selectedSegment, setSelectedSegment] = useState(
124
- data.items.filter(
130
+ data.items && data.items.filter(
125
131
  (segmentData) => segmentData === activeSegment
126
132
  )[0] || emptySegment
127
133
  );
package/dist/components.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/PreprPreviewBar.tsx","../src/components/PreprLogo.tsx","../src/components/ResetButton.tsx","../src/components/InfoPopover.tsx"],"sourcesContent":["'use client'\n\nimport { usePathname, useRouter } from 'next/navigation'\nimport React, { useState } from 'react'\n\nimport '../main.css'\nimport PreprLogo from './PreprLogo'\nimport ResetButton from './ResetButton'\nimport {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Radio,\n RadioGroup,\n} from '@headlessui/react'\nimport { FaCaretDown } from 'react-icons/fa6'\nimport InfoPopover from './InfoPopover'\n\nexport function PreprPreviewBar(props: {\n activeSegment?: string | null\n activeVariant?: string | null\n data?: any\n}) {\n const { activeSegment, activeVariant, data } = props\n\n const emptyVariant = 'A'\n const emptySegment = {\n body: 'Choose segment',\n }\n const [selectedSegment, setSelectedSegment] = useState(\n data.items.filter(\n (segmentData: any) => segmentData === activeSegment\n )[0] || emptySegment\n )\n\n const [selectedVariant, setSelectedVariant] = useState<string | null>(\n activeVariant || 'A'\n )\n\n const router = useRouter()\n const pathname = usePathname()\n\n const handleUpdateVariant = (variant: any) => {\n setSelectedVariant(variant)\n\n const params = new URLSearchParams({})\n\n params.append('a-b-testing', variant as string)\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n const handleUpdateSegment = (value: any) => {\n setSelectedSegment(value)\n\n const segment = value.reference_id\n\n if (!segment) {\n return\n }\n\n const params = new URLSearchParams({})\n\n if (segment !== 'Choose segment') {\n params.append('segments', segment as string)\n } else {\n params.append('segments', 'null')\n }\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n const handleReset = () => {\n setSelectedSegment(emptySegment)\n setSelectedVariant(emptyVariant)\n\n const params = new URLSearchParams({})\n params.append('segments', 'null')\n params.append('a-b-testing', 'null')\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n return (\n <div className=\"prp-py-4 prp-px-5 md:prp-px-19.5 prp-bg-indigo-default prp-sticky prp-top-0 prp-z-[1000] prp-base\">\n <div className=\"prp-flex prp-gap-y-4 prp-gap-x-6 prp-flex-wrap prp-justify-between\">\n {/* Logo & Text */}\n <div className=\"prp-flex prp-gap-6 prp-items-center\">\n <div className=\"prp-h-full prp-flex prp-justify-center prp-items-center\">\n <PreprLogo />\n </div>\n <div className=\"prp-hidden lg:prp-block prp-pb-0.5 prp-text-white prp-text-lg prp-text-bold prp-mr-10\">\n Adaptive Preview\n </div>\n </div>\n\n <div className=\"prp-flex prp-w-full md:prp-w-auto prp-gap-4 lg:prp-gap-6 prp-items-center\">\n <div className=\"prp-flex prp-gap-4\">\n <div className=\"prp-regular-text prp-text-white 2xl:prp-flex prp-items-center prp-gap-2 prp-hidden\">\n <span className=\"prp-pb-0.5\">Apply segment</span>\n <InfoPopover\n title={'Adaptive Preview'}\n text={\n \"Choose a segment to see how it's displayed.\"\n }\n link={'Learn more'}\n />\n </div>\n <Listbox\n value={selectedSegment.slug}\n onChange={handleUpdateSegment}\n >\n <ListboxButton className=\"prp-h-10 prp-flex-initial prp-w-[13rem] md:prp-w-[15rem] prp-max-w-[15rem] prp-rounded-md data-[open]:prp-rounded-b-none data-[open]:prp-border-b-white prp-border prp-border-gray-300 prp-items-center prp-bg-white prp-justify-center prp-px-4 prp-regular-text prp-text-gray-500\">\n <span className=\"prp-flex prp-items-center prp-justify-between\">\n <span>{selectedSegment.body}</span>\n <span className=\"prp-text-gray-900\">\n <FaCaretDown className=\"prp-w-3\" />\n </span>\n </span>\n </ListboxButton>\n <ListboxOptions\n anchor=\"bottom\"\n className=\"prp-z-[9999] prp-w-[var(--button-width)] prp-pb-2 prp-rounded-b-md prp-bg-white\"\n >\n {data?.items?.map((segment: any) => (\n <ListboxOption\n className=\"prp-px-4 prp-py-2 hover:prp-bg-gray-100 prp-bg-white prp-text-gray-900 prp-regular-text prp-z-[100] hover:prp-cursor-pointer prp-w-full\"\n key={segment.reference_id}\n value={segment}\n >\n {segment.body}\n </ListboxOption>\n ))}\n </ListboxOptions>\n </Listbox>\n </div>\n\n <div className=\"prp-flex prp-gap-4\">\n <div className=\"prp-regular-text prp-text-white 2xl:prp-flex prp-items-center prp-gap-2 prp-hidden\">\n <span className=\"prp-pb-0.5\">Show A/B variant</span>\n <InfoPopover\n title={'A/B Testing'}\n text={\n 'Choose between two different versions of a page to see which one performs better.'\n }\n link={'Learn more'}\n />\n </div>\n\n <RadioGroup\n className=\"prp-rounded-lg prp-p-1 prp-border prp-border-gray-300 prp-bg-white prp-flex prp-gap-1 prp-h-10 prp-items-center\"\n value={selectedVariant}\n onChange={handleUpdateVariant}\n >\n <Radio\n value={'A'}\n className=\"prp-py-2 prp-px-3 prp-rounded-md prp-text-gray-900 prp-regular-text data-[checked]:prp-dropshadow\n data-[checked]:prp-bg-indigo-600 data-[checked]:prp-text-white prp-h-8 prp-text-center prp-flex prp-items-center hover:prp-cursor-pointer\n \"\n >\n <span className=\"prp-hidden md:prp-inline prp-mr-1\">\n Variant{' '}\n </span>\n A\n </Radio>\n <Radio\n value={'B'}\n className=\"prp-py-2 prp-px-3 prp-rounded-md prp-text-gray-900 prp-regular-text data-[checked]:prp-dropshadow\n data-[checked]:prp-bg-indigo-600 data-[checked]:prp-text-white prp-h-8 prp-text-center prp-flex prp-items-center hover:prp-cursor-pointer\n \"\n >\n <span className=\"prp-hidden md:prp-inline prp-mr-1\">\n Variant{' '}\n </span>\n B\n </Radio>\n </RadioGroup>\n </div>\n\n <ResetButton\n handleClick={handleReset}\n enabled={\n selectedSegment.reference_id ||\n selectedVariant !== 'A'\n }\n />\n </div>\n </div>\n </div>\n )\n}\n","import React from \"react\";\n\nexport default function PreprLogo() {\n return (\n <svg width=\"75\" height=\"20\" viewBox=\"0 0 75 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M28.8527 1.56704C28.8588 1.55728 28.8647 1.54752 28.8701 1.53728L28.872 1.53392C28.872 1.53392 28.8719 1.53376 28.8718 1.5337C28.9044 1.47094 28.9231 1.4001 28.9231 1.32481C28.9231 1.15609 28.8307 1.00899 28.6932 0.928662C28.6918 0.927198 28.6902 0.924705 28.6888 0.923892C25.7969 -0.628737 21.9356 -0.26169 19.3787 2.32725C17.9433 3.78059 17.2104 5.64985 17.1726 7.52828H17.1702V14.903C17.1702 14.9031 17.1702 14.9031 17.1702 14.9031C17.1702 15.1575 17.3798 15.3639 17.6384 15.3639H19.8237C20.0823 15.3639 20.292 15.1575 20.292 14.9031C20.292 14.9031 20.292 14.9031 20.292 14.903V7.68194H20.2932C20.2931 6.52406 20.7324 5.36498 21.617 4.4692C23.1961 2.8704 25.5272 2.75034 27.1344 3.59213C27.1394 3.59484 27.1446 3.59728 27.1496 3.59988C27.1532 3.60178 27.1569 3.60346 27.1605 3.60541L27.161 3.6053C27.2219 3.63376 27.2898 3.65018 27.3617 3.65018C27.5444 3.65018 27.7024 3.54676 27.7796 3.39641L28.8527 1.56704Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M7.80452 0C3.49433 0 0 3.43924 0 7.68195V19.5124C0 19.7667 0.209581 19.9732 0.468282 19.9732H2.65358C2.65363 19.9732 2.65363 19.9732 2.65363 19.9732C2.91222 19.9732 3.12186 19.7667 3.12186 19.5124V13.8279C4.42627 14.7924 6.04758 15.364 7.80457 15.364C12.1147 15.364 15.6094 11.9247 15.6094 7.68206C15.6094 3.4393 12.1147 0 7.80452 0ZM7.80457 12.2912C5.21845 12.2912 3.12186 10.2275 3.12186 7.68195C3.12186 5.13631 5.21845 3.07279 7.80457 3.07279C10.3906 3.07279 12.4874 5.13631 12.4874 7.68195C12.4874 10.2275 10.3906 12.2912 7.80457 12.2912Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M53.8288 0C49.5187 0 46.0243 3.43924 46.0243 7.68195V19.5124C46.0243 19.7667 46.2339 19.9731 46.4926 19.9732H48.6779C48.9365 19.9732 49.1462 19.7667 49.1462 19.5124V13.828C50.4506 14.7924 52.0719 15.364 53.8289 15.364C58.139 15.364 61.6337 11.9247 61.6337 7.68211C61.6337 3.4393 58.139 0 53.8288 0ZM53.8289 12.2912C51.2427 12.2912 49.1462 10.2276 49.1462 7.68195C49.1462 5.13631 51.2427 3.07279 53.8289 3.07279C56.4149 3.07279 58.5117 5.13631 58.5117 7.68195C58.5117 10.2276 56.4149 12.2912 53.8289 12.2912Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M44.4094 7.83561C44.4094 3.59285 40.9148 0 36.6046 0C32.2944 0 28.8 3.4393 28.8 7.68206C28.8 11.9247 32.2944 15.364 36.6046 15.364C39.0444 15.364 41.0568 14.2635 42.3189 12.9136C42.3191 12.9135 42.3193 12.9133 42.3194 12.9132C42.3204 12.9121 42.3214 12.9112 42.3224 12.9101V12.91C42.4051 12.8268 42.4563 12.7131 42.4563 12.5876C42.4563 12.4549 42.3989 12.3357 42.3077 12.2515V12.2509L42.3012 12.2456C42.2893 12.2351 42.2769 12.2251 42.2639 12.2158L40.5942 10.8782C40.5118 10.8069 40.4041 10.7634 40.2857 10.7634C40.1386 10.7634 40.0075 10.8302 39.9217 10.9346C39.1801 11.6777 38.0073 12.2911 36.6047 12.2911C34.0186 12.2911 31.922 10.2275 31.922 7.68184C31.922 5.13621 34.0186 3.07268 36.6047 3.07268C38.6433 3.07268 40.377 4.3555 41.02 6.14547H36.9949C36.7362 6.14553 36.5266 6.35187 36.5266 6.6064L36.5265 8.75734C36.5265 9.01182 36.7361 9.21827 36.9949 9.21827H43.7851C43.7978 9.21827 43.8104 9.21734 43.823 9.21637C43.8356 9.2174 43.8481 9.21827 43.8608 9.21827C44.0687 9.21827 44.2449 9.08466 44.3059 8.90011L44.3113 8.90098C44.314 8.88434 44.3166 8.86829 44.3192 8.85219C44.3225 8.83653 44.325 8.8206 44.3268 8.80434C44.3809 8.46076 44.4094 8.21572 44.4094 7.83561Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M74.8943 1.53668L74.8963 1.53332C74.8963 1.53332 74.8962 1.53316 74.8961 1.53311C74.9287 1.47034 74.9474 1.3995 74.9474 1.32422C74.9474 1.15549 74.855 1.00839 74.7175 0.928067C74.7161 0.926603 74.7145 0.92411 74.7131 0.923297C71.8212 -0.629332 67.9599 -0.26234 65.403 2.32666C63.9676 3.77999 63.2347 5.64926 63.1969 7.52769H63.1945V14.9024C63.1945 14.9025 63.1945 14.9025 63.1945 14.9025C63.1945 15.1569 63.4041 15.3634 63.6627 15.3634H65.8481C66.1066 15.3634 66.3164 15.1569 66.3164 14.9025C66.3164 14.9025 66.3164 14.9025 66.3164 14.9024V7.68135H66.3175C66.3174 6.52346 66.7567 5.36438 67.6414 4.46861C69.2204 2.8698 71.5515 2.74975 73.1587 3.59154C73.1637 3.59425 73.1689 3.59668 73.174 3.59929C73.1776 3.60118 73.1813 3.60286 73.1849 3.60481L73.1854 3.60471C73.2462 3.63316 73.3141 3.64958 73.386 3.64958C73.5688 3.64958 73.7268 3.54617 73.8039 3.39582L74.8769 1.56644C74.8831 1.55668 74.889 1.54687 74.8943 1.53668Z\"\n fill=\"white\"/>\n </svg>\n\n )\n}","import React from 'react'\nimport classNames from 'classnames'\nimport { FaRotate } from 'react-icons/fa6'\n\ninterface ResetButtonProps {\n enabled?: boolean\n handleClick?: () => void\n}\n\nexport default function ResetButton({\n enabled = false,\n handleClick,\n}: ResetButtonProps) {\n const classes = classNames(\n 'prp-py-3 prp-px-4 prp-flex prp-gap-2 prp-items-center rounded-md prp-regular-text h-10',\n enabled &&\n 'prp-bg-orange-400 hover:prp-orange-500 prp-cursor-pointer prp-text-white',\n !enabled && 'prp-bg-grey-400 prp-text-gray-500'\n )\n\n return (\n <button\n onClick={handleClick}\n className={classes}\n disabled={!enabled}\n >\n <FaRotate />\n <span className=\"prp-hidden lg:prp-block\">Reset</span>\n </button>\n )\n}\n","import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'\nimport { FaInfoCircle } from 'react-icons/fa'\nimport React from 'react'\nimport { FaArrowUpRightFromSquare } from 'react-icons/fa6'\n\ninterface InfoPopoverProps {\n title: string\n text: string\n link: string\n}\n\nexport default function InfoPopover({ title, text, link }: InfoPopoverProps) {\n return (\n <Popover>\n <PopoverButton className=\"prp-ring-0 focus:prp-ring-0 prp-font-bold prp-text-indigo-300 prp-text-xs hover:prp-text-indigo-400 prp-block\">\n <FaInfoCircle />\n </PopoverButton>\n <PopoverPanel\n transition\n anchor=\"bottom\"\n className=\"prp-z-[1000] prp-p-4\"\n >\n <div className=\" prp-bg-white rounded-lg p-6 prp-dropshadow-popover prp-space-y-3 prp-max-w-[312px]\">\n <span className=\"prp-text-base prp-font-bold prp-leading-tight prp-text-gray-900\">\n {title}\n </span>\n <div className=\"prp-space-y-2\">\n <span className=\"prp-text-sm\">{text}</span>\n <a\n href={link}\n className=\"prp-font-black prp-text-sm prp-flex prp-gap-1 prp-items-center prp-text-indigo-700\"\n >\n Learn more <FaArrowUpRightFromSquare />\n </a>\n </div>\n </div>\n </PopoverPanel>\n </Popover>\n )\n}\n"],"mappings":"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","names":["React","React","React","React"]}
1
+ {"version":3,"sources":["../src/components/PreprPreviewBar.tsx","../src/components/PreprLogo.tsx","../src/components/ResetButton.tsx","../src/components/InfoPopover.tsx"],"sourcesContent":["'use client'\n\nimport { usePathname, useRouter } from 'next/navigation'\nimport React, { useState } from 'react'\n\nimport '../main.css'\nimport PreprLogo from './PreprLogo'\nimport ResetButton from './ResetButton'\nimport {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Radio,\n RadioGroup,\n} from '@headlessui/react'\nimport { FaCaretDown } from 'react-icons/fa6'\nimport InfoPopover from './InfoPopover'\n\nexport function PreprPreviewBar(props: {\n activeSegment?: string | null\n activeVariant?: string | null\n data?: any\n}) {\n const { activeSegment, activeVariant, data } = props\n\n if (\n data?.items &&\n data?.items[data?.items.length - 1].reference_id !== 'null'\n ) {\n data.items.push({\n reference_id: 'null',\n body: 'All other users',\n })\n }\n\n const emptyVariant = 'A'\n const emptySegment = {\n body: 'Choose segment',\n }\n const [selectedSegment, setSelectedSegment] = useState(\n (data.items &&\n data.items.filter(\n (segmentData: any) => segmentData === activeSegment\n )[0]) ||\n emptySegment\n )\n\n const [selectedVariant, setSelectedVariant] = useState<string | null>(\n activeVariant || 'A'\n )\n\n const router = useRouter()\n const pathname = usePathname()\n\n const handleUpdateVariant = (variant: any) => {\n setSelectedVariant(variant)\n\n const params = new URLSearchParams({})\n\n params.append('a-b-testing', variant as string)\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n const handleUpdateSegment = (value: any) => {\n setSelectedSegment(value)\n\n const segment = value.reference_id\n\n if (!segment) {\n return\n }\n\n const params = new URLSearchParams({})\n\n if (segment !== 'Choose segment') {\n params.append('segments', segment as string)\n } else {\n params.append('segments', 'null')\n }\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n const handleReset = () => {\n setSelectedSegment(emptySegment)\n setSelectedVariant(emptyVariant)\n\n const params = new URLSearchParams({})\n params.append('segments', 'null')\n params.append('a-b-testing', 'null')\n\n router.push(`${pathname}?${params.toString()}`, {\n scroll: false,\n })\n router.refresh()\n }\n\n return (\n <div className=\"prp-py-4 prp-px-5 md:prp-px-19.5 prp-bg-indigo-default prp-sticky prp-top-0 prp-z-[1000] prp-base\">\n <div className=\"prp-flex prp-gap-y-4 prp-gap-x-6 prp-flex-wrap prp-justify-between\">\n {/* Logo & Text */}\n <div className=\"prp-flex prp-gap-6 prp-items-center\">\n <div className=\"prp-h-full prp-flex prp-justify-center prp-items-center\">\n <PreprLogo />\n </div>\n <div className=\"prp-hidden lg:prp-block prp-pb-0.5 prp-text-white prp-text-lg prp-text-bold prp-mr-10\">\n Adaptive Preview\n </div>\n </div>\n\n <div className=\"prp-flex prp-w-full md:prp-w-auto prp-gap-4 lg:prp-gap-6 prp-items-center\">\n <div className=\"prp-flex prp-gap-4\">\n <div className=\"prp-regular-text prp-text-white 2xl:prp-flex prp-items-center prp-gap-2 prp-hidden\">\n <span className=\"prp-pb-0.5\">Apply segment</span>\n <InfoPopover\n title={'Adaptive Preview'}\n text={\n \"Choose a segment to see how it's displayed.\"\n }\n link={'Learn more'}\n />\n </div>\n <Listbox\n value={selectedSegment.slug}\n onChange={handleUpdateSegment}\n >\n <ListboxButton className=\"prp-h-10 prp-flex-initial prp-w-[13rem] md:prp-w-[15rem] prp-max-w-[15rem] prp-rounded-md data-[open]:prp-rounded-b-none data-[open]:prp-border-b-white prp-border prp-border-gray-300 prp-items-center prp-bg-white prp-justify-center prp-px-4 prp-regular-text prp-text-gray-500\">\n <span className=\"prp-flex prp-items-center prp-justify-between\">\n <span>{selectedSegment.body}</span>\n <span className=\"prp-text-gray-900\">\n <FaCaretDown className=\"prp-w-3\" />\n </span>\n </span>\n </ListboxButton>\n <ListboxOptions\n anchor=\"bottom\"\n className=\"prp-z-[9999] prp-w-[var(--button-width)] prp-pb-2 prp-rounded-b-md prp-bg-white\"\n >\n {data?.items?.map((segment: any) => (\n <ListboxOption\n className=\"prp-px-4 prp-py-2 hover:prp-bg-gray-100 prp-bg-white prp-text-gray-900 prp-regular-text prp-z-[100] hover:prp-cursor-pointer prp-w-full\"\n key={segment.reference_id}\n value={segment}\n >\n {segment.body}\n </ListboxOption>\n ))}\n </ListboxOptions>\n </Listbox>\n </div>\n\n <div className=\"prp-flex prp-gap-4\">\n <div className=\"prp-regular-text prp-text-white 2xl:prp-flex prp-items-center prp-gap-2 prp-hidden\">\n <span className=\"prp-pb-0.5\">Show A/B variant</span>\n <InfoPopover\n title={'A/B Testing'}\n text={\n 'Choose between two different versions of a page to see which one performs better.'\n }\n link={'Learn more'}\n />\n </div>\n\n <RadioGroup\n className=\"prp-rounded-lg prp-p-1 prp-border prp-border-gray-300 prp-bg-white prp-flex prp-gap-1 prp-h-10 prp-items-center\"\n value={selectedVariant}\n onChange={handleUpdateVariant}\n >\n <Radio\n value={'A'}\n className=\"prp-py-2 prp-px-3 prp-rounded-md prp-text-gray-900 prp-regular-text data-[checked]:prp-dropshadow\n data-[checked]:prp-bg-indigo-600 data-[checked]:prp-text-white prp-h-8 prp-text-center prp-flex prp-items-center hover:prp-cursor-pointer\n \"\n >\n <span className=\"prp-hidden md:prp-inline prp-mr-1\">\n Variant{' '}\n </span>\n A\n </Radio>\n <Radio\n value={'B'}\n className=\"prp-py-2 prp-px-3 prp-rounded-md prp-text-gray-900 prp-regular-text data-[checked]:prp-dropshadow\n data-[checked]:prp-bg-indigo-600 data-[checked]:prp-text-white prp-h-8 prp-text-center prp-flex prp-items-center hover:prp-cursor-pointer\n \"\n >\n <span className=\"prp-hidden md:prp-inline prp-mr-1\">\n Variant{' '}\n </span>\n B\n </Radio>\n </RadioGroup>\n </div>\n\n <ResetButton\n handleClick={handleReset}\n enabled={\n selectedSegment.reference_id ||\n selectedVariant !== 'A'\n }\n />\n </div>\n </div>\n </div>\n )\n}\n","import React from \"react\";\n\nexport default function PreprLogo() {\n return (\n <svg width=\"75\" height=\"20\" viewBox=\"0 0 75 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M28.8527 1.56704C28.8588 1.55728 28.8647 1.54752 28.8701 1.53728L28.872 1.53392C28.872 1.53392 28.8719 1.53376 28.8718 1.5337C28.9044 1.47094 28.9231 1.4001 28.9231 1.32481C28.9231 1.15609 28.8307 1.00899 28.6932 0.928662C28.6918 0.927198 28.6902 0.924705 28.6888 0.923892C25.7969 -0.628737 21.9356 -0.26169 19.3787 2.32725C17.9433 3.78059 17.2104 5.64985 17.1726 7.52828H17.1702V14.903C17.1702 14.9031 17.1702 14.9031 17.1702 14.9031C17.1702 15.1575 17.3798 15.3639 17.6384 15.3639H19.8237C20.0823 15.3639 20.292 15.1575 20.292 14.9031C20.292 14.9031 20.292 14.9031 20.292 14.903V7.68194H20.2932C20.2931 6.52406 20.7324 5.36498 21.617 4.4692C23.1961 2.8704 25.5272 2.75034 27.1344 3.59213C27.1394 3.59484 27.1446 3.59728 27.1496 3.59988C27.1532 3.60178 27.1569 3.60346 27.1605 3.60541L27.161 3.6053C27.2219 3.63376 27.2898 3.65018 27.3617 3.65018C27.5444 3.65018 27.7024 3.54676 27.7796 3.39641L28.8527 1.56704Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M7.80452 0C3.49433 0 0 3.43924 0 7.68195V19.5124C0 19.7667 0.209581 19.9732 0.468282 19.9732H2.65358C2.65363 19.9732 2.65363 19.9732 2.65363 19.9732C2.91222 19.9732 3.12186 19.7667 3.12186 19.5124V13.8279C4.42627 14.7924 6.04758 15.364 7.80457 15.364C12.1147 15.364 15.6094 11.9247 15.6094 7.68206C15.6094 3.4393 12.1147 0 7.80452 0ZM7.80457 12.2912C5.21845 12.2912 3.12186 10.2275 3.12186 7.68195C3.12186 5.13631 5.21845 3.07279 7.80457 3.07279C10.3906 3.07279 12.4874 5.13631 12.4874 7.68195C12.4874 10.2275 10.3906 12.2912 7.80457 12.2912Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M53.8288 0C49.5187 0 46.0243 3.43924 46.0243 7.68195V19.5124C46.0243 19.7667 46.2339 19.9731 46.4926 19.9732H48.6779C48.9365 19.9732 49.1462 19.7667 49.1462 19.5124V13.828C50.4506 14.7924 52.0719 15.364 53.8289 15.364C58.139 15.364 61.6337 11.9247 61.6337 7.68211C61.6337 3.4393 58.139 0 53.8288 0ZM53.8289 12.2912C51.2427 12.2912 49.1462 10.2276 49.1462 7.68195C49.1462 5.13631 51.2427 3.07279 53.8289 3.07279C56.4149 3.07279 58.5117 5.13631 58.5117 7.68195C58.5117 10.2276 56.4149 12.2912 53.8289 12.2912Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M44.4094 7.83561C44.4094 3.59285 40.9148 0 36.6046 0C32.2944 0 28.8 3.4393 28.8 7.68206C28.8 11.9247 32.2944 15.364 36.6046 15.364C39.0444 15.364 41.0568 14.2635 42.3189 12.9136C42.3191 12.9135 42.3193 12.9133 42.3194 12.9132C42.3204 12.9121 42.3214 12.9112 42.3224 12.9101V12.91C42.4051 12.8268 42.4563 12.7131 42.4563 12.5876C42.4563 12.4549 42.3989 12.3357 42.3077 12.2515V12.2509L42.3012 12.2456C42.2893 12.2351 42.2769 12.2251 42.2639 12.2158L40.5942 10.8782C40.5118 10.8069 40.4041 10.7634 40.2857 10.7634C40.1386 10.7634 40.0075 10.8302 39.9217 10.9346C39.1801 11.6777 38.0073 12.2911 36.6047 12.2911C34.0186 12.2911 31.922 10.2275 31.922 7.68184C31.922 5.13621 34.0186 3.07268 36.6047 3.07268C38.6433 3.07268 40.377 4.3555 41.02 6.14547H36.9949C36.7362 6.14553 36.5266 6.35187 36.5266 6.6064L36.5265 8.75734C36.5265 9.01182 36.7361 9.21827 36.9949 9.21827H43.7851C43.7978 9.21827 43.8104 9.21734 43.823 9.21637C43.8356 9.2174 43.8481 9.21827 43.8608 9.21827C44.0687 9.21827 44.2449 9.08466 44.3059 8.90011L44.3113 8.90098C44.314 8.88434 44.3166 8.86829 44.3192 8.85219C44.3225 8.83653 44.325 8.8206 44.3268 8.80434C44.3809 8.46076 44.4094 8.21572 44.4094 7.83561Z\"\n fill=\"white\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\"\n d=\"M74.8943 1.53668L74.8963 1.53332C74.8963 1.53332 74.8962 1.53316 74.8961 1.53311C74.9287 1.47034 74.9474 1.3995 74.9474 1.32422C74.9474 1.15549 74.855 1.00839 74.7175 0.928067C74.7161 0.926603 74.7145 0.92411 74.7131 0.923297C71.8212 -0.629332 67.9599 -0.26234 65.403 2.32666C63.9676 3.77999 63.2347 5.64926 63.1969 7.52769H63.1945V14.9024C63.1945 14.9025 63.1945 14.9025 63.1945 14.9025C63.1945 15.1569 63.4041 15.3634 63.6627 15.3634H65.8481C66.1066 15.3634 66.3164 15.1569 66.3164 14.9025C66.3164 14.9025 66.3164 14.9025 66.3164 14.9024V7.68135H66.3175C66.3174 6.52346 66.7567 5.36438 67.6414 4.46861C69.2204 2.8698 71.5515 2.74975 73.1587 3.59154C73.1637 3.59425 73.1689 3.59668 73.174 3.59929C73.1776 3.60118 73.1813 3.60286 73.1849 3.60481L73.1854 3.60471C73.2462 3.63316 73.3141 3.64958 73.386 3.64958C73.5688 3.64958 73.7268 3.54617 73.8039 3.39582L74.8769 1.56644C74.8831 1.55668 74.889 1.54687 74.8943 1.53668Z\"\n fill=\"white\"/>\n </svg>\n\n )\n}","import React from 'react'\nimport classNames from 'classnames'\nimport { FaRotate } from 'react-icons/fa6'\n\ninterface ResetButtonProps {\n enabled?: boolean\n handleClick?: () => void\n}\n\nexport default function ResetButton({\n enabled = false,\n handleClick,\n}: ResetButtonProps) {\n const classes = classNames(\n 'prp-py-3 prp-px-4 prp-flex prp-gap-2 prp-items-center rounded-md prp-regular-text h-10',\n enabled &&\n 'prp-bg-orange-400 hover:prp-orange-500 prp-cursor-pointer prp-text-white',\n !enabled && 'prp-bg-grey-400 prp-text-gray-500'\n )\n\n return (\n <button\n onClick={handleClick}\n className={classes}\n disabled={!enabled}\n >\n <FaRotate />\n <span className=\"prp-hidden lg:prp-block\">Reset</span>\n </button>\n )\n}\n","import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'\nimport { FaInfoCircle } from 'react-icons/fa'\nimport React from 'react'\nimport { FaArrowUpRightFromSquare } from 'react-icons/fa6'\n\ninterface InfoPopoverProps {\n title: string\n text: string\n link: string\n}\n\nexport default function InfoPopover({ title, text, link }: InfoPopoverProps) {\n return (\n <Popover>\n <PopoverButton className=\"prp-ring-0 focus:prp-ring-0 prp-font-bold prp-text-indigo-300 prp-text-xs hover:prp-text-indigo-400 prp-block\">\n <FaInfoCircle />\n </PopoverButton>\n <PopoverPanel\n transition\n anchor=\"bottom\"\n className=\"prp-z-[1000] prp-p-4\"\n >\n <div className=\" prp-bg-white rounded-lg p-6 prp-dropshadow-popover prp-space-y-3 prp-max-w-[312px]\">\n <span className=\"prp-text-base prp-font-bold prp-leading-tight prp-text-gray-900\">\n {title}\n </span>\n <div className=\"prp-space-y-2\">\n <span className=\"prp-text-sm\">{text}</span>\n <a\n href={link}\n className=\"prp-font-black prp-text-sm prp-flex prp-gap-1 prp-items-center prp-text-indigo-700\"\n >\n Learn more <FaArrowUpRightFromSquare />\n </a>\n </div>\n </div>\n </PopoverPanel>\n </Popover>\n )\n}\n"],"mappings":"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","names":["React","React","React","React"]}
package/dist/index.d.mts CHANGED
@@ -1,30 +1,24 @@
1
- import { NextRequest, NextResponse } from 'next/server';
1
+ import { NextResponse } from 'next/server';
2
2
 
3
- declare function PreprMiddleware(request: NextRequest, response?: NextResponse): NextResponse<unknown>;
3
+ declare function PreprMiddleware(request: any, response?: NextResponse): NextResponse<unknown>;
4
4
  /**
5
5
  * Returns the Prepr Customer ID from the headers
6
6
  */
7
- declare function getPreprUUID(): string;
7
+ declare function getPreprUUID(): Promise<string>;
8
8
  /**
9
9
  * Retuns the active segment from the headers
10
10
  */
11
- declare function getActiveSegment(): string;
11
+ declare function getActiveSegment(): Promise<string>;
12
12
  /**
13
13
  * Returns the active variant from the headers
14
14
  */
15
- declare function getActiveVariant(): string;
16
- /**
17
- * Helper function to only retrieve Prepr preview headers
18
- */
19
- declare function getPreviewHeaders(): {
20
- [key: string]: string;
21
- };
15
+ declare function getActiveVariant(): Promise<string>;
22
16
  /**
23
17
  * Helper function to retrieve Prepr headers (will filter out customer ID if in preview mode)
24
18
  */
25
- declare function getPreprHeaders(): {
19
+ declare function getPreprHeaders(): Promise<{
26
20
  [key: string]: string;
27
- };
21
+ }>;
28
22
  type PreprSegment = {
29
23
  id: string;
30
24
  created_on: string;
@@ -59,4 +53,4 @@ declare function getPreviewBarProps(token: string): Promise<{
59
53
  data: PreprSegmentsResponse;
60
54
  }>;
61
55
 
62
- export { PreprMiddleware, type PreprSegment, type PreprSegmentsResponse, getActiveSegment, getActiveVariant, getPreprEnvironmentSegments, getPreprHeaders, getPreprUUID, getPreviewBarProps, getPreviewHeaders };
56
+ export { PreprMiddleware, type PreprSegment, type PreprSegmentsResponse, getActiveSegment, getActiveVariant, getPreprEnvironmentSegments, getPreprHeaders, getPreprUUID, getPreviewBarProps };
package/dist/index.d.ts CHANGED
@@ -1,30 +1,24 @@
1
- import { NextRequest, NextResponse } from 'next/server';
1
+ import { NextResponse } from 'next/server';
2
2
 
3
- declare function PreprMiddleware(request: NextRequest, response?: NextResponse): NextResponse<unknown>;
3
+ declare function PreprMiddleware(request: any, response?: NextResponse): NextResponse<unknown>;
4
4
  /**
5
5
  * Returns the Prepr Customer ID from the headers
6
6
  */
7
- declare function getPreprUUID(): string;
7
+ declare function getPreprUUID(): Promise<string>;
8
8
  /**
9
9
  * Retuns the active segment from the headers
10
10
  */
11
- declare function getActiveSegment(): string;
11
+ declare function getActiveSegment(): Promise<string>;
12
12
  /**
13
13
  * Returns the active variant from the headers
14
14
  */
15
- declare function getActiveVariant(): string;
16
- /**
17
- * Helper function to only retrieve Prepr preview headers
18
- */
19
- declare function getPreviewHeaders(): {
20
- [key: string]: string;
21
- };
15
+ declare function getActiveVariant(): Promise<string>;
22
16
  /**
23
17
  * Helper function to retrieve Prepr headers (will filter out customer ID if in preview mode)
24
18
  */
25
- declare function getPreprHeaders(): {
19
+ declare function getPreprHeaders(): Promise<{
26
20
  [key: string]: string;
27
- };
21
+ }>;
28
22
  type PreprSegment = {
29
23
  id: string;
30
24
  created_on: string;
@@ -59,4 +53,4 @@ declare function getPreviewBarProps(token: string): Promise<{
59
53
  data: PreprSegmentsResponse;
60
54
  }>;
61
55
 
62
- export { PreprMiddleware, type PreprSegment, type PreprSegmentsResponse, getActiveSegment, getActiveVariant, getPreprEnvironmentSegments, getPreprHeaders, getPreprUUID, getPreviewBarProps, getPreviewHeaders };
56
+ export { PreprMiddleware, type PreprSegment, type PreprSegmentsResponse, getActiveSegment, getActiveVariant, getPreprEnvironmentSegments, getPreprHeaders, getPreprUUID, getPreviewBarProps };
package/dist/index.js CHANGED
@@ -45,8 +45,7 @@ __export(src_exports, {
45
45
  getPreprEnvironmentSegments: () => getPreprEnvironmentSegments,
46
46
  getPreprHeaders: () => getPreprHeaders,
47
47
  getPreprUUID: () => getPreprUUID,
48
- getPreviewBarProps: () => getPreviewBarProps,
49
- getPreviewHeaders: () => getPreviewHeaders
48
+ getPreviewBarProps: () => getPreviewBarProps
50
49
  });
51
50
  module.exports = __toCommonJS(src_exports);
52
51
  var import_server = require("next/server");
@@ -64,6 +63,7 @@ function PreprMiddleware(request, response) {
64
63
  }
65
64
  newResponse.headers.set("Prepr-Customer-Id", cookie);
66
65
  if (process.env.PREPR_ENV === "preview") {
66
+ newResponse.headers.set("Prepr-Preview-Bar", "true");
67
67
  if (request.nextUrl.searchParams.has("segments")) {
68
68
  const segments = request.nextUrl.searchParams.get("segments");
69
69
  if (segments) {
@@ -100,41 +100,41 @@ function PreprMiddleware(request, response) {
100
100
  return newResponse;
101
101
  }
102
102
  function getPreprUUID() {
103
- return (0, import_headers.headers)().get("prepr-customer-id");
103
+ return __async(this, null, function* () {
104
+ const headersList = yield (0, import_headers.headers)();
105
+ return headersList.get("prepr-customer-id");
106
+ });
104
107
  }
105
108
  function getActiveSegment() {
106
- return (0, import_headers.headers)().get("Prepr-Segments");
109
+ return __async(this, null, function* () {
110
+ const headersList = yield (0, import_headers.headers)();
111
+ return headersList.get("Prepr-Segments");
112
+ });
107
113
  }
108
114
  function getActiveVariant() {
109
- return (0, import_headers.headers)().get("Prepr-ABtesting");
110
- }
111
- function getPreviewHeaders() {
112
- let newHeaders = {};
113
- (0, import_headers.headers)().forEach((value, key) => {
114
- if (key.startsWith("prepr") && key !== "prepr-customer-id") {
115
- newHeaders[key] = value;
116
- }
115
+ return __async(this, null, function* () {
116
+ const headersList = yield (0, import_headers.headers)();
117
+ return headersList.get("Prepr-ABtesting");
117
118
  });
118
- return newHeaders;
119
119
  }
120
120
  function getPreprHeaders() {
121
- let newHeaders = {};
122
- if (process.env.PREPR_ENV !== "preview") {
123
- newHeaders["prepr-customer-id"] = (0, import_headers.headers)().get("prepr-customer-id") || "";
124
- } else {
125
- (0, import_headers.headers)().forEach((value, key) => {
126
- if (key.startsWith("prepr") && key !== "prepr-customer-id") {
121
+ return __async(this, null, function* () {
122
+ let newHeaders = {};
123
+ const headersList = yield (0, import_headers.headers)();
124
+ headersList.forEach((value, key) => {
125
+ if (key.startsWith("prepr")) {
127
126
  newHeaders[key] = value;
128
127
  }
129
128
  });
130
- }
131
- return newHeaders;
129
+ return newHeaders;
130
+ });
132
131
  }
133
132
  function getPreprEnvironmentSegments(token) {
134
133
  return __async(this, null, function* () {
135
134
  const response = yield fetch("https://api.eu1.prepr.io/segments", {
136
135
  headers: {
137
- Authorization: `Bearer ${token}`
136
+ Authorization: `Bearer ${token}`,
137
+ "User-Agent": "Prepr-Preview-Bar/1.0"
138
138
  }
139
139
  });
140
140
  return response.json();
@@ -143,8 +143,8 @@ function getPreprEnvironmentSegments(token) {
143
143
  function getPreviewBarProps(token) {
144
144
  return __async(this, null, function* () {
145
145
  const data = yield getPreprEnvironmentSegments(token);
146
- const activeSegment = getActiveSegment();
147
- const activeVariant = getActiveVariant();
146
+ const activeSegment = yield getActiveSegment();
147
+ const activeVariant = yield getActiveVariant();
148
148
  return {
149
149
  activeSegment,
150
150
  activeVariant,
@@ -160,7 +160,6 @@ function getPreviewBarProps(token) {
160
160
  getPreprEnvironmentSegments,
161
161
  getPreprHeaders,
162
162
  getPreprUUID,
163
- getPreviewBarProps,
164
- getPreviewHeaders
163
+ getPreviewBarProps
165
164
  });
166
165
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {NextRequest, NextResponse} from \"next/server\";\nimport {headers} from \"next/headers\";\n\nexport function PreprMiddleware(request: NextRequest, response?: NextResponse) {\n const newResponse = response || NextResponse.next()\n\n let cookie = request.cookies.get('__prepr_uid')?.value\n\n if (!cookie) {\n cookie = crypto.randomUUID()\n newResponse.cookies.set('__prepr_uid', cookie, {\n maxAge: 1 * 365 * 24 * 60, // Set for one year\n })\n }\n\n newResponse.headers.set('Prepr-Customer-Id', cookie)\n\n if (process.env.PREPR_ENV === 'preview') {\n if (request.nextUrl.searchParams.has('segments')) {\n const segments = request.nextUrl.searchParams.get('segments')\n\n if (segments) {\n newResponse.headers.set('Prepr-Segments', segments)\n newResponse.cookies.set('Prepr-Segments', segments, {\n maxAge: 60, // Set for one year\n })\n }\n }\n\n if (request.nextUrl.searchParams.has('a-b-testing')) {\n const ab_testing = request.nextUrl.searchParams.get('a-b-testing')\n let value = ab_testing?.toUpperCase()\n if (value === 'B') {\n value = 'B'\n } else {\n value = 'A'\n }\n newResponse.headers.set('Prepr-ABtesting', value)\n newResponse.cookies.set('Prepr-ABtesting', value, {\n maxAge: 60, // Set for one year\n })\n }\n\n const segmentCookie = request.cookies.get('Prepr-Segments')?.value\n if (segmentCookie) {\n newResponse.headers.set('Prepr-Segments', segmentCookie)\n }\n\n const abCookie = request.cookies.get('Prepr-ABtesting')?.value\n if (abCookie) {\n newResponse.headers.set('Prepr-ABtesting', abCookie)\n }\n }\n\n return newResponse\n}\n\n/**\n * Returns the Prepr Customer ID from the headers\n */\nexport function getPreprUUID() {\n return headers().get('prepr-customer-id')\n}\n\n/**\n * Retuns the active segment from the headers\n */\nexport function getActiveSegment() {\n return headers().get('Prepr-Segments')\n}\n\n/**\n * Returns the active variant from the headers\n */\nexport function getActiveVariant() {\n return headers().get('Prepr-ABtesting')\n}\n\n/**\n * Helper function to only retrieve Prepr preview headers\n */\nexport function getPreviewHeaders() {\n let newHeaders: {\n [key: string]: string\n } = {}\n headers().forEach((value, key) => {\n if (key.startsWith('prepr') && key !== 'prepr-customer-id') {\n newHeaders[key] = value\n }\n })\n\n return newHeaders\n}\n\n/**\n * Helper function to retrieve Prepr headers (will filter out customer ID if in preview mode)\n */\nexport function getPreprHeaders() {\n let newHeaders: {\n [key: string]: string\n } = {}\n\n if (process.env.PREPR_ENV !== 'preview') {\n newHeaders['prepr-customer-id'] =\n headers().get('prepr-customer-id') || ''\n } else {\n headers().forEach((value, key) => {\n if (key.startsWith('prepr') && key !== 'prepr-customer-id') {\n newHeaders[key] = value\n }\n })\n }\n\n return newHeaders\n}\n\nexport type PreprSegment = {\n id: string\n created_on: string\n changed_on: string\n synced_on: string\n label: string\n reference_id: string\n body: string\n query: string\n count: number\n}\n\nexport type PreprSegmentsResponse = {\n total: number\n skip: number\n limit: number\n items: PreprSegment[]\n}\n\n/**\n * Fetches the segments from the Prepr API\n * @param token Prepr access token with scope 'segments'\n * @returns Object with total, skip, limit and items\n */\nexport async function getPreprEnvironmentSegments(token: string): Promise<PreprSegmentsResponse> {\n const response = await fetch('https://api.eu1.prepr.io/segments', {\n headers: {\n Authorization: `Bearer ${token}`,\n },\n })\n\n return response.json()\n}\n\n/**\n * Fetches all the necessary previewbar props\n * @param token Prepr access token with scope 'segments'\n * @returns Object with activeSegment, activeVariant and data\n */\nexport async function getPreviewBarProps(token: string): Promise<{\n activeSegment: string | null,\n activeVariant: string | null,\n data: PreprSegmentsResponse\n}> {\n const data = await getPreprEnvironmentSegments(token)\n const activeSegment = getActiveSegment()\n const activeVariant = getActiveVariant()\n\n return {\n activeSegment,\n activeVariant,\n data\n }\n}"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { NextResponse } from 'next/server'\nimport { headers } from 'next/headers'\n\nexport function PreprMiddleware(request: any, response?: NextResponse) {\n const newResponse = response || NextResponse.next()\n\n let cookie = request.cookies.get('__prepr_uid')?.value\n\n if (!cookie) {\n cookie = crypto.randomUUID()\n newResponse.cookies.set('__prepr_uid', cookie, {\n maxAge: 1 * 365 * 24 * 60, // Set for one year\n })\n }\n\n newResponse.headers.set('Prepr-Customer-Id', cookie)\n\n if (process.env.PREPR_ENV === 'preview') {\n newResponse.headers.set('Prepr-Preview-Bar', 'true')\n\n if (request.nextUrl.searchParams.has('segments')) {\n const segments = request.nextUrl.searchParams.get('segments')\n\n if (segments) {\n newResponse.headers.set('Prepr-Segments', segments)\n newResponse.cookies.set('Prepr-Segments', segments, {\n maxAge: 60, // Set for one year\n })\n }\n }\n\n if (request.nextUrl.searchParams.has('a-b-testing')) {\n const ab_testing = request.nextUrl.searchParams.get('a-b-testing')\n let value = ab_testing?.toUpperCase()\n if (value === 'B') {\n value = 'B'\n } else {\n value = 'A'\n }\n newResponse.headers.set('Prepr-ABtesting', value)\n newResponse.cookies.set('Prepr-ABtesting', value, {\n maxAge: 60, // Set for one year\n })\n }\n\n const segmentCookie = request.cookies.get('Prepr-Segments')?.value\n if (segmentCookie) {\n newResponse.headers.set('Prepr-Segments', segmentCookie)\n }\n\n const abCookie = request.cookies.get('Prepr-ABtesting')?.value\n if (abCookie) {\n newResponse.headers.set('Prepr-ABtesting', abCookie)\n }\n }\n\n return newResponse\n}\n\n/**\n * Returns the Prepr Customer ID from the headers\n */\nexport async function getPreprUUID() {\n const headersList = await headers()\n return headersList.get('prepr-customer-id')\n}\n\n/**\n * Retuns the active segment from the headers\n */\nexport async function getActiveSegment() {\n const headersList = await headers()\n return headersList.get('Prepr-Segments')\n}\n\n/**\n * Returns the active variant from the headers\n */\nexport async function getActiveVariant() {\n const headersList = await headers()\n return headersList.get('Prepr-ABtesting')\n}\n\n/**\n * Helper function to retrieve Prepr headers (will filter out customer ID if in preview mode)\n */\nexport async function getPreprHeaders() {\n let newHeaders: {\n [key: string]: string\n } = {}\n\n const headersList = await headers()\n\n headersList.forEach((value, key) => {\n if (key.startsWith('prepr')) {\n newHeaders[key] = value\n }\n })\n\n return newHeaders\n}\n\nexport type PreprSegment = {\n id: string\n created_on: string\n changed_on: string\n synced_on: string\n label: string\n reference_id: string\n body: string\n query: string\n count: number\n}\n\nexport type PreprSegmentsResponse = {\n total: number\n skip: number\n limit: number\n items: PreprSegment[]\n}\n\n/**\n * Fetches the segments from the Prepr API\n * @param token Prepr access token with scope 'segments'\n * @returns Object with total, skip, limit and items\n */\nexport async function getPreprEnvironmentSegments(\n token: string\n): Promise<PreprSegmentsResponse> {\n const response = await fetch('https://api.eu1.prepr.io/segments', {\n headers: {\n Authorization: `Bearer ${token}`,\n 'User-Agent': 'Prepr-Preview-Bar/1.0',\n },\n })\n\n return response.json()\n}\n\n/**\n * Fetches all the necessary previewbar props\n * @param token Prepr access token with scope 'segments'\n * @returns Object with activeSegment, activeVariant and data\n */\nexport async function getPreviewBarProps(token: string): Promise<{\n activeSegment: string | null\n activeVariant: string | null\n data: PreprSegmentsResponse\n}> {\n const data = await getPreprEnvironmentSegments(token)\n const activeSegment = await getActiveSegment()\n const activeVariant = await getActiveVariant()\n\n return {\n activeSegment,\n activeVariant,\n data,\n }\n}\n"],"mappings":"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","names":[]}
package/dist/index.mjs CHANGED
@@ -18,6 +18,7 @@ function PreprMiddleware(request, response) {
18
18
  }
19
19
  newResponse.headers.set("Prepr-Customer-Id", cookie);
20
20
  if (process.env.PREPR_ENV === "preview") {
21
+ newResponse.headers.set("Prepr-Preview-Bar", "true");
21
22
  if (request.nextUrl.searchParams.has("segments")) {
22
23
  const segments = request.nextUrl.searchParams.get("segments");
23
24
  if (segments) {
@@ -54,41 +55,41 @@ function PreprMiddleware(request, response) {
54
55
  return newResponse;
55
56
  }
56
57
  function getPreprUUID() {
57
- return headers().get("prepr-customer-id");
58
+ return __async(this, null, function* () {
59
+ const headersList = yield headers();
60
+ return headersList.get("prepr-customer-id");
61
+ });
58
62
  }
59
63
  function getActiveSegment() {
60
- return headers().get("Prepr-Segments");
64
+ return __async(this, null, function* () {
65
+ const headersList = yield headers();
66
+ return headersList.get("Prepr-Segments");
67
+ });
61
68
  }
62
69
  function getActiveVariant() {
63
- return headers().get("Prepr-ABtesting");
64
- }
65
- function getPreviewHeaders() {
66
- let newHeaders = {};
67
- headers().forEach((value, key) => {
68
- if (key.startsWith("prepr") && key !== "prepr-customer-id") {
69
- newHeaders[key] = value;
70
- }
70
+ return __async(this, null, function* () {
71
+ const headersList = yield headers();
72
+ return headersList.get("Prepr-ABtesting");
71
73
  });
72
- return newHeaders;
73
74
  }
74
75
  function getPreprHeaders() {
75
- let newHeaders = {};
76
- if (process.env.PREPR_ENV !== "preview") {
77
- newHeaders["prepr-customer-id"] = headers().get("prepr-customer-id") || "";
78
- } else {
79
- headers().forEach((value, key) => {
80
- if (key.startsWith("prepr") && key !== "prepr-customer-id") {
76
+ return __async(this, null, function* () {
77
+ let newHeaders = {};
78
+ const headersList = yield headers();
79
+ headersList.forEach((value, key) => {
80
+ if (key.startsWith("prepr")) {
81
81
  newHeaders[key] = value;
82
82
  }
83
83
  });
84
- }
85
- return newHeaders;
84
+ return newHeaders;
85
+ });
86
86
  }
87
87
  function getPreprEnvironmentSegments(token) {
88
88
  return __async(this, null, function* () {
89
89
  const response = yield fetch("https://api.eu1.prepr.io/segments", {
90
90
  headers: {
91
- Authorization: `Bearer ${token}`
91
+ Authorization: `Bearer ${token}`,
92
+ "User-Agent": "Prepr-Preview-Bar/1.0"
92
93
  }
93
94
  });
94
95
  return response.json();
@@ -97,8 +98,8 @@ function getPreprEnvironmentSegments(token) {
97
98
  function getPreviewBarProps(token) {
98
99
  return __async(this, null, function* () {
99
100
  const data = yield getPreprEnvironmentSegments(token);
100
- const activeSegment = getActiveSegment();
101
- const activeVariant = getActiveVariant();
101
+ const activeSegment = yield getActiveSegment();
102
+ const activeVariant = yield getActiveVariant();
102
103
  return {
103
104
  activeSegment,
104
105
  activeVariant,
@@ -113,7 +114,6 @@ export {
113
114
  getPreprEnvironmentSegments,
114
115
  getPreprHeaders,
115
116
  getPreprUUID,
116
- getPreviewBarProps,
117
- getPreviewHeaders
117
+ getPreviewBarProps
118
118
  };
119
119
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {NextRequest, NextResponse} from \"next/server\";\nimport {headers} from \"next/headers\";\n\nexport function PreprMiddleware(request: NextRequest, response?: NextResponse) {\n const newResponse = response || NextResponse.next()\n\n let cookie = request.cookies.get('__prepr_uid')?.value\n\n if (!cookie) {\n cookie = crypto.randomUUID()\n newResponse.cookies.set('__prepr_uid', cookie, {\n maxAge: 1 * 365 * 24 * 60, // Set for one year\n })\n }\n\n newResponse.headers.set('Prepr-Customer-Id', cookie)\n\n if (process.env.PREPR_ENV === 'preview') {\n if (request.nextUrl.searchParams.has('segments')) {\n const segments = request.nextUrl.searchParams.get('segments')\n\n if (segments) {\n newResponse.headers.set('Prepr-Segments', segments)\n newResponse.cookies.set('Prepr-Segments', segments, {\n maxAge: 60, // Set for one year\n })\n }\n }\n\n if (request.nextUrl.searchParams.has('a-b-testing')) {\n const ab_testing = request.nextUrl.searchParams.get('a-b-testing')\n let value = ab_testing?.toUpperCase()\n if (value === 'B') {\n value = 'B'\n } else {\n value = 'A'\n }\n newResponse.headers.set('Prepr-ABtesting', value)\n newResponse.cookies.set('Prepr-ABtesting', value, {\n maxAge: 60, // Set for one year\n })\n }\n\n const segmentCookie = request.cookies.get('Prepr-Segments')?.value\n if (segmentCookie) {\n newResponse.headers.set('Prepr-Segments', segmentCookie)\n }\n\n const abCookie = request.cookies.get('Prepr-ABtesting')?.value\n if (abCookie) {\n newResponse.headers.set('Prepr-ABtesting', abCookie)\n }\n }\n\n return newResponse\n}\n\n/**\n * Returns the Prepr Customer ID from the headers\n */\nexport function getPreprUUID() {\n return headers().get('prepr-customer-id')\n}\n\n/**\n * Retuns the active segment from the headers\n */\nexport function getActiveSegment() {\n return headers().get('Prepr-Segments')\n}\n\n/**\n * Returns the active variant from the headers\n */\nexport function getActiveVariant() {\n return headers().get('Prepr-ABtesting')\n}\n\n/**\n * Helper function to only retrieve Prepr preview headers\n */\nexport function getPreviewHeaders() {\n let newHeaders: {\n [key: string]: string\n } = {}\n headers().forEach((value, key) => {\n if (key.startsWith('prepr') && key !== 'prepr-customer-id') {\n newHeaders[key] = value\n }\n })\n\n return newHeaders\n}\n\n/**\n * Helper function to retrieve Prepr headers (will filter out customer ID if in preview mode)\n */\nexport function getPreprHeaders() {\n let newHeaders: {\n [key: string]: string\n } = {}\n\n if (process.env.PREPR_ENV !== 'preview') {\n newHeaders['prepr-customer-id'] =\n headers().get('prepr-customer-id') || ''\n } else {\n headers().forEach((value, key) => {\n if (key.startsWith('prepr') && key !== 'prepr-customer-id') {\n newHeaders[key] = value\n }\n })\n }\n\n return newHeaders\n}\n\nexport type PreprSegment = {\n id: string\n created_on: string\n changed_on: string\n synced_on: string\n label: string\n reference_id: string\n body: string\n query: string\n count: number\n}\n\nexport type PreprSegmentsResponse = {\n total: number\n skip: number\n limit: number\n items: PreprSegment[]\n}\n\n/**\n * Fetches the segments from the Prepr API\n * @param token Prepr access token with scope 'segments'\n * @returns Object with total, skip, limit and items\n */\nexport async function getPreprEnvironmentSegments(token: string): Promise<PreprSegmentsResponse> {\n const response = await fetch('https://api.eu1.prepr.io/segments', {\n headers: {\n Authorization: `Bearer ${token}`,\n },\n })\n\n return response.json()\n}\n\n/**\n * Fetches all the necessary previewbar props\n * @param token Prepr access token with scope 'segments'\n * @returns Object with activeSegment, activeVariant and data\n */\nexport async function getPreviewBarProps(token: string): Promise<{\n activeSegment: string | null,\n activeVariant: string | null,\n data: PreprSegmentsResponse\n}> {\n const data = await getPreprEnvironmentSegments(token)\n const activeSegment = getActiveSegment()\n const activeVariant = getActiveVariant()\n\n return {\n activeSegment,\n activeVariant,\n data\n }\n}"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { NextResponse } from 'next/server'\nimport { headers } from 'next/headers'\n\nexport function PreprMiddleware(request: any, response?: NextResponse) {\n const newResponse = response || NextResponse.next()\n\n let cookie = request.cookies.get('__prepr_uid')?.value\n\n if (!cookie) {\n cookie = crypto.randomUUID()\n newResponse.cookies.set('__prepr_uid', cookie, {\n maxAge: 1 * 365 * 24 * 60, // Set for one year\n })\n }\n\n newResponse.headers.set('Prepr-Customer-Id', cookie)\n\n if (process.env.PREPR_ENV === 'preview') {\n newResponse.headers.set('Prepr-Preview-Bar', 'true')\n\n if (request.nextUrl.searchParams.has('segments')) {\n const segments = request.nextUrl.searchParams.get('segments')\n\n if (segments) {\n newResponse.headers.set('Prepr-Segments', segments)\n newResponse.cookies.set('Prepr-Segments', segments, {\n maxAge: 60, // Set for one year\n })\n }\n }\n\n if (request.nextUrl.searchParams.has('a-b-testing')) {\n const ab_testing = request.nextUrl.searchParams.get('a-b-testing')\n let value = ab_testing?.toUpperCase()\n if (value === 'B') {\n value = 'B'\n } else {\n value = 'A'\n }\n newResponse.headers.set('Prepr-ABtesting', value)\n newResponse.cookies.set('Prepr-ABtesting', value, {\n maxAge: 60, // Set for one year\n })\n }\n\n const segmentCookie = request.cookies.get('Prepr-Segments')?.value\n if (segmentCookie) {\n newResponse.headers.set('Prepr-Segments', segmentCookie)\n }\n\n const abCookie = request.cookies.get('Prepr-ABtesting')?.value\n if (abCookie) {\n newResponse.headers.set('Prepr-ABtesting', abCookie)\n }\n }\n\n return newResponse\n}\n\n/**\n * Returns the Prepr Customer ID from the headers\n */\nexport async function getPreprUUID() {\n const headersList = await headers()\n return headersList.get('prepr-customer-id')\n}\n\n/**\n * Retuns the active segment from the headers\n */\nexport async function getActiveSegment() {\n const headersList = await headers()\n return headersList.get('Prepr-Segments')\n}\n\n/**\n * Returns the active variant from the headers\n */\nexport async function getActiveVariant() {\n const headersList = await headers()\n return headersList.get('Prepr-ABtesting')\n}\n\n/**\n * Helper function to retrieve Prepr headers (will filter out customer ID if in preview mode)\n */\nexport async function getPreprHeaders() {\n let newHeaders: {\n [key: string]: string\n } = {}\n\n const headersList = await headers()\n\n headersList.forEach((value, key) => {\n if (key.startsWith('prepr')) {\n newHeaders[key] = value\n }\n })\n\n return newHeaders\n}\n\nexport type PreprSegment = {\n id: string\n created_on: string\n changed_on: string\n synced_on: string\n label: string\n reference_id: string\n body: string\n query: string\n count: number\n}\n\nexport type PreprSegmentsResponse = {\n total: number\n skip: number\n limit: number\n items: PreprSegment[]\n}\n\n/**\n * Fetches the segments from the Prepr API\n * @param token Prepr access token with scope 'segments'\n * @returns Object with total, skip, limit and items\n */\nexport async function getPreprEnvironmentSegments(\n token: string\n): Promise<PreprSegmentsResponse> {\n const response = await fetch('https://api.eu1.prepr.io/segments', {\n headers: {\n Authorization: `Bearer ${token}`,\n 'User-Agent': 'Prepr-Preview-Bar/1.0',\n },\n })\n\n return response.json()\n}\n\n/**\n * Fetches all the necessary previewbar props\n * @param token Prepr access token with scope 'segments'\n * @returns Object with activeSegment, activeVariant and data\n */\nexport async function getPreviewBarProps(token: string): Promise<{\n activeSegment: string | null\n activeVariant: string | null\n data: PreprSegmentsResponse\n}> {\n const data = await getPreprEnvironmentSegments(token)\n const activeSegment = await getActiveSegment()\n const activeVariant = await getActiveVariant()\n\n return {\n activeSegment,\n activeVariant,\n data,\n }\n}\n"],"mappings":";;;;;AAAA,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAEjB,SAAS,gBAAgB,SAAc,UAAyB;AAHvE;AAII,QAAM,cAAc,YAAY,aAAa,KAAK;AAElD,MAAI,UAAS,aAAQ,QAAQ,IAAI,aAAa,MAAjC,mBAAoC;AAEjD,MAAI,CAAC,QAAQ;AACT,aAAS,OAAO,WAAW;AAC3B,gBAAY,QAAQ,IAAI,eAAe,QAAQ;AAAA,MAC3C,QAAQ,IAAI,MAAM,KAAK;AAAA;AAAA,IAC3B,CAAC;AAAA,EACL;AAEA,cAAY,QAAQ,IAAI,qBAAqB,MAAM;AAEnD,MAAI,QAAQ,IAAI,cAAc,WAAW;AACrC,gBAAY,QAAQ,IAAI,qBAAqB,MAAM;AAEnD,QAAI,QAAQ,QAAQ,aAAa,IAAI,UAAU,GAAG;AAC9C,YAAM,WAAW,QAAQ,QAAQ,aAAa,IAAI,UAAU;AAE5D,UAAI,UAAU;AACV,oBAAY,QAAQ,IAAI,kBAAkB,QAAQ;AAClD,oBAAY,QAAQ,IAAI,kBAAkB,UAAU;AAAA,UAChD,QAAQ;AAAA;AAAA,QACZ,CAAC;AAAA,MACL;AAAA,IACJ;AAEA,QAAI,QAAQ,QAAQ,aAAa,IAAI,aAAa,GAAG;AACjD,YAAM,aAAa,QAAQ,QAAQ,aAAa,IAAI,aAAa;AACjE,UAAI,QAAQ,yCAAY;AACxB,UAAI,UAAU,KAAK;AACf,gBAAQ;AAAA,MACZ,OAAO;AACH,gBAAQ;AAAA,MACZ;AACA,kBAAY,QAAQ,IAAI,mBAAmB,KAAK;AAChD,kBAAY,QAAQ,IAAI,mBAAmB,OAAO;AAAA,QAC9C,QAAQ;AAAA;AAAA,MACZ,CAAC;AAAA,IACL;AAEA,UAAM,iBAAgB,aAAQ,QAAQ,IAAI,gBAAgB,MAApC,mBAAuC;AAC7D,QAAI,eAAe;AACf,kBAAY,QAAQ,IAAI,kBAAkB,aAAa;AAAA,IAC3D;AAEA,UAAM,YAAW,aAAQ,QAAQ,IAAI,iBAAiB,MAArC,mBAAwC;AACzD,QAAI,UAAU;AACV,kBAAY,QAAQ,IAAI,mBAAmB,QAAQ;AAAA,IACvD;AAAA,EACJ;AAEA,SAAO;AACX;AAKA,SAAsB,eAAe;AAAA;AACjC,UAAM,cAAc,MAAM,QAAQ;AAClC,WAAO,YAAY,IAAI,mBAAmB;AAAA,EAC9C;AAAA;AAKA,SAAsB,mBAAmB;AAAA;AACrC,UAAM,cAAc,MAAM,QAAQ;AAClC,WAAO,YAAY,IAAI,gBAAgB;AAAA,EAC3C;AAAA;AAKA,SAAsB,mBAAmB;AAAA;AACrC,UAAM,cAAc,MAAM,QAAQ;AAClC,WAAO,YAAY,IAAI,iBAAiB;AAAA,EAC5C;AAAA;AAKA,SAAsB,kBAAkB;AAAA;AACpC,QAAI,aAEA,CAAC;AAEL,UAAM,cAAc,MAAM,QAAQ;AAElC,gBAAY,QAAQ,CAAC,OAAO,QAAQ;AAChC,UAAI,IAAI,WAAW,OAAO,GAAG;AACzB,mBAAW,GAAG,IAAI;AAAA,MACtB;AAAA,IACJ,CAAC;AAED,WAAO;AAAA,EACX;AAAA;AA0BA,SAAsB,4BAClB,OAC8B;AAAA;AAC9B,UAAM,WAAW,MAAM,MAAM,qCAAqC;AAAA,MAC9D,SAAS;AAAA,QACL,eAAe,UAAU,KAAK;AAAA,QAC9B,cAAc;AAAA,MAClB;AAAA,IACJ,CAAC;AAED,WAAO,SAAS,KAAK;AAAA,EACzB;AAAA;AAOA,SAAsB,mBAAmB,OAItC;AAAA;AACC,UAAM,OAAO,MAAM,4BAA4B,KAAK;AACpD,UAAM,gBAAgB,MAAM,iBAAiB;AAC7C,UAAM,gBAAgB,MAAM,iBAAiB;AAE7C,WAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAAA;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@preprio/prepr-nextjs",
3
- "version": "1.0.0-beta.0",
3
+ "version": "1.0.0-beta.10",
4
4
  "description": "A next.js package with code snippets to use with Prepr",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -48,7 +48,7 @@
48
48
  "dependencies": {
49
49
  "@headlessui/react": "^2.1.8",
50
50
  "classnames": "^2.5.1",
51
- "next": "^14.2.5",
51
+ "next": "^14.2.18",
52
52
  "react": "^18.3.1",
53
53
  "react-dom": "^18.3.1",
54
54
  "react-icons": "^5.3.0"