@cloudflare/component-page 10.1.21 → 11.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +21 -4
  3. package/es/Heading.js +1 -3
  4. package/es/Page.js +30 -53
  5. package/es/Page.stories.js +98 -170
  6. package/lib/Heading.js +1 -3
  7. package/lib/Page.js +32 -54
  8. package/lib/Page.stories.js +102 -173
  9. package/package.json +7 -7
  10. package/src/Page.stories.tsx +31 -9
  11. package/src/Page.tsx +5 -6
package/lib/Page.stories.js CHANGED
@@ -7,28 +7,49 @@ exports.default = exports.WithSidebarOutside = exports.WithSidebarInside = expor
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
- var _reactRouterDom = require("react-router-dom");
11
-
12
10
  var _componentButton = require("@cloudflare/component-button");
13
11
 
14
12
  var _componentCard = require("@cloudflare/component-card");
15
13
 
16
14
  var _elements = require("@cloudflare/elements");
17
15
 
16
+ var _utilCl1CompatRouter = require("@cloudflare/util-cl1-compat-router");
17
+
18
18
  var _Page = _interopRequireDefault(require("./Page"));
19
19
 
20
+ var _excluded = ["to", "children"];
21
+
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
23
 
24
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
25
+
26
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
27
+
28
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
29
+
30
+ var StoryLink = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
31
+ var to = _ref.to,
32
+ children = _ref.children,
33
+ props = _objectWithoutProperties(_ref, _excluded);
34
+
35
+ return /*#__PURE__*/_react.default.createElement("a", _extends({}, props, {
36
+ href: to,
37
+ ref: ref
38
+ }), children);
39
+ });
40
+
41
+ StoryLink.displayName = 'StoryLink';
42
+ var storyLocation = {
43
+ pathname: '/'
44
+ };
45
+
46
+ var storyNavigate = function storyNavigate() {
47
+ return undefined;
48
+ };
49
+
22
50
  var _default = {
23
51
  title: 'Dash/Core/Page',
24
52
  component: _Page.default,
25
- decorators: [function (Story) {
26
- return /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, {
27
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:14"
28
- }, /*#__PURE__*/_react.default.createElement(Story, {
29
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:15"
30
- }));
31
- }],
32
53
  parameters: {
33
54
  layout: 'fullscreen',
34
55
  docs: {
@@ -36,90 +57,69 @@ var _default = {
36
57
  component: 'A flexible page layout component with header, optional sidebar, and content area. Supports different width configurations and responsive behavior.'
37
58
  }
38
59
  }
39
- }
60
+ },
61
+ decorators: [function (Story) {
62
+ return /*#__PURE__*/_react.default.createElement(_utilCl1CompatRouter.CL1CompatRouterProvider, {
63
+ location: storyLocation,
64
+ navigate: storyNavigate,
65
+ linkComponent: StoryLink
66
+ }, /*#__PURE__*/_react.default.createElement(Story, null));
67
+ }]
40
68
  }; // Sample content components for stories
41
69
 
42
70
  exports.default = _default;
43
71
 
44
72
  var SampleContent = function SampleContent() {
45
- return /*#__PURE__*/_react.default.createElement(_elements.Div, {
46
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:32"
47
- }, /*#__PURE__*/_react.default.createElement(_elements.P, {
48
- mb: 4,
49
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:33"
50
- }, "This is sample page content. The Page component provides a consistent layout structure with header, optional sidebar, and main content area."), /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
51
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:37"
52
- }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
73
+ return /*#__PURE__*/_react.default.createElement(_elements.Div, null, /*#__PURE__*/_react.default.createElement(_elements.P, {
74
+ mb: 4
75
+ }, "This is sample page content. The Page component provides a consistent layout structure with header, optional sidebar, and main content area."), /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
53
76
  p: 4,
54
- mb: 4,
55
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:38"
77
+ mb: 4
56
78
  }, /*#__PURE__*/_react.default.createElement(_elements.P, {
57
79
  mb: 2,
58
- fontWeight: "bold",
59
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:39"
60
- }, "Sample Card Content"), /*#__PURE__*/_react.default.createElement(_elements.P, {
61
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:42"
62
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
63
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:48"
64
- }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
65
- p: 4,
66
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:49"
80
+ fontWeight: "bold"
81
+ }, "Sample Card Content"), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
82
+ p: 4
67
83
  }, /*#__PURE__*/_react.default.createElement(_elements.P, {
68
84
  mb: 2,
69
- fontWeight: "bold",
70
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:50"
71
- }, "Another Card"), /*#__PURE__*/_react.default.createElement(_elements.P, {
72
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:53"
73
- }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
85
+ fontWeight: "bold"
86
+ }, "Another Card"), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
74
87
  };
