@ouestfrance/sipa-bms-ui 7.14.1

package/src/plugins/field/FieldComponent.vue

@@ -0,0 +1,208 @@
+<template>
+  <div :class="classes">
+    <div class="field__wrapper">
+      <span class="field__label">
+        <span class="field__label__title">{{ label }}</span>
+        <span v-if="required" class="field__label-required">*</span>
+        <span v-if="optional && !required" class="field__label-optional">
+          (Optionnel)
+        </span>
+        <BmsTooltip v-if="helperText" :tooltipText="helperText">
+          <span class="field__label-helper--icon">
+            <HelpCircle />
+          </span>
+        </BmsTooltip>
+      </span>
+
+      <span class="field__input">
+        <slot></slot>
+      </span>
+      <span ref="datalist">
+        <span class="field__datalist" :class="{ top: openTop }">
+          <slot name="datalist"></slot>
+        </span>
+      </span>
+    </div>
+
+    <div v-if="captions?.length" class="field__captions">
+      <div
+        v-for="caption in captions"
+        :key="getCaptionIdentifier(caption)"
+        class="information field__caption"
+      >
+        <BmsCaption :caption="caption" />
+      </div>
+    </div>
+    <div v-if="errors?.length" class="field__errors">
+      <div
+        v-for="error in computedErrors"
+        :key="error.label"
+        class="field__error"
+      >
+        <BmsCaption :caption="error" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ComputedRef, onMounted, ref, Ref } from 'vue';
+import { HelpCircle } from 'lucide-vue-next';
+import { BmsTooltip, convertStringToCaption, StatusType } from '@/index';
+import { useElementBounding, useWindowSize } from '@vueuse/core';
+import { Caption } from '@/models/caption.model';
+import BmsCaption from '@/components/feedback/BmsCaption.vue';
+
+interface Props {
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  helperText?: string;
+  errors?: string[] | Caption[];
+  captions?: string[] | Caption[];
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  optional: false,
+});
+
+const datalist: Ref<HTMLSpanElement | null> = ref<HTMLSpanElement | null>(null);
+const { y } = useElementBounding(datalist);
+
+const { height: windowHeight } = useWindowSize();
+
+const classes = computed(() => {
+  return `field${props.errors?.length ? ' is-error' : ''}${
+    props.disabled ? ' is-disabled' : ''
+  }`;
+});
+
+const computedErrors: ComputedRef<Caption[]> = computed(() => {
+  return !props.errors
+    ? []
+    : props.errors.map((e) => {
+        return {
+          ...convertStringToCaption(e),
+          mode: StatusType.Danger,
+        };
+      });
+});
+const datalistHeight: Ref<number | null> = ref<number | null>(null);
+
+// not a computed for ResizeObserver problem in cypress
+const setDataListHeight = () => {
+  const defaultDataListHeight = 150;
+  const datalistContent: Ref<HTMLElement | null> = ref<HTMLElement | null>(
+    datalist.value?.firstChild as HTMLElement,
+  );
+  const { height } = useElementBounding(datalistContent);
+  datalistHeight.value =
+    height.value !== 0 ? height.value : defaultDataListHeight;
+};
+
+onMounted(() => {
+  setDataListHeight();
+});
+
+const openTop = computed(() => {
+  if (!datalist.value) {
+    return false;
+  }
+  // can not open bottom try in top
+  return y.value + (datalistHeight.value ?? 0) > windowHeight.value;
+});
+
+const getCaptionIdentifier = (caption: string | Caption): string => {
+  return convertStringToCaption(caption).label;
+};
+</script>
+
+<style lang="scss">
+.field {
+  --field-border-color: var(--bms-grey-50);
+  --field-border-color-active: var(--bms-main-100);
+  --input-background-color: var(--bms-white);
+  --field-label-color: var(--bms-font-color);
+  background: transparent;
+
+  &__errors {
+    font-size: 14px;
+    color: var(--bms-red-75);
+  }
+
+  &__wrapper {
+    display: inline-block;
+    position: relative;
+    min-width: 24rem;
+    width: 100%;
+    background-color: transparent;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+
+    &__title {
+      font-size: 1em;
+      font-weight: bold;
+      color: var(--field-label-color);
+    }
+
+    &-helper--icon {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 0.5em;
+
+      width: 1em;
+      height: 1em;
+    }
+
+    &-required {
+      color: var(--bms-red-100);
+    }
+
+    &-optional {
+      font-style: italic;
+      font-size: 14px;
+      color: var(--bms-grey-75);
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &.is-error {
+    --field-label-color: var(--bms-danger-color);
+  }
+
+  &.is-disabled {
+    --field-label-color: var(--bms-grey-50);
+  }
+
+  &__datalist {
+    position: absolute;
+    display: block;
+    padding: 0;
+    margin: 0;
+    background: var(--bms-white);
+    width: 100%;
+    z-index: 100;
+    max-height: 300px;
+    overflow-y: auto;
+
+    &.top {
+      bottom: 60px;
+    }
+  }
+
+  &__input {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/src/plugins/field/FieldDatalist.stories.js

@@ -0,0 +1,35 @@
+import FieldDatalist from './FieldDatalist.vue';
+
+export default {
+  title: 'Composants/form/FieldDatalist',
+  component: FieldDatalist,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    FieldDatalist,
+  },
+  template: `
+    <FieldDatalist v-bind="args"/>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  options: ['toto', 'titi', 'tutu', 'tirlitititututatoooo'].map((i) => ({
+    label: i,
+    value: i,
+  })),
+};
+
+export const WithSelectedItem = Template.bind({});
+WithSelectedItem.args = {
+  currentSelectedItemIndex: 1,
+  options: ['toto', 'titi', 'tutu', 'tirlitititututatoooo'].map((i) => ({
+    label: i,
+    value: i,
+  })),
+};

package/src/plugins/field/FieldDatalist.vue

@@ -0,0 +1,68 @@
+<template>
+  <ul class="options-list" data-testid="select-options">
+    <li
+      v-for="(option, index) in options"
+      :key="index"
+      :data-testid="option.value"
+      :class="{
+        selected: index === currentSelectedItemIndex,
+      }"
+      @click.prevent="() => $emits('select', option.value)"
+    >
+      <slot name="option" :option="option">
+        {{ option.label === null ? 'N/A' : option.label }}
+      </slot>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  options: { label: string; value: any }[];
+  currentSelectedItemIndex?: number;
+}
+
+withDefaults(defineProps<Props>(), { currentSelectedItemIndex: -1 });
+
+const $emits = defineEmits<{ (e: 'select', option: any): void }>();
+</script>
+
+<style lang="scss" scoped>
+ul {
+  border-style: none;
+  border-radius: 0 0 4px 4px;
+  text-decoration: none;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  li:first-of-type {
+    border-top: 1px solid var(--bms-grey-10);
+  }
+
+  li:first-child {
+    border-top-left-radius: var(--bms-border-radius);
+    border-top-right-radius: var(--bms-border-radius);
+  }
+  li:last-child {
+    border-bottom-left-radius: var(--bms-border-radius);
+    border-bottom-right-radius: var(--bms-border-radius);
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.4em;
+    border: 1px solid var(--bms-grey-10);
+    border-top: none;
+    background-color: var(--bms-white);
+    min-height: 4rem;
+
+    &:hover,
+    &.selected {
+      background-color: var(--bms-grey-10);
+    }
+  }
+}
+</style>

package/src/plugins/field/index.ts

@@ -0,0 +1,31 @@
+import type { App, DirectiveBinding, Plugin } from 'vue';
+import FieldComponent from './FieldComponent.vue';
+
+function onFocus(binding: DirectiveBinding<any>, focusState: boolean) {
+  if (!binding?.value?.focus) {
+    return;
+  }
+
+  binding.value.focus(focusState);
+}
+
+export const field: Plugin = {
+  install: (app: App) => {
+    app.directive('field', {
+      mounted(el, binding) {
+        el.addEventListener('focus', () => {
+          onFocus(binding, true);
+        });
+        el.addEventListener('blur', () => {
+          onFocus(binding, false);
+        });
+      },
+      unmounted(el) {
+        el.removeEventListener('focus', () => {});
+        el.removeEventListener('blur', () => {});
+      },
+    });
+
+    app.component('field', FieldComponent);
+  },
+};

package/src/plugins/keycloak-auth-adapter/index.ts

@@ -0,0 +1,102 @@
+import Keycloak, { KeycloakConfig, KeycloakOnLoad } from 'keycloak-js';
+
+import type { App, InjectionKey, Ref } from 'vue';
+import { inject, ref } from 'vue';
+
+export interface KeycloakAuthAdapterOptions {
+  keycloakOptions: KeycloakConfig;
+  onLoad: KeycloakOnLoad;
+  refreshRate: number;
+  updateTokenMinValidity: number;
+  onTokenRefreshed: (_: string | undefined) => void;
+  onTokenRefreshFailed: (_: any) => void;
+  checkAccess: (keycloak: Keycloak) => boolean;
+}
+
+export type KeycloakAuthAdapterInitOptions = Pick<
+  KeycloakAuthAdapterOptions,
+  'keycloakOptions'
+> &
+  Partial<KeycloakAuthAdapterOptions>;
+
+export const KeycloakAuthAdapterInstance = Symbol() as InjectionKey<
+  Ref<Keycloak | undefined>
+>;
+
+export const keycloakAuthAdapterInit = (
+  options: KeycloakAuthAdapterInitOptions,
+): Promise<Ref<Keycloak | undefined>> => {
+  let token: string | undefined;
+
+  const keycloakRef = ref<Keycloak>();
+
+  return new Promise(async (resolve, reject) => {
+    const initOptions: KeycloakAuthAdapterOptions = Object.assign(
+      {},
+      {
+        onLoad: 'login-required',
+        refreshRate: 60000,
+        updateTokenMinValidity: 70,
+        checkLoginIframe: true,
+        onTokenRefreshed: () => {},
+        onTokenRefreshFailed: () => {},
+        checkAccess: () => true,
+      },
+      options,
+    );
+
+    try {
+      const keycloak = new Keycloak(initOptions.keycloakOptions);
+
+      const auth = await keycloak.init({
+        onLoad: initOptions.onLoad,
+        checkLoginIframe: false,
+      });
+      if (!auth) {
+        throw 'not-authorized';
+      }
+
+      token = keycloak.token;
+      keycloakRef.value = keycloak;
+
+      if (!initOptions.checkAccess(keycloak)) {
+        reject(keycloakRef);
+        return;
+      }
+
+      setInterval(() => {
+        keycloak
+          .updateToken(initOptions.updateTokenMinValidity)
+          .then((refreshed: boolean) => {
+            if (refreshed) {
+              token = keycloak.token;
+              keycloakRef.value = keycloak;
+              initOptions.onTokenRefreshed(token);
+            }
+          })
+          .catch((error) => {
+            initOptions.onTokenRefreshFailed(error);
+          });
+      }, initOptions.refreshRate);
+      resolve(keycloakRef);
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+
+export const useKeycloakAuthAdapter = () => {
+  const kcInstance = inject(KeycloakAuthAdapterInstance);
+
+  return {
+    auth: kcInstance,
+  };
+};
+
+export const keycloakAuthAdapter = {
+  install: (app: App, kcInstance: Ref<Keycloak | undefined>) => {
+    app.config.globalProperties.$auth = kcInstance;
+
+    app.provide(KeycloakAuthAdapterInstance, kcInstance);
+  },
+};

package/src/plugins/notifications/NotificationItem.stories.js

@@ -0,0 +1,60 @@
+import NotificationItem from '@/plugins/notifications/NotificationItem.vue';
+
+export default {
+  title: 'Plugins/Notification/NotificationItem',
+  component: NotificationItem,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    NotificationItem,
+  },
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+  <div style="display:flex">
+  <NotificationItem v-bind="args" />
+  </div>
+  `,
+});
+
+export const Success = Template.bind({});
+Success.args = {
+  notification: {
+    id: 'id0',
+    type: 'success',
+    text: 'This is a message',
+  },
+};
+
+export const SuccessDetails = Template.bind({});
+SuccessDetails.args = {
+  notification: {
+    id: 'id0',
+    type: 'success',
+    details: 'coucou',
+    text: 'This is a message',
+  },
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  notification: {
+    id: 'id0',
+    type: 'error',
+    text: 'This is a message',
+  },
+};
+
+export const ErrorDetails = Template.bind({});
+ErrorDetails.args = {
+  notification: {
+    id: 'id0',
+    type: 'error',
+    details: 'details',
+    text: 'This is a message',
+  },
+};

package/src/plugins/notifications/NotificationItem.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="getClass">
+    <div class="main-info">
+      <Check
+        class="bms-notification__icon"
+        v-if="notification.type === NotificationType.success"
+      />
+      <X class="bms-notification__icon" v-else />
+
+      <div class="bms-notification__content">{{ notification.text }}</div>
+
+      <BmsIconButton
+        class="bms-notification__close-button"
+        @click="closeNotification"
+      >
+        <Trash2 />
+      </BmsIconButton>
+    </div>
+    <div
+      v-if="notification.details"
+      class="details"
+      @click="emit('openDetails')"
+    >
+      Voir plus de détails
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check, Trash2, X } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { Notification, NotificationType } from './notification.model';
+import BmsIconButton from '@/components/button/BmsIconButton.vue';
+
+const props = defineProps<{
+  notification: Notification;
+}>();
+
+const emit = defineEmits(['close', 'openDetails']);
+
+const getClass = computed(() => {
+  return ['bms-notification', `bms-notification--${props.notification.type}`];
+});
+
+const closeNotification = () => {
+  emit('close');
+};
+</script>
+
+<style lang="scss" scoped>
+.bms-notification {
+  --notification-background-color: white;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: var(--bms-border-radius);
+  background-color: var(--notification-background-color);
+  color: white;
+  position: relative;
+  box-shadow: 0 4px 8px var(--bms-shadow-color);
+
+  .main-info {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    padding: 0.75em;
+    padding-right: 3em;
+  }
+
+  .details {
+    border-top: 1px solid white;
+    text-align: center;
+    padding: 0.5em;
+    border-radius: 0 0 var(--bms-border-radius) var(--bms-border-radius);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &--success {
+    --notification-background-color: var(--bms-success-color);
+  }
+
+  &--error {
+    --notification-background-color: var(--bms-danger-color);
+  }
+
+  &__icon {
+    display: block;
+    line-height: 1;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  :deep(.bms-notification__close-button) {
+    position: absolute;
+    right: 0.2em;
+    color: white;
+    &:hover {
+      color: var(--notification-background-color);
+    }
+  }
+}
+</style>