@ouestfrance/sipa-bms-ui 8.20.0 → 8.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.20.0",
+  "version": "8.22.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -30,16 +30,15 @@
     "url": "https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms.git"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.2",
+    "@chromatic-com/storybook": "^4.1.3",
     "@codemirror/lang-html": "6.4.11",
     "@codemirror/lang-json": "6.0.2",
     "@commitlint/cli": "20.1.0",
     "@commitlint/config-conventional": "20.0.0",
-    "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "10.0.8",
-    "@storybook/addon-links": "10.0.8",
-    "@storybook/vue3-vite": "10.0.8",
+    "@storybook/addon-docs": "10.1.6",
+    "@storybook/addon-links": "10.1.6",
+    "@storybook/vue3-vite": "10.1.6",
     "@types/lodash": "4.17.21",
     "@types/uuid": "11.0.0",
     "@vitejs/plugin-vue": "6.0.2",
@@ -61,15 +60,17 @@
     "lint-staged": "16.2.7",
     "lodash": "4.17.21",
     "lucide-vue-next": "0.554.0",
+    "msw": "^2.12.4",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
+    "remark-gfm": "^4.0.1",
     "sass": "1.94.2",
     "semantic-release": "25.0.2",
     "start-server-and-test": "2.1.3",
-    "storybook": "10.0.8",
-    "storybook-addon-pseudo-states": "10.0.8",
+    "storybook": "10.1.6",
+    "storybook-addon-pseudo-states": "10.1.6",
     "storybook-addon-tag-badges": "^3.0.2",
     "storybook-vue3-router": "^7.0.0",
     "typescript": "5.2.2",
@@ -118,9 +119,8 @@
     ]
   },
   "msw": {
-    "workerDirectory": "public"
-  },
-  "dependencies": {
-    "msw": "^2.3.1"
+    "workerDirectory": [
+      "public"
+    ]
   }
 }

package/src/assets/scss/_conf.scss

@@ -1,4 +1,3 @@
-@forward './formkit';
 @forward './global-variables.scss';
 @use 'sass:list';
 

package/src/assets/scss/app.scss

@@ -7,5 +7,4 @@ $customFontFamily: 'Roboto', Arial, Helvetica, sans-serif;
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
 @include sbu.styles;
-@include sbu.formkit;
 @include sbu.global-variables;

package/src/components/button/BmsAllButtons.stories.js

@@ -1,12 +1,12 @@
 import BmsButton from '@/components/button/BmsButton.vue';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
-import { Heart } from 'lucide-vue-next';
+import { Heart, ArrowLeft, ArrowRight } from 'lucide-vue-next';
 
 const types = ['primary', 'secondary', 'tertiary'];
 const modes = ['default', 'danger'];
 
 export default {
-  title: 'Composants/button',
+  title: 'Composants/button/Button',
   component: BmsButton,
 };
 
@@ -14,41 +14,68 @@ const AllButtonsTemplate = () => ({
   components: {
     BmsButton,
     BmsIconButton,
+    ArrowLeft,
+    ArrowRight,
     Heart,
   },
   setup() {
     return { types, modes };
   },
   template: `
-    <div style="display:grid;grid-template-columns:repeat(3, auto); gap:1em; justify-items: start;">
+    <div style="display:grid;grid-template-columns:repeat(4, auto); gap:1em; justify-items: start; align-items: center;">
       <template v-for="mode in modes" :key="mode">
         <template v-for="type in types">
-          <template v-for="to in [null,'/path']" :key="to">
-            <BmsButton :mode="mode" :type="type" :to="to">
-              Button {{ mode }} {{ type }} {{ to ? ' avec une URL ' : '' }}
+            <BmsButton :mode="mode" :type="type" small>
+              Button {{ mode }} {{ type }}  small
             </BmsButton>
-            <BmsButton :mode="mode" :type="type" class="_hover" :to="to">
-              Button {{ mode }} {{ type }}  {{ to ? ' avec une URL ' : '' }} hovered
+            <BmsButton :mode="mode" :type="type">
+              Button {{ mode }} {{ type }} 
             </BmsButton>
-            <BmsButton :mode="mode" :type="type" disabled :to="to">
-              Button {{ mode }} {{ type }} {{ to ? ' avec une URL ' : '' }} disabled
+            <BmsButton :mode="mode" :type="type" class="_hover">
+              Button {{ mode }} {{ type }}   hovered
+            </BmsButton>
+            <BmsButton :mode="mode" :type="type" disabled>
+              Button {{ mode }} {{ type }}  disabled
             </BmsButton>
-          </template>
         </template>
       </template>
+      
+      <BmsButton small>
+        <template #start> <ArrowLeft/> </template>
+          Button  small
+        <template #end> <ArrowRight/> </template>
+      </BmsButton>
+      <BmsButton>
+        <template #start> <ArrowLeft/> </template>
+          Button 
+        <template #end> <ArrowRight/> </template>
+      </BmsButton>
+      <BmsButton class="_hover">
+        <template #start> <ArrowLeft/> </template>
+          Button hovered
+        <template #end> <ArrowRight/> </template>
+      </BmsButton>
+      <BmsButton disabled>
+        <template #start> <ArrowLeft/> </template>
+          Button disabled
+        <template #end> <ArrowRight/> </template>
+      </BmsButton>
+
 
-      <BmsIconButton v-bind="args" :to="to">
-        <Heart />
-      </BmsIconButton>
-      <BmsIconButton v-bind="args" class="_hover" :to="to">
-        <Heart />
-      </BmsIconButton>
-      <BmsIconButton v-bind="args" disabled>
-        <Heart />
-      </BmsIconButton>
-      <BmsIconButton v-bind="args" disabled :to="to">
-        <Heart />
-      </BmsIconButton>
+      <template v-for="mode in modes" :key="mode">
+        <BmsIconButton v-bind="args" :mode="mode" small>
+          <Heart />
+        </BmsIconButton>
+        <BmsIconButton v-bind="args" :mode="mode">
+          <Heart />
+        </BmsIconButton>
+        <BmsIconButton v-bind="args" :mode="mode" class="_hover">
+          <Heart />
+        </BmsIconButton>
+        <BmsIconButton v-bind="args" :mode="mode" disabled>
+          <Heart />
+        </BmsIconButton>
+      </template>
     </div>
   `,
 });

