Skip to content

feat(stylebook): add Vue Styleguidist browser-based component stylebook and inline component docs#121

Open
remko48 wants to merge 24 commits intodevelopmentfrom
feature/GIT-NEXTVUE-120/stylebook
Open

feat(stylebook): add Vue Styleguidist browser-based component stylebook and inline component docs#121
remko48 wants to merge 24 commits intodevelopmentfrom
feature/GIT-NEXTVUE-120/stylebook

Conversation

@remko48
Copy link
Copy Markdown
Member

@remko48 remko48 commented May 5, 2026

Summary

Closes #120

This PR introduces a fully functional browser-based stylebook for the component library using Vue Styleguidist, and adds inline .md documentation to every component directory. It also resolves Vue prop-validation console errors across all component categories that were surfaced by running the styleguide.

What changed

Styleguide setup (styleguide/)

  • Added styleguide.config.js with full Vue Styleguidist configuration including aliases, webpack overrides, and global style injection
  • Added setup.js to register Nextcloud globals, Pinia, Vue Router, and translation stubs before each example renders
  • Added mocks for @nextcloud/l10n, @nextcloud/l10n-gettext, and empty module stubs so examples run without a real Nextcloud backend
  • Added nextcloud-globals.css and nextcloud-tokens.css to simulate Nextcloud's design-token environment inside the styleguide
  • Added nextcloud-tokens.md — a standalone design-token reference page in the styleguide
  • Added favicon and custom theme CSS

Inline component documentation

  • Added ComponentName.md files to every component directory (covers all ~50 components)
  • Each file contains a description, prop/event/slot reference table, and at least one live code example
  • Updated check-docs.js to verify coverage for both docs/components/*.md and src/components/*/*.md so CI catches gaps in either location

Console error fixes

  • Fixed Vue prop-type validation warnings across all component categories: Data Display, Cards, Dialogs, Object Widgets, Dashboard, Full pages, App Shell, Settings, and Specialized components
  • Corrected prop defaults, type declarations, and removed invalid attribute bindings that caused hydration warnings

Styling fixes

  • Fixed table row hover state
  • Fixed button sizing/alignment
  • Fixed sidebar styling
  • Fixed <main> tag styling
  • Ensured only selected items are shown in the context menu

Documentation and CI

  • Added GitHub Actions workflows for publishing the styleguide on development and beta branches (alongside the existing main workflow)
  • Updated documentation.yml to integrate the styleguide build step

Test plan

  • Run cd styleguide && npm install && npm run styleguide and confirm the styleguide opens in the browser with all components listed
  • Verify no console errors appear in the browser when browsing component examples
  • Run npm run check:docs from the repo root and confirm it exits 0
  • Run npm test and confirm all existing tests pass
  • Open a few component pages (e.g. CnDataTable, CnIndexPage, CnFormDialog) and verify the live examples render correctly

@remko48 remko48 marked this pull request as ready for review May 6, 2026 13:58
@remko48 remko48 changed the title Added styleguide to nextcloud-vue feat(stylebook): add Vue Styleguidist browser-based component stylebook and inline component docs May 6, 2026
Copy link
Copy Markdown
Contributor

@SudoThijn SudoThijn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks fine to me.

},
{
test: /\.(js|mjs|cjs)$/,
exclude: /node_modules\/(?!(@nextcloud|unified|vfile|lowlight|mdast-util|hast-util|unist-util|remark|rehype|micromark|decode-named-character-reference|bail|is-plain-obj|trim|trough|vfile-message|property-information))/,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did find one thing that can be fixed

Suggested change
exclude: /node_modules\/(?!(@nextcloud|unified|vfile|lowlight|mdast-util|hast-util|unist-util|remark|rehype|micromark|decode-named-character-reference|bail|is-plain-obj|trim|trough|vfile-message|property-information))/,
exclude: /node_modules\/(?!(@nextcloud|unified|vfile|lowlight|mdast-util|hast-util|unist-util|remark|rehype|micromark|decode-named-character-reference|bail|is-plain-obj|trim|trough|vfile-message|property-information|vue-codemirror6|codemirror|@codemirror|@lezer|gridstack|axios))/,

Copy link
Copy Markdown
Contributor

@SudoThijn SudoThijn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought I found it all.

Under AppShell there is this weird white box
Image

Highlighted for easier viewing
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants