Merge branch 'main' into feat/changelog-1

Author: WilcoSp

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook-vue/nuxt'
 
 const config = {
-  stories: ['../app/**/*.stories.@(js|ts)'],
+  stories: ['../.storybook/*.mdx', '../app/**/*.stories.@(js|ts)'],
   addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
   framework: '@storybook-vue/nuxt',
   staticDirs: ['./.public'],

.storybook/manager.ts

@@ -1,11 +1,19 @@
 import { addons } from 'storybook/manager-api'
-import { create } from 'storybook/theming'
 
-const npmxTheme = create({
-  brandTitle: 'npmx Storybook',
-  brandImage: '/npmx-storybook.svg',
-})
+import npmxDark from './theme'
 
 addons.setConfig({
-  theme: npmxTheme,
+  theme: npmxDark,
+  layoutCustomisations: {
+    showToolbar: (state, defaultValue) => {
+      if (state.viewMode === 'docs' && state.storyId) {
+        const story = state.index?.[state.storyId]
+        const tags = story?.tags || []
+        if (tags.includes('hide-toolbar')) {
+          return false
+        }
+      }
+      return defaultValue
+    },
+  },
 })

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+  /* Override docs story canvas background to match npmx theme */
+  .docs-story {
+    background-color: var(--bg, oklch(0.171 0 0)) !important;
+  }
+</style>

.storybook/preview.ts

@@ -4,6 +4,8 @@ import { currentLocales } from '../config/i18n'
 import { fn } from 'storybook/test'
 import { ACCENT_COLORS } from '../shared/utils/constants'
 
+import npmxDark from './theme'
+
 // related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
 // Stub Nuxt specific globals
 // @ts-expect-error - dynamic global name
@@ -25,6 +27,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      theme: npmxDark,
+    },
   },
   // Provides toolbars to switch things like theming and language
   globalTypes: {

.storybook/storybook-welcome.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+ 
+<Meta title="Welcome" tags={['hide-toolbar']}/>
+
+# Welcome
+
+Welcome to the npmx Storybook.

.storybook/theme.ts

@@ -0,0 +1,13 @@
+import { create } from 'storybook/theming'
+
+const npmxDark = create({
+  base: 'dark',
+
+  brandTitle: 'npmx Storybook',
+  brandImage: '/npmx-storybook.svg',
+
+  // UI
+  appContentBg: '#101010', // oklch(0.171 0 0)
+})
+
+export default npmxDark

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": ["./i18n/locales"],
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "*.vue": "${capture}.stories.ts"

app/components/Package/TableRow.vue

@@ -22,13 +22,6 @@ const isSelected = computed<boolean>(() => {
   return isPackageSelected(props.result.package.name)
 })
 
-function formatDownloads(count?: number): string {
-  if (count === undefined) return '-'
-  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`
-  if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`
-  return count.toString()
-}
-
 function formatScore(value?: number): string {
   if (value === undefined || value === 0) return '-'
   return Math.round(value * 100).toString()
@@ -44,6 +37,8 @@ const allMaintainersText = computed(() => {
   if (!pkg.value.maintainers?.length) return ''
   return pkg.value.maintainers.map(m => m.name || m.email).join(', ')
 })
+
+const compactNumberFormatter = useCompactNumberFormatter()
 </script>
 
 <template>
@@ -89,7 +84,11 @@ const allMaintainersText = computed(() => {
       v-if="isColumnVisible('downloads')"
       class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
     >
-      {{ formatDownloads(result.downloads?.weekly) }}
+      {{
+        result.downloads?.weekly !== undefined
+          ? compactNumberFormatter.format(result.downloads.weekly)
+          : '-'
+      }}
     </td>
 
     <!-- Updated -->

app/components/PaginationControls.vue

@@ -155,7 +155,7 @@ function handlePageSizeChange(event: Event) {
           @change="handlePageSizeChange"
           :items="
             PAGE_SIZE_OPTIONS.map(size => ({
-              label: $t('filters.pagination.per_page', { count: size }),
+              label: $t('filters.pagination.per_page', { count: $n(size) }),
               value: String(size),
             }))
           "
@@ -207,7 +207,7 @@ function handlePageSizeChange(event: Event) {
             :aria-current="page === currentPage ? 'page' : undefined"
             @click="goToPage(page)"
           >
-            {{ page }}
+            {{ $n(page) }}
           </button>
         </template>
 

app/pages/about.stories.ts

@@ -0,0 +1,30 @@
+import About from './about.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import AppHeader from '~/components/AppHeader.vue'
+import AppFooter from '~/components/AppFooter.vue'
+
+const meta = {
+  component: About,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    () => ({
+      components: { AppHeader, AppFooter },
+      template: `
+        <div class="min-h-screen flex flex-col bg-bg text-fg">
+          <AppHeader :show-logo="true" />
+          <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
+            <story />
+          </div>
+          <AppFooter />
+        </div>
+      `,
+    }),
+  ],
+} satisfies Meta<typeof About>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}