package/src/components/button/BmsButton.stories.js

@@ -1,11 +1,21 @@
 import BmsButton from '@/components/button/BmsButton.vue';
-import { ArrowLeft, ArrowRight, Camera, Heart, Wand } from 'lucide-vue-next';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Camera,
+  Heart,
+  Wand,
+  Check,
+} from 'lucide-vue-next';
 import { StatusType } from '@/models';
 
 export default {
   title: 'Composants/button/Button',
   component: BmsButton,
   tags: ['with_useable_code'],
+  parameters: {
+    chromatic: { disable: true },
+  },
   argTypes: {
     type: {
       control: { type: 'select' },
@@ -25,78 +35,162 @@ export default {
 const Template = (args) => ({
   components: {
     BmsButton,
-    ArrowRight,
-    ArrowLeft,
-    Camera,
-    Heart,
-    Wand,
   },
   setup() {
     return { args };
   },
   template: `
-    <BmsButton v-bind="args">Save me</BmsButton>
-    <br>
-    <br>
-    <BmsButton v-bind="args">
-      Next page
-      <template #end><ArrowRight /></template>
-    </BmsButton>
-    <br>
-    <br>
-    <BmsButton  v-bind="args">
-      <template #start>
-        <Heart/>
-      </template>
-      Icons left & right
-      <template #end> 
-        <Wand/>
-      </template>
-      </BmsButton>
-      <br>
-      <br>
     <BmsButton v-bind="args">
-    <template #start><ArrowLeft /></template>
-    Retour
+      Save
     </BmsButton>
-    <br>
-  `,
+      `,
 });
 
-const WITH_DEFAULT_SLOT = {
-  start: '<Heart/>',
-  default: 'Mon texte',
-  end: '<Wand/>',
-};
+export const Playground = Template.bind({});
+Playground.args = {};
 
-export const Primary = Template.bind({});
-Primary.args = {
+// Stories for documentation examples (Do/Don't)
+export const DoSimple = Template.bind({});
+DoSimple.args = {
   type: 'primary',
-  ...WITH_DEFAULT_SLOT,
 };
-
-export const PrimaryDanger = Template.bind({});
-PrimaryDanger.args = {
-  ...WITH_DEFAULT_SLOT,
-  type: 'primary',
-  mode: StatusType.Danger,
+export const DoDanger = Template.bind({});
+DoDanger.args = {
+  mode: 'danger',
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  ...WITH_DEFAULT_SLOT,
-  type: 'secondary',
+export const DoSmall = Template.bind({});
+DoSmall.args = {
+  small: true,
 };
 
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  ...WITH_DEFAULT_SLOT,
-  type: 'tertiary',
-};
+// Do: Button with icon at start
+export const DoIconStart = () => ({
+  components: { BmsButton, Check },
+  template: `
+    <BmsButton type="primary">
+      <template #start><Check /></template>
+      Confirm
+    </BmsButton>
+      `,
+});
 
-export const Small = Template.bind({});
-Small.args = {
-  ...WITH_DEFAULT_SLOT,
-  type: 'primary',
-  small: true,
-};
+// Do: Button with icon at end
+export const DoIconEnd = () => ({
+  components: { BmsButton, ArrowRight },
+  template: `
+    <BmsButton type="primary">
+      Next
+      <template #end><ArrowRight /></template>
+    </BmsButton>
+  `,
+});
+
+// Do: Submit button
+export const DoSubmit = () => ({
+  components: { BmsButton },
+  template: `
+    <form>
+      <BmsButton type="primary" :submit="true">Submit form</BmsButton>
+    </form>
+  `,
+});
+
+// Don't: Long labels
+export const DontLongLabel = () => ({
+  components: { BmsButton },
+  template:
+    '<BmsButton type="primary">Click here to save your changes to the document</BmsButton>',
+});
+
+export const DoShortLabel = () => ({
+  components: { BmsButton },
+  template: '<BmsButton type="primary">Save changes</BmsButton>',
+});
+
+// Don't: Multiple primary buttons
+export const DontMultiplePrimary = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Save</BmsButton>
+      <BmsButton type="primary">Cancel</BmsButton>
+      <BmsButton type="primary">Delete</BmsButton>
+    </div>
+  `,
+});
+
+export const DoOnePrimary = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Save</BmsButton>
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="secondary">Delete</BmsButton>
+    </div>
+  `,
+});
+
+// Don't: Too many icons
+export const DontTooManyIcons = () => ({
+  components: { BmsButton, Heart, Wand, Check, ArrowRight },
+  template: `
+    <BmsButton type="primary">
+      <template #start><Heart /><Wand /></template>
+      Save changes
+      <template #end><Check /><ArrowRight /></template>
+    </BmsButton>
+  `,
+});
+
+export const DoOneIcon = () => ({
+  components: { BmsButton, ArrowRight },
+  template: `
+    <BmsButton type="primary">
+      <template #end><ArrowRight /></template>
+      Next
+    </BmsButton>
+  `,
+});
+
+// Don't: Generic labels
+export const DontGenericLabel = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Click here</BmsButton>
+      <BmsButton type="primary">Submit</BmsButton>
+    </div>
+  `,
+});
+
+export const DoSpecificLabel = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Save changes</BmsButton>
+      <BmsButton type="primary">Confirm order</BmsButton>
+    </div>
+  `,
+});
+
+// Don't: Primary for cancel
+export const DontPrimaryForCancel = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Cancel</BmsButton>
+      <BmsButton type="secondary">Save</BmsButton>
+    </div>
+  `,
+});
+
+export const DoPrimaryForSave = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="primary">Save</BmsButton>
+    </div>
+  `,
+});

package/src/components/feedback/BmsGhost.stories.js

@@ -0,0 +1,60 @@
+import BmsGhost from './BmsGhost.vue';
+
+export default {
+  title: 'Composants/feedback/Ghost',
+  component: BmsGhost,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsGhost,
+  },
+  data() {
+    return { args };
+  },
+  template: `
+    <div 
+      :style="{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        padding: '1em',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        userSelect: 'none',
+        cursor: 'pointer'
+      }"
+      @pointerdown="args.modelValue = !args.modelValue"
+    >
+      <p>Cliquez pour faire apparaître/Disparaître le fantôme</p>
+    </div>
+    <BmsGhost
+      v-model="args.modelValue"
+      :opacity-when-visible="args.opacityWhenVisible"
+    >
+      <div
+        :style="{
+          background: 'darkslategray',
+          color: 'white',
+          padding: '1em',
+          borderRadius: '8px',
+        }"
+      >
+        <h3 :style="{
+          margin: 0,
+          color: 'white',
+        }">Bonjour !</h3>
+        <p style="margin: 0">Je suis un fantôme</p>
+      </div>
+    </BmsGhost>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: false,
+  opacityWhenVisible: 0.6,
+};

