Merge pull request #990 from dnum-mi/develop

Develop

Author: laruiss

.github/workflows/run-tests.yml

@@ -34,8 +34,10 @@ jobs:
         run: pnpm check-exports-ci
       - name: Test
         run: pnpm test
-      - name: Install Playwright
+      - name: Install Playwright dependencies
         run: pnpx playwright install --with-deps
+      - name: Install Playwright
+        run: pnpx playwright install
       - name: Build Storybook
         run: pnpm build-storybook --quiet
       - name: Serve Storybook and run tests

.storybook/main.ts

@@ -8,8 +8,6 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-themes',
     '@storybook/addon-a11y',
-    '@storybook/addon-styling',
-    '@storybook/addon-mdx-gfm',
     '@chromatic-com/storybook',
   ],
   framework: {

.storybook/preview.ts

@@ -1,4 +1,3 @@
-import { withThemeByDataAttribute } from '@storybook/addon-styling'
 import { themes } from '@storybook/theming'
 import { setup } from '@storybook/vue3'
 import { FocusTrap } from 'focus-trap-vue'
@@ -20,19 +19,11 @@ import '../src/main.css'
 import './theme.css'
 // import '@gouvfr/dsfr/dist/core/core.min.css'
 
-export const decorators = [
-  withThemeByDataAttribute({
-    themes: {
-      Clair: 'light',
-      Sombre: 'dark',
-    },
-    defaultTheme: 'light',
-    attributeName: 'data-fr-theme',
-  }),
-]
-
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      disable: true,
+    },
     docs: {
       theme: { ...themes.normal, ...VueDsfrTheme },
     },
@@ -95,6 +86,32 @@ const preview: Preview = {
   },
 
   tags: ['autodocs'],
+
+  // Gestion des thèmes clair et sombre des stories
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Thème',
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: ['Thème clair', 'Thème sombre'],
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'Thème clair',
+  },
+  decorators: [
+    (story, context) => {
+      const selectedTheme = context.globals.theme.includes('clair') ? 'light' : 'dark'
+      document.documentElement.setAttribute('data-fr-theme', selectedTheme)
+      return story()
+    },
+  ],
 }
 
 const RouterLink = defineComponent({

.vitepress/config.ts

@@ -240,6 +240,10 @@ const composants = [
     text: 'DsfrNotice',
     link: '/composants/DsfrNotice.md',
   },
+  {
+    text: 'DsfrPagination',
+    link: '/composants/DsfrPagination.md',
+  },
   {
     text: 'DsfrPicture',
     link: '/composants/DsfrPicture.md',

demo-app/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { useRoute } from 'vue-router'
 
 import DsfrBreadcrumb from '../src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
@@ -64,6 +64,7 @@ const quickLinks: DsfrHeaderProps['quickLinks'] = [
 const route = useRoute()
 const navItems: DsfrNavigationProps['navItems'] = [
   {
+    id: useId(),
     to: { name: 'Home' },
     text: 'Accueil',
   },

package.json

@@ -70,79 +70,78 @@
     "commitlint": "commitlint --edit"
   },
   "peerDependencies": {
-    "@iconify/vue": "^4.1.2",
-    "vue": "^3.4.38",
-    "vue-router": "^4.4.3"
+    "@iconify/vue": "^4.2.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "dependencies": {
     "@gouvfr/dsfr": "~1.12.1",
-    "focus-trap": "^7.6.0",
+    "focus-trap": "^7.6.2",
     "focus-trap-vue": "^4.0.3",
-    "vue": "^3.5.12",
-    "vue-router": "^4.4.5"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.8.0",
-    "@chromatic-com/storybook": "^2.0.2",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
-    "@iconify/vue": "^4.1.2",
-    "@playwright/test": "1.48.1",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.6",
-    "@storybook/vue3": "^8.3.6",
-    "@storybook/vue3-vite": "^8.3.6",
+    "@antfu/eslint-config": "^3.12.0",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@iconify/vue": "^4.2.0",
+    "@playwright/test": "1.49.1",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "^0.20.1",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/vue3": "^8.4.7",
+    "@storybook/vue3-vite": "^8.4.7",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.1.0",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.17.4",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@types/node": "^22.10.2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.5.1",
-    "@vueuse/core": "^11.2.0",
-    "@vueuse/shared": "^11.2.0",
-    "@whyframe/core": "^0.1.11",
+    "@vue/tsconfig": "^0.7.0",
+    "@vueuse/core": "^12.0.0",
+    "@vueuse/shared": "^12.0.0",
+    "@whyframe/core": "^0.1.12",
     "@whyframe/vue": "^0.1.7",
-    "browserslist": "^4.24.2",
-    "chalk": "^5.3.0",
-    "commitlint": "^19.5.0",
+    "browserslist": "^4.24.3",
+    "chalk": "^5.4.0",
+    "commitlint": "^19.6.1",
     "cross-env": "^7.0.3",
-    "eslint": "^9.13.0",
-    "eslint-plugin-vue": "^9.30.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.32.0",
     "globby": "^14.0.2",
-    "husky": "^9.1.6",
-    "inquirer": "^10.2.2",
+    "husky": "^9.1.7",
+    "inquirer": "^12.2.0",
     "jsdom": "^25.0.1",
-    "lightningcss": "^1.27.0",
-    "lint-staged": "^15.2.10",
+    "lightningcss": "^1.28.2",
+    "lint-staged": "^15.2.11",
     "npm-run-all": "^4.1.5",
     "p-debounce": "^4.0.0",
-    "pnpm": "^9.10.0",
+    "pnpm": "^9.15.0",
     "publint": "^0.2.12",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.0",
-    "start-server-and-test": "^2.0.8",
-    "storybook": "^8.3.6",
-    "typescript": "~5.5.4",
-    "vite": "^5.4.10",
-    "vite-node": "^2.1.4",
+    "start-server-and-test": "^2.0.9",
+    "storybook": "^8.4.7",
+    "typescript": "~5.6.3",
+    "vite": "^5.4.11",
+    "vite-node": "^2.1.8",
     "vite-plugin-full-reload": "^1.2.0",
-    "vitepress": "^1.4.2",
-    "vitest": "^2.1.4",
+    "vitepress": "^1.5.0",
+    "vitest": "^2.1.8",
     "vue-demi": "^0.14.10",
     "vue-tsc": "^2.1.10"
   },