@cloudflare/component-page 10.1.20 → 11.0.0

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