75
88
 
76
89
  var SampleSidebar = function SampleSidebar() {
77
- return /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
78
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:63"
79
- }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
80
- p: 4,
81
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:64"
90
+ return /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
91
+ p: 4
82
92
  }, /*#__PURE__*/_react.default.createElement(_elements.P, {
83
93
  mb: 3,
84
- fontWeight: "bold",
85
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:65"
94
+ fontWeight: "bold"
86
95
  }, "Sidebar Content"), /*#__PURE__*/_react.default.createElement(_elements.P, {
87
- mb: 2,
88
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:68"
96
+ mb: 2
89
97
  }, "Quick Actions:"), /*#__PURE__*/_react.default.createElement(_elements.Div, {
90
- mb: 2,
91
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:69"
98
+ mb: 2
92
99
  }, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
93
100
  type: "primary",
94
- width: "100%",
95
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:70"
101
+ width: "100%"
96
102
  }, "Primary Action")), /*#__PURE__*/_react.default.createElement(_elements.Div, {
97
- mb: 2,
98
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:74"
103
+ mb: 2
99
104
  }, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
100
105
  type: "default",
101
- width: "100%",
102
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:75"
106
+ width: "100%"
103
107
  }, "Secondary Action")), /*#__PURE__*/_react.default.createElement(_elements.P, {
104
108
  mt: 3,
105
109
  fontSize: 1,
106
- color: "gray.3",
107
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:79"
110
+ color: "gray.3"
108
111
  }, "Additional sidebar information and links can go here.")));
109
112
  };
110
113
 
111
114
  var SampleControl = function SampleControl() {
112
115
  return /*#__PURE__*/_react.default.createElement(_elements.Div, {
113
116
  display: "flex",
114
- alignItems: "center",
115
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:87"
117
+ alignItems: "center"
116
118
  }, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
117
119
  type: "primary",
118
- mr: 2,
119
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:88"
120
+ mr: 2
120
121
  }, "Create New"), /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
121
- type: "default",
122
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:91"
122
+ type: "default"
123
123
  }, "Settings"));
124
124
  };
125
125
 
@@ -129,19 +129,15 @@ var SampleNavigation = function SampleNavigation() {
129
129
  iconType: "backward",
130
130
  onClick: function onClick() {
131
131
  return console.log('Navigate back');
132
- },
133
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:96"
132
+ }
134
133
  }, "Back to Dashboard");
135
134
  };
136
135
 
137
136
  var Default = function Default() {
138
137
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
139
138
  title: "Page Title",
140
- description: "This is a description of what this page is about and what users can expect to find here.",
141
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:106"
142
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
143
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:110"
144
- }));
139
+ description: "This is a description of what this page is about and what users can expect to find here."
140
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
145
141
  };
146
142
 
147
143
  exports.Default = Default;
@@ -150,11 +146,8 @@ var WithParentLabel = function WithParentLabel() {
150
146
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
151
147
  title: "Settings",
152
148
  parentPageLabel: "Account Management",
153
- description: "Configure your account settings and preferences.",
154
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:115"
155
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
156
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:120"
157
- }));
149
+ description: "Configure your account settings and preferences."
150
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
158
151
  };
159
152
 
160
153
  exports.WithParentLabel = WithParentLabel;
@@ -163,11 +156,8 @@ var WithBeta = function WithBeta() {
163
156
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
164
157
  title: "New Feature",
165
158
  description: "This is a beta feature that is still in development.",
166
- beta: true,
167
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:125"
168
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
169
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:130"
170
- }));
159
+ beta: true
160
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
171
161
  };
172
162
 
173
163
  exports.WithBeta = WithBeta;
@@ -177,11 +167,8 @@ var WithDocumentation = function WithDocumentation() {
177
167
  title: "API Documentation",
178
168
  description: "Learn how to integrate with our API endpoints.",
179
169
  documentationLabel: "View API Docs",
180
- documentationHref: "https://developers.cloudflare.com",
181
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:135"
182
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
183
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:141"
184
- }));
170
+ documentationHref: "https://developers.cloudflare.com"
171
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
185
172
  };
