Merge pull request #1495 from cloud-pi-native/fix/icon

Fix/icon

apps/client/Dockerfile

@@ -14,6 +14,7 @@ RUN pnpm install --ignore-scripts # --no-optional
 COPY --chown=node:root packages/ ./packages/
 RUN pnpm --filter @cpn-console/shared run build
 COPY --chown=node:root apps/client/ ./apps/client/
+RUN pnpm --filter client run icons
 ENTRYPOINT [ "pnpm", "--filter", "client", "run", "dev" ]
 
 

apps/client/package.json

@@ -5,13 +5,14 @@
   "private": false,
   "description": "cpn-console client",
   "scripts": {
-    "build": "run-s type-check build-only",
+    "build": "run-s icons type-check build-only",
     "build-only": "vite --mode=production build",
     "build:clean": "rimraf ./dist ./tsconfig.tsbuildinfo",
     "cypress:install": "cypress install",
     "dev": "vite --mode=development",
     "format": "NODE_OPTIONS='--no-warnings=ExperimentalWarning' eslint ./ --fix",
     "format:style": "stylelint ./src/**/*.{css,vue} --fix",
+    "icons": "vue-dsfr-icons -s scripts/icons.js -t src/icon-collections.ts",
     "integ": "vite --mode=integration",
     "kube:e2e": "CLIENT_HOST=console.dso.local CLIENT_PORT=80 cypress open",
     "lint": "run-p lint:*",
@@ -30,7 +31,8 @@
   "dependencies": {
     "@cpn-console/shared": "workspace:^",
     "@gouvfr/dsfr": "^1.13.0",
-    "@gouvminint/vue-dsfr": "^7.1.1",
+    "@gouvminint/vue-dsfr": "^8.0.0",
+    "@iconify-json/ri": "^1.2.2",
     "@iconify/vue": "^4.2.0",
     "@ts-rest/core": "^3.51.0",
     "@vue/tsconfig": "^0.7.0",
@@ -49,9 +51,9 @@
     "xbytes": "^1.9.1"
   },
   "optionalDependencies": {
-    "@cypress/vue": "^6.0.1",
-    "cypress": "^13.16.1",
-    "cypress-vite": "^1.5.0"
+    "@cypress/vue": "6.0.1",
+    "cypress": "13.16.1",
+    "cypress-vite": "1.5.0"
   },
   "devDependencies": {
     "@cpn-console/eslint-config": "workspace:^",

apps/client/scripts/create-collections.js

@@ -0,0 +1,18 @@
+#!env node
+import path from 'node:path'
+
+import { createCustomCollectionFile } from '@gouvminint/vue-dsfr/meta'
+import { Command } from 'commander'
+
+const program = new Command()
+
+program
+  .option('-s, --source <filepath>', 'Chemin vers le fichier de tuples [IconifyJSON, string[]]')
+  .option('-t, --target <filepath>', 'Chemin vers le fichier destination (src/icons.ts par défaut)')
+  .parse(process.argv)
+
+const options = program.opts()
+
+if (options.source && options.target) {
+  createCustomCollectionFile(path.resolve(process.cwd(), options.source), path.resolve(process.cwd(), options.target))
+}

apps/client/scripts/icons.js

@@ -0,0 +1,76 @@
+// @ts-check
+import { icons as riCollection } from '@iconify-json/ri'
+
+/**
+ * @type {string[]}
+ */
+const riIconNames = [
+  'account-circle-line',
+  'add-fill',
+  'add-line',
+  'admin-line',
+  'alert-fill',
+  'archive-fill',
+  'arrow-drop-left-line',
+  'arrow-drop-right-line',
+  'arrow-go-back-line',
+  'arrow-left-double-fill',
+  'arrow-right-double-fill',
+  'arrow-right-double-line',
+  'arrow-right-s-line',
+  'arrow-up-s-line',
+  'award-line',
+  'building-line',
+  'check-fill',
+  'checkbox-blank-circle-fill',
+  'checkbox-circle-line',
+  'clipboard-line',
+  'close-line',
+  'dashboard-line',
+  'delete-bin-7-line',
+  'exchange-line',
+  'eye-fill',
+  'eye-line',
+  'eye-off-fill',
+  'eye-off-line',
+  'filter-fill',
+  'file-download-line',
+  'filter-off-fill',
+  'flow-chart',
+  'focus-3-line',
+  'folder-user-line',
+  'folders-line',
+  'git-branch-line',
+  'github-fill',
+  'heart-pulse-line',
+  'key-2-line',
+  'key-2-line',
+  'loader-4-line',
+  'lock-fill',
+  'lock-unlock-fill',
+  'mail-line',
+  'microsoft-line',
+  'moon-clear-line',
+  'newspaper-line',
+  'pencil-fill',
+  'refresh-fill',
+  'restart-line',
+  'send-plane-line',
+  'server-line',
+  'settings-3-line',
+  'sound-module-line',
+  'stock-line',
+  'sun-line',
+  'team-line',
+  'tools-fill',
+  'upload-cloud-line',
+  'user-add-line',
+  'user-shared-2-line',
+]
+
+/**
+ * @type {[import('@iconify/vue').IconifyJSON, string[]][]}
+ */
+export const collectionsToFilter = [
+  [riCollection, riIconNames],
+]

apps/client/src/components/AdminRoleForm.vue

@@ -3,7 +3,6 @@ import { computed, onBeforeMount, ref } from 'vue'
 import type { AdminPermsKeys, LettersQuery, SharedZodError, User } from '@cpn-console/shared'
 import { ADMIN_PERMS, RoleSchema, adminPermsDetails, shallowEqual } from '@cpn-console/shared'
 import pDebounce from 'p-debounce'
-// @ts-ignore '@gouvminint/vue-dsfr' missing types
 import { getRandomId } from '@gouvminint/vue-dsfr'
 import SuggestionInput from './SuggestionInput.vue'
 import { useUsersStore } from '@/stores/users.js'

apps/client/src/components/EnvironmentForm.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref } from 'vue'
-// @ts-ignore '@gouvminint/vue-dsfr' missing types
 import { getRandomId } from '@gouvminint/vue-dsfr'
 import type {
   CleanedCluster,

apps/client/src/components/TeamCt.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue'
-// @ts-ignore '@gouvminint/vue-dsfr' missing types
 import { getRandomId } from '@gouvminint/vue-dsfr'
 import type {
   LettersQuery,

apps/client/src/main.ts

@@ -1,8 +1,10 @@
+import { addCollection } from '@iconify/vue'
 import '@gouvfr/dsfr/dist/dsfr.min.css'
 import '@gouvfr/dsfr/dist/utility/icons/icons.min.css'
 import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
 import '@gouvminint/vue-dsfr/styles'
 import 'vue3-json-viewer/dist/index.css'
+import collections from './icon-collections.js'
 
 // @ts-ignore 'vue3-json-viewer' missing types
 import JsonViewer from 'vue3-json-viewer'
@@ -27,3 +29,7 @@ createApp(App)
   .component('VIcon', VIcon)
   .use(JsonViewer)
   .mount('#app')
+
+for (const collection of collections) {
+  addCollection(collection)
+}

apps/client/src/utils/project-utils.ts

@@ -25,7 +25,6 @@ import type {
   projectRoleContract,
 } from '@cpn-console/shared'
 
-// @ts-ignore '@gouvminint/vue-dsfr' missing types
 import { getRandomId } from '@gouvminint/vue-dsfr'
 import {
   apiClient,

apps/client/src/views/admin/AdminProject.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { onBeforeMount, ref } from 'vue'
-// @ts-ignore '@gouvminint/vue-dsfr' missing types
 import { getRandomId } from '@gouvminint/vue-dsfr'
 import type { CleanedCluster, Environment, Log, PluginsUpdateBody, ProjectService, ProjectV2, Repo, Zone } from '@cpn-console/shared'
 import { bts } from '@cpn-console/shared'

apps/client/src/views/admin/ListOrganizations.vue

@@ -12,7 +12,6 @@ import {
   parseZodError,
   sortArrByObjKeyAsc,
 } from '@cpn-console/shared'
-// @ts-ignore '@gouvminint/vue-dsfr' missing types
 import { getRandomId } from '@gouvminint/vue-dsfr'
 import { useOrganizationStore } from '@/stores/organization.js'
 import { useSnackbarStore } from '@/stores/snackbar.js'

apps/client/src/views/admin/ListProjects.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { onBeforeMount, ref } from 'vue'
-// @ts-ignore '@gouvminint/vue-dsfr' missing types
 import { getRandomId } from '@gouvminint/vue-dsfr'
 import type { ArrayElement, Organization, ProjectV2, projectContract } from '@cpn-console/shared'
 import { bts, statusDict } from '@cpn-console/shared'

apps/client/src/views/projects/DsoTeam.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// @ts-ignore '@gouvminint/vue-dsfr' missing types
 import { getRandomId } from '@gouvminint/vue-dsfr'
 import type { ProjectV2 } from '@cpn-console/shared'
 import { ProjectAuthorized } from '@cpn-console/shared'

apps/client/vite.config.ts

@@ -9,7 +9,7 @@ import { VitePWA } from 'vite-plugin-pwa'
 import {
   vueDsfrAutoimportPreset,
   vueDsfrComponentResolver,
-} from '@gouvminint/vue-dsfr'
+} from '@gouvminint/vue-dsfr/meta'
 
 if (process.env.DOCKER !== 'true') {
   dotenv.config({ path: '.env' })

package.json

@@ -75,7 +75,8 @@
   "pnpm": {
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "@gouvminint/vue-dsfr": "patches/@gouvminint__vue-dsfr.patch"
     },
     "allowNonAppliedPatches": true
   },

patches/@gouvminint__vue-dsfr.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/vue-dsfr.js b/dist/vue-dsfr.js
+index c2edd7208cf11e99a8bc33f0abc41d6ef9b6a5c2..42810cd9a7090efb1dad5f3bd49261e4f500e0b9 100644
+--- a/dist/vue-dsfr.js
++++ b/dist/vue-dsfr.js
+@@ -22,7 +22,7 @@ const st = Symbol("accordions"), rt = Symbol("header"), He = Symbol("tabs"), he
+     adjust: s,
+     onTransitionEnd: (r) => {
+       var c, u;
+-      e.value = !1, (u = (c = o.value) == null ? void 0 : c.querySelector("a")) == null || u.focus(), o.value && r === !1 && o.value.style.removeProperty("--collapse-max-height");
++      e.value = !1, (u = (c = o.value) == null ? void 0 : c.querySelector("a")) == null, o.value && r === !1 && o.value.style.removeProperty("--collapse-max-height");
+     }
+   };
+ }, ma = "(prefers-color-scheme: dark)", ga = "vue-dsfr-scheme";