Skip to content

Commit eec1cde

Browse files
tenphitenphi
authored
fix(Menu): improve semantics (#718)
1 parent 769f673 commit eec1cde

File tree

20 files changed

+1492
-177
lines changed

20 files changed

+1492
-177
lines changed

‎.changeset/giant-drinks-love.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cube-dev/ui-kit": patch
3+
---
4+
5+
Add `tooltip` prop to menu items. You can pass a `string` or a `TooltipProps` object with `title` prop there for advanced customization.

‎.size-limit.cjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ module.exports = [
2020
}),
2121
);
2222
},
23-
limit: '265kB',
23+
limit: '266kB',
2424
},
2525
{
2626
name: 'Tree shaking (just a Button)',

‎scripts/snapshot-docs.js

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* • Serves them from an in-process HTTP server
66
* • Snapshots each MDX page to ./docs-static/<id>.html
77
* • Logs pages that fail (error, no preview, or render timeout)
8+
* • Fixes internal links to point to the generated HTML files
89
*/
910

1011
import { spawn } from 'node:child_process';
@@ -21,6 +22,58 @@ const TIMEOUT = process.env.CI ? 30_000 : 15_000; // 30 s on CI, 15 s locally
2122

2223
const log = (...a) => console.log('[docs-snapshot]', ...a);
2324

25+
/* ───── helper functions ─────────────────────────────────────────────── */
26+
27+
/**
28+
* Fixes internal links in HTML content to point to the generated HTML files
29+
* Transforms links like:
30+
* - `/docs/pickers-select--docs` -> `pickers-select--docs.html`
31+
* - `?path=/docs/pickers-select--docs` -> `pickers-select--docs.html`
32+
* - `/?path=/docs/pickers-select--docs` -> `pickers-select--docs.html`
33+
* - `./?path=/docs/pickers-select--docs` -> `pickers-select--docs.html`
34+
*/
35+
function fixInternalLinks(html, availableIds) {
36+
// Create a set of available IDs for quick lookup
37+
const availableIdsSet = new Set(availableIds);
38+
const brokenLinks = new Set();
39+
40+
// Pattern to match various forms of Storybook docs links
41+
const linkPatterns = [
42+
// Match href="/docs/story-id--docs"
43+
/href="\/docs\/([^"]+--docs)"/g,
44+
// Match href="?path=/docs/story-id--docs"
45+
/href="\?path=\/docs\/([^"]+--docs)"/g,
46+
// Match href="/?path=/docs/story-id--docs"
47+
/href="\/\?path=\/docs\/([^"]+--docs)"/g,
48+
// Match href="./?path=/docs/story-id--docs"
49+
/href="\.\/\?path=\/docs\/([^"]+--docs)"/g,
50+
];
51+
52+
let fixedHtml = html;
53+
54+
linkPatterns.forEach((pattern) => {
55+
fixedHtml = fixedHtml.replace(pattern, (match, storyId) => {
56+
// Check if this story ID exists in our generated files
57+
if (availableIdsSet.has(storyId)) {
58+
return `href="${storyId}.html"`;
59+
}
60+
// If not found, log it and leave the link as is
61+
brokenLinks.add(storyId);
62+
return match;
63+
});
64+
});
65+
66+
// Log broken links if any were found
67+
if (brokenLinks.size > 0) {
68+
log(
69+
`⚠️ Found ${brokenLinks.size} broken internal links:`,
70+
Array.from(brokenLinks).join(', '),
71+
);
72+
}
73+
74+
return fixedHtml;
75+
}
76+
2477
/* ───── 2. start local HTTP server ─────────────────────────────────── */
2578
log('Starting local http-server...');
2679
const serverPort = 6007;
@@ -72,6 +125,13 @@ const index = JSON.parse(
72125
await fs.rm(OUT_DIR, { recursive: true, force: true });
73126
await fs.mkdir(OUT_DIR, { recursive: true });
74127

128+
// Collect all doc story IDs for link fixing
129+
const docStoryIds = Object.values(index.entries)
130+
.filter((entry) => entry.type === 'docs')
131+
.map((entry) => entry.id);
132+
133+
log(`Found ${docStoryIds.length} documentation pages to process`);
134+
75135
/* ───── 4. crawl & snapshot ────────────────────────────────────────── */
76136
let browser;
77137
try {
@@ -131,6 +191,9 @@ for (const { id, type, title } of Object.values(index.entries)) {
131191
return { styles, docsContent, pageTitle };
132192
});
133193

194+
// Fix internal links in the content
195+
const fixedDocsContent = fixInternalLinks(docsContent, docStoryIds);
196+
134197
// Wrap the content in a minimal HTML structure with styles included.
135198
const html = `<!doctype html>
136199
<html lang="en">
@@ -143,7 +206,7 @@ for (const { id, type, title } of Object.values(index.entries)) {
143206
</style>
144207
</head>
145208
<body>
146-
${docsContent}
209+
${fixedDocsContent}
147210
</body>
148211
</html>`;
149212

@@ -206,6 +269,10 @@ function generateHtmlToc(nodes) {
206269
}
207270

208271
const tocHtml = generateHtmlToc(tocTree.children);
272+
273+
// Fix internal links in the table of contents as well
274+
const fixedTocHtml = fixInternalLinks(tocHtml, docStoryIds);
275+
209276
const indexHtml = `<!DOCTYPE html>
210277
<html lang="en">
211278
<head>
@@ -222,14 +289,15 @@ const indexHtml = `<!DOCTYPE html>
222289
</head>
223290
<body>
224291
<h1>Table of Contents</h1>
225-
${tocHtml}
292+
${fixedTocHtml}
226293
</body>
227294
</html>`;
228295

229296
await fs.writeFile(path.join(OUT_DIR, 'index.html'), indexHtml);
230297
log('✔ Table of contents generated at index.html');
231298

232299
log('Snapshots written to', OUT_DIR);
300+
log(`✔ Fixed internal links in ${succeeded.length} pages`);
233301

234302
if (failed.length) {
235303
log('\n⚠️ Some pages were skipped:');

‎src/components/content/HotKeys/HotKeys.docs.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -305,8 +305,8 @@ This ensures users see familiar symbols regardless of their operating system.
305305
## Related Components
306306

307307
- [Tag](/docs/content-tag--docs) - Individual key display component
308-
- [Space](/docs/layout-space--docs) - Layout container used internally
309-
- [Text](/docs/content-text--docs) - Used for separator text
308+
- [Space](/docs/content-layout--docs) - Layout container used internally
309+
- [Text](/docs/generic-text--docs) - Used for separator text
310310
- [Tooltip](/docs/overlays-tooltip--docs) - Often used together to show shortcuts
311311

312312
## Suggested Improvements

‎src/components/fields/ComboBox/ComboBox.docs.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,6 @@ This component supports all [Field properties](/docs/forms-field--docs) when use
223223

224224
## Related Components
225225

226-
- [Select](/docs/pickers-select--docs) - For simple selection without filtering
226+
- [Select](/docs/forms-select--docs) - For simple selection without filtering
227227
- [TextInput](/docs/forms-textinput--docs) - For free-text input without options
228228
- [SearchInput](/docs/forms-searchinput--docs) - For search-only functionality without selection

‎src/components/fields/ListBox/ListBox.docs.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -465,8 +465,8 @@ const [selectedKey, setSelectedKey] = useState(null);
465465

466466
## Related Components
467467

468-
- [Select](/docs/pickers-select--docs) - For dropdown selection that saves space
469-
- [ComboBox](/docs/pickers-combobox--docs) - For searchable selection with text input
468+
- [Select](/docs/forms-select--docs) - For dropdown selection that saves space
469+
- [ComboBox](/docs/forms-combobox--docs) - For searchable selection with text input
470470
- [RadioGroup](/docs/forms-radiogroup--docs) - For single selection with radio buttons
471471
- [Checkbox](/docs/forms-checkbox--docs) - For multiple selection with checkboxes
472-
- [Menu](/docs/pickers-menu--docs) - For action-oriented lists and navigation
472+
- [Menu](/docs/actions-menu--docs) - For action-oriented lists and navigation

‎src/components/fields/RadioGroup/RadioGroup.docs.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,5 +210,5 @@ This component supports all [Field properties](/docs/forms-field--docs) when use
210210

211211
- [Checkbox](/docs/forms-checkbox--docs) - For multiple selection scenarios
212212
- [CheckboxGroup](/docs/forms-checkboxgroup--docs) - For selecting multiple related options
213-
- [Select](/docs/pickers-select--docs) - For single selection from many options
213+
- [Select](/docs/forms-select--docs) - For single selection from many options
214214
- [Switch](/docs/forms-switch--docs) - For binary on/off choices

‎src/components/fields/SearchInput/SearchInput.docs.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -216,5 +216,5 @@ This component supports all [Field properties](/docs/forms-field--docs) when use
216216
## Related Components
217217

218218
- [TextInput](/docs/forms-textinput--docs) - For general text input
219-
- [ComboBox](/docs/pickers-combobox--docs) - For searchable selection with predefined options
220-
- [Select](/docs/pickers-select--docs) - For selection without search functionality
219+
- [ComboBox](/docs/forms-combobox--docs) - For searchable selection with predefined options
220+
- [Select](/docs/forms-select--docs) - For selection without search functionality

‎src/components/fields/Select/Select.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -588,7 +588,7 @@ export function ListBoxPopup({
588588
item={item}
589589
state={state}
590590
optionStyles={optionStyles}
591-
headingStyles={undefined}
591+
headingStyles={{ padding: '.5x 1.5x' }}
592592
sectionStyles={undefined}
593593
shouldUseVirtualFocus={shouldUseVirtualFocus}
594594
/>,

‎src/components/form/Form/Field.docs.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -326,5 +326,5 @@ When creating custom input components, using `useFieldProps` ensures they work s
326326
327327
- [Form](/docs/forms-form--docs) - Form container with validation and state management
328328
- [TextInput](/docs/forms-textinput--docs) - Text input with built-in field support
329-
- [Select](/docs/pickers-select--docs) - Select input with built-in field support
329+
- [Select](/docs/forms-select--docs) - Select input with built-in field support
330330
- [FieldWrapper](/docs/forms-fieldwrapper--docs) - Internal component used by Field for styling

0 commit comments

Comments
 (0)