Merge pull request #925 from dnum-mi/develop

Develop

.github/workflows/run-tests.yml

@@ -30,6 +30,8 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Lint (show only errors)
         run: pnpm lint --quiet
+      - name: Check exports
+        run: pnpm check-exports-ci
       - name: Test
         run: pnpm test
       - name: Install Playwright

.storybook/preview.ts

@@ -1,9 +1,9 @@
-import type { Preview } from '@storybook/vue3'
-import { setup } from '@storybook/vue3'
-import { themes } from '@storybook/theming'
 import { withThemeByDataAttribute } from '@storybook/addon-styling'
+import { themes } from '@storybook/theming'
+import { setup } from '@storybook/vue3'
 import { FocusTrap } from 'focus-trap-vue'
 import { defineComponent } from 'vue'
+import type { Preview } from '@storybook/vue3'
 import VIcon from '../src/components/VIcon/VIcon.vue'
 
 import VueDsfrTheme from './vue-dsfr-theme.js'

.vitepress/config.ts

@@ -1,8 +1,8 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vitepress'
 import { whyframe } from '@whyframe/core'
 import { whyframeVue } from '@whyframe/vue'
+import { defineConfig } from 'vitepress'
 import { hmrFix } from './plugins/hmrFix.js'
 
 const minimalToc = [

.vitepress/theme/AppIcons.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import { useData } from 'vitepress'
+import { computed, ref } from 'vue'
 
 type Icons = Record<string, string[]>
 

.vitepress/theme/Story.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, watchEffect, onMounted, onUnmounted } from 'vue'
 import { useData } from 'vitepress'