186
173
 
187
174
  exports.WithDocumentation = WithDocumentation;
@@ -194,11 +181,8 @@ var WithDocumentationButton = function WithDocumentationButton() {
194
181
  documentationAsButton: true,
195
182
  onDocumentationButtonClick: function onDocumentationButtonClick() {
196
183
  return console.log('Documentation button clicked');
197
- },
198
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:146"
199
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
200
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:155"
201
- }));
184
+ }
185
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
202
186
  };
203
187
 
204
188
  exports.WithDocumentationButton = WithDocumentationButton;
@@ -207,14 +191,9 @@ var WithSidebarInside = function WithSidebarInside() {
207
191
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
208
192
  title: "Dashboard",
209
193
  description: "Overview of your account activity and quick actions.",
210
- sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, {
211
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:163"
212
- }),
213
- sidebarPosition: "inside",
214
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:160"
215
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
216
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:166"
217
- }));
194
+ sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
195
+ sidebarPosition: "inside"
196
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
218
197
  };
219
198
 
220
199
  exports.WithSidebarInside = WithSidebarInside;
@@ -223,14 +202,9 @@ var WithSidebarOutside = function WithSidebarOutside() {
223
202
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
224
203
  title: "Analytics",
225
204
  description: "View detailed analytics and performance metrics.",
226
- sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, {
227
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:174"
228
- }),
229
- sidebarPosition: "outside",
230
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:171"
231
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
232
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:177"
233
- }));
205
+ sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
206
+ sidebarPosition: "outside"
207
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
234
208
  };
235
209
 
236
210
  exports.WithSidebarOutside = WithSidebarOutside;
@@ -239,13 +213,8 @@ var WithControl = function WithControl() {
239
213
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
240
214
  title: "User Management",
241
215
  description: "Manage users and their permissions.",
242
- control: /*#__PURE__*/_react.default.createElement(SampleControl, {
243
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:185"
244
- }),
245
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:182"
246
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
247
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:187"
248
- }));
216
+ control: /*#__PURE__*/_react.default.createElement(SampleControl, null)
217
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
249
218
  };
250
219
 
251
220
  exports.WithControl = WithControl;
@@ -254,13 +223,8 @@ var WithNavigation = function WithNavigation() {
254
223
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
255
224
  title: "Project Details",
256
225
  description: "View and edit project configuration.",
257
- navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation, {
258
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:195"
259
- }),
260
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:192"
261
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
262
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:197"
263
- }));
226
+ navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation, null)
227
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
264
228
  };
265
229
 
266
230
  exports.WithNavigation = WithNavigation;
@@ -269,11 +233,8 @@ var CenteredHeader = function CenteredHeader() {
269
233
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
270
234
  title: "Welcome",
271
235
  description: "Welcome to your dashboard. Get started by exploring the features below.",
272
- centerHeader: true,
273
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:202"
274
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
275
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:207"
276
- }));
236
+ centerHeader: true
237
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
277
238
  };
278
239
 
279
240
  exports.CenteredHeader = CenteredHeader;
@@ -282,11 +243,8 @@ var NarrowWidth = function NarrowWidth() {
282
243
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
283
244
  title: "Narrow Page",
284
245
  description: "This page uses the narrow width configuration for focused content.",
285
- type: "narrow",
286
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:212"
287
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
288
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:217"
289
- }));
246
+ type: "narrow"
247
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
290
248
  };
291
249
 
292
250
  exports.NarrowWidth = NarrowWidth;
@@ -295,11 +253,8 @@ var WideWidth = function WideWidth() {
295
253
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
296
254
  title: "Wide Page",
297
255
  description: "This page uses the wide width configuration for more content.",
298
- type: "wide",
299
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:222"
300
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
301
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:227"
302
- }));
256
+ type: "wide"
257
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
303
258
  };
304
259
 
305
260
  exports.WideWidth = WideWidth;
@@ -308,11 +263,8 @@ var UnboundedWidth = function UnboundedWidth() {
308
263
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
309
264
  title: "Unbounded Page",
310
265
  description: "This page uses the unbounded width configuration for full-width content.",
311
- type: "unbounded",
312
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:232"
313
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
314
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:237"
315
- }));
266
+ type: "unbounded"
267
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
316
268
  };