package/src/components/feedback/BmsGhost.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+interface Props {
+  opacityWhenVisible?: number;
+}
+
+const SCREEN_MARGIN = 10;
+
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
+
+const visible = defineModel<boolean>({
+  default: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  opacityWhenVisible: 0.8,
+});
+
+const ghost = ref<HTMLElement | null>(null);
+const x = ref<number>(0);
+const y = ref<number>(0);
+
+onBeforeMount(() => {
+  document.addEventListener('pointermove', onPointerMove);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointermove', onPointerMove);
+});
+
+const onPointerMove = (e: PointerEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  updateGhost(e.clientX, e.clientY);
+};
+
+const updateGhost = (posX: number, posY: number) => {
+  if (!ghost.value) return;
+
+  const rect = ghost.value.getBoundingClientRect();
+  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;
+
+  //Update position
+  x.value = Math.max(
+    Math.min(posX, screenWidth - rect.width - SCREEN_MARGIN),
+    SCREEN_MARGIN,
+  );
+  y.value = Math.max(
+    Math.min(posY, screenHeight - rect.height - SCREEN_MARGIN),
+    SCREEN_MARGIN,
+  );
+};
+</script>
+
+<template>
+  <div
+    ref="ghost"
+    aria-hidden="true"
+    class="bms-ghost"
+    :style="{
+      '--ghost-x': `${x}px`,
+      '--ghost-y': `${y}px`,
+      opacity: visible ? props.opacityWhenVisible : 0,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bms-ghost {
+  position: fixed;
+  top: var(--ghost-y, 0);
+  left: var(--ghost-x, 0);
+  z-index: 1000;
+
+  pointer-events: none;
+  user-select: none;
+  transition: opacity 0.2s ease-in-out;
+}
+</style>

