Skip to content

Commit eb112b0

Browse files
andre8244andre8244
authored
docs(storybook): add Patterns section, overview pages, and system theme (#164)
1 parent 5eb7e87 commit eb112b0

46 files changed

Lines changed: 565 additions & 38 deletions

Some content is hidden

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

‎.storybook/preview-head.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
<script>
2+
// Apply the system-preferred theme class to <html> before first paint, so the
3+
// initial render matches. The addon-themes decorator (which targets <html>)
4+
// keeps control afterwards, including manual theme switches.
5+
try {
6+
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
7+
document.documentElement.classList.add(prefersDark ? 'dark' : 'light')
8+
} catch (e) {}
9+
</script>
10+
<style>
11+
/* Theme the canvas background while a story loads, so dark mode doesn't flash
12+
white. Values match the tailwind gray-50 / gray-900 used by #storybook-root
13+
and the story wrapper. The .sb-preparing-* overlay is drawn *over* the story
14+
with an opaque white background by Storybook's built-in CSS, so it must be
15+
overridden too — the html/body rule alone sits behind it. */
16+
html.light,
17+
html.light body,
18+
html.light .sb-preparing-story,
19+
html.light .sb-preparing-docs {
20+
background-color: #f9fafb;
21+
}
22+
html.dark,
23+
html.dark body,
24+
html.dark .sb-preparing-story,
25+
html.dark .sb-preparing-docs {
26+
background-color: #111827;
27+
}
28+
</style>
129
<script>
230
FontAwesomeConfig = {
331
// this allows to style the icons since tailwindcss v4, due to fontawesome not providing any way to add a layer to

‎.storybook/preview.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
import type { Preview, VueRenderer } from '@storybook/vue3-vite'
22
import { withThemeByClassName } from '@storybook/addon-themes'
33
import { fn } from 'storybook/test'
4+
import { themes } from 'storybook/theming'
45

56
import '../src/main.css'
67
import './storybook.css'
78

9+
const prefersDark =
10+
typeof window !== 'undefined' &&
11+
window.matchMedia?.('(prefers-color-scheme: dark)').matches
12+
813
const preview: Preview = {
914
parameters: {
15+
options: {
16+
storySort: {
17+
order: ['Introduction', 'Patterns', ['Overview', '*'], 'Components', ['Overview', '*'], '*']
18+
}
19+
},
20+
// Set once at load from the system preference. Unlike the story canvas (driven
21+
// by addon-themes), the docs theme is not reactive to the toolbar toggle, so
22+
// switching themes there only takes effect after a reload.
23+
docs: { theme: prefersDark ? themes.dark : themes.light },
1024
actions: { onClick: fn() },
1125
controls: {
1226
matchers: {
@@ -21,7 +35,7 @@ const preview: Preview = {
2135
light: 'light',
2236
dark: 'dark'
2337
},
24-
defaultTheme: 'light'
38+
defaultTheme: prefersDark ? 'dark' : 'light'
2539
}),
2640
(story) => ({
2741
components: { story },

‎stories/ComponentsOverview.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{/*
2+
Copyright (C) 2026 Nethesis S.r.l.
3+
SPDX-License-Identifier: GPL-3.0-or-later
4+
*/}
5+
6+
import { Meta } from '@storybook/addon-docs/blocks'
7+
8+
<Meta title="Components/Overview" />
9+
10+
# Components
11+
12+
The building blocks of the library — buttons, inputs, tables, modals, notifications and
13+
plenty more. Combine them to build your own screens, or grab a **Pattern** when a
14+
ready-made composition already does the job.
15+
16+
Each entry in the sidebar comes with the component's props, controls and live examples to
17+
try out.
18+
19+
## Deprecated components
20+
21+
Some components stick around for backwards compatibility — you'll spot them by the
22+
`[Deprecated]` tag in the sidebar (for example, *NeBadge [Deprecated]*). If you're writing
23+
new code, go with their current replacement instead.

‎stories/Introduction.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{/*
2+
Copyright (C) 2026 Nethesis S.r.l.
3+
SPDX-License-Identifier: GPL-3.0-or-later
4+
*/}
5+
6+
import { Meta } from '@storybook/addon-docs/blocks'
7+
8+
<Meta title="Introduction" />
9+
10+
# @nethesis/vue-components
11+
12+
Welcome! This is a collection of Vue 3 components (built on top of
13+
<a href="https://flowbite.com/" target="_blank" rel="noopener noreferrer">Flowbite</a>) plus a handful of
14+
utility functions — the toolkit we use to build the Nethesis web interfaces.
15+
16+
## Finding your way around
17+
18+
The sidebar has two sections:
19+
20+
- **Patterns** — ready-made recipes that wire existing components together for a common
21+
job (say, a delete-confirmation modal). Grab one when you need a whole interaction, not
22+
just a single piece.
23+
- **Components** — the building blocks: buttons, inputs, tables, modals and friends.
24+
Mix and match them to build your own screens.
25+
26+
Pick a section and start poking around — every entry has live examples you can play with.
27+
28+
## Getting started
29+
30+
Need to install it? Setup, Tailwind CSS config, theming and Fontawesome are all covered in
31+
the <a href="https://github.com/nethesis/vue-components#readme" target="_blank" rel="noopener noreferrer">README on GitHub</a>.
32+
33+
## Theming
34+
35+
Everything works in both light and dark mode. The preview follows your system preference
36+
out of the box — flip it anytime with the theme toggle in the toolbar.

‎stories/NeAvatar.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
88
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
99

1010
const meta = {
11-
title: 'NeAvatar',
11+
title: 'Components/NeAvatar',
1212
component: NeAvatar,
1313
tags: ['autodocs'],
1414
argTypes: {

‎stories/NeBadge.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons'
77
import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
88

99
const meta: Meta<typeof NeBadge> = {
10-
title: 'NeBadge [Deprecated]',
10+
title: 'Components/NeBadge [Deprecated]',
1111
component: NeBadge,
1212
tags: ['autodocs'],
1313
parameters: {

‎stories/NeBadgeV2.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { faAward } from '@fortawesome/free-solid-svg-icons'
77
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
88

99
const meta: Meta<typeof NeBadgeV2> = {
10-
title: 'NeBadgeV2',
10+
title: 'Components/NeBadgeV2',
1111
component: NeBadgeV2,
1212
tags: ['autodocs'],
1313
argTypes: {

‎stories/NeButton.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
77
import { faCopy } from '@fortawesome/free-solid-svg-icons'
88

99
const meta = {
10-
title: 'NeButton',
10+
title: 'Components/NeButton',
1111
component: NeButton,
1212
tags: ['autodocs'],
1313
argTypes: {

‎stories/NeCard.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
99
library.add(faHeart)
1010

1111
const meta = {
12-
title: 'NeCard',
12+
title: 'Components/NeCard',
1313
component: NeCard,
1414
tags: ['autodocs'],
1515
args: {

‎stories/NeCheckbox.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
55
import { NeCheckbox, NeTooltip } from '../src/main'
66

77
const meta = {
8-
title: 'NeCheckbox',
8+
title: 'Components/NeCheckbox',
99
component: NeCheckbox,
1010
tags: ['autodocs'],
1111
args: {

0 commit comments

Comments
 (0)