@ouestfrance/sipa-bms-ui 7.14.1

package/README.md

@@ -0,0 +1,280 @@
+# sipa-bms-ui
+
+Librairie de composants et plugins VueJS pour les projets de l'équipe BMS du groupe Sipa. Créée et maintenue par l'équipe BMS.
+
+## Installation
+
+Installer d'abord la librairie avec votre package manager préféré :
+
+```
+npm i -D sipa-bms-ui
+```
+
+> Attention, cette librairie n'est pas compatible Vue 2 et n'embarque pas le runtime de Vue. Il faut que votre application importe elle-même Vue 3.
+
+> Autre pré-requis: Utiliser vue-router comme router par défaut
+
+## Theming
+
+Il faut ajouter le CSS des composants qui a été extrait de manière globale en ajoutant à votre `main.js` ou `main.ts` la ligne suivante :
+
+```typescript
+import 'sipa-bms-ui/dist/sipa-bms-ui.css';
+```
+
+## Utilisation
+
+Deux modes d'instanciations sont disponibles pour les composants de la librairie. En mode composant par composant (on-demand) ou de manière globale. Il est recommandé d'utiliser le mode _on demand_ pour avoir des **bundle** plus petit.
+
+### Utilisation en local
+
+Pour utiliser une version non-publiée de la lib, il faut builder la librairie et faire référence au dossier de la librairie sur le produit. Ensuite, il faut lancer un `npm install` pour mettre à jour les dépendances. Ensuite, à chaque build futur, les changements seront impactés.
+
+Dans la librairie
+
+```
+npm run build
+```
+
+Dans le backoffice
+
+```
+  "devDependencies": {
+    "sipa-bms-ui": "file:../platform-library-vuejs-bms",
+  }
+```
+
+### Méthode _on-demand_ tree-shakeable
+
+À l'intérieur de votre composant, importer ce que vous souhaitez depuis le paquet `sipa-bms-ui` :
+
+```vue
+<script setup lang="ts">
+import { BmsButton } from 'sipa-bms-ui';
+</script>
+
+<template>
+  <BmsButton></BmsButton>
+</template>
+```
+
+Le coût minimum de la lib est d'environ 900 ko, le tree shaking intervient au delà de cette limite.
+
+### Méthode globale
+
+Pour la méthode globale, dans votre fichier de montage, il faut importer et utiliser la méthode `createBmsUi()` :
+
+```typescript
+import { createApp } from 'vue';
+import { createBmsUi } from 'sipa-bms-ui';
+import App from './App.vue';
+
+createApp(App).use(createBmsUi()).mount('#app');
+```
+
+### Les plugins
+
+Les plugins suivants sont pour le moment disponibles sur la librairie :
+
+- `field` : gérer des champs de formulaires très simplistes
+- `notifications` : notifications en mode _toast_.
+- `confirm` : modale de confirmation qui renvoie une promesse
+- `router-history` : sauvegarde les étapes de la navigation
+- `feature-flipping` : gère un feature flipping côté client
+- `runtime-env` : permet d'accéder aux variables d'environnement au runtime
+- `keycloak-auth-adapter`: permet de configurer la connexion à Keycloak
+
+Pour les instancier, il faut les importer et les appeler comme n'importe quel plugin Vue.
+Certains composants ne seront pas fonctionnels sans (ex: field pour les champs de formulaire)
+
+```typescript
+import { createApp } from 'vue';
+import {
+  createBmsUi,
+  field,
+  notifications,
+  confirmPlugin,
+  routerHistoryPlugin,
+  featureFlipperPlugin,
+} from 'sipa-bms-ui';
+import App from './App.vue';
+
+createApp(App)
+  .use(createBmsUi())
+  .use(field)
+  .use(notifications)
+  .use(confirmPlugin)
+  .use(routerHistoryPlugin)
+  .use(featureFlipperPlugin, { featureA: false })
+  .mount('#app');
+```
+
+#### Field
+
+Utilisation du plugin field dans un template :
+
+```html
+<field>
+  <template #default="scope">
+    <input type="text" v-field="scope" v-model="message" />
+  </template>
+</field>
+```
+
+#### notifications
+
+Utilisation du plugin notification :
+
+Dans le composant racine, tel que App.vue ou autre
+
+```html
+<bms-notifications />
+```
+
+```typescript
+import { useNotifications } from 'sipa-bms-ui';
+
+const { success, error } = useNotifications();
+
+const onClickOnButtonOrAfterFormSubmit = () => {
+  // (text, time). Si 0, dismiss manuel.
+  success('This is a success', 6000);
+};
+
+const onErrorOfSomething = () => {
+  // même signature que success
+  error('This is an error');
+};
+```
+
+#### confirm
+
+Utilisation du plugin confirm :
+
+Dans le composant racine, tel que App.vue ou autre
+
+```html
+<bms-confirm />
+```
+
+```typescript
+import { useConfirm } from 'sipa-bms-ui';
+
+const { confirm } = useConfirm();
+
+const onNeedToConfirmAction = async () => {
+  if (await confirm(`Question à poser à l'utilisateur`)) {
+    // After, the user has confirmed
+  } else {
+    // user has closed or cancelled the operation
+  }
+};
+```
+
+#### Router History
+
+Utilisation du plugin router-history :
+
+Dans le composant racine, tel que App.vue ou autre
+
+```html
+<bms-router-history />
+```
+
+Cela donne accès au composable `useRouterHistory` et à l'utilisation du `BmsBackButton`
+
+#### Feature Flipper
+
+Ce plugin donne accès à un `debug` mode, où le développeur ou un administrateur peut activer / désactiver des fonctionnalités cachées.
+
+Lors de l'installation du plugin, lui donner les features qui sont valables avec la valeur par défaut.
+
+```typescript
+app.use(featureFlipperPlugin, { featureA: false });
+```
+
+Après un [Konami Code](https://fr.wikipedia.org/wiki/Code_Konami), une modal permet de changer les valeurs de ces features.
+
+Ces valeurs sont stockées dans le localStorage.
+
+Si des valeurs sont activées, un bandeau indique que c'est le cas et permet de rouvrir la modal.
+
+Dans les composants, le composable `useFeatureFlipper` expose la méthode `isFeatureEnabled(featureName)` pour vérifier ces valeurs.
+
+#### Runtime Env
+
+Ce plugin permet d'accéder à des variables d'environnement déclarées dans un fichier env.json. Cela permet de se baser sur ces valeurs, tout en les typant
+
+env.json
+
+```typescript
+{
+  "API_URL": "http://localhost:3000"
+}
+```
+
+main.ts
+
+```typescript
+import { createApp } from 'vue';
+import { createRuntimeEnv, fetchRuntimeEnv } from 'sipa-bms-ui';
+import App from './App.vue';
+
+const app = createApp(App);
+
+fetchRuntimeEnv<{ MY_URL: string }>().then((env) => {
+  app.use(createRuntimeEnv(env));
+
+  app.mount('#app');
+});
+```
+
+MyComponent.vue
+
+```typescript
+import { useRuntimeEnv } from 'sipa-bms-ui';
+
+const env = useRuntimeEnv();
+console.log(env.MY_URL);
+```
+
+### Keycloak adapter
+
+La librairie expose une méthode keycloakAuthAdapterInit qui permet d'initialiser un objet Keycloak, qui est ensuite injecté avec le plugin keycloakAuthAdapter, et consultable via le composable useKeycloakAuthAdapter.
+
+Voici un exemple d'initialisation d'une authentification Keycloak.
+
+main.ts
+
+```typescript
+import { keycloakAuthAdapter, keycloakAuthAdapterInit } from 'sipa-bms-ui';
+
+keycloakAuthAdapterInit({
+  keycloakOptions: {
+    url: 'KC_URL',
+    realm: 'KC_REALM',
+    clientId: 'KC_ClientID',
+  },
+  onTokenRefreshed: (token) => {
+    // store token to use in API calls if needed
+  },
+})
+  .then((authResponse) => {
+    app.use(keycloakAuthAdapter, authResponse);
+    app.mount('#app');
+  })
+  .catch((authResponse) => {
+    // handle unauthenticated or unauthorized user
+  });
+```
+
+MyComponent.vue
+
+```typescript
+import { useKeycloakAuthAdapter } from 'sipa-bms-ui';
+
+const { auth } = useKeycloakAuthAdapter();
+const onClick = () => auth?.value?.logout();
+```
+
+Pour toute question, contactez l'équipe BMS.

package/dist/assets/animated-icons/AnimatedActivityIcon.vue.d.ts

@@ -0,0 +1,133 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    target: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        is: {
+            type: import('vue').PropType<string | import('vue').Component>;
+            default: string;
+        };
+        preset: {
+            type: import('vue').PropType<string>;
+            required: boolean;
+        };
+        instance: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionInstance<string, import('@vueuse/motion').MotionVariants<string>>>;
+            required: boolean;
+        };
+        variants: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionVariants<string>>;
+            required: boolean;
+        };
+        initial: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        enter: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        leave: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visible: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visibleOnce: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        hovered: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        tapped: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        focused: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        delay: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+        duration: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+    }>> & Readonly<{}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        is: string | import('vue').Component;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        is: {
+            type: import('vue').PropType<string | import('vue').Component>;
+            default: string;
+        };
+        preset: {
+            type: import('vue').PropType<string>;
+            required: boolean;
+        };
+        instance: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionInstance<string, import('@vueuse/motion').MotionVariants<string>>>;
+            required: boolean;
+        };
+        variants: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionVariants<string>>;
+            required: boolean;
+        };
+        initial: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        enter: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        leave: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visible: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visibleOnce: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        hovered: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        tapped: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        focused: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        delay: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+        duration: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+    }>> & Readonly<{}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, {
+        is: string | import('vue').Component;
+    }> | null;
+}, HTMLDivElement>;
+export default _default;

package/dist/assets/animated-icons/AnimatedCircleHelpIcon.vue.d.ts

@@ -0,0 +1,133 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    target: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        is: {
+            type: import('vue').PropType<string | import('vue').Component>;
+            default: string;
+        };
+        preset: {
+            type: import('vue').PropType<string>;
+            required: boolean;
+        };
+        instance: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionInstance<string, import('@vueuse/motion').MotionVariants<string>>>;
+            required: boolean;
+        };
+        variants: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionVariants<string>>;
+            required: boolean;
+        };
+        initial: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        enter: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        leave: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visible: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visibleOnce: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        hovered: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        tapped: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        focused: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        delay: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+        duration: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+    }>> & Readonly<{}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        is: string | import('vue').Component;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        is: {
+            type: import('vue').PropType<string | import('vue').Component>;
+            default: string;
+        };
+        preset: {
+            type: import('vue').PropType<string>;
+            required: boolean;
+        };
+        instance: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionInstance<string, import('@vueuse/motion').MotionVariants<string>>>;
+            required: boolean;
+        };
+        variants: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionVariants<string>>;
+            required: boolean;
+        };
+        initial: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        enter: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        leave: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visible: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visibleOnce: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        hovered: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        tapped: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        focused: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        delay: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+        duration: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+    }>> & Readonly<{}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, {
+        is: string | import('vue').Component;
+    }> | null;
+}, HTMLDivElement>;
+export default _default;

package/dist/assets/animated-icons/AnimatedHomeIcon.vue.d.ts

@@ -0,0 +1,133 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    target: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        is: {
+            type: import('vue').PropType<string | import('vue').Component>;
+            default: string;
+        };
+        preset: {
+            type: import('vue').PropType<string>;
+            required: boolean;
+        };
+        instance: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionInstance<string, import('@vueuse/motion').MotionVariants<string>>>;
+            required: boolean;
+        };
+        variants: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionVariants<string>>;
+            required: boolean;
+        };
+        initial: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        enter: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        leave: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visible: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visibleOnce: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        hovered: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        tapped: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        focused: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        delay: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+        duration: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+    }>> & Readonly<{}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        is: string | import('vue').Component;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        is: {
+            type: import('vue').PropType<string | import('vue').Component>;
+            default: string;
+        };
+        preset: {
+            type: import('vue').PropType<string>;
+            required: boolean;
+        };
+        instance: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionInstance<string, import('@vueuse/motion').MotionVariants<string>>>;
+            required: boolean;
+        };
+        variants: {
+            type: import('vue').PropType<import('@vueuse/motion').MotionVariants<string>>;
+            required: boolean;
+        };
+        initial: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        enter: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        leave: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visible: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        visibleOnce: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        hovered: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        tapped: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        focused: {
+            type: import('vue').PropType<import('@vueuse/motion').Variant>;
+            required: boolean;
+        };
+        delay: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+        duration: {
+            type: import('vue').PropType<string | number>;
+            required: boolean;
+        };
+    }>> & Readonly<{}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, {
+        is: string | import('vue').Component;
+    }> | null;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/button/BmsButton.spec.d.ts

@@ -0,0 +1 @@
+export {};