diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml index 8c62cd4eaa..3f8a287e3a 100644 --- a/.github/workflows/autofix.yml +++ b/.github/workflows/autofix.yml @@ -20,26 +20,21 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + cache: true - name: ๐ŸŽจ Check for non-RTL/non-a11y CSS classes - run: pnpm vp run lint:css + run: vp run lint:css - name: ๐ŸŒ Compare translations - run: pnpm vp run i18n:check + run: vp run i18n:check - name: ๐ŸŒ Update lunaria data - run: pnpm vp run build:lunaria + run: vp run build:lunaria - name: ๐Ÿ”  Fix lint errors - run: pnpm vp run lint:fix + run: vp run lint:fix - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # 635ffb0c9798bd160680f18fd73371e355b85f27 diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 0a4860dc5f..5adb687647 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -26,15 +26,13 @@ jobs: repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }} ref: ${{ github.event.pull_request.head.sha || github.sha }} - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* + cache: true - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + - name: ๐ŸŸง Install pnpm globally + run: vp install -g pnpm - name: ๐Ÿงช Run Chromatic Visual and Accessibility Tests uses: chromaui/action@f191a0224b10e1a38b2091cefb7b7a2337009116 # v16.0.0 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b26e2a37b3..f4c414458b 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -28,18 +28,16 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm + run-install: false - name: ๐Ÿ“ฆ Install dependencies (root only, no scripts) - run: pnpm install --filter . --ignore-scripts + run: vp install --filter . --ignore-scripts - name: ๐Ÿ”  Lint project - run: pnpm vp run lint + run: vp run lint types: name: ๐Ÿ’ช Type check @@ -48,18 +46,13 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + cache: true - name: ๐Ÿ’ช Type check - run: pnpm vp run test:types + run: vp run test:types unit: name: ๐Ÿงช Unit tests @@ -68,18 +61,13 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + cache: true - name: ๐Ÿงช Unit tests - run: pnpm vp test --project unit --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml + run: vp test --project unit --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml - name: โฌ†๏ธŽ Upload test results to Codecov if: ${{ !cancelled() }} @@ -94,21 +82,16 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + cache: true - name: ๐ŸŒ Install browser - run: pnpm vp exec playwright install chromium-headless-shell + run: vp exec playwright install chromium-headless-shell - name: ๐Ÿงช Component tests - run: pnpm vp test --project nuxt --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml + run: vp test --project nuxt --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml - name: โฌ†๏ธŽ Upload coverage reports to Codecov uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6 @@ -131,23 +114,18 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + cache: true - name: ๐Ÿ—๏ธ Build project - run: pnpm vp run build:test + run: vp run build:test env: VALIDATE_HTML: true - name: ๐Ÿ–ฅ๏ธ Test project (browser) - run: pnpm vp run test:browser:prebuilt + run: vp run test:browser:prebuilt a11y: name: โ™ฟ Accessibility audit @@ -159,21 +137,16 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + cache: true - name: ๐Ÿ—๏ธ Build project - run: pnpm vp run build:test + run: vp run build:test - name: โ™ฟ Accessibility audit (Lighthouse - ${{ matrix.mode }} mode) - run: pnpm vp run test:a11y:prebuilt + run: vp run test:a11y:prebuilt env: LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} LIGHTHOUSE_COLOR_MODE: ${{ matrix.mode }} @@ -185,18 +158,13 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + cache: true - name: ๐Ÿงน Check for unused code - run: pnpm vp run knip + run: vp run knip i18n: name: ๐ŸŒ i18n validation @@ -205,20 +173,18 @@ jobs: steps: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm + run-install: false - name: ๐Ÿ“ฆ Install dependencies (root only, no scripts) - run: pnpm install --filter . --ignore-scripts + run: vp install --filter . --ignore-scripts - name: ๐ŸŒ Check for missing or dynamic i18n keys - run: pnpm vp run i18n:report + run: vp run i18n:report - name: ๐ŸŒ Check i18n schema is up to date run: | - pnpm vp run i18n:schema + vp run i18n:schema git diff --exit-code i18n/schema.json diff --git a/.github/workflows/lunaria.yml b/.github/workflows/lunaria.yml index b2bc818360..4e1cf26604 100644 --- a/.github/workflows/lunaria.yml +++ b/.github/workflows/lunaria.yml @@ -28,15 +28,10 @@ jobs: # Makes the action clone the entire git history fetch-depth: 0 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install + cache: true - name: Generate Lunaria Overview uses: lunariajs/action@4911ad0736d1e3b20af4cb70f5079aea2327ed8e # v1-prerelease diff --git a/.github/workflows/release-pr.yml b/.github/workflows/release-pr.yml index fc244db18e..bb8d7cc779 100644 --- a/.github/workflows/release-pr.yml +++ b/.github/workflows/release-pr.yml @@ -20,9 +20,10 @@ jobs: with: fetch-depth: 0 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* + run-install: false - name: ๐Ÿ” Check for unreleased commits id: check diff --git a/.github/workflows/release-tag.yml b/.github/workflows/release-tag.yml index 331540e6d9..5e318171f9 100644 --- a/.github/workflows/release-tag.yml +++ b/.github/workflows/release-tag.yml @@ -23,9 +23,10 @@ jobs: with: fetch-depth: 0 - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* + run-install: false - name: ๐Ÿ”ข Determine next version id: version @@ -58,13 +59,9 @@ jobs: git tag -a "$VERSION" -m "Release $VERSION" git push origin "$VERSION" - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - if: steps.check.outputs.skip == 'false' - name: ๐ŸŸง Install pnpm - - name: ๐Ÿ“ฆ Install dependencies if: steps.check.outputs.skip == 'false' - run: pnpm vp install --filter . --ignore-scripts + run: vp install --filter . --ignore-scripts - name: ๐Ÿ“ Generate release notes if: steps.check.outputs.skip == 'false' @@ -98,18 +95,14 @@ jobs: with: ref: release - - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 + - uses: voidzero-dev/setup-vp@a03302daa50cf2f017c8c7345730c2740df207d6 # v1 with: node-version: lts/* registry-url: https://registry.npmjs.org - - - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # 5e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: ๐ŸŸง Install pnpm - with: - cache: false + run-install: false - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install --filter npmx-connector... + run: vp install --filter npmx-connector... - name: ๐Ÿ”ข Set connector version env: @@ -122,7 +115,7 @@ jobs: echo "Publishing npmx-connector@${PKG_VERSION}" - name: ๐Ÿ—๏ธ Build connector - run: pnpm --filter npmx-connector build + run: vp run --filter npmx-connector build - name: ๐Ÿ“ค Publish to npm with provenance # Uses OIDC trusted publishing โ€” no NPM_TOKEN needed. diff --git a/.storybook/decorators.ts b/.storybook/decorators.ts new file mode 100644 index 0000000000..270cdec3a5 --- /dev/null +++ b/.storybook/decorators.ts @@ -0,0 +1,20 @@ +import AppFooter from '~/components/AppFooter.vue' +import AppHeader from '~/components/AppHeader.vue' + +/** + * Wraps a page story with the standard site chrome: AppHeader, main content + * area, and AppFooter. Use this for any full-page story so the layout stays + * consistent and changes only need to be made in one place. + */ +export const pageDecorator = () => ({ + components: { AppHeader, AppFooter }, + template: ` +
+ +
+ +
+ +
+ `, +}) diff --git a/.storybook/docs/colors.mdx b/.storybook/docs/colors.mdx new file mode 100644 index 0000000000..74a856d273 --- /dev/null +++ b/.storybook/docs/colors.mdx @@ -0,0 +1,110 @@ +import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks' +import { theme } from '../../uno.theme.ts' + + + +# Colors + +The npmx color system is built on CSS custom properties with support for light/dark themes and multiple background variants. + +Color values are defined in `uno.theme.ts`. + +## Background Colors + + + ({ + ...acc, + [key === 'DEFAULT' ? 'bg' : `bg-${key}`]: value, + }), + {}, + )} + /> + + +## Foreground Colors + + + ({ + ...acc, + [key === 'DEFAULT' ? 'fg' : `fg-${key}`]: value, + }), + {}, + )} + /> + + +## Border Colors + + + ({ + ...acc, + [key === 'DEFAULT' ? 'border' : `border-${key}`]: value, + }), + {}, + )} + /> + + +## Accent Colors + + + ({ + ...acc, + [key === 'DEFAULT' ? 'accent' : `accent-${key}`]: value, + }), + {}, + )} + /> + + +## Syntax Highlighting + + + + + +## Badge Colors + + + + + +## Provider Brand Colors + + + + + +--- + +## Related + +- [Design System Guidelines](https://storybook.npmx.dev/?path=/docs/guidelines--docs) diff --git a/.storybook/docs/guidelines.mdx b/.storybook/docs/guidelines.mdx new file mode 100644 index 0000000000..c559719d0f --- /dev/null +++ b/.storybook/docs/guidelines.mdx @@ -0,0 +1,86 @@ +import { Meta } from '@storybook/addon-docs/blocks' + + + +# Guidelines + +## Containers + +We use three container types depending on content density. + +**Main Container** is the default layout container. It should be used for pages with minimal or non-text content (e.g. graphs, dashboards). + +**Content Container** is used for text-heavy layouts. All long-form content must be placed inside this container. The maximum readable width is **768px**. + +**Extra Container** is used for dense layouts (e.g. code, detailed views) where additional horizontal space is required. + +A right sidebar (304px) may be used for secondary content when needed. + +Text and input fields should not exceed **768px** in width + +## Element Sizes + +Interactive element sizes: + +- 24 โ€” 2xs (rare) +- 28 โ€” xs (compact) +- 32 โ€” sm (minimum recommended) +- 36 โ€” md (default) +- 42 โ€” lg +- 48 โ€” xl +- 56 โ€” 2xl +- 64 โ€” 3xl + +## Typography + +- Base font size: **16px** +- Minimum font size: **14px** (use sparingly) + +Text casing: + +- **Uppercase** โ€” for headings +- **Lowercase** โ€” for UI elements +- **Normal** - for body content + +[See Typography](https://storybook.npmx.dev/?path=/docs/tokens-typography--docs) + +## Surfaces & Sections + +To visually separate content blocks (grouped content, cards, settings sections), use subtle background variations: + +- `bg-muted` +- `bg-subtle` + +## Borders & Radius + +- subtle border +- light border radius +- soft "glass-like" appearance + +Only avatars should have fully circular shapes. + +## Colors + +- Primary surfaces: **white** (`fg`) +- Secondary or less important content: use softer, muted tones + +[See Colors](https://storybook.npmx.dev/?path=/docs/tokens-colors--docs) + +## Layout Stability + +Interfaces must remain visually stable across screens and pages. Avoid layout shifts. If shifts are unavoidable, place elements where movement is not critical to user interaction. + +## Responsiveness specifics + +On smaller screens: + +- Button text may be hidden (icons only) +- Keyboard shortcuts may be hidden + +## General Principles + +- Preserve the meaning of elements (avoid links like button, etc) +- Maintain sufficient spacing +- Keep interfaces accessible +- Prefer simple, predictable layouts +- Design components to be easy to implement and scale diff --git a/.storybook/docs/typography.mdx b/.storybook/docs/typography.mdx new file mode 100644 index 0000000000..c9f99afa82 --- /dev/null +++ b/.storybook/docs/typography.mdx @@ -0,0 +1,166 @@ +import { Meta, Typeset } from '@storybook/addon-docs/blocks' +import { theme } from '../../uno.theme.ts' + + + +export const wind4FontSizes = { + 'xs': '0.75rem', + 'sm': '0.875rem', + 'base': '1rem', + 'lg': '1.125rem', + 'xl': '1.25rem', + '2xl': '1.5rem', + '3xl': '1.875rem', + '4xl': '2.25rem', + '5xl': '3rem', +} + +# Typography + +The npmx typography system uses Geist for sans-serif text and Geist Mono for monospace code. + +Typography values are defined in `uno.theme.ts`. + +## Font Families + +### Sans Serif โ€” Geist + + + + + +### Monospace โ€” Geist Mono + +Code and monospace typography scale: + + + + + +## Font Sizes + +The complete typography scale combines custom micro sizes (`5xs`-`2xs` from our theme) with standard Wind4 preset sizes (`xs`-`5xl`). + +**Custom Micro Sizes (from `theme.text`):** + +- `5xs` = {theme.text['5xs'].fontSize} (8px) +- `4xs` = {theme.text['4xs'].fontSize} (9px) +- `3xs` = {theme.text['3xs'].fontSize} (10px) +- `2xs` = {theme.text['2xs'].fontSize} (11px) + +**Wind4 Standard Sizes:** + +- `xs` = {wind4FontSizes['xs']} (12px) +- `sm` = {wind4FontSizes['sm']} (14px) +- `base` = {wind4FontSizes['base']} (16px) +- `lg` = {wind4FontSizes['lg']} (18px) +- `xl` = {wind4FontSizes['xl']} (20px) +- `2xl` = {wind4FontSizes['2xl']} (24px) +- `3xl` = {wind4FontSizes['3xl']} (30px) +- `4xl` = {wind4FontSizes['4xl']} (36px) +- `5xl` = {wind4FontSizes['5xl']} (48px) + +## Font Weights + + + + + + + + + + + +## Line Height + +Base line height is set to **1.6** for optimal readability. This provides comfortable spacing for multi-line text blocks while maintaining density for UI components. + +## Typography Features + +- **Font smoothing**: Antialiased rendering (`-webkit-font-smoothing: antialiased`) applied globally +- **Text rendering**: `optimizeLegibility` applied globally for consistent cross-browser rendering + +--- + +## Related + +- [Design System Guidelines](https://storybook.npmx.dev/?path=/docs/guidelines--docs) - See typography guidelines and usage +- [Colors](https://storybook.npmx.dev/?path=/docs/colors--docs) - View the color system diff --git a/.storybook/storybook-welcome.mdx b/.storybook/docs/welcome.mdx similarity index 100% rename from .storybook/storybook-welcome.mdx rename to .storybook/docs/welcome.mdx diff --git a/.storybook/main.ts b/.storybook/main.ts index 1dd56a7a34..31dc739ca8 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,7 +1,12 @@ import type { StorybookConfig } from '@storybook-vue/nuxt' const config = { - stories: ['../.storybook/*.mdx', '../app/**/*.stories.@(js|ts)'], + stories: [ + // List welcome first in sidebar + '../.storybook/docs/welcome.mdx', + '../.storybook/docs/*.mdx', + '../app/**/*.@(mdx|stories.@(js|ts))', + ], addons: [ '@storybook/addon-a11y', '@storybook/addon-docs', diff --git a/app/app.vue b/app/app.vue index 5916e3e328..26c409c88f 100644 --- a/app/app.vue +++ b/app/app.vue @@ -50,6 +50,8 @@ if (import.meta.server) { const keyboardShortcuts = useKeyboardShortcuts() const { settings } = useSettings() +initKeyShortcuts() + onKeyDown( '/', e => { diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 1ccfc31d40..7d0ffeda71 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -1,10 +1,8 @@