317
269
 
318
270
  exports.UnboundedWidth = UnboundedWidth;
@@ -325,42 +277,27 @@ var ComplexExample = function ComplexExample() {
325
277
  beta: true,
326
278
  documentationLabel: "Learn More",
327
279
  documentationHref: "https://developers.cloudflare.com",
328
- control: /*#__PURE__*/_react.default.createElement(SampleControl, {
329
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:249"
330
- }),
331
- sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, {
332
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:250"
333
- }),
280
+ control: /*#__PURE__*/_react.default.createElement(SampleControl, null),
281
+ sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
334
282
  sidebarPosition: "inside",
335
- navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation, {
336
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:252"
337
- }),
338
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:242"
339
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
340
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:254"
341
- }));
283
+ navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation, null)
284
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
342
285
  };
343
286
 
344
287
  exports.ComplexExample = ComplexExample;
345
288
 
346
289
  var MinimalExample = function MinimalExample() {
347
290
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
348
- title: "Minimal Page",
349
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:259"
350
- }, /*#__PURE__*/_react.default.createElement(_elements.P, {
351
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:260"
352
- }, "This is a minimal page with just a title and simple content."));
291
+ title: "Minimal Page"
292
+ }, /*#__PURE__*/_react.default.createElement(_elements.P, null, "This is a minimal page with just a title and simple content."));
353
293
  };
354
294
 
355
295
  exports.MinimalExample = MinimalExample;
356
296
 
357
297
  var NoTitle = function NoTitle() {
358
298
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
359
- description: "A page without a title, showing just the description.",
360
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:265"
361
- }, /*#__PURE__*/_react.default.createElement(SampleContent, {
362
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:266"
363
- }));
299
+ description: "A page without a title, showing just the description."
300
+ }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
364
301
  };
365
302
 
366
303
  exports.NoTitle = NoTitle;
@@ -368,27 +305,19 @@ exports.NoTitle = NoTitle;
368
305
  var LongContent = function LongContent() {
369
306
  return /*#__PURE__*/_react.default.createElement(_Page.default, {
370
307
  title: "Long Content Example",
371
- description: "This page demonstrates how the component handles longer content.",
372
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:271"
373
- }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
374
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:275"
375
- }, Array.from({
308
+ description: "This page demonstrates how the component handles longer content."
309
+ }, /*#__PURE__*/_react.default.createElement(_elements.Div, null, Array.from({
376
310
  length: 10
377
311
  }, function (_, i) {
378
312
  return /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
379
- key: i,
380
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:277"
313
+ key: i
381
314
  }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
382
315
  p: 4,
383
- mb: 4,
384
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:278"
316
+ mb: 4
385
317
  }, /*#__PURE__*/_react.default.createElement(_elements.P, {
386
318
  mb: 2,
387
- fontWeight: "bold",
388
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:279"
389
- }, "Section ", i + 1), /*#__PURE__*/_react.default.createElement(_elements.P, {
390
- "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:282"
391
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")));
319
+ fontWeight: "bold"
320
+ }, "Section ", i + 1), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")));
392
321
  })));
393
322
  };
394
323
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-page",
3
3
  "description": "Cloudflare Page Component",
4
- "version": "10.1.21",
4
+ "version": "11.0.1",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "James Kyle <jkyle@cloudflare.com>",
@@ -13,16 +13,16 @@
13
13
  "types": "./dist/index.d.ts"
14
14
  },
15
15
  "dependencies": {
16
- "@cloudflare/component-label": "^6.0.6",
17
- "@cloudflare/component-link": "^10.0.5",
18
- "@cloudflare/elements": "^4.0.6",
19
- "@cloudflare/intl-react": "^1.9.80"
16
+ "@cloudflare/component-label": "^6.0.7",
17
+ "@cloudflare/component-link": "^10.0.6",
18
+ "@cloudflare/elements": "^4.0.7",
19
+ "@cloudflare/intl-react": "^1.9.80",
20
+ "@cloudflare/util-cl1-compat-router": "^3.0.1"
20
21
  },
21
22
  "peerDependencies": {
22
23
  "@cloudflare/style-const": "^6.0.0",
23
24
  "@cloudflare/style-container": "^8.0.0",
24
- "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0",
25
- "react-router-dom": "^5.1.0"
25
+ "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
26
26
  },
27
27
  "stratus": {
28
28
  "srcDirectory": "./src",
package/src/Page.stories.tsx CHANGED
@@ -1,21 +1,32 @@
1
1
  import React from 'react';
2
2
  import { ComponentMeta } from '@storybook/react';
3
- import { BrowserRouter } from 'react-router-dom';
4
3
  import { Button } from '@cloudflare/component-button';
5
4
  import { Card } from '@cloudflare/component-card';
6
5
  import { Div, P } from '@cloudflare/elements';
6
+ import { CL1CompatRouterProvider } from '@cloudflare/util-cl1-compat-router';
7
7
  import Page from './Page';
8
8
 
9
+ type StoryLinkProps = { to: string } & Omit<
10
+ React.AnchorHTMLAttributes<HTMLAnchorElement>,
11
+ 'href'
12
+ >;
13
+
14
+ const StoryLink = React.forwardRef<HTMLAnchorElement, StoryLinkProps>(
15
+ ({ to, children, ...props }, ref) => (
16
+ <a {...props} href={to} ref={ref}>
17
+ {children}
18
+ </a>
19
+ )
20
+ );
21
+
22
+ StoryLink.displayName = 'StoryLink';
23
+
24
+ const storyLocation = { pathname: '/' };
25
+ const storyNavigate = () => undefined;
26
+
9
27
  export default {
10
28
  title: 'Dash/Core/Page',
11
29
  component: Page,
12
- decorators: [
13
- (Story: any) => (
14
- <BrowserRouter>
15
- <Story />
16
- </BrowserRouter>
17
- )
18
- ],
19
30
  parameters: {
20
31
  layout: 'fullscreen',
21
32
  docs: {
@@ -24,7 +35,18 @@ export default {
24
35
  'A flexible page layout component with header, optional sidebar, and content area. Supports different width configurations and responsive behavior.'
25
36
  }
26
37
  }
27
- }
38
+ },
39
+ decorators: [
40
+ Story => (
41
+ <CL1CompatRouterProvider
42
+ location={storyLocation}
43
+ navigate={storyNavigate}
44
+ linkComponent={StoryLink}
45
+ >
46
+ <Story />
47
+ </CL1CompatRouterProvider>
48
+ )
49
+ ]
28
50
  } as ComponentMeta<typeof Page>;
29
51
 
30
52
  // Sample content components for stories
package/src/Page.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import React, { useEffect, useRef } from 'react';
2
- import { useLocation } from 'react-router-dom';
3
2
  import { createStyledComponent } from '@cloudflare/style-container';
4
3
  import { Main, Header, Div, P, Span } from '@cloudflare/elements';
5
4
  import { Label } from '@cloudflare/component-label';
@@ -10,6 +9,7 @@ import { useIsMobile } from '@cloudflare/util-responsive';
10
9
  import { Icon } from '@cloudflare/component-icon';
11
10
  import { Button } from '@cloudflare/component-button';
12
11
  import { Tooltip } from '@cloudflare/component-tooltip';
12
+ import { useLocation } from '@cloudflare/util-cl1-compat-router';
13
13
 
14
14
  type PageWidth = 'narrow' | 'wide' | 'unbounded';
15
15
 
@@ -214,22 +214,21 @@ const Page = ({
214
214
  documentationAsButton,
215
215
  ...props
216
216
  }: Props) => {
217
- const location = useLocation();
218
217
  const skipTargetRef = useRef<HTMLAnchorElement>(null);
219
- const path = location?.pathname;
218
+ const { pathname } = useLocation();
220
219
 
221
220
  useEffect(() => {
222
221
  // If autofocus is enabled, then focus will move to the title block when
223
222
  // the page is navigated to (but not when the dash is first loaded)
224
223
  if (autofocus) {
225
224
  if (!firstPage) {
226
- firstPage = path;
227
- } else if (firstPage !== path || !firstLoad) {
225
+ firstPage = pathname;
226
+ } else if (firstPage !== pathname || !firstLoad) {
228
227
  focus(skipTargetRef.current);
229
228
  firstLoad = false;
230
229
  }
231
230
  }
232
- }, [path]);
231
+ }, [pathname]);
233
232
 
234
233
  const sidebarInside = sidebarPosition === 'inside';
235
234