Skip to content

Commit d71dfd9

Browse files
WilcoSpWilcoSp
authored
Merge branch 'npmx-dev:main' into feat/changelog-1
2 parents 5f1be8a + 433494c commit d71dfd9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+4278
-419
lines changed

‎.storybook/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook-vue/nuxt'
22

33
const config = {
44
stories: ['../app/**/*.stories.@(js|ts)'],
5-
addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
5+
addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
66
framework: '@storybook-vue/nuxt',
77
features: {
88
backgrounds: false,

‎.storybook/preview.ts‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Preview } from '@storybook-vue/nuxt'
2+
import { withThemeByDataAttribute } from '@storybook/addon-themes'
23
import { currentLocales } from '../config/i18n'
34
import { fn } from 'storybook/test'
45
import { ACCENT_COLORS } from '../shared/utils/constants'
@@ -58,31 +59,22 @@ const preview: Preview = {
5859
],
5960
},
6061
},
61-
theme: {
62-
name: 'Theme',
63-
description: 'Color mode',
64-
defaultValue: 'dark',
65-
toolbar: {
66-
icon: 'moon',
67-
dynamicTitle: true,
68-
items: [
69-
{ value: 'light', icon: 'sun', title: 'Light' },
70-
{ value: 'dark', icon: 'moon', title: 'Dark' },
71-
],
72-
},
73-
},
7462
},
7563
decorators: [
64+
withThemeByDataAttribute({
65+
themes: {
66+
Light: 'light',
67+
Dark: 'dark',
68+
},
69+
defaultTheme: 'Dark',
70+
attributeName: 'data-theme',
71+
}),
7672
(story, context) => {
77-
const { locale, theme, accentColor } = context.globals as {
73+
const { locale, accentColor } = context.globals as {
7874
locale: string
79-
theme: string
8075
accentColor?: string
8176
}
8277

83-
// Set theme from globals
84-
document.documentElement.setAttribute('data-theme', theme)
85-
8678
// Set accent color from globals
8779
if (accentColor) {
8880
document.documentElement.style.setProperty('--accent-color', `var(--swatch-${accentColor})`)

‎app/components/AppHeader.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
127127
128128
const showFullSearch = shallowRef(false)
129129
const showMobileMenu = shallowRef(false)
130-
const { env } = useAppConfig().buildInfo
130+
const { env, prNumber } = useAppConfig().buildInfo
131131
132132
// On mobile, clicking logo+search button expands search
133133
const route = useRoute()
@@ -227,6 +227,15 @@ onKeyStroke(
227227
{{ env === 'release' ? 'alpha' : env }}
228228
</span>
229229
</NuxtLink>
230+
<NuxtLink
231+
v-if="prNumber"
232+
:to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
233+
:aria-label="`Open GitHub pull request ${prNumber}`"
234+
>
235+
<span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium ms-2">
236+
PR #{{ prNumber }}
237+
</span>
238+
</NuxtLink>
230239
</div>
231240
<!-- Spacer when logo is hidden on desktop -->
232241
<span v-else class="hidden sm:block w-1" />

‎app/components/Code/FileTree.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,7 @@ watch(
9494
block
9595
:style="{ paddingLeft: `${depth * 12 + 32}px` }"
9696
>
97-
<svg
98-
class="size-[1em] me-1 shrink-0"
99-
viewBox="0 0 16 16"
100-
fill="currentColor"
101-
aria-hidden="true"
102-
>
97+
<svg class="size-[1em] me-1 shrink-0" viewBox="0 0 16 16" aria-hidden="true">
10398
<use :href="`/file-tree-sprite.svg#${getFileIcon(node.name)}`" />
10499
</svg>
105100
<span class="truncate">{{ node.name }}</span>

‎app/components/Header/AuthModal.client.vue‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { useAtproto } from '~/composables/atproto/useAtproto'
33
import { authRedirect } from '~/utils/atproto/helpers'
44
import { isAtIdentifierString } from '@atproto/lex'
55
6+
const authModal = useModal('auth-modal')
7+
68
const handleInput = shallowRef('')
79
const errorMessage = shallowRef('')
810
const route = useRoute()
@@ -72,9 +74,22 @@ watch(user, async newUser => {
7274
</p>
7375
</div>
7476
</div>
75-
<ButtonBase class="w-full" @click="logout">
76-
{{ $t('auth.modal.disconnect') }}
77-
</ButtonBase>
77+
78+
<div class="flex flex-col space-y-4">
79+
<LinkBase
80+
variant="button-secondary"
81+
:to="{ name: 'profile-handle', params: { handle: user.handle } }"
82+
prefetch-on="interaction"
83+
class="w-full"
84+
@click="authModal.close()"
85+
>
86+
{{ $t('auth.modal.profile') }}
87+
</LinkBase>
88+
89+
<ButtonBase class="w-full" @click="logout">
90+
{{ $t('auth.modal.disconnect') }}
91+
</ButtonBase>
92+
</div>
7893
</div>
7994

8095
<!-- Disconnected state -->

‎app/components/Link/Base.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@ const props = withDefaults(
1010
* `type` should never be used, because this will always be a link.
1111
* */
1212
type?: never
13+
/** Visual style of the link */
1314
variant?: 'button-primary' | 'button-secondary' | 'link'
15+
/** Size (only applicable for button variants) */
1416
size?: 'small' | 'medium'
17+
/** Makes the link take full width */
1518
block?: boolean
1619
20+
/** Keyboard shortcut hint */
1721
ariaKeyshortcuts?: string
1822
1923
/**
@@ -26,8 +30,10 @@ const props = withDefaults(
2630
*/
2731
rel?: never
2832
33+
/** Icon class to display */
2934
classicon?: IconClass
3035
36+
/** Link destination (internal or external URL) */
3137
to?: NuxtLinkProps['to']
3238
3339
/** always use `to` instead of `href` */
@@ -37,6 +43,7 @@ const props = withDefaults(
3743
noUnderline?: boolean
3844
3945
/**
46+
* Hide external link icon (deprecated)
4047
* @deprecated @todo remove this property and add separate clean component without this logic
4148
*/
4249
noNewTabIcon?: boolean

‎app/components/Link/Link.stories.ts‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import type { Meta, StoryObj } from '@storybook-vue/nuxt'
2+
import LinkBase from './Base.vue'
3+
4+
const meta = {
5+
component: LinkBase,
6+
args: {
7+
to: '/',
8+
default: 'Click me',
9+
},
10+
} satisfies Meta<typeof LinkBase>
11+
12+
export default meta
13+
type Story = StoryObj<typeof meta>
14+
15+
export const Default: Story = {}
16+
17+
export const ExternalLink: Story = {
18+
args: {
19+
to: 'https://example.com',
20+
default: 'External Link',
21+
},
22+
}
23+
24+
export const AnchorLink: Story = {
25+
args: {
26+
to: '#section',
27+
default: 'Anchor Link',
28+
},
29+
}
30+
31+
export const WithIcon: Story = {
32+
args: {
33+
classicon: 'i-lucide:check',
34+
default: 'Verified',
35+
},
36+
}
37+
38+
export const NoUnderline: Story = {
39+
args: {
40+
noUnderline: true,
41+
default: 'Link without underline',
42+
},
43+
}
44+
45+
export const Disabled: Story = {
46+
args: {
47+
disabled: true,
48+
default: 'Disabled Link',
49+
},
50+
}
51+
52+
export const ButtonPrimary: Story = {
53+
args: {
54+
variant: 'button-primary',
55+
default: 'Primary Button',
56+
},
57+
}
58+
59+
export const ButtonSecondary: Story = {
60+
args: {
61+
variant: 'button-secondary',
62+
default: 'Secondary Button',
63+
},
64+
}
65+
66+
export const SmallButton: Story = {
67+
args: {
68+
variant: 'button-primary',
69+
size: 'small',
70+
default: 'Small Button',
71+
},
72+
}
73+
74+
export const WithIconButton: Story = {
75+
args: {
76+
variant: 'button-primary',
77+
classicon: 'i-lucide:copy',
78+
default: 'Copy',
79+
},
80+
}
81+
82+
export const WithKeyboardShortcut: Story = {
83+
args: {
84+
variant: 'button-secondary',
85+
ariaKeyshortcuts: 's',
86+
default: 'Search',
87+
},
88+
}
89+
90+
export const BlockLink: Story = {
91+
args: {
92+
variant: 'button-primary',
93+
block: true,
94+
default: 'Full Width Button',
95+
},
96+
}
97+
98+
export const DisabledButton: Story = {
99+
args: {
100+
variant: 'button-primary',
101+
disabled: true,
102+
default: 'Disabled Button',
103+
},
104+
}
105+
106+
export const Snapshot: Story = {
107+
render: () => ({
108+
template: `
109+
<div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
110+
<LinkBase to="/">Default Link</LinkBase>
111+
<LinkBase to="https://example.com">External Link</LinkBase>
112+
<LinkBase to="#section">Anchor Link</LinkBase>
113+
<LinkBase to="/" classicon="i-lucide:check">Link with icon</LinkBase>
114+
<LinkBase to="/" no-underline>Link without underline</LinkBase>
115+
<LinkBase to="/" disabled>Disabled Link</LinkBase>
116+
117+
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
118+
<LinkBase to="/" variant="button-primary">Primary</LinkBase>
119+
<LinkBase to="/" variant="button-secondary">Secondary</LinkBase>
120+
<LinkBase to="/" variant="button-primary" disabled>Disabled</LinkBase>
121+
<LinkBase to="/" variant="button-primary" classicon="i-lucide:copy">With Icon</LinkBase>
122+
</div>
123+
124+
<div style="display: flex; gap: 1rem;">
125+
<LinkBase to="/" variant="button-primary" size="small">Small Button</LinkBase>
126+
</div>
127+
<LinkBase to="/" variant="button-primary" block>Full Width Button</LinkBase>
128+
</div>
129+
`,
130+
components: { LinkBase },
131+
}),
132+
}

‎app/components/Package/Card.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,6 @@ const numberFormatter = useNumberFormatter()
172172
size="small"
173173
:aria-pressed="props.filters?.keywords.includes(keyword)"
174174
:title="`Filter by ${keyword}`"
175-
:data-result-index="index"
176175
@click.stop="emit('clickKeyword', keyword)"
177176
>
178177
{{ keyword }}

0 commit comments

Comments
 (0)