@ouestfrance/sipa-bms-ui 8.20.0 → 8.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.20.0",
+  "version": "8.21.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/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"

package/src/components/form/BmsMultiSelect.vue

@@ -5,7 +5,7 @@
     :model-value="modelValue"
     :open="isDatalistOpen"
     @select="onSelect"
-    @click="setFocus"
+    @click="onSelectClick"
   >
     <template #input>
       <div class="tags">
@@ -24,11 +24,8 @@
           v-model="searching"
           class="search"
           :disabled="disabled"
-          @focus="openDatalist"
-          @click="openDatalist"
+          @input="onInput"
           @keyup.down="openDatalist"
-          @input="openDatalist"
-          @keyup.backspace="onBackspace"
         />
       </div>
 
@@ -37,16 +34,8 @@
           <X class="icon icon-clear" @click.stop="clearInput" />
         </template>
         <template v-else>
-          <ChevronUp
-            v-if="isDatalistOpen"
-            class="icon icon-toggle-button"
-            @click="closeDatalist"
-          />
-          <ChevronDown
-            v-else
-            class="icon icon-toggle-button"
-            @click="openDatalist"
-          />
+          <ChevronUp v-if="isDatalistOpen" class="icon icon-toggle-button" />
+          <ChevronDown v-else class="icon icon-toggle-button" />
         </template>
       </span>
     </template>
@@ -67,7 +56,7 @@ import { InputOption } from '@/models';
 import { searchString } from '@/helpers';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, onKeyDown, onKeyUp } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[] | string[];
@@ -80,9 +69,16 @@ const props = withDefaults(defineProps<Props>(), {
   required: false,
 });
 
-const inputElement: Ref<HTMLElement | null> = ref(null);
+const emits = defineEmits<{
+  select: [option: InputOption | string];
+  input: [e: InputEvent];
+}>();
+
+const modelValue = defineModel<string[] | null>('modelValue', { default: [] });
 
+const inputElement: Ref<HTMLElement | null> = ref(null);
 const isDatalistOpen = ref(false);
+const searching = ref('');
 
 const closeDatalist = () => (isDatalistOpen.value = false);
 const openDatalist = () => {
@@ -91,13 +87,9 @@ const openDatalist = () => {
   }
 };
 
-const searching = ref('');
-
-const modelValue = defineModel<string[] | null>('modelValue', { default: [] });
-
-onClickOutside(inputElement, closeDatalist, {
-  ignore: ['.datalist-option', '.icon-toggle-button'],
-});
+const onBlur = () => {
+  closeDatalist();
+};
 
 const onBackspace = () => {
   if (
@@ -107,6 +99,21 @@ const onBackspace = () => {
   )
     modelValue.value.splice(-1);
 };
+onClickOutside(inputElement, closeDatalist, {
+  ignore: ['.datalist-option', '.icon-toggle-button'],
+});
+onKeyUp('Escape', closeDatalist);
+onKeyUp('Tab', closeDatalist);
+
+onKeyDown('Backspace', onBackspace);
+
+const onSelectClick = () => {
+  isDatalistOpen.value = !isDatalistOpen.value;
+};
+const onInput = (e: InputEvent) => {
+  emits('input', e);
+  openDatalist();
+};
 
 const setFocus = () => {
   if (inputElement.value) {
@@ -122,8 +129,8 @@ const onSelect = (option: InputOption | string) => {
   }
 
   searching.value = '';
+  emits('select', option);
   setFocus();
-  closeDatalist();
 };
 
 const removeOption = (value: string) => {

package/src/components/form/BmsSelect.vue

@@ -3,7 +3,7 @@
     v-bind="$props"
     :open="isDatalistOpen"
     @select="onSelect"
-    @click="setFocus"
+    @click="onSelectClick"
   >
     <template #input>
       <input
@@ -15,17 +15,11 @@
         :placeholder="placeholder"
         :required="required"
         :disabled="disabled"
-        @focus="openDatalist"
-        @click="openDatalist"
         @keyup.down="openDatalist"
       />
       <span class="icon-toggle-container">
-        <ChevronUp
-          v-if="isDatalistOpen"
-          class="icon-toggle-button"
-          @click="closeDatalist"
-        />
-        <ChevronDown v-else class="icon-toggle-button" @click="openDatalist" />
+        <ChevronUp v-if="isDatalistOpen" class="icon-toggle-button" />
+        <ChevronDown v-else class="icon-toggle-button" />
       </span>
     </template>
   </RawSelect>
@@ -33,12 +27,12 @@
 
 <script lang="ts" setup>
 import { ChevronDown, ChevronUp } from 'lucide-vue-next';
-import { computed, Ref, ref } from 'vue';
+import { computed, Ref, ref, watch } from 'vue';
 import _ from 'lodash';
 import { InputOption } from '@/models';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, onKeyUp } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
@@ -55,10 +49,13 @@ const props = withDefaults(defineProps<Props>(), {
   open: false,
 });
 
+const emits = defineEmits<{
+  select: [value: any];
+}>();
+
 const modelValue = defineModel<any>('modelValue', { required: true });
 
 const inputElement: Ref<HTMLElement | null> = ref(null);
-
 const isDatalistOpen = ref(props.open);
 
 const closeDatalist = () => {
@@ -71,13 +68,11 @@ const openDatalist = () => {
   }
 };
 
-const emits = defineEmits<{
-  select: [value: any];
-}>();
-
 onClickOutside(inputElement, closeDatalist, {
   ignore: ['.datalist-option', '.icon-toggle-button'],
 });
+onKeyUp('Escape', closeDatalist);
+onKeyUp('Tab', closeDatalist);
 
 const displayValue = computed(() => {
   const option = props.options.find((o) =>
@@ -100,6 +95,13 @@ const onSelect = (option: any) => {
   closeDatalist();
 };
 
+const onSelectClick = () => {
+  isDatalistOpen.value = !isDatalistOpen.value;
+  if (isDatalistOpen) {
+    setFocus();
+  }
+};
+
 defineExpose({
   setFocus,
 });