@se-studio/core-ui 1.0.14 → 1.0.16
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.
- package/README.md +87 -14
- package/dist/CmsRendererConfig.d.ts +122 -0
- package/dist/CmsRendererConfig.d.ts.map +1 -1
- package/dist/analytics/AnalyticsProvider.d.ts +7 -0
- package/dist/analytics/AnalyticsProvider.d.ts.map +1 -1
- package/dist/analytics/AnalyticsProvider.js +7 -0
- package/dist/analytics/AnalyticsProvider.js.map +1 -1
- package/dist/analytics/adapters/ConsoleAnalyticsAdapter.d.ts +4 -0
- package/dist/analytics/adapters/ConsoleAnalyticsAdapter.d.ts.map +1 -1
- package/dist/analytics/adapters/ConsoleAnalyticsAdapter.js +5 -0
- package/dist/analytics/adapters/ConsoleAnalyticsAdapter.js.map +1 -1
- package/dist/analytics/types.d.ts +23 -0
- package/dist/analytics/types.d.ts.map +1 -1
- package/dist/analytics/useAnalytics.d.ts +35 -0
- package/dist/analytics/useAnalytics.d.ts.map +1 -1
- package/dist/analytics/useAnalytics.js +35 -0
- package/dist/analytics/useAnalytics.js.map +1 -1
- package/dist/components/ClientMonitor.d.ts.map +1 -1
- package/dist/components/ClientMonitor.js +40 -0
- package/dist/components/ClientMonitor.js.map +1 -1
- package/dist/components/CmsCollection.d.ts +47 -0
- package/dist/components/CmsCollection.d.ts.map +1 -1
- package/dist/components/CmsCollection.js +7 -0
- package/dist/components/CmsCollection.js.map +1 -1
- package/dist/components/CmsComponent.d.ts +47 -0
- package/dist/components/CmsComponent.d.ts.map +1 -1
- package/dist/components/CmsComponent.js +7 -0
- package/dist/components/CmsComponent.js.map +1 -1
- package/dist/components/CmsContent.d.ts +62 -0
- package/dist/components/CmsContent.d.ts.map +1 -1
- package/dist/components/CmsContent.js +53 -0
- package/dist/components/CmsContent.js.map +1 -1
- package/dist/components/CmsConversionErrors.js +2 -0
- package/dist/components/CmsConversionErrors.js.map +1 -1
- package/dist/components/CmsEmbeddedContent.d.ts +3 -0
- package/dist/components/CmsEmbeddedContent.d.ts.map +1 -1
- package/dist/components/CmsEmbeddedContent.js +3 -0
- package/dist/components/CmsEmbeddedContent.js.map +1 -1
- package/dist/components/CmsExternalComponent.d.ts +44 -0
- package/dist/components/CmsExternalComponent.d.ts.map +1 -1
- package/dist/components/CmsExternalComponent.js +7 -0
- package/dist/components/CmsExternalComponent.js.map +1 -1
- package/dist/components/ImageKitClientVideo.js +1 -0
- package/dist/components/ImageKitClientVideo.js.map +1 -1
- package/dist/components/SvgComponent.js +3 -1
- package/dist/components/SvgComponent.js.map +1 -1
- package/dist/components/VisualComponent.d.ts +47 -0
- package/dist/components/VisualComponent.d.ts.map +1 -1
- package/dist/components/VisualComponent.js +47 -0
- package/dist/components/VisualComponent.js.map +1 -1
- package/dist/elements/TrackedLink.d.ts +8 -0
- package/dist/elements/TrackedLink.d.ts.map +1 -1
- package/dist/elements/TrackedLink.js +13 -0
- package/dist/elements/TrackedLink.js.map +1 -1
- package/dist/framework/BackgroundMedia.js +5 -1
- package/dist/framework/BackgroundMedia.js.map +1 -1
- package/dist/framework/ComponentErrorIndicator.js +7 -4
- package/dist/framework/ComponentErrorIndicator.js.map +1 -1
- package/dist/framework/componentErrors.d.ts +8 -0
- package/dist/framework/componentErrors.d.ts.map +1 -1
- package/dist/framework/componentErrors.js +10 -0
- package/dist/framework/componentErrors.js.map +1 -1
- package/dist/hooks/useClickTracking.d.ts +39 -0
- package/dist/hooks/useClickTracking.d.ts.map +1 -1
- package/dist/hooks/useClickTracking.js +29 -0
- package/dist/hooks/useClickTracking.js.map +1 -1
- package/dist/index.d.ts +35 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +44 -0
- package/dist/index.js.map +1 -1
- package/dist/rtf/rtf.d.ts +41 -0
- package/dist/rtf/rtf.d.ts.map +1 -1
- package/dist/rtf/rtf.js +36 -0
- package/dist/rtf/rtf.js.map +1 -1
- package/dist/utils/UnsupportedWarning.d.ts +23 -0
- package/dist/utils/UnsupportedWarning.d.ts.map +1 -1
- package/dist/utils/UnsupportedWarning.js +24 -0
- package/dist/utils/UnsupportedWarning.js.map +1 -1
- package/dist/utils/UnusedChecker.d.ts +39 -0
- package/dist/utils/UnusedChecker.d.ts.map +1 -1
- package/dist/utils/UnusedChecker.js +47 -3
- package/dist/utils/UnusedChecker.js.map +1 -1
- package/dist/utils/buildPageMetadata.d.ts +45 -0
- package/dist/utils/buildPageMetadata.d.ts.map +1 -1
- package/dist/utils/buildPageMetadata.js +37 -0
- package/dist/utils/buildPageMetadata.js.map +1 -1
- package/dist/utils/cn.d.ts +26 -0
- package/dist/utils/cn.d.ts.map +1 -1
- package/dist/utils/cn.js +26 -0
- package/dist/utils/cn.js.map +1 -1
- package/dist/utils/componentUtils.d.ts +121 -0
- package/dist/utils/componentUtils.d.ts.map +1 -1
- package/dist/utils/componentUtils.js +80 -0
- package/dist/utils/componentUtils.js.map +1 -1
- package/dist/utils/convertText.js +10 -2
- package/dist/utils/convertText.js.map +1 -1
- package/dist/utils/errorHandling.d.ts +27 -0
- package/dist/utils/errorHandling.d.ts.map +1 -1
- package/dist/utils/errorHandling.js +33 -0
- package/dist/utils/errorHandling.js.map +1 -1
- package/dist/utils/previewUtils.js +2 -0
- package/dist/utils/previewUtils.js.map +1 -1
- package/package.json +17 -4
package/README.md
CHANGED
|
@@ -237,6 +237,60 @@ import { UnusedChecker } from '@se-studio/core-ui';
|
|
|
237
237
|
/>
|
|
238
238
|
```
|
|
239
239
|
|
|
240
|
+
### Animation & Monitoring Components
|
|
241
|
+
|
|
242
|
+
#### ClientMonitor
|
|
243
|
+
|
|
244
|
+
Monitors page elements for scroll-based animations and visibility tracking. Automatically tracks elements with `data-component` attributes, videos, and Lottie animations using IntersectionObserver.
|
|
245
|
+
|
|
246
|
+
**Props:**
|
|
247
|
+
- `defaultThreshold?` - Number (0-1) - Default intersection threshold for triggering animations (default: 0.2)
|
|
248
|
+
- `enableDebug?` - Boolean - Enable debug logging in development mode (default: false)
|
|
249
|
+
|
|
250
|
+
**Example:**
|
|
251
|
+
```tsx
|
|
252
|
+
import { ClientMonitor } from '@se-studio/core-ui';
|
|
253
|
+
|
|
254
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
255
|
+
return (
|
|
256
|
+
<html>
|
|
257
|
+
<body>
|
|
258
|
+
<ClientMonitor defaultThreshold={0.2} enableDebug={false} />
|
|
259
|
+
{children}
|
|
260
|
+
</body>
|
|
261
|
+
</html>
|
|
262
|
+
);
|
|
263
|
+
}
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
**How it works:**
|
|
267
|
+
- Automatically finds and observes all elements with `data-component` attributes
|
|
268
|
+
- Tracks video elements for play/pause based on visibility
|
|
269
|
+
- Tracks Lottie animation elements for play/pause based on visibility
|
|
270
|
+
- Sets `data-seen="true"` and `data-visible="true"` attributes on elements when they enter the viewport
|
|
271
|
+
- Uses scroll progress calculation for tall elements that exceed viewport height
|
|
272
|
+
|
|
273
|
+
**Excluding components from animation:**
|
|
274
|
+
|
|
275
|
+
To exclude a component from animation tracking, add the `data-exclude-animation` attribute:
|
|
276
|
+
|
|
277
|
+
```tsx
|
|
278
|
+
<div data-component="MyComponent" data-exclude-animation>
|
|
279
|
+
{/* This component will not be tracked by ClientMonitor */}
|
|
280
|
+
{/* It will not receive data-seen or data-visible attributes */}
|
|
281
|
+
</div>
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
**Custom thresholds:**
|
|
285
|
+
|
|
286
|
+
You can set a custom intersection threshold for individual elements using the `data-intersection-threshold` attribute:
|
|
287
|
+
|
|
288
|
+
```tsx
|
|
289
|
+
<div data-component="MyComponent" data-intersection-threshold="0.5">
|
|
290
|
+
{/* This component will trigger when 50% visible */}
|
|
291
|
+
</div>
|
|
292
|
+
```
|
|
293
|
+
|
|
240
294
|
## Development
|
|
241
295
|
|
|
242
296
|
```bash
|
|
@@ -323,20 +377,39 @@ const previewConfig = mergeCmsRendererConfig(
|
|
|
323
377
|
);
|
|
324
378
|
```
|
|
325
379
|
|
|
326
|
-
## API
|
|
327
|
-
|
|
328
|
-
###
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
-
|
|
332
|
-
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
-
|
|
380
|
+
## API Reference
|
|
381
|
+
|
|
382
|
+
### Main Exports
|
|
383
|
+
|
|
384
|
+
#### Components
|
|
385
|
+
- **`CmsContent`** - Main component for rendering CMS content with automatic component mapping
|
|
386
|
+
- **`CmsComponent`** - Renders individual CMS components with type-based routing
|
|
387
|
+
- **`CmsCollection`** - Renders CMS collections (arrays of components)
|
|
388
|
+
- **`Visual`** - Optimized image/video/animation component with Next.js Image integration
|
|
389
|
+
- **`RTF`** - Renders Contentful rich text with support for embedded entries and assets
|
|
390
|
+
- **`UnusedChecker`** - Development utility to detect unused CMS content types
|
|
391
|
+
|
|
392
|
+
#### Hooks
|
|
393
|
+
- **`useAnalytics`** - Hook for accessing analytics functions (trackEvent, trackPage, trackClick)
|
|
394
|
+
- **`useClickTracking`** - Hook for tracking click events with analytics
|
|
395
|
+
- **`useDocumentVisible`** - Hook for tracking document visibility
|
|
396
|
+
|
|
397
|
+
#### Utilities
|
|
398
|
+
- **`buildPageMetadata`** - Generates Next.js metadata object from CMS page model
|
|
399
|
+
- **`handleCmsError`** - Error handling utility for CMS operations
|
|
400
|
+
- **`extractComponentInfo`** - Extract specific component information fields
|
|
401
|
+
- **`extractCollectionInfo`** - Extract specific collection information fields
|
|
402
|
+
- **`extractPageContext`** - Extract specific page context fields
|
|
403
|
+
- **`cn`** - Utility function for merging Tailwind CSS classes
|
|
404
|
+
|
|
405
|
+
#### Types
|
|
406
|
+
- **`CmsRendererConfig`** - Complete renderer configuration type
|
|
407
|
+
- **`ComponentRenderer<T>`** - Type for component renderer functions
|
|
408
|
+
- **`CollectionRenderer<T>`** - Type for collection renderer functions
|
|
409
|
+
- **`ComponentConfig<T>`** - Type-safe component configuration
|
|
410
|
+
- **`CollectionConfig<T>`** - Type-safe collection configuration
|
|
411
|
+
|
|
412
|
+
For detailed JSDoc documentation on all exports, see the TypeScript declaration files (`.d.ts`) in the package.
|
|
340
413
|
|
|
341
414
|
## Advanced Usage
|
|
342
415
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/** biome-ignore-all lint/suspicious/noExplicitAny: Any is allowed */
|
|
1
2
|
import type { IContentContext } from '@se-studio/core-data-types';
|
|
2
3
|
import type { React } from 'next/dist/server/route-modules/app-page/vendored/rsc/entrypoints';
|
|
3
4
|
import type { CollectionMap, CollectionRenderer, EmbeddedCollectionMap } from './components/CmsCollection';
|
|
@@ -12,20 +13,141 @@ export type CmsRendererTypes = {
|
|
|
12
13
|
ExternaComponentNameType: string;
|
|
13
14
|
ExternalComponentType: any;
|
|
14
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* Configuration object that bundles all CMS renderer maps and display options.
|
|
18
|
+
* Create this once at the project level and pass it to CmsContent.
|
|
19
|
+
*
|
|
20
|
+
* This provides a clean, extensible API for configuring how CMS content is rendered,
|
|
21
|
+
* making it easy to add new renderer types without breaking existing code.
|
|
22
|
+
*
|
|
23
|
+
* @example Basic configuration
|
|
24
|
+
* ```tsx
|
|
25
|
+
* const rendererConfig = createCmsRendererConfig<MyProjectConfig>({
|
|
26
|
+
* componentMap: {
|
|
27
|
+
* "Hero": HeroComponent,
|
|
28
|
+
* "CTA": CTAComponent,
|
|
29
|
+
* "Content Block": ContentBlock,
|
|
30
|
+
* },
|
|
31
|
+
* collectionMap: {
|
|
32
|
+
* "FAQs": FAQCollection,
|
|
33
|
+
* "Related Articles": RelatedArticles,
|
|
34
|
+
* },
|
|
35
|
+
* showUnknownTypeErrors: process.env.NODE_ENV === 'development',
|
|
36
|
+
* });
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @example With all renderer types
|
|
40
|
+
* ```tsx
|
|
41
|
+
* const rendererConfig = createCmsRendererConfig<MyProjectConfig>({
|
|
42
|
+
* componentMap: { ... },
|
|
43
|
+
* collectionMap: { ... },
|
|
44
|
+
* externalComponentMap: {
|
|
45
|
+
* "Contact Form": ContactFormRenderer,
|
|
46
|
+
* "Newsletter": NewsletterRenderer,
|
|
47
|
+
* },
|
|
48
|
+
* visualComponentRenderer: VisualRenderer,
|
|
49
|
+
* internalLinkRenderer: InternalLinkRenderer,
|
|
50
|
+
* showUnknownTypeErrors: true,
|
|
51
|
+
* showRenderErrors: true,
|
|
52
|
+
* });
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
15
55
|
export interface CmsRendererConfig<TConfig extends CmsRendererTypes = CmsRendererTypes> {
|
|
56
|
+
/**
|
|
57
|
+
* Map of component types to their renderers.
|
|
58
|
+
* Each key should match a ComponentType from your CMS configuration.
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* ```tsx
|
|
62
|
+
* componentMap: {
|
|
63
|
+
* "Hero": HeroComponent,
|
|
64
|
+
* "CTA": CTAComponent,
|
|
65
|
+
* }
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
16
68
|
componentMap: ComponentMap<TConfig['ComponentNameType'], TConfig['ComponentType']>;
|
|
17
69
|
embeddedComponentMap: EmbeddedComponentMap<TConfig['ComponentNameType'], TConfig['ComponentType']>;
|
|
70
|
+
/**
|
|
71
|
+
* Map of collection types to their renderers.
|
|
72
|
+
* Each key should match a CollectionType from your CMS configuration.
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```tsx
|
|
76
|
+
* collectionMap: {
|
|
77
|
+
* "FAQs": FAQCollection,
|
|
78
|
+
* "Related Articles": RelatedArticles,
|
|
79
|
+
* }
|
|
80
|
+
* ```
|
|
81
|
+
*/
|
|
18
82
|
collectionMap: CollectionMap<TConfig['CollectionNameType'], TConfig['CollectionType']>;
|
|
19
83
|
embeddedCollectionMap: EmbeddedCollectionMap<TConfig['CollectionNameType'], TConfig['CollectionType']>;
|
|
84
|
+
/**
|
|
85
|
+
* Map of external component types to their renderers (optional).
|
|
86
|
+
* Use this for third-party integrations, forms, widgets, etc.
|
|
87
|
+
*
|
|
88
|
+
* @example
|
|
89
|
+
* ```tsx
|
|
90
|
+
* externalComponentMap: {
|
|
91
|
+
* "Contact Form": ContactFormRenderer,
|
|
92
|
+
* "Newsletter": NewsletterRenderer,
|
|
93
|
+
* }
|
|
94
|
+
* ```
|
|
95
|
+
*/
|
|
20
96
|
externalComponentMap: ExternalComponentMap<TConfig['ExternaComponentNameType'], TConfig['ExternalComponentType']>;
|
|
21
97
|
embeddedExternalComponentMap: EmbeddedExternalComponentMap<TConfig['ExternaComponentNameType'], TConfig['ExternalComponentType']>;
|
|
98
|
+
/**
|
|
99
|
+
* Renderer for Visual content types (optional).
|
|
100
|
+
* Use this to define how images, videos, and other visual assets are rendered.
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* ```tsx
|
|
104
|
+
* visualComponentRenderer: ({ information, contentContext }) => (
|
|
105
|
+
* <VisualComponent visual={information} />
|
|
106
|
+
* )
|
|
107
|
+
* ```
|
|
108
|
+
*/
|
|
22
109
|
visualComponentRenderer: VisualComponentRenderer;
|
|
110
|
+
/**
|
|
111
|
+
* Renderer for Internal Link content types (optional).
|
|
112
|
+
* Use this to define how internal navigation links are rendered.
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* ```tsx
|
|
116
|
+
* internalLinkRenderer: ({ information }) => (
|
|
117
|
+
* <Link href={information.href}>{information.text}</Link>
|
|
118
|
+
* )
|
|
119
|
+
* ```
|
|
120
|
+
*/
|
|
23
121
|
internalLinkRenderer: InternalLinkRenderer;
|
|
122
|
+
/**
|
|
123
|
+
* Map of custom content types to their renderers (optional).
|
|
124
|
+
* Use this for project-specific content types that extend the base CMS content model.
|
|
125
|
+
*
|
|
126
|
+
* @example
|
|
127
|
+
* ```tsx
|
|
128
|
+
* customContentMap: {
|
|
129
|
+
* "pricingPlan": PricingPlanRenderer,
|
|
130
|
+
* "testimonial": TestimonialRenderer,
|
|
131
|
+
* }
|
|
132
|
+
* ```
|
|
133
|
+
*/
|
|
24
134
|
customContentMap?: Partial<Record<string, React.FC<{
|
|
25
135
|
information: any;
|
|
26
136
|
contentContext: IContentContext;
|
|
27
137
|
}>>>;
|
|
138
|
+
/**
|
|
139
|
+
* Show error panels for unknown content types in development mode (default: false).
|
|
140
|
+
* When true, displays a visual warning when a component/collection type is not mapped.
|
|
141
|
+
*
|
|
142
|
+
* Recommended: Set to `process.env.NODE_ENV === 'development'`
|
|
143
|
+
*/
|
|
28
144
|
showUnknownTypeErrors: boolean;
|
|
145
|
+
/**
|
|
146
|
+
* Show error panels for rendering errors (default: false).
|
|
147
|
+
* When true, displays error details when a component throws during rendering.
|
|
148
|
+
*
|
|
149
|
+
* Recommended: Set to `process.env.NODE_ENV === 'development'`
|
|
150
|
+
*/
|
|
29
151
|
showRenderErrors: boolean;
|
|
30
152
|
defaultComponentRenderer: ComponentRenderer<any>;
|
|
31
153
|
defaultCollectionRenderer: CollectionRenderer<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CmsRendererConfig.d.ts","sourceRoot":"","sources":["../src/CmsRendererConfig.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CmsRendererConfig.d.ts","sourceRoot":"","sources":["../src/CmsRendererConfig.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kEAAkE,CAAC;AAC9F,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EACV,YAAY,EACZ,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,KAAK,EACV,4BAA4B,EAC5B,oBAAoB,EACrB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,GAAG,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,GAAG,CAAC;IACpB,wBAAwB,EAAE,MAAM,CAAC;IACjC,qBAAqB,EAAE,GAAG,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,iBAAiB,CAAC,OAAO,SAAS,gBAAgB,GAAG,gBAAgB;IACpF;;;;;;;;;;;OAWG;IACH,YAAY,EAAE,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;IAEnF,oBAAoB,EAAE,oBAAoB,CACxC,OAAO,CAAC,mBAAmB,CAAC,EAC5B,OAAO,CAAC,eAAe,CAAC,CACzB,CAAC;IAEF;;;;;;;;;;;OAWG;IACH,aAAa,EAAE,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvF,qBAAqB,EAAE,qBAAqB,CAC1C,OAAO,CAAC,oBAAoB,CAAC,EAC7B,OAAO,CAAC,gBAAgB,CAAC,CAC1B,CAAC;IAEF;;;;;;;;;;;OAWG;IACH,oBAAoB,EAAE,oBAAoB,CACxC,OAAO,CAAC,0BAA0B,CAAC,EACnC,OAAO,CAAC,uBAAuB,CAAC,CACjC,CAAC;IACF,4BAA4B,EAAE,4BAA4B,CACxD,OAAO,CAAC,0BAA0B,CAAC,EACnC,OAAO,CAAC,uBAAuB,CAAC,CACjC,CAAC;IAEF;;;;;;;;;;OAUG;IACH,uBAAuB,EAAE,uBAAuB,CAAC;IAEjD;;;;;;;;;;OAUG;IACH,oBAAoB,EAAE,oBAAoB,CAAC;IAE3C;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,OAAO,CACxB,MAAM,CACJ,MAAM,EACN,KAAK,CAAC,EAAE,CAAC;QACP,WAAW,EAAE,GAAG,CAAC;QACjB,cAAc,EAAE,eAAe,CAAC;KACjC,CAAC,CACH,CACF,CAAC;IAEF;;;;;OAKG;IACH,qBAAqB,EAAE,OAAO,CAAC;IAE/B;;;;;OAKG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACjD,yBAAyB,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC;CACpD"}
|
|
@@ -4,6 +4,13 @@ export interface AnalyticsProviderProps {
|
|
|
4
4
|
adapter: AnalyticsAdapter;
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* Provider component that makes analytics adapter available to child components
|
|
9
|
+
*/
|
|
7
10
|
export declare function AnalyticsProvider({ adapter, children }: AnalyticsProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
/**
|
|
12
|
+
* Hook to access the analytics adapter from context
|
|
13
|
+
* @throws Error if used outside of AnalyticsProvider
|
|
14
|
+
*/
|
|
8
15
|
export declare function useAnalyticsContext(): AnalyticsAdapter;
|
|
9
16
|
//# sourceMappingURL=AnalyticsProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalyticsProvider.d.ts","sourceRoot":"","sources":["../../src/analytics/AnalyticsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;
|
|
1
|
+
{"version":3,"file":"AnalyticsProvider.d.ts","sourceRoot":"","sources":["../../src/analytics/AnalyticsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAE9E;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,CAMtD"}
|
|
@@ -2,9 +2,16 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useContext } from 'react';
|
|
4
4
|
const AnalyticsContext = createContext(null);
|
|
5
|
+
/**
|
|
6
|
+
* Provider component that makes analytics adapter available to child components
|
|
7
|
+
*/
|
|
5
8
|
export function AnalyticsProvider({ adapter, children }) {
|
|
6
9
|
return _jsx(AnalyticsContext.Provider, { value: adapter, children: children });
|
|
7
10
|
}
|
|
11
|
+
/**
|
|
12
|
+
* Hook to access the analytics adapter from context
|
|
13
|
+
* @throws Error if used outside of AnalyticsProvider
|
|
14
|
+
*/
|
|
8
15
|
export function useAnalyticsContext() {
|
|
9
16
|
const adapter = useContext(AnalyticsContext);
|
|
10
17
|
if (!adapter) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalyticsProvider.js","sourceRoot":"","sources":["../../src/analytics/AnalyticsProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,gBAAgB,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"AnalyticsProvider.js","sourceRoot":"","sources":["../../src/analytics/AnalyticsProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,gBAAgB,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;AAOtE;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAA0B;IAC7E,OAAO,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA6B,CAAC;AAC3F,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;IAClF,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import type { AnalyticsAdapter, ClickTrackingProperties, PageTrackingProperties } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Console adapter used as the default/example implementation.
|
|
4
|
+
* Customer projects should provide their own adapter that satisfies `AnalyticsAdapter`.
|
|
5
|
+
*/
|
|
2
6
|
export declare class ConsoleAnalyticsAdapter implements AnalyticsAdapter {
|
|
3
7
|
private log;
|
|
4
8
|
trackEvent(event: string, properties: Record<string, unknown>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConsoleAnalyticsAdapter.d.ts","sourceRoot":"","sources":["../../../src/analytics/adapters/ConsoleAnalyticsAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ConsoleAnalyticsAdapter.d.ts","sourceRoot":"","sources":["../../../src/analytics/adapters/ConsoleAnalyticsAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElG;;;GAGG;AACH,qBAAa,uBAAwB,YAAW,gBAAgB;IAC9D,OAAO,CAAC,GAAG;IAKX,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIpE,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,sBAAsB,GAAG,IAAI;IAIhE,UAAU,CAAC,UAAU,EAAE,uBAAuB,GAAG,IAAI;CAGtD"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
/**
|
|
3
|
+
* Console adapter used as the default/example implementation.
|
|
4
|
+
* Customer projects should provide their own adapter that satisfies `AnalyticsAdapter`.
|
|
5
|
+
*/
|
|
2
6
|
export class ConsoleAnalyticsAdapter {
|
|
3
7
|
log(...args) {
|
|
8
|
+
// eslint-disable-next-line no-console -- intentional logging adapter
|
|
4
9
|
console.log('[Analytics]', ...args);
|
|
5
10
|
}
|
|
6
11
|
trackEvent(event, properties) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConsoleAnalyticsAdapter.js","sourceRoot":"","sources":["../../../src/analytics/adapters/ConsoleAnalyticsAdapter.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ConsoleAnalyticsAdapter.js","sourceRoot":"","sources":["../../../src/analytics/adapters/ConsoleAnalyticsAdapter.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAIb;;;GAGG;AACH,MAAM,OAAO,uBAAuB;IAC1B,GAAG,CAAC,GAAG,IAAe;QAC5B,qEAAqE;QACrE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,CAAC;IACtC,CAAC;IAED,UAAU,CAAC,KAAa,EAAE,UAAmC;QAC3D,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;IACvC,CAAC;IAED,SAAS,CAAC,GAAW,EAAE,UAAkC;QACvD,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,GAAG,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC;IAC3C,CAAC;IAED,UAAU,CAAC,UAAmC;QAC5C,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAChC,CAAC;CACF"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import type { IAnalyticsContext } from '@se-studio/core-data-types';
|
|
2
|
+
/**
|
|
3
|
+
* Properties for tracking a click event
|
|
4
|
+
*/
|
|
2
5
|
export interface ClickTrackingProperties extends IAnalyticsContext {
|
|
3
6
|
componentType: string;
|
|
4
7
|
url: string;
|
|
@@ -6,13 +9,33 @@ export interface ClickTrackingProperties extends IAnalyticsContext {
|
|
|
6
9
|
linkText: string;
|
|
7
10
|
location?: string;
|
|
8
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* Properties for tracking a page view
|
|
14
|
+
*/
|
|
9
15
|
export interface PageTrackingProperties extends IAnalyticsContext {
|
|
10
16
|
url: string;
|
|
11
17
|
pathname: string;
|
|
12
18
|
}
|
|
19
|
+
/**
|
|
20
|
+
* Interface that analytics adapters must implement
|
|
21
|
+
*/
|
|
13
22
|
export interface AnalyticsAdapter {
|
|
23
|
+
/**
|
|
24
|
+
* Track a custom event
|
|
25
|
+
* @param event - Event name
|
|
26
|
+
* @param properties - Event properties
|
|
27
|
+
*/
|
|
14
28
|
trackEvent(event: string, properties: Record<string, unknown>): void;
|
|
29
|
+
/**
|
|
30
|
+
* Track a page view
|
|
31
|
+
* @param url - Full URL of the page
|
|
32
|
+
* @param properties - Page properties
|
|
33
|
+
*/
|
|
15
34
|
trackPage(url: string, properties: PageTrackingProperties): void;
|
|
35
|
+
/**
|
|
36
|
+
* Track a component click
|
|
37
|
+
* @param properties - Click tracking properties
|
|
38
|
+
*/
|
|
16
39
|
trackClick(properties: ClickTrackingProperties): void;
|
|
17
40
|
}
|
|
18
41
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/analytics/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/analytics/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAErE;;;;OAIG;IACH,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAEjE;;;OAGG;IACH,UAAU,CAAC,UAAU,EAAE,uBAAuB,GAAG,IAAI,CAAC;CACvD"}
|
|
@@ -1,4 +1,39 @@
|
|
|
1
1
|
import type { IAnalyticsContext } from '@se-studio/core-data-types';
|
|
2
|
+
/**
|
|
3
|
+
* Hook for accessing analytics functions.
|
|
4
|
+
*
|
|
5
|
+
* Provides a clean API for tracking events, pages, and clicks. Must be used
|
|
6
|
+
* within an AnalyticsProvider context.
|
|
7
|
+
*
|
|
8
|
+
* @returns Object with tracking functions:
|
|
9
|
+
* - `trackEvent` - Track custom events
|
|
10
|
+
* - `trackPage` - Track page views
|
|
11
|
+
* - `trackClick` - Track click interactions
|
|
12
|
+
*
|
|
13
|
+
* @throws {Error} If used outside of AnalyticsProvider
|
|
14
|
+
*
|
|
15
|
+
* @example Basic usage
|
|
16
|
+
* ```tsx
|
|
17
|
+
* import { useAnalytics } from '@se-studio/core-ui';
|
|
18
|
+
*
|
|
19
|
+
* function MyComponent() {
|
|
20
|
+
* const { trackClick, trackPage } = useAnalytics();
|
|
21
|
+
*
|
|
22
|
+
* useEffect(() => {
|
|
23
|
+
* trackPage(window.location.href, window.location.pathname, {
|
|
24
|
+
* page_title: 'Home',
|
|
25
|
+
* page_type: 'landing',
|
|
26
|
+
* });
|
|
27
|
+
* }, []);
|
|
28
|
+
*
|
|
29
|
+
* return (
|
|
30
|
+
* <button onClick={() => trackClick('Button', 'Sign up', { page_title: 'Home' })}>
|
|
31
|
+
* Sign up
|
|
32
|
+
* </button>
|
|
33
|
+
* );
|
|
34
|
+
* }
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
2
37
|
export declare function useAnalytics(): {
|
|
3
38
|
trackEvent: (event: string, properties: Record<string, unknown>) => void;
|
|
4
39
|
trackPage: (url: string, pathname: string, analyticsContext: IAnalyticsContext) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnalytics.d.ts","sourceRoot":"","sources":["../../src/analytics/useAnalytics.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"useAnalytics.d.ts","sourceRoot":"","sources":["../../src/analytics/useAnalytics.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAKpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,YAAY;wBAIhB,MAAM,cAAc,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;qBAO7C,MAAM,YAAY,MAAM,oBAAoB,iBAAiB;gCAalD,MAAM,YACX,MAAM,oBACE,iBAAiB,YACzB;QACR,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;EAqBN"}
|
|
@@ -1,6 +1,41 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
3
|
import { useAnalyticsContext } from './AnalyticsProvider';
|
|
4
|
+
/**
|
|
5
|
+
* Hook for accessing analytics functions.
|
|
6
|
+
*
|
|
7
|
+
* Provides a clean API for tracking events, pages, and clicks. Must be used
|
|
8
|
+
* within an AnalyticsProvider context.
|
|
9
|
+
*
|
|
10
|
+
* @returns Object with tracking functions:
|
|
11
|
+
* - `trackEvent` - Track custom events
|
|
12
|
+
* - `trackPage` - Track page views
|
|
13
|
+
* - `trackClick` - Track click interactions
|
|
14
|
+
*
|
|
15
|
+
* @throws {Error} If used outside of AnalyticsProvider
|
|
16
|
+
*
|
|
17
|
+
* @example Basic usage
|
|
18
|
+
* ```tsx
|
|
19
|
+
* import { useAnalytics } from '@se-studio/core-ui';
|
|
20
|
+
*
|
|
21
|
+
* function MyComponent() {
|
|
22
|
+
* const { trackClick, trackPage } = useAnalytics();
|
|
23
|
+
*
|
|
24
|
+
* useEffect(() => {
|
|
25
|
+
* trackPage(window.location.href, window.location.pathname, {
|
|
26
|
+
* page_title: 'Home',
|
|
27
|
+
* page_type: 'landing',
|
|
28
|
+
* });
|
|
29
|
+
* }, []);
|
|
30
|
+
*
|
|
31
|
+
* return (
|
|
32
|
+
* <button onClick={() => trackClick('Button', 'Sign up', { page_title: 'Home' })}>
|
|
33
|
+
* Sign up
|
|
34
|
+
* </button>
|
|
35
|
+
* );
|
|
36
|
+
* }
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
4
39
|
export function useAnalytics() {
|
|
5
40
|
const adapter = useAnalyticsContext();
|
|
6
41
|
const trackEvent = useCallback((event, properties) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnalytics.js","sourceRoot":"","sources":["../../src/analytics/useAnalytics.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAGb,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"useAnalytics.js","sourceRoot":"","sources":["../../src/analytics/useAnalytics.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAGb,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IAEtC,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAa,EAAE,UAAmC,EAAE,EAAE;QACrD,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,GAAW,EAAE,QAAgB,EAAE,gBAAmC,EAAE,EAAE;QACrE,MAAM,UAAU,GAA2B;YACzC,GAAG;YACH,QAAQ;YACR,GAAG,gBAAgB;SACpB,CAAC;QACF,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CACE,aAAqB,EACrB,QAAgB,EAChB,gBAAmC,EACnC,OAGC,EACD,EAAE;QACF,MAAM,GAAG,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,MAAM,UAAU,GAA4B;YAC1C,aAAa;YACb,GAAG;YACH,QAAQ;YACR,QAAQ,EAAE,OAAO,EAAE,QAAQ;YAC3B,SAAS,EAAE,OAAO,EAAE,SAAS;YAC7B,GAAG,gBAAgB;SACpB,CAAC;QACF,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO;QACL,UAAU;QACV,SAAS;QACT,UAAU;KACX,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClientMonitor.d.ts","sourceRoot":"","sources":["../../src/components/ClientMonitor.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ClientMonitor.d.ts","sourceRoot":"","sources":["../../src/components/ClientMonitor.tsx"],"names":[],"mappings":"AAwbA,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuBtD,CAAC"}
|