+import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { useScheme, type UseSchemeResult } from '../../src/index'
 
 withDefaults(defineProps<{

.vitepress/theme/index.ts

@@ -1,16 +1,16 @@
-import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { RouterLink } from 'vue-router'
+import type { Theme } from 'vitepress'
 
-import Story from './Story.vue'
+import VIcon from '../../src/components/VIcon/VIcon.vue'
 import AppColors from './AppColors.vue'
 import AppIcons from './AppIcons.vue'
-import VIconLink from './VIconLink.vue'
+import Story from './Story.vue'
 
+import VIconLink from './VIconLink.vue'
 import './official-icons.css'
 import '@gouvfr/dsfr/dist/utility/icons/icons.main.css'
 import './style.css'
-import VIcon from '../../src/components/VIcon/VIcon.vue'
 
 export default {
   extends: DefaultTheme,

ci/check-exports.mjs

@@ -1,22 +1,26 @@
 #!/usr/bin/env node
+import { readFile, writeFile } from 'node:fs/promises'
+import path from 'node:path'
 /* eslint no-console: 'off' */
 import process from 'node:process'
 import { fileURLToPath, URL } from 'node:url'
-import { readFile, writeFile } from 'node:fs/promises'
-import path from 'node:path'
 
-import inquirer from 'inquirer'
 import chalk from 'chalk'
 import { globby } from 'globby'
+import inquirer from 'inquirer'
 
 const isCI = process.argv.includes('--ci')
 
 const getNormalizedDir = (relativeDir) => fileURLToPath(new URL(relativeDir, import.meta.url))
 
 // const sfcs = await globby(fileURLToPath(new URL('../src/components/**/*.vue', import.meta.url)))
-const sfcs = await globby('src/components/**/*.vue')
+const sfcs = (await globby('src/components/**/*.{vue,types.ts}'))
+  .filter(path => !/Demo|Example/.test(path))
+  .map(path => path.replace(/^(.*).types.ts$/, '$1.types'))
 
-const projectFn = component => `export { default as ${path.basename(component, '.vue')} } from '${component.replace('src/components', '.')}'`
+const projectFn = component => component.endsWith('types')
+  ? `export * from '${component.replace('src/components', '.')}'`
+  : `export { default as ${path.basename(component, '.vue')} } from '${component.replace('src/components', '.')}'`
 
 const correctComponentList = sfcs.map(projectFn).sort()
 const correctString = `${correctComponentList.join('\n')}\n`

demo-app/App.vue

@@ -2,15 +2,15 @@
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import AppToaster from './components/AppToaster.vue'
-import useToaster from './composables/use-toaster.js'
+import DsfrBreadcrumb from '../src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
+import DsfrFooter from '../src/components/DsfrFooter/DsfrFooter.vue'
 
-import DsfrModal from '../src/components/DsfrModal/DsfrModal.vue'
 import DsfrHeader, { type DsfrHeaderProps } from '../src/components/DsfrHeader/DsfrHeader.vue'
+import DsfrModal from '../src/components/DsfrModal/DsfrModal.vue'
 import DsfrNavigation, { type DsfrNavigationProps } from '../src/components/DsfrNavigation/DsfrNavigation.vue'
 import DsfrSkipLinks, { type DsfrSkipLinksProps } from '../src/components/DsfrSkipLinks/DsfrSkipLinks.vue'
-import DsfrBreadcrumb from '../src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
-import DsfrFooter from '../src/components/DsfrFooter/DsfrFooter.vue'
+import AppToaster from './components/AppToaster.vue'
+import useToaster from './composables/use-toaster.js'
 
 const toaster = useToaster()
 

demo-app/composables/use-toaster.ts

@@ -12,7 +12,8 @@ const getRandomAlphaNum = () => {
 
 const getRandomString = (length: number) => {
   return Array.from({ length })
-    .map(getRandomAlphaNum).join('')
+    .map(getRandomAlphaNum)
+    .join('')
 }
 
 const getRandomHtmlId = (prefix = '', suffix = '') => {

demo-app/main.js

@@ -1,16 +1,16 @@
+import VueDsfr from '@/index'
 import { Icon } from '@iconify/vue'
-import { createApp } from 'vue'
 
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router.js'
 import '@gouvfr/dsfr/dist/core/core.main.min.css'
 import '@gouvfr/dsfr/dist/scheme/scheme.min.css'
+
 import '@gouvfr/dsfr/dist/component/component.main.min.css'
 import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
-import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
-
-import VueDsfr from '@/index'
-import router from './router.js'
 
-import App from './App.vue'
+import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
 
 createApp(App)
   .use(router)

demo-app/router.js

@@ -1,18 +1,18 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 import AboutUs from './views/AboutUs.vue'
-import AppHome from './views/AppHome.vue'
+import AppAccordions from './views/AppAccordions.vue'
 import AppAlerts from './views/AppAlerts.vue'
+import AppForm from './views/AppForm.vue'
+import AppHome from './views/AppHome.vue'
 import AppTabs from './views/AppTabs.vue'
 import AppTags from './views/AppTags.vue'
-import SchemeSettings from './views/SchemeSettings.vue'
+import CalloutTest from './views/CalloutTest.vue'
+import CardTile from './views/CardTile.vue'
 import LanguageSelector from './views/LanguageSelector.vue'
-import AppForm from './views/AppForm.vue'
-import SimpleModal from './views/SimpleModal.vue'
+import SchemeSettings from './views/SchemeSettings.vue'
 import SideMenu from './views/SideMenu.vue'
-import CardTile from './views/CardTile.vue'
-import CalloutTest from './views/CalloutTest.vue'
-import AppAccordions from './views/AppAccordions.vue'
+import SimpleModal from './views/SimpleModal.vue'
 
 export const routes = [
   { path: '/', name: 'Home', component: AppHome },

demo-app/views/AppAccordions.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { ref } from 'vue'
-
 import DsfrAccordion from '@/components/DsfrAccordion/DsfrAccordion.vue'
+
 import DsfrAccordionsGroup from '@/components/DsfrAccordion/DsfrAccordionsGroup.vue'
 import DsfrTranscription from '@/components/DsfrTranscription/DsfrTranscription.vue'
+import { ref } from 'vue'
 
 const activeAccordion = ref(-1)
 const activeAccordionInGroup = ref(-1)

demo-app/views/AppAlerts.vue

@@ -1,8 +1,8 @@
 <script setup>
+import DsfrAlert from '@/components/DsfrAlert/DsfrAlert.vue'
+import DsfrNotice from '@/components/DsfrNotice/DsfrNotice.vue'
 // @ts-check
 import { ref } from 'vue'
-import DsfrNotice from '@/components/DsfrNotice/DsfrNotice.vue'
-import DsfrAlert from '@/components/DsfrAlert/DsfrAlert.vue'
 
 const noticeClosed = ref(false)
 

demo-app/views/AppForm.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref } from 'vue'
-
-import DsfrRadioButtonSet from '@/components/DsfrRadioButton/DsfrRadioButtonSet.vue'
 import DsfrAlert from '@/components/DsfrAlert/DsfrAlert.vue'
+
 import DsfrButton from '@/components/DsfrButton/DsfrButton.vue'
 import DsfrFileUpload from '@/components/DsfrFileUpload/DsfrFileUpload.vue'
+import DsfrRadioButtonSet from '@/components/DsfrRadioButton/DsfrRadioButtonSet.vue'
+import { ref } from 'vue'
 
 const inputValue = ref('')
 const filesToUpload = ref(undefined)

demo-app/views/AppHome.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref, watch } from 'vue'
 import pDebounce from 'p-debounce'
+import { ref, watch } from 'vue'
 
+import AsyncButton from '../components/AsyncButton.vue'
 import FdrAutoComplete from '../components/FdrAutoComplete.vue'
 import useToaster from '../composables/use-toaster'
-import AsyncButton from '../components/AsyncButton.vue'
 
 defineProps({})
 

demo-app/views/AppTabs.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-import DsfrTabs from '../../src/components/DsfrTabs/DsfrTabs.vue'
-import DsfrTabContent from '../../src/components/DsfrTabs/DsfrTabContent.vue'
-import DsfrCard from '../../src/components/DsfrCard/DsfrCard.vue'
 import DsfrAccordion from '../../src/components/DsfrAccordion/DsfrAccordion.vue'
+import DsfrCard from '../../src/components/DsfrCard/DsfrCard.vue'
+import DsfrTabContent from '../../src/components/DsfrTabs/DsfrTabContent.vue'
+import DsfrTabs from '../../src/components/DsfrTabs/DsfrTabs.vue'
 
 const tabListName = 'Liste d’onglet'
 const tabTitles = [

demo-app/views/SchemeSettings.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { onMounted, reactive, watchEffect } from 'vue'
-
-import DsfrRadioButtonSet from '@/components/DsfrRadioButton/DsfrRadioButtonSet.vue'
 import DsfrButton from '@/components/DsfrButton/DsfrButton.vue'
 
+import DsfrRadioButtonSet from '@/components/DsfrRadioButton/DsfrRadioButtonSet.vue'
 import { useScheme } from '@/composables'
 
+import { onMounted, reactive, watchEffect } from 'vue'
+
 const options = [
   {
     label: 'System',

demo-app/views/SideMenu.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import DsfrSideMenu from '@/components/DsfrSideMenu/DsfrSideMenu.vue'
 import { ref } from 'vue'
-import { useRoute } from 'vue-router'
 
-import DsfrSideMenu from '@/components/DsfrSideMenu/DsfrSideMenu.vue'
+import { useRoute } from 'vue-router'
 
 const buttonLabel = 'Dans cette rubrique'
 const headingTitle = 'Titre de la rubrique'

demo-app/views/SimpleModal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watchEffect } from 'vue'
 import DsfrModal from '@/components/DsfrModal/DsfrModal.vue'
-import type { Preferences, UseSchemeResult } from '@/composables/index'
 import { useScheme } from '@/composables/index'
-import lightThemeSvg from '@gouvfr/dsfr/dist/artwork/pictograms/environment/sun.svg'
 import darkThemeSvg from '@gouvfr/dsfr/dist/artwork/pictograms/environment/moon.svg'
+import lightThemeSvg from '@gouvfr/dsfr/dist/artwork/pictograms/environment/sun.svg'
 import systemThemeSvg from '@gouvfr/dsfr/dist/artwork/pictograms/system/system.svg'
+import { onMounted, reactive, ref, watchEffect } from 'vue'
+import type { Preferences, UseSchemeResult } from '@/composables/index'
 
 const isModalOpen = ref(false)
 const isThemeModalOpen = ref(false)

docs/guide/migrations.md

@@ -36,20 +36,20 @@ Il faudra enlever les références à `oh-vue-icons`, par exemple dans `main.ts`
 ::: code-group
 
 ```ts [main.ts]
+import { addIcons, OhVueIcon } from 'oh-vue-icons'
+import { createApp } from 'vue'
 import '@gouvfr/dsfr/dist/core/core.main.min.css'
 import '@gouvfr/dsfr/dist/component/component.main.min.css'
+
 import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
 import '@gouvminint/vue-dsfr/styles'
 
 import '@gouvfr/dsfr/dist/scheme/scheme.min.css'
-import '@gouvfr/dsfr/dist/utility/icons/icons.min.css'
-
-import { createApp } from 'vue'
-import { OhVueIcon, addIcons } from 'oh-vue-icons' // [!code --]
+import '@gouvfr/dsfr/dist/utility/icons/icons.min.css' // [!code --]
 
 import App from './App.vue'
-import router from './router/index'
-import * as icons from './icons' // [!code --]
+import * as icons from './icons'
+import router from './router/index' // [!code --]
 
 import './main.css'
 

docs/guide/pour-commencer.md

@@ -260,14 +260,14 @@ Voici ce que cela permet :
 ::: code-group
 
 ```ts [main.ts avec auto-imports]
+import App from './App.vue'
+import router from './router/index'
+
 import '@gouvfr/dsfr/dist/dsfr.main.min.css'
-import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
 
+import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
 import '@gouvminint/vue-dsfr/styles'
 
-import App from './App.vue'
-import router from './router/index'
-
 import './main.css'
 
 createApp(App) // createApp est autoimporté grâce au preset 'vue' dans vite.config.ts // [!code warning]

docs/recettes/toaster.md

@@ -34,9 +34,9 @@ Ce composant `AppToaster` sera ajouté une seule fois dans l’application : da
 
 ```vue [App.vue]
 <script setup lang="ts">
-import { ref } from 'vue'
 // (...)
-import AppToaster from '@/components/AppToaster.vue' // Import du composant AppToaster
+import AppToaster from '@/components/AppToaster.vue'
+import { ref } from 'vue' // Import du composant AppToaster
 // (...)
 </script>
 

eslint.config.js

@@ -69,4 +69,10 @@ export default antfu({
       'storybook/use-storybook-testing-library': 'error',
     },
   },
+  {
+    files: ['src/components/index.ts'],
+    rules: {
+      'perfectionist/sort-exports': 'off',
+    },
+  },
 ])