From 73fa90dd8aa0fe9c7fa8075ada31eea39af808e5 Mon Sep 17 00:00:00 2001 From: ArnaudTa <33383276+ArnaudTA@users.noreply.github.com> Date: Sat, 4 Jan 2025 18:27:26 +0100 Subject: [PATCH 1/2] fix: :zap: package icons in client refactor: :recycle: create our own getRandomId function --- apps/client/Dockerfile | 1 + apps/client/package.json | 12 +-- apps/client/scripts/create-collections.js | 18 +++++ apps/client/scripts/icons.js | 76 +++++++++++++++++++ apps/client/src/components/AdminRoleForm.vue | 1 - .../client/src/components/EnvironmentForm.vue | 1 - apps/client/src/components/TeamCt.vue | 1 - apps/client/src/icon-collections.ts | 4 + apps/client/src/main.ts | 6 ++ apps/client/src/utils/project-utils.ts | 1 - apps/client/src/views/admin/AdminProject.vue | 1 - .../src/views/admin/ListOrganizations.vue | 1 - apps/client/src/views/admin/ListProjects.vue | 1 - apps/client/src/views/projects/DsoTeam.vue | 1 - apps/client/vite.config.ts | 2 +- pnpm-lock.yaml | 33 +++++--- 16 files changed, 135 insertions(+), 25 deletions(-) create mode 100644 apps/client/scripts/create-collections.js create mode 100644 apps/client/scripts/icons.js create mode 100644 apps/client/src/icon-collections.ts diff --git a/apps/client/Dockerfile b/apps/client/Dockerfile index fa0dca9e6..b344f2668 100644 --- a/apps/client/Dockerfile +++ b/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" ] diff --git a/apps/client/package.json b/apps/client/package.json index a1c9b5a88..c6e3970f8 100644 --- a/apps/client/package.json +++ b/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:^", diff --git a/apps/client/scripts/create-collections.js b/apps/client/scripts/create-collections.js new file mode 100644 index 000000000..da1b4a6ef --- /dev/null +++ b/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 ', 'Chemin vers le fichier de tuples [IconifyJSON, string[]]') + .option('-t, --target ', '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)) +} diff --git a/apps/client/scripts/icons.js b/apps/client/scripts/icons.js new file mode 100644 index 000000000..cca950efd --- /dev/null +++ b/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], +] diff --git a/apps/client/src/components/AdminRoleForm.vue b/apps/client/src/components/AdminRoleForm.vue index d74300475..39628556a 100644 --- a/apps/client/src/components/AdminRoleForm.vue +++ b/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' diff --git a/apps/client/src/components/EnvironmentForm.vue b/apps/client/src/components/EnvironmentForm.vue index 46833f599..0869c050f 100644 --- a/apps/client/src/components/EnvironmentForm.vue +++ b/apps/client/src/components/EnvironmentForm.vue @@ -1,6 +1,5 @@