Merge pull request #561 from dnum-mi/develop

Develop

.eslintrc.js

@@ -1,21 +1,39 @@
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
   root: true,
   globals: {
     defineEmits: 'readonly',
     defineProps: 'readonly',
   },
   env: {
+    'vue/setup-compiler-macros': true,
     node: true,
   },
-  extends: ['plugin:vue/vue3-recommended', '@vue/standard', 'plugin:storybook/recommended'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/standard',
+    'plugin:storybook/recommended',
+  ],
+  parser: 'vue-eslint-parser',
   parserOptions: {
-    parser: '@babel/eslint-parser',
+    ecmaVersion: 2020,
+    parser: '@typescript-eslint/parser',
   },
+  plugins: [
+    'vue',
+    'html',
+  ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'comma-dangle': [2, 'always-multiline'],
     'no-irregular-whitespace': 1,
+    '@typescript-eslint/ban-ts-comment': [
+      'error',
+      { 'ts-ignore': 'allow-with-description' },
+    ],
   },
   overrides: [
     {
@@ -34,7 +52,12 @@ module.exports = {
       },
     },
     {
-      files: ['**/src/**/*.e2e.{j,t}s?(x)'],
+      files: [
+        'cypress/support/*.{js,ts,jsx,tsx}',
+        'cypress/integration/*.{spec,e2e}.{js,ts,jsx,tsx}',
+        'src/**/*.ct.{js,ts,jsx,tsx}',
+        '**/src/**/*.e2e.{j,t}s?(x)',
+      ],
       env: {
         'cypress/globals': true,
       },

.gitignore

@@ -319,3 +319,5 @@ $RECYCLE.BIN/
 *.lnk
 
 # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode,intellij,windows,macos,linux
+stats.html
+types/

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "*.{vue,ts}": "npm run lint:staged"
+}

ci/check-exports.mjs

@@ -18,10 +18,10 @@ const projectFn = component => 'export { default as ' + path.basename(component,
 const correctComponentList = sfcs.map(projectFn).sort()
 const correctString = correctComponentList.join('\n') + '\n'
 
-const srcIndexFullpath = getNormalizedDir('../src/components') + path.sep + 'index.js'
+const srcIndexFullpath = getNormalizedDir('../src/components') + path.sep + 'index.ts'
 const typesIndexFullpath = getNormalizedDir('../types/components') + path.sep + 'index.d.ts'
 
-const index = await readFile(getNormalizedDir('../src/components') + '/index.js')
+const index = await readFile(getNormalizedDir('../src/components') + '/index.ts')
 const currentFileContent = index.toString()
 
 if (currentFileContent !== correctString) {

cypress.config.ts

@@ -4,10 +4,10 @@ export default defineConfig({
   video: false,
 
   component: {
-    setupNodeEvents (on, config) {},
+    // setupNodeEvents (on, config) {},
     viewportHeight: 500,
     viewportWidth: 1000,
-    specPattern: 'src/**/*.e2e.js*',
+    specPattern: 'src/**/*.e2e.{js,ts}*',
 
     devServer: {
       framework: 'vue',
@@ -16,7 +16,7 @@ export default defineConfig({
   },
 
   e2e: {
-    setupNodeEvents (on, config) {
+    setupNodeEvents (/* on, config */) {
       // implement node event listeners here
     },
   },

src/demo-app/App.vue → demo-app/App.vue

@@ -1,11 +1,11 @@
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import DsfrHeader from '../components/DsfrHeader/DsfrHeader.vue'
-import DsfrNavigation from '../components/DsfrNavigation/DsfrNavigation.vue'
-import DsfrSkipLinks from '../components/DsfrSkipLinks/DsfrSkipLinks.vue'
-import DsfrBreadcrumb from '../components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
+import DsfrHeader from '../src/components/DsfrHeader/DsfrHeader.vue'
+import DsfrNavigation from '../src/components/DsfrNavigation/DsfrNavigation.vue'
+import DsfrSkipLinks from '../src/components/DsfrSkipLinks/DsfrSkipLinks.vue'
+import DsfrBreadcrumb from '../src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
 
 const route = useRoute()
 const currentPage = ref('Home')
@@ -81,6 +81,10 @@ const navItems = [
     to: { name: 'Alertes' },
     text: 'Alertes & Bandeau',
   },
+  {
+    to: { name: 'MiseEnAvant' },
+    text: 'Mise en Avant',
+  },
 ]
 </script>
 
@@ -94,6 +98,7 @@ const navItems = [
       show-search
       placeholder="Rechercher placeholder"
     />
+
     <div class="fr-container">
       <DsfrNavigation
         :nav-items="navItems"

src/demo-app/main.js → demo-app/main.js

@@ -12,7 +12,7 @@ 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.js'
+import VueDsfr from '@/index'
 import router from './router.js'
 
 import App from './App.vue'

src/demo-app/router.js → demo-app/router.js

@@ -7,6 +7,7 @@ import SchemeSettings from './views/SchemeSettings.vue'
 import LanguageSelector from './views/LanguageSelector.vue'
 import AppForm from './views/AppForm.vue'
 import SimpleModal from './views/SimpleModal.vue'
+import CalloutTest from './views/CalloutTest.vue'
 
 export const routes = [
   { path: '/', name: 'Home', component: AppHome },
@@ -16,6 +17,7 @@ export const routes = [
   { path: '/languages', name: 'Languages', component: LanguageSelector },
   { path: '/settings', name: 'Settings', component: SchemeSettings },
   { path: '/alerts', name: 'Alertes', component: AppAlerts },
+  { path: '/callout', name: 'MiseEnAvant', component: CalloutTest },
 ]
 
 export default createRouter({

src/demo-app/views/AppAccordions.vue → demo-app/views/AppAccordions.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { ref } from 'vue'
 
-import DsfrAccordion from '../components/DsfrAccordion/DsfrAccordion.vue'
-import DsfrAccordionsGroup from '../components/DsfrAccordion/DsfrAccordionsGroup.vue'
+import DsfrAccordion from '@/components/DsfrAccordion/DsfrAccordion.vue'
+import DsfrAccordionsGroup from '@/components/DsfrAccordion/DsfrAccordionsGroup.vue'
 
 const accordionTitle = 'Titre de l’accordéon'
 const expandedId = ref(undefined)

demo-app/views/CalloutTest.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+const counter = ref(0)
+
+const button = {
+  label: 'Plus de patates !',
+  icon: 'ri-add-line',
+  onClick () {
+    counter.value += 1
+  },
+}
+</script>
+
+<template>
+  <DsfrCallout
+    :button="button"
+  />
+  {{ counter }} patates
+</template>

src/demo-app/views/SchemeSettings.vue → demo-app/views/SchemeSettings.vue

@@ -1,10 +1,10 @@
 <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 DsfrButton from '@/components/DsfrButton/DsfrButton.vue'
 
-import { useScheme } from '../../composables.js'
+import { useScheme } from '@/composables'
 
 const options = [
   {

src/demo-app/views/SimpleModal.vue → demo-app/views/SimpleModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import DsfrModal from '../../components/DsfrModal/DsfrModal.vue'
+import DsfrModal from '@/components/DsfrModal/DsfrModal.vue'
 
 const isModalOpen = ref(false)
 const displayAlert = ref(false)

index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/demo-app/main.js"></script>
+    <script type="module" src="/demo-app/main.js"></script>
   </body>
 </html>