@ouestfrance/sipa-bms-ui 7.14.1

package/src/pages/List.stories.js

@@ -0,0 +1,88 @@
+import BmsContentPageLayout from '../components/layout/BmsContentPageLayout.vue';
+import BmsHeaderTitle from '../components/layout/BmsHeaderTitle.vue';
+import BmsTable from '../components/table/BmsTable.vue';
+import BmsBreadcrumb from '../components/navigation/BmsBreadcrumb.vue';
+import BmsButton from '../components/button/BmsButton.vue';
+import BmsShortLinkMenu from '../components/navigation/BmsShortLinkMenu.vue';
+
+export default {
+  components: { BmsShortLinkMenu, BmsButton, BmsBreadcrumb, BmsTable },
+  title: 'Pages/List',
+  component: BmsContentPageLayout,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BmsContentPageLayout,
+    BmsHeaderTitle,
+    BmsBreadcrumb,
+    BmsTable,
+    BmsButton,
+    BmsShortLinkMenu,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsContentPageLayout>
+        <template #header>
+          <BmsHeaderTitle title="Le Titre de la page" activity-url="/auditMe" documentation-url="/helpme">
+            <template #subtitle>Un complement à mon titre ?</template>
+            
+          </BmsHeaderTitle>
+        </template>
+        <template #breadcrumb>
+          <BmsBreadcrumb :breadcrumbs="args.breadcrumb"/>
+        </template>
+        <template #default>
+
+          <BmsTable :headers="args.headers" :items="args.items">
+            <template #alert-action>
+              <BmsButton :mode="StatusType.Danger">Supprimer</BmsButton>
+            </template>
+            <template #custom-actions>
+              <BmsButton>Action 1</BmsButton>
+              <BmsButton>Action 2</BmsButton>
+            </template>
+            <template #default="{ row }">
+            </template>
+          </BmsTable>
+        </template>
+      </BmsContentPageLayout>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  breadcrumb: [{ label: 'form', to: '/exposed' }, { label: 'list' }],
+};

package/src/plugins/confirm/index.ts

@@ -0,0 +1,109 @@
+import { App, createApp, defineComponent, h, inject, nextTick, ref } from 'vue';
+import BmsModal from '../../components/layout/BmsModal.vue';
+import { InjectionKey } from 'vue';
+import { NotificationInstance } from '@/plugins/notifications/notification.model';
+
+const createConfirmComponent = (
+  modalOptions: { question: string; title: string },
+  resolve: Function,
+  reject: Function,
+) => {
+  return defineComponent({
+    props: {
+      question: {
+        type: String,
+      },
+      title: {
+        type: String,
+      },
+    },
+    components: { BmsModal },
+    setup() {
+      const isActive = ref<boolean>(true);
+      const confirm = () => {
+        close();
+        return resolve();
+      };
+      const discard = () => {
+        close();
+        return reject();
+      };
+      const close = () => {
+        isActive.value = false;
+      };
+
+      return {
+        question: modalOptions.question,
+        title: modalOptions.title,
+        isActive,
+        confirm,
+        discard,
+      };
+    },
+    render() {
+      return h(
+        //@ts-ignore
+        BmsModal,
+        {
+          title: this.title,
+          modelValue: this.isActive,
+          submitAction: this.confirm,
+          cancelAction: this.discard,
+          submitLabel: 'Confirmer',
+          onClose: this.discard,
+        },
+        { default: () => h('p', this.question) },
+      );
+    },
+  });
+};
+export const ConfirmInstance = Symbol() as InjectionKey<NotificationInstance>;
+
+export const confirmPlugin = {
+  install(app: App) {
+    app.provide(
+      '$confirm',
+      async (question: string, title?: string): Promise<boolean> => {
+        let confirmApp: App | undefined;
+        return new Promise(async (higherResolve, higherReject) => {
+          try {
+            await new Promise(async (resolve, reject) => {
+              const component = createConfirmComponent(
+                { question, title: title || 'Confirmer' },
+                resolve,
+                reject,
+              );
+              await nextTick();
+              confirmApp = createApp(component);
+              confirmApp.mount('#confirm');
+            });
+            higherResolve(true);
+          } catch (e) {
+            higherResolve(false);
+          } finally {
+            if (confirmApp) {
+              confirmApp.unmount();
+            }
+          }
+        });
+      },
+    );
+    app.component('bms-confirm', {
+      render() {
+        return h('div', { id: 'confirm' });
+      },
+    });
+  },
+};
+
+export function useConfirm() {
+  const confirm = inject(
+    '$confirm',
+    (question: string, title?: string): Promise<boolean> => {
+      return Promise.resolve(true);
+    },
+  );
+  return {
+    confirm,
+  };
+}

package/src/plugins/feature-flipper/FeatureFlipper.vue

@@ -0,0 +1,23 @@
+<template>
+  <FeatureFlipperModal v-model="isModalOpened">
+    <template #additional><slot name="additional"></slot></template>
+  </FeatureFlipperModal>
+  <FeatureFlipperIndicator @click="openModal" />
+</template>
+
+<script lang="ts" setup>
+import FeatureFlipperModal from './FeatureFlipperModal.vue';
+import konami from '@/services/konami.service';
+import { ref } from 'vue';
+import FeatureFlipperIndicator from './FeatureFlipperIndicator.vue';
+
+const isModalOpened = ref(false);
+const openModal = () => {
+  isModalOpened.value = true;
+};
+
+// To be able to call featureFlipper() directly in console
+(window as any).featureFlipper = openModal;
+
+konami(openModal);
+</script>

package/src/plugins/feature-flipper/FeatureFlipperIndicator.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-if="isFeatureFlippingOn" class="feature-flip-indicator">
+    <BmsButton @click="emit('click')" :mode="StatusType.Danger">
+      <template #start>
+        <FlaskConicalIcon />
+      </template>
+      Dev Features
+    </BmsButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { FlaskConicalIcon } from 'lucide-vue-next';
+import { computed, ComputedRef } from 'vue';
+import BmsButton from '@/components/button/BmsButton.vue';
+import { useFeatureFlipper } from './featureFlipper.composable';
+import { StatusType } from '@/models';
+
+const { features } = useFeatureFlipper();
+const emit = defineEmits(['click']);
+
+const isFeatureFlippingOn: ComputedRef<boolean> = computed(
+  () =>
+    Object.keys(features.value).filter((name) => features.value[name]).length >
+    0,
+);
+</script>

package/src/plugins/feature-flipper/FeatureFlipperModal.vue

@@ -0,0 +1,68 @@
+<template>
+  <BmsModal
+    v-model="isModalOpened"
+    :buttons="[]"
+    title="Feature Flipper"
+    @close="onClose"
+  >
+    <div class="content">
+      <p v-if="Object.keys(features).length === 0">
+        Pas de fonctionnalité disponible pour le feature flipping
+      </p>
+      <div
+        v-else
+        v-for="name of Object.keys(features)"
+        class="feature"
+        :key="name"
+      >
+        <label :for="name">{{ name }}</label>
+        <input
+          type="checkbox"
+          :name="name"
+          :checked="isFeatureEnabled(name)"
+          @change="toggleFeature(name)"
+        />
+      </div>
+      <slot name="additional"></slot>
+    </div>
+  </BmsModal>
+</template>
+
+<script lang="ts" setup>
+import { BmsModal } from '@/index';
+import { computed } from 'vue';
+import { useFeatureFlipper } from './featureFlipper.composable';
+
+const { features, isFeatureEnabled, toggleFeature } = useFeatureFlipper();
+
+const props = defineProps<{ modelValue: boolean }>();
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: boolean): void;
+}>();
+
+const isModalOpened = computed({
+  get: () => props.modelValue,
+  set: (newModelValue) => {
+    emits('update:modelValue', newModelValue);
+  },
+});
+
+const onClose = () => {
+  isModalOpened.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.feature {
+  width: 30%;
+  display: flex;
+  justify-content: space-between;
+  margin: 8px;
+  font-weight: bold;
+}
+</style>

package/src/plugins/feature-flipper/featureFlipper.composable.spec.ts

@@ -0,0 +1,107 @@
+vi.mock('@/features.ts', () => ({
+  default: { feature1: true, feature2: false },
+}));
+
+import { useFeatureFlipper } from './featureFlipper.composable';
+import { describe, expect, it } from 'vitest';
+
+const initialFeatures = { feature1: true, feature2: false };
+
+describe('featureFlipper', () => {
+  const {
+    resetFeatures,
+    fetchFeatures,
+    features,
+    isFeatureEnabled,
+    toggleFeature,
+  } = useFeatureFlipper();
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.resetModules();
+    vi.stubGlobal('localStorage', {
+      getItem: vi.fn(),
+      setItem: vi.fn(),
+    });
+    resetFeatures(initialFeatures);
+  });
+
+  describe('fetchFeatures', () => {
+    it('should return value in localStorage', () => {
+      (localStorage.getItem as any).mockReturnValue(
+        '{"feature1": false, "feature2": true}',
+      );
+      fetchFeatures();
+      expect(features.value).toEqual({
+        feature1: false,
+        feature2: true,
+      });
+    });
+    it('should return defaultValues if localStorage invalid', () => {
+      (localStorage.getItem as any).mockReturnValue(
+        '{"feature1": false, "feature2": true',
+      );
+      fetchFeatures();
+      expect(features.value).toEqual({
+        feature1: true,
+        feature2: false,
+      });
+    });
+    it('should return value only present in initialValues', () => {
+      (localStorage.getItem as any).mockReturnValue(
+        '{"feature1": false, "feature2": true, "feature3": true}',
+      );
+      fetchFeatures();
+      expect(features.value).toEqual({
+        feature1: false,
+        feature2: true,
+      });
+    });
+    it('should return value with all in initialValues', () => {
+      (localStorage.getItem as any).mockReturnValue('{"feature1": false}');
+      fetchFeatures();
+      expect(features.value).toEqual({
+        feature1: false,
+        feature2: false,
+      });
+    });
+  });
+
+  describe('isFeatureEnabled', () => {
+    it('should return value in localStorage', () => {
+      (localStorage.getItem as any).mockReturnValue(
+        '{"feature1": false, "feature2": true}',
+      );
+      fetchFeatures();
+      expect(isFeatureEnabled('feature1')).toEqual(false);
+    });
+    it('should return defaultValue if not in localStorage', () => {
+      (localStorage.getItem as any).mockReturnValue('{"feature2": true}');
+      fetchFeatures();
+      expect(isFeatureEnabled('feature1')).toEqual(true);
+    });
+    it('should return false if does not exist', () => {
+      (localStorage.getItem as any).mockReturnValue('{"feature2": true}');
+      fetchFeatures();
+      expect(isFeatureEnabled('tartampion')).toEqual(false);
+    });
+    it('should return false if exist in localStorage but not in setup file', () => {
+      (localStorage.getItem as any).mockReturnValue('{"tartampion": true}');
+      fetchFeatures();
+      expect(isFeatureEnabled('tartampion')).toEqual(false);
+    });
+  });
+
+  describe('toggleFeature', () => {
+    it('should change feature in localStorage', () => {
+      toggleFeature('feature1');
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        'features',
+        '{"feature1":false,"feature2":false}',
+      );
+    });
+    it('should not do something if feature is not valid', () => {
+      toggleFeature('invalid');
+      expect(localStorage.setItem).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/plugins/feature-flipper/featureFlipper.composable.ts

@@ -0,0 +1,68 @@
+import { Ref, ref } from 'vue';
+import { FeatureFlipperFeatures } from './featureFlipper.model';
+
+const features: Ref<FeatureFlipperFeatures> = ref({});
+
+export const useFeatureFlipper = () => {
+  const isFeatureEnabled = (name: string): boolean => {
+    if (
+      import.meta.env.STORYBOOK === 'true' ||
+      import.meta.env.VITE_CYPRESS === 'true'
+    ) {
+      return true;
+    }
+    return features.value[name] || false;
+  };
+
+  const fetchFeatures = () => {
+    const storage = getFeaturesFromStorage();
+    features.value = Object.keys(features.value).reduce(
+      (accumulator, featureName) => {
+        accumulator[featureName] =
+          storage[featureName] === undefined
+            ? features.value[featureName]
+            : storage[featureName];
+        return accumulator;
+      },
+      {} as FeatureFlipperFeatures,
+    );
+  };
+
+  const setFeaturesInStorage = (features: FeatureFlipperFeatures) => {
+    localStorage.setItem('features', JSON.stringify(features));
+  };
+
+  const getFeaturesFromStorage = () => {
+    try {
+      return JSON.parse(localStorage.getItem('features') || '{}');
+    } catch (e) {
+      return {};
+    }
+  };
+
+  const toggleFeature = (featureName: string) => {
+    if (features.value[featureName] !== undefined) {
+      features.value[featureName] = !features.value[featureName];
+      setFeaturesInStorage(features.value);
+    }
+  };
+
+  const resetFeatures = (initFeatures: FeatureFlipperFeatures) => {
+    features.value = { ...initFeatures };
+  };
+
+  const initFeatures = (initFeatures: FeatureFlipperFeatures) => {
+    resetFeatures(initFeatures);
+    fetchFeatures();
+    setFeaturesInStorage(features.value);
+  };
+
+  return {
+    isFeatureEnabled,
+    toggleFeature,
+    fetchFeatures,
+    resetFeatures,
+    initFeatures,
+    features,
+  };
+};

package/src/plugins/feature-flipper/featureFlipper.model.ts

@@ -0,0 +1 @@
+export type FeatureFlipperFeatures = { [name: string]: boolean };

package/src/plugins/feature-flipper/index.ts

@@ -0,0 +1,15 @@
+import type { App, Plugin } from 'vue';
+import { useFeatureFlipper } from '@/plugins/feature-flipper/featureFlipper.composable';
+import { FeatureFlipperFeatures } from './featureFlipper.model';
+import FeatureFlipper from './FeatureFlipper.vue';
+
+export const featureFlipperPlugin: Plugin = {
+  install: (app: App, initialFeatures: FeatureFlipperFeatures) => {
+    const { initFeatures } = useFeatureFlipper();
+    initFeatures(initialFeatures);
+    app.component('bms-feature-flipper', FeatureFlipper);
+  },
+};
+
+export * from './featureFlipper.composable';
+export * from './featureFlipper.model';

package/src/plugins/field/FieldComponent.spec.ts

@@ -0,0 +1,34 @@
+import FieldComponent from '@/plugins/field/FieldComponent.vue';
+import { mount, shallowMount } from '@vue/test-utils';
+import { BmsCaption } from '@/index';
+
+describe('FieldComponent', () => {
+  it('should display label', async () => {
+    const wrapper = shallowMount(FieldComponent, {
+      slots: {
+        default: '<input type="text" />',
+      },
+      props: {
+        label: 'Set a value',
+      },
+    } as any);
+
+    expect(wrapper.text()).toContain('Set a value');
+  });
+
+  it('should display errors', async () => {
+    const wrapper = mount(FieldComponent, {
+      slots: {
+        default: '<input type="text" />',
+      },
+      props: {
+        errors: ['An error on the field', 'Seconds Errors'],
+      },
+    } as any);
+
+    const bmsCaptions = wrapper.findAllComponents(BmsCaption);
+    expect(bmsCaptions.length).toBe(2);
+    expect(bmsCaptions[0].html()).toContain('An error on the field');
+    expect(bmsCaptions[1].html()).toContain('Seconds Errors');
+  });
+});

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

@@ -0,0 +1,78 @@
+import FieldComponent from './FieldComponent.vue';
+import { Album, Flashlight } from 'lucide-vue-next';
+import { StatusType } from '@/models/status-type.model';
+
+export default {
+  title: 'Composants/form/FieldComponent',
+  component: FieldComponent,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    FieldComponent,
+    Flashlight,
+    Album,
+  },
+  template: `
+      <field v-bind="args">
+        <template #icon-start v-if="args.iconStart">
+          <Flashlight/>
+        </template>
+        <p>slot for my input here</p>
+        <template #icon-end v-if="args.iconEnd">
+          <Album/>
+        </template>
+      </field>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'My label',
+  captions: ['Helping text'],
+};
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+  label: 'My label',
+  errors: ['Error1', 'Error2'],
+  iconStart: true,
+  iconEnd: true,
+};
+export const WithCaptionsMode = Template.bind({});
+WithCaptionsMode.args = {
+  label: 'My label',
+  captions: [
+    { label: 'Caption for field 1', mode: StatusType.Default },
+    { label: 'Caption for field 2', mode: StatusType.Success },
+    { label: 'Caption for field 3', mode: StatusType.Warning },
+    { label: 'Caption for field 4', mode: StatusType.Danger },
+  ],
+};
+
+export const WithHelper = Template.bind({});
+WithHelper.args = {
+  label: 'My label',
+  helperText: 'This is a helper text',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  label: 'My label',
+  required: true,
+};
+
+export const Optional = Template.bind({});
+Optional.args = {
+  label: 'My label',
+  optional: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: 'My label',
+  errors: ['Error1', 'Error2'],
+};