Merge remote-tracking branch 'upstream/main' into install_docs

.github/workflows/ci-examples.yml

@@ -61,4 +61,6 @@ jobs:
           # exitOnceUploaded: true
           projectToken: ${{ matrix.projectToken }}
           buildScriptName: ${{ matrix.storybookBuildScript }}
+          # Fail workflow if changes are found
+          exitZeroOnChanges: false
           debug: true

.github/workflows/e2e.yml

@@ -48,9 +48,9 @@ jobs:
           $packages=Get-ChildItem -Path packages -Recurse -Filter "*.tgz"
           echo "$packages"
           New-Item -Path ${{ runner.temp }}/example -ItemType Directory
-          pnpm dlx nuxt init ${{ runner.temp }}/example --packageManager pnpm
+          pnpm nuxt init ${{ runner.temp }}/example --packageManager pnpm --force --gitInit=false
           cd ${{ runner.temp }}/example
-          pnpm dlx storybook@0.0.0-pr-28607-sha-b9bf7d39 init
+          pnpm dlx storybook init
           pnpm add $packages
 
       - name: Build Storybook

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## v8.3.3
+
+[compare changes](https://github.com/nuxt-modules/storybook/compare/v8.3.2...v8.3.3)
+
+### 🩹 Fixes
+
+- Use storybook vitest config as base ([#740](https://github.com/nuxt-modules/storybook/pull/740))
+- Readd vue-tempate-compilation plugin ([#831](https://github.com/nuxt-modules/storybook/pull/831))
+- Nuxt App created only when story vue app rendered first time, ([#830](https://github.com/nuxt-modules/storybook/pull/830))
+
+### 🏡 Chore
+
+- Add test for using decorators in stories ([#823](https://github.com/nuxt-modules/storybook/pull/823))
+
+### ❤️ Contributors
+
+- Chakir QATAB ([@chakAs3](http://github.com/chakAs3))
+- Tobias Diez <code@tobiasdiez.de>
+- Ryan Leckey ([@mehcode](http://github.com/mehcode))
+
 ## v8.3.2
 
 [compare changes](https://github.com/nuxt-modules/storybook/compare/v8.3.1...v8.3.2)

docs/package.json

@@ -12,18 +12,18 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/heroicons": "1.2.0",
-    "@iconify-json/simple-icons": "1.2.5",
-    "@nuxt/content": "2.13.2",
-    "@nuxt/fonts": "0.9.2",
-    "@nuxt/ui-pro": "1.4.3",
-    "nuxt": "3.13.2",
+    "@iconify-json/heroicons": "1.2.1",
+    "@iconify-json/simple-icons": "1.2.14",
+    "@nuxt/content": "2.13.4",
+    "@nuxt/fonts": "0.10.3",
+    "@nuxt/ui-pro": "1.5.0",
+    "nuxt": "3.14.1592",
     "nuxt-og-image": "4.0.0"
   },
   "devDependencies": {
-    "@nuxt/eslint": "0.5.7",
-    "@nuxthq/studio": "2.1.1",
-    "eslint": "9.11.1",
-    "vue-tsc": "2.1.6"
+    "@nuxt/eslint": "0.7.2",
+    "@nuxthq/studio": "2.2.1",
+    "eslint": "9.16.0",
+    "vue-tsc": "2.1.10"
   }
 }

examples/showcase/components/MyI18n.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import MyComponent from './MyI18n.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+
+const meta = {
+  title: 'Modules/I18n',
+  component: MyComponent,
+  argTypes: {
+    lang: { control: 'select', options: ['en', 'fr', 'ar'] },
+  },
+
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof MyComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+
+export const FrenchStory: Story = {
+  args: { lang: 'fr' },
+}
+
+export const EnglishStory: Story = {
+  args: { lang: 'en' },
+}
+
+export const ArabicStory: Story = {
+  args: { lang: 'ar' },
+}

examples/showcase/components/MyI18n.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import '../assets/button.css'
+
+const props = defineProps<{
+  lang: string
+  message?: string
+}>()
+const { t, locale } = useI18n()
+const rtl = computed(() => props.lang === 'ar')
+locale.value = props.lang
+watch(
+  () => props.lang,
+  (lang: unknown) => {
+    locale.value = lang
+  },
+)
+</script>
+
+<template>
+  <div class="storybook lang-selector">
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'en'"
+    >
+      en
+    </button>
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'fr'"
+    >
+      fr
+    </button>
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'ar'"
+    >
+      ar
+    </button>
+  </div>
+  <div class="storybook welcome" :style="{ direction: rtl ? 'rtl' : 'ltr' }">
+    <div>{{ t('welcome', { name: 'Storybook' }) }}</div>
+    <div>{{ t('welcome', { name: 'Nuxt' }) }}</div>
+    <div>{{ t('welcome', { name: 'I18n' }) }}</div>
+  </div>
+
+  <p>language : {{ lang }}</p>
+</template>

examples/starter/components/MyNuxtWelcome.stories.js → examples/showcase/components/MyNuxtWelcome.stories.ts

@@ -1,22 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
 import MyNuxtWelcome from './MyWelcome.vue'
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+
 const meta = {
   title: 'Example/NuxtWelcome',
   component: MyNuxtWelcome,
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
-}
+} satisfies Meta<typeof MyNuxtWelcome>
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-/*
- *👇 Render functions are a framework specific feature
- to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
-
-export const NuxtWelcomeStory = {
+export const NuxtWelcomeStory: Story = {
   args: {},
 }

examples/showcase/components/MyWelcome.vue

@@ -0,0 +1,40 @@
+<template>
+  <h1>Welcome Nuxt to Storybook</h1>
+  <NuxtWelcome />
+</template>
+
+<style>
+.readmore {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e0e0e0;
+  --tw-ring-inset: var(--tw-empty,);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(14, 165, 233, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  font-family:
+    'Nunito Sans',
+    -apple-system,
+    '.SFNSText-Regular',
+    'San Francisco',
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Helvetica Neue',
+    Helvetica,
+    Arial,
+    sans-serif;
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  line-height: 24px;
+  color: #029cfd;
+  text-decoration: none;
+  font-size: 14px;
+}
+</style>

examples/showcase/components/SimpleButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <button @click="handleClick">Click me!</button>
+</template>
+
+<script setup lang="ts">
+function handleClick() {
+  alert('Button clicked!')
+}
+</script>
+
+<style scoped>
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+}
+</style>

examples/showcase/components/UseDecorators.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import SimpleButton from './SimpleButton.vue'
+
+/**
+ * Shows how to use a decorator to wrap the story with extra markup.
+ * https://storybook.js.org/docs/writing-stories/decorators
+ */
+const meta = {
+  title: 'Storybook Feature/Use Decorators',
+  component: SimpleButton,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({ template: '<div style="margin: 3em;"><story/></div>' }),
+  ],
+} satisfies Meta<typeof SimpleButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const UseDecoratorsStory: Story = {
+  args: {},
+}

examples/showcase/i18n.config.ts

@@ -0,0 +1,16 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  defaultLocale: 'en',
+  messages: {
+    en: {
+      welcome: 'Welcome to Storybook  ❤️  {name} ',
+    },
+    fr: {
+      welcome: 'Bienvenue a Storybook ❤️  {name} ',
+    },
+    ar: {
+      welcome: '   ناكست  ❤️  {name}   ❤️  مرحبا بكم في ستوري بوك   ',
+    },
+  },
+}))

examples/showcase/nuxt.config.ts

@@ -1,12 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/storybook', '@nuxt/image', '@pinia/nuxt'],
+  modules: ['@nuxtjs/storybook', '@nuxt/image', '@pinia/nuxt', '@nuxtjs/i18n'],
 
   pinia: {
     autoImports: ['defineStore', 'acceptHMRUpdate'],
   },
 
+  i18n: {
+    locales: ['en', 'fr', 'ar'],
+    defaultLocale: 'en',
+  },
+
   imports: {
     dirs: ['./stores'],
   },
@@ -22,9 +27,5 @@ export default defineNuxtConfig({
     },
   },
 
-  vue: {
-    runtimeCompiler: true,
-  },
-
   compatibilityDate: '2024-08-03',
 })

examples/showcase/package.json

@@ -11,19 +11,21 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@pinia/nuxt": "0.5.5",
     "@nuxt/image": "1.8.1",
-    "nuxt": "3.13.2",
-    "vue": "3.5.11",
-    "vue-router": "4.4.5"
+    "@pinia/nuxt": "0.9.0",
+    "nuxt": "3.14.1592",
+    "pinia": "2.3.0",
+    "vue": "3.5.13",
+    "vue-router": "4.5.0",
+    "@nuxtjs/i18n": "8.3.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.1.0",
+    "@chromatic-com/storybook": "3.2.3",
     "@nuxtjs/storybook": "latest",
-    "@storybook/addon-essentials": "8.3.0",
-    "@storybook/addon-links": "8.3.0",
-    "@storybook/blocks": "8.3.0",
-    "@storybook/test": "8.3.0",
-    "storybook": "8.3.0"
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/test": "8.4.7",
+    "storybook": "8.4.7"
   }
 }

examples/starter/.gitignore

@@ -23,4 +23,4 @@ logs
 .env.*
 !.env.example
 
-*storybook.log
+*storybook.log

examples/starter/.storybook/main.js → examples/starter/.storybook/main.ts

@@ -1,20 +1,18 @@
-/** @type { import('storybook-vue').StorybookConfig } */
-const config = {
+import type { StorybookConfig } from '@storybook-vue/nuxt'
+
+const config: StorybookConfig = {
   stories: [
     '../components/**/*.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
   ],
   addons: [
-    '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook-vue/nuxt',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
 }
 export default config

examples/starter/.storybook/preview.js → examples/starter/.storybook/preview.ts

@@ -1,4 +1,6 @@
-const preview = {
+import type { Preview } from '@storybook/vue3'
+
+const preview: Preview = {
   parameters: {
     controls: {
       matchers: {