package/src/components/feedback/BmsTooltip.vue

@@ -5,6 +5,7 @@
       :visible="showToolTip && activated"
       :direction="direction"
       :getAnchorElementValues="getAnchorElementValues"
+      :class="classes"
     >
       <slot name="tooltipText">
         {{ tooltipText }}
@@ -26,9 +27,12 @@ import {
   MaybeElementRef,
   useElementVisibility,
 } from '@vueuse/core';
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import UiTooltip from './UiTooltip.vue';
 
+import { useAttrs } from 'vue';
+const attrs = useAttrs();
+
 const tooltip = ref(null);
 const tooltipAnchor = ref<Element>();
 const showToolTip = ref(true);
@@ -51,6 +55,16 @@ withDefaults(
   },
 );
 
+const classes = computed(() => {
+  const parentClasses = attrs.class as string | undefined;
+  return (
+    parentClasses
+      ?.split(' ')
+      .map((cls) => `${cls}__bms-tooltip`)
+      .join(' ') ?? ''
+  );
+});
+
 const isUnderOverlay = (): boolean => {
   const overlays = Array.from(document.getElementsByClassName('overlay'));
   if (overlays.length === 0) {

package/src/components/feedback/UiTooltip.vue

@@ -25,6 +25,9 @@ const calculatedTooltipTransform: Ref<string> = ref<string>('none');
 const windowSize = useWindowSize();
 const { getTooltipTranslatePosition } = useTooltipHelper();
 
+import { useAttrs } from 'vue';
+const attrs = useAttrs();
+
 const props = withDefaults(
   defineProps<{
     visible?: boolean;
@@ -61,7 +64,8 @@ const anchorElement = ref<
 >(undefined);
 
 const classes = computed(
-  () => `bms-tooltip__text bms-tooltip__text--${props.direction}`,
+  () =>
+    `bms-tooltip__text bms-tooltip__text--${props.direction} ${attrs.class ? attrs.class : ''}`,
 );
 
 const setTooltipPosition = async () => {
@@ -136,6 +140,10 @@ const style = computed(() => {
   transform: var(--bms-tooltip-transform);
   overflow-wrap: break-word;
 
+  &.floating-window__expand-btn__bms-tooltip {
+    z-index: calc(var(--bms-z-index-modal) + 1);
+  }
+
   &::before {
     content: '';
     position: absolute;

package/src/components/form/BmsFilePicker.stories.js

@@ -32,7 +32,12 @@ const Template = (args) => ({
 });
 
 export const Empty = Template.bind({});
-Empty.args = { modelValue: [], limit: 5 };
+Empty.args = {
+  modelValue: [],
+  limit: 5,
+  dragOverMessage: 'Déposer vos fichiers ici',
+  dragOffMessage: 'Glissez votre fichier ici ou cliquez pour parcourir',
+};
 
 export const WithFiles = Template.bind({});
 WithFiles.args = {

package/src/components/form/BmsFilePicker.vue

@@ -7,9 +7,16 @@ const files: Ref<File[] | undefined> = ref();
 const isDragOver = ref(false);
 
 const props = withDefaults(
-  defineProps<{ modelValue?: File[]; limit: number }>(),
+  defineProps<{
+    dragOverMessage?: string;
+    dragOffMessage?: string;
+    modelValue?: File[];
+    limit: number;
+  }>(),
   {
     limit: 10,
+    dragOverMessage: 'Déposer votre image ici',
+    dragOffMessage: 'Glissez votre image ici ou cliquez pour parcourir',
   },
 );
 
@@ -101,10 +108,8 @@ function onDeleteFile(file: File) {
       @dragover.prevent
     >
       <label class="file-upload__label">
-        <template v-if="isDragOver">Déposer votre image ici</template>
-        <template v-else
-          >Glissez votre image ici ou cliquez pour parcourir</template
-        >
+        <template v-if="isDragOver">{{ dragOverMessage }}</template>
+        <template v-else>{{ dragOffMessage }}</template>
         <input
           data-testid="file-upload-input-file"
           type="file"