@opensite/ui 3.8.2 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/instagram-post-grid.cjs +614 -0
  2. package/dist/instagram-post-grid.d.cts +174 -0
  3. package/dist/instagram-post-grid.d.ts +174 -0
  4. package/dist/instagram-post-grid.js +593 -0
  5. package/dist/registry.cjs +323 -2
  6. package/dist/registry.d.cts +11 -1
  7. package/dist/registry.d.ts +11 -1
  8. package/dist/registry.js +323 -2
  9. package/package.json +6 -1
package/dist/instagram-post-grid.d.cts ADDED
@@ -0,0 +1,174 @@
1
+ import * as React from 'react';
2
+ import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
3
+ import { O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
4
+ import 'react/jsx-runtime';
5
+ import 'class-variance-authority';
6
+ import '@page-speed/pressable';
7
+ import '@opensite/hooks/usePlatformFromUrl';
8
+
9
+ /**
10
+ * A single Instagram post rendered as a grid tile.
11
+ *
12
+ * Mirrors the wire shape hydrated from the toastability Instagram feed
13
+ * (`PublicFeeds::InstagramPostSerializer`). Media URLs MUST be the re-hosted
14
+ * MediaRecord CDN URLs — never expiring Instagram CDN URLs.
15
+ */
16
+ interface InstagramPostItem {
17
+ /**
18
+ * Unique identifier for the post
19
+ */
20
+ id: string;
21
+ /**
22
+ * External Instagram permalink (opens instagram.com in a new tab)
23
+ */
24
+ href: string;
25
+ /**
26
+ * Image / poster source URL (required — items without it are skipped)
27
+ */
28
+ image: string;
29
+ /**
30
+ * Alt text for the image (falls back to "Instagram post")
31
+ */
32
+ imageAlt?: string;
33
+ /**
34
+ * Post caption (truncated for display)
35
+ */
36
+ caption?: React.ReactNode;
37
+ /**
38
+ * Whether this post is a video/reel
39
+ */
40
+ isVideo?: boolean;
41
+ /**
42
+ * Video source URL (only used when `isVideo` is true)
43
+ */
44
+ videoUrl?: string;
45
+ /**
46
+ * Formatted post date
47
+ */
48
+ date?: React.ReactNode;
49
+ /**
50
+ * Number of likes (badge is only rendered when present)
51
+ */
52
+ likeCount?: number;
53
+ /**
54
+ * Number of comments (badge is only rendered when present)
55
+ */
56
+ commentCount?: number;
57
+ /**
58
+ * Number of views (badge is only rendered when present)
59
+ */
60
+ viewCount?: number;
61
+ /**
62
+ * Additional CSS classes for the tile
63
+ */
64
+ className?: string;
65
+ }
66
+ interface InstagramPostGridProps {
67
+ /**
68
+ * Main heading content
69
+ */
70
+ heading?: React.ReactNode;
71
+ /**
72
+ * Subheading/intro content below the heading
73
+ */
74
+ subheading?: React.ReactNode;
75
+ /**
76
+ * Array of Instagram posts to display
77
+ */
78
+ items?: InstagramPostItem[];
79
+ /**
80
+ * Custom slot for rendering items (overrides items array)
81
+ */
82
+ itemsSlot?: React.ReactNode;
83
+ /**
84
+ * Additional CSS classes for the section
85
+ */
86
+ className?: string;
87
+ /**
88
+ * Additional CSS classes for the container
89
+ */
90
+ containerClassName?: string;
91
+ /**
92
+ * Additional CSS classes for the header container
93
+ */
94
+ headerClassName?: string;
95
+ /**
96
+ * Additional CSS classes for the heading
97
+ */
98
+ headingClassName?: string;
99
+ /**
100
+ * Additional CSS classes for the subheading
101
+ */
102
+ subheadingClassName?: string;
103
+ /**
104
+ * Additional CSS classes for the grid container
105
+ */
106
+ gridClassName?: string;
107
+ /**
108
+ * Additional CSS classes for each tile
109
+ */
110
+ itemClassName?: string;
111
+ /**
112
+ * Additional CSS classes for each media element
113
+ */
114
+ imageClassName?: string;
115
+ /**
116
+ * Background style for the section
117
+ */
118
+ background?: SectionBackground;
119
+ /**
120
+ * Vertical spacing for the section
121
+ */
122
+ spacing?: SectionSpacing;
123
+ /**
124
+ * Optional background pattern name or URL
125
+ */
126
+ pattern?: PatternName | undefined;
127
+ /**
128
+ * Pattern overlay opacity (0-1)
129
+ */
130
+ patternOpacity?: number;
131
+ /**
132
+ * Additional CSS classes for the pattern overlay
133
+ */
134
+ patternClassName?: string;
135
+ /**
136
+ * OptixFlow image optimization configuration
137
+ */
138
+ optixFlowConfig?: OptixFlowConfig;
139
+ /** Optional Section ID */
140
+ sectionId?: string;
141
+ }
142
+ /**
143
+ * InstagramPostGrid displays a responsive, square-tiled grid of Instagram posts.
144
+ *
145
+ * Each tile links out to the post's instagram.com permalink in a new tab. Images
146
+ * render via `@page-speed/img`; video posts render an in-grid `@page-speed/video`
147
+ * that plays muted on hover (progressive/on-interaction). Captions are truncated,
148
+ * an optional date is shown, and like/comment/view badges appear only when the
149
+ * corresponding count is present — never fabricated. Posts without an image are
150
+ * skipped; an empty or missing `items` array renders nothing.
151
+ *
152
+ * Data is hydrated from the toastability Instagram feed. Media URLs are the
153
+ * re-hosted MediaRecord CDN URLs, never expiring Instagram CDN URLs.
154
+ *
155
+ * @example
156
+ * ```tsx
157
+ * <InstagramPostGrid
158
+ * heading="Follow us on Instagram"
159
+ * items={[
160
+ * {
161
+ * id: "1",
162
+ * href: "https://www.instagram.com/p/abc123/",
163
+ * image: "https://cdn.ing/assets/i/r/1320/instagram-1.webp",
164
+ * caption: "Fresh out of the oven",
165
+ * likeCount: 128,
166
+ * commentCount: 12,
167
+ * },
168
+ * ]}
169
+ * />
170
+ * ```
171
+ */
172
+ declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: InstagramPostGridProps): React.JSX.Element | null;
173
+
174
+ export { InstagramPostGrid, type InstagramPostGridProps, type InstagramPostItem };
package/dist/instagram-post-grid.d.ts ADDED
@@ -0,0 +1,174 @@
1
+ import * as React from 'react';
2
+ import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
3
+ import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
4
+ import 'react/jsx-runtime';
5
+ import 'class-variance-authority';
6
+ import '@page-speed/pressable';
7
+ import '@opensite/hooks/usePlatformFromUrl';
8
+
9
+ /**
10
+ * A single Instagram post rendered as a grid tile.
11
+ *
12
+ * Mirrors the wire shape hydrated from the toastability Instagram feed
13
+ * (`PublicFeeds::InstagramPostSerializer`). Media URLs MUST be the re-hosted
14
+ * MediaRecord CDN URLs — never expiring Instagram CDN URLs.
15
+ */
16
+ interface InstagramPostItem {
17
+ /**
18
+ * Unique identifier for the post
19
+ */
20
+ id: string;
21
+ /**
22
+ * External Instagram permalink (opens instagram.com in a new tab)
23
+ */
24
+ href: string;
25
+ /**
26
+ * Image / poster source URL (required — items without it are skipped)
27
+ */
28
+ image: string;
29
+ /**
30
+ * Alt text for the image (falls back to "Instagram post")
31
+ */
32
+ imageAlt?: string;
33
+ /**
34
+ * Post caption (truncated for display)
35
+ */
36
+ caption?: React.ReactNode;
37
+ /**
38
+ * Whether this post is a video/reel
39
+ */
40
+ isVideo?: boolean;
41
+ /**
42
+ * Video source URL (only used when `isVideo` is true)
43
+ */
44
+ videoUrl?: string;
45
+ /**
46
+ * Formatted post date
47
+ */
48
+ date?: React.ReactNode;
49
+ /**
50
+ * Number of likes (badge is only rendered when present)
51
+ */
52
+ likeCount?: number;
53
+ /**
54
+ * Number of comments (badge is only rendered when present)
55
+ */
56
+ commentCount?: number;
57
+ /**
58
+ * Number of views (badge is only rendered when present)
59
+ */
60
+ viewCount?: number;
61
+ /**
62
+ * Additional CSS classes for the tile
63
+ */
64
+ className?: string;
65
+ }
66
+ interface InstagramPostGridProps {
67
+ /**
68
+ * Main heading content
69
+ */
70
+ heading?: React.ReactNode;
71
+ /**
72
+ * Subheading/intro content below the heading
73
+ */
74
+ subheading?: React.ReactNode;
75
+ /**
76
+ * Array of Instagram posts to display
77
+ */
78
+ items?: InstagramPostItem[];
79
+ /**
80
+ * Custom slot for rendering items (overrides items array)
81
+ */
82
+ itemsSlot?: React.ReactNode;
83
+ /**
84
+ * Additional CSS classes for the section
85
+ */
86
+ className?: string;
87
+ /**
88
+ * Additional CSS classes for the container
89
+ */
90
+ containerClassName?: string;
91
+ /**
92
+ * Additional CSS classes for the header container
93
+ */
94
+ headerClassName?: string;
95
+ /**
96
+ * Additional CSS classes for the heading
97
+ */
98
+ headingClassName?: string;
99
+ /**
100
+ * Additional CSS classes for the subheading
101
+ */
102
+ subheadingClassName?: string;
103
+ /**
104
+ * Additional CSS classes for the grid container
105
+ */
106
+ gridClassName?: string;
107
+ /**
108
+ * Additional CSS classes for each tile
109
+ */
110
+ itemClassName?: string;
111
+ /**
112
+ * Additional CSS classes for each media element
113
+ */
114
+ imageClassName?: string;
115
+ /**
116
+ * Background style for the section
117
+ */
118
+ background?: SectionBackground;
119
+ /**
120
+ * Vertical spacing for the section
121
+ */
122
+ spacing?: SectionSpacing;
123
+ /**
124
+ * Optional background pattern name or URL
125
+ */
126
+ pattern?: PatternName | undefined;
127
+ /**
128
+ * Pattern overlay opacity (0-1)
129
+ */
130
+ patternOpacity?: number;
131
+ /**
132
+ * Additional CSS classes for the pattern overlay
133
+ */
134
+ patternClassName?: string;
135
+ /**
136
+ * OptixFlow image optimization configuration
137
+ */
138
+ optixFlowConfig?: OptixFlowConfig;
139
+ /** Optional Section ID */
140
+ sectionId?: string;
141
+ }
142
+ /**
143
+ * InstagramPostGrid displays a responsive, square-tiled grid of Instagram posts.
144
+ *
145
+ * Each tile links out to the post's instagram.com permalink in a new tab. Images
146
+ * render via `@page-speed/img`; video posts render an in-grid `@page-speed/video`
147
+ * that plays muted on hover (progressive/on-interaction). Captions are truncated,
148
+ * an optional date is shown, and like/comment/view badges appear only when the
149
+ * corresponding count is present — never fabricated. Posts without an image are
150
+ * skipped; an empty or missing `items` array renders nothing.
151
+ *
152
+ * Data is hydrated from the toastability Instagram feed. Media URLs are the
153
+ * re-hosted MediaRecord CDN URLs, never expiring Instagram CDN URLs.
154
+ *
155
+ * @example
156
+ * ```tsx
157
+ * <InstagramPostGrid
158
+ * heading="Follow us on Instagram"
159
+ * items={[
160
+ * {
161
+ * id: "1",
162
+ * href: "https://www.instagram.com/p/abc123/",
163
+ * image: "https://cdn.ing/assets/i/r/1320/instagram-1.webp",
164
+ * caption: "Fresh out of the oven",
165
+ * likeCount: 128,
166
+ * commentCount: 12,
167
+ * },
168
+ * ]}
169
+ * />
170
+ * ```
171
+ */
172
+ declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: InstagramPostGridProps): React.JSX.Element | null;
173
+
174
+ export { InstagramPostGrid, type InstagramPostGridProps, type InstagramPostItem };