@ouestfrance/sipa-bms-ui 7.14.1

package/src/composables/userPref.composable.ts

@@ -0,0 +1,43 @@
+const LOCAL_STORAGE_USER_PREF_KEY = 'userPref';
+
+export const useUserPref = () => {
+  const saveUserPref = (
+    key: string,
+    value: any,
+    path: string = 'global',
+  ): void => {
+    const userPref = getUserPrefFromLocalStorage();
+    const pathPref = userPref[path] || {};
+    pathPref[key] = value;
+    userPref[path] = pathPref;
+    setUserPrefFromLocalStorage(userPref);
+  };
+
+  const getUserPref = (key: string, path: string = 'global'): any => {
+    const userPref = getUserPrefFromLocalStorage();
+    const pathPref = userPref[path];
+    if (!pathPref) {
+      return undefined;
+    }
+    return pathPref[key] || undefined;
+  };
+
+  return {
+    saveUserPref,
+    getUserPref,
+  };
+};
+
+export const getUserPrefFromLocalStorage = (): any => {
+  try {
+    return JSON.parse(
+      localStorage.getItem(LOCAL_STORAGE_USER_PREF_KEY) || '{}',
+    );
+  } catch (e) {
+    return {};
+  }
+};
+
+export const setUserPrefFromLocalStorage = (userPref: any): void => {
+  localStorage.setItem(LOCAL_STORAGE_USER_PREF_KEY, JSON.stringify(userPref));
+};

package/src/documentation/ColorTile.vue

@@ -0,0 +1,23 @@
+<template>
+  <span class="color-tile" :style="{ '--current-color': `var(${color})` }">
+    {{ color }}
+  </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{ color: string }>();
+</script>
+
+<style scoped>
+.color-tile {
+  background-color: var(--current-color);
+  width: 100px;
+  height: 100px;
+  color: black;
+  display: flex;
+  margin: 4px;
+  font-size: 12px;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/documentation/button.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta title="Documentation/Buttons/Anatomy" />
+
+# <img src="./BmsIcon.png" /> Anatomy
+
+Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+
+![](./button/OrimaryButtonRepresentation.png)
+
+## Rules
+
+<table>
+  <tr>
+    <td>✅ Do</td>
+    <td>⛔ Don&#39;t</td>
+  </tr>
+  <tr>
+    <td>![](./button/DoButtonLabel.png)</td>
+    <td>![](./button/DontButtonLabel.png)</td>
+  </tr>
+</table>
+
+_Limit to maximum three words in button label_

package/src/documentation/card.mdx

@@ -0,0 +1,28 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Default as CardDefault } from '../components/layout/BmsCard.stories.js';
+
+<Meta title="Documentation/Organisms/Card" />
+
+# <img src="./BmsIcon.png" /> Card
+
+Card group informations into flexible containers, allowing users to browse elements in a more visual way than a table. They present a taste of the information, and provide access to more detail if required.
+
+![Tag representation](./cards/CoverCard.png)
+
+## Anatomy
+
+![Tag representation](./cards/CardRepresentation.png)
+
+## Component
+
+<Canvas of={CardDefault} args={{ label: 'toto' }} />
+
+### Table of props
+
+<Controls of={CardDefault} />

package/src/documentation/chip.mdx

@@ -0,0 +1,28 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Default as ChipDefault } from '../components/form/BmsChip.stories.js';
+
+<Meta title="Documentation/Chip" />
+
+# <img src="./BmsIcon.png" /> Chip
+
+A Chip is a component to make data representation, there is no actions attached to him.
+
+![Chip representation](./chip/CoverChips.png)
+
+## Anatomy
+
+![Chip representation](./chip/ChipRepresentation.png)
+
+## Component
+
+<Canvas of={ChipDefault} args={{ label: 'toto' }} />
+
+### Table of props
+
+<Controls of={ChipDefault} />

package/src/documentation/colors.mdx

@@ -0,0 +1,118 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  ColorPalette,
+  ColorItem,
+} from '@storybook/addon-docs/blocks';
+
+<Meta title="Documentation/Style/Colors" />
+
+# <img src="./BmsIcon.png" /> Colors
+
+The BMS UI color system is based around a primary color that is defined by the product, the other colors are agnostic and should not change.
+The tone of a color is characterized by a percentage of its transparency which gives it its name.
+For example, the primary color is always Main-100 its next tone will be at 75% which will give a lighter color that will be named Main-75.
+
+We keep "System" colors, these colors are reserved to give information that comes from the product, they should only be used to accentuate information:
+
+- System / Green: Validation information
+- System / Orange: Warning information
+- System / Red: Danger or problem information
+
+## Colors
+
+<ColorPalette>
+  <ColorItem
+    title="Main"
+    subtitle=""
+    colors={{
+      'main-140': '#3F91D9',
+      'main-100': '#69A9E1',
+      'main-75': '#8EBEE8',
+      'main-50': '#B2D2EE',
+      'main-25': '#D7E7F5',
+      'main-10': '#EDF4F9',
+    }}
+  />
+  <ColorItem
+    title="Main analog"
+    subtitle=""
+    colors={{
+    'main-analog-140': '#5153AC',
+    'main-analog-100': '#696CE0',
+    'main-analog-75': '#8E90E7',
+    'main-analog-50': '#B2B4EE',
+    'main-analog-25': '#D7D8F5',
+    'main-analog-10': '#EDEEF9',
+    }}
+  />
+  <ColorItem
+    title="Grey"
+    subtitle=""
+    colors={{
+      'grey-140': '#333333',
+      'grey-100': '#526476',
+      'grey-75': '#7C8A97',
+      'grey-50': '#A7B0B9',
+      'grey-25': '#D1D6DA',
+      'grey-10': '#EBEDEF',
+    }}
+  />
+  <ColorItem
+    title="Green"
+    subtitle="System"
+    colors={{
+      'green-140': '#27731B',
+      'green-100': '#57B47D',
+      'green-75': '#80C69D',
+      'green-50': '#A9D8BC',
+      'green-25': '#D3EADC',
+      'green-10': '#EFF9EE',
+    }}
+  />
+  <ColorItem
+    title="Orange"
+    subtitle="System"
+    colors={{
+      'orange-140': '#90550b',
+      'orange-100': '#F08E13',
+      'orange-75': '#F3A94D',
+      'orange-50': '#F6C587',
+      'orange-25': '#F9E0C2',
+      'orange-10': '#FBF1E5',
+    }}
+  />
+  <ColorItem
+    title="Red"
+    subtitle="System"
+    colors={{
+      'red-140': '#7C1212',
+      'red-100': '#DC474C',
+      'red-75': '#E47478',
+      'red-50': '#ECA1A4',
+      'red-25': '#F4CFD0',
+      'red-10': '#F9EAEB',
+    }}
+  />
+  <ColorItem
+    title="White"
+    subtitle=""
+    colors={{
+      'white': '#FCFCFC',
+
+    }}
+
+/>
+
+ <ColorItem
+    title="Background"
+    subtitle=""
+    colors={{
+      'background': '#F6F6F8',
+
+    }}
+
+/>
+
+</ColorPalette>

package/src/documentation/fields.mdx

@@ -0,0 +1,52 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Default as FieldDefault } from '../plugins/field/FieldComponent.stories.js';
+import { Default as TextDefault } from '../components/form/BmsInputText.stories.js';
+import { Default as SelectDefault } from '../components/form/BmsSelect.stories.js';
+
+<Meta title="Documentation/Fields/Anatomy" />
+
+# <img src="./BmsIcon.png" /> Fields
+
+Field labels give context to the information that a user needs to input. They're commonly used in forms.
+
+![](./fields/CoverFieldsAnatomy.png)
+
+## Label
+
+### Anatomy
+
+Labels give context to the information that a user needs to input. They're commonly used in forms.
+
+![](./fields/LabelRepresentation.png)
+
+#### Usage
+
+Inputs should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. For exemple the input search.
+
+#### Rules
+
+<table>
+  <tr>
+    <td>✅ Do</td>
+    <td>⛔ Don&#39;t</td>
+  </tr>
+  <tr>
+    <td>![](./fields/LabelDo.png)</td>
+    <td>![](./fields/LabelDont.png)</td>
+  </tr>
+</table>
+*Don’t add a colon at the end of a field label*
+
+## Caption Text
+
+![](./fields/CaptionTextRepresentation.png)
+
+#### Usage
+
+#### Rules

package/src/documentation/fields_text.mdx

@@ -0,0 +1,31 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Default as FieldDefault } from '../plugins/field/FieldComponent.stories.js';
+import { Default as TextDefault } from '../components/form/BmsInputText.stories.js';
+import BmsInputText from '../components/form/BmsInputText.vue';
+import { Default as SelectDefault } from '../components/form/BmsSelect.stories.js';
+
+<Meta title="Documentation/Fields/Input Text" />
+
+# <img src="./BmsIcon.png" /> Input Text
+
+Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements.
+
+![](./fields/CoverInputText.png)
+
+## Anatomy
+
+![](./fields/InputRepresentation.png)
+
+## Component
+
+<Canvas of={TextDefault} args={{ label: 'toto' }} />
+
+### Table of props
+
+<Controls of={TextDefault} />

package/src/documentation/icons.mdx

@@ -0,0 +1,33 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+
+<Meta title="Documentation/Style/Icons" />
+
+# <img src="./BmsIcon.png" /> Icons
+
+BMS UI uses the Lucide library for icons, and we recommend you do the same for visual consistency.
+
+All the available icons : <a href="https://lucide.dev/icons/">https://lucide.dev/icons/</a>
+
+Installation guide : <a href="https://lucide.dev/guide/installation#vue">https://lucide.dev/guide/installation#vue</a>
+
+```
+npm i -D lucide-vue-next
+```
+
+## Usage exemple
+
+```jsx
+<script>
+import { ChefHat } from 'lucide-vue-next'
+</script>
+
+<template>
+  <h2> <ChefHat /> My recipes </h2>
+</template>
+```

package/src/documentation/inputFile.mdx

@@ -0,0 +1,28 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Empty as InputFileDefault } from '../components/form/BmsInputFile.stories.js';
+
+<Meta title="Documentation/Fields/Input File" />
+
+# <img src="./BmsIcon.png" /> Input File
+
+InputFile is a component for uploading one file. After upload its show the result.
+
+![InputFile representation](./fields/CoverInputFile.png)
+
+## Anatomy
+
+![InputFile representation](./fields/InputMediaRepresentation.png)
+
+## Component
+
+<Canvas of={InputFileDefault} args={{ label: 'toto' }} />
+
+### Table of props
+
+<Controls of={InputFileDefault} />

package/src/documentation/primaryButton.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Primary as BmsButton } from '../components/button/BmsButton.stories.js';
+
+<Meta title="Documentation/Buttons/Primary Button" />
+
+# <img src="./BmsIcon.png" /> Primary Button
+
+The primary button should represent the main action on a screen, there should only be one primary button on an interface, if multiple actions are possible then it is essential to create a hierarchy of actions and use a primary and several secondary or tertiary.
+
+![](./button/CoverPrimaryButton.png)
+
+## Anatomy
+
+Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+
+![](./button/PrimaryButtonRepresentation.png)
+
+## Component
+
+<Canvas of={BmsButton} args={{ type: 'primary' }} />

package/src/documentation/principles.mdx

@@ -0,0 +1,23 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+
+![](./CoverBmsUI.png)
+
+<Meta title="Documentation/Principles" />
+
+# <img src="./BmsIcon.png" /> Principles
+
+The principle of bms UI is to provide a unique Design System for the Sipa group, which is solely dedicated to the Back Office tools of the group. Its goal is to limit the use of the Vue Framework and to offer a unique approach in interface design and construction in order to streamline costs and provide uniform interfaces to users.
+
+## Focused
+
+bms UI focuses on the essentials, we concentrate on what is useful for interfaces and only what is necessary, we aim to offer a simple and effective Design System.
+
+## Design System by constraint
+
+A constraint-based design system is designed to offer a consistent user experience across all products that use it. By limiting possible interpretations, this type of design system provides a clear and consistent logic that facilitates understanding and use of the products. Constraints can be applied to visual elements such as colors, typography, and font sizes, as well as interactive elements such as buttons and menus. By using a constraint-based design system, users can interact with products with confidence, knowing that the design elements will be consistent and predictable.

package/src/documentation/radioCaptionGroup.mdx

@@ -0,0 +1,34 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { DefaultRow as InputRadioCaptionGroupRow } from '../components/form/BmsInputRadioCaptionGroup.stories.js';
+import { DefaultColumn as InputRadioCaptionGroupColumn } from '../components/form/BmsInputRadioCaptionGroup.stories.js';
+
+<Meta title="Documentation/Fields/Radio Caption Group" />
+
+# <img src="./BmsIcon.png" /> Radio Group
+
+A radio caption group consists of a set of interconnected radio buttons. But the caption is set on earch radio input.
+
+![](./fields/CoverRadioCaptionGroup.png)
+
+## Anatomy
+
+![InputFile representation](./fields/RadioCaptionGroupRepresentation.png)
+
+## Component
+
+### Row representation
+
+<Canvas of={InputRadioCaptionGroupRow} args={{ label: 'toto' }} />
+
+### Column representation
+
+<Canvas of={InputRadioCaptionGroupColumn} args={{ label: 'toto' }} />
+### Table of props
+
+<Controls of={InputRadioCaptionGroupRow} />

package/src/documentation/radioGroup.mdx

@@ -0,0 +1,34 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { DefaultRow as InputRadioCaptionGroupRow } from '../components/form/BmsInputRadioGroup.stories.js';
+import { DefaultColumn as InputRadioCaptionGroupColumn } from '../components/form/BmsInputRadioGroup.stories.js';
+
+<Meta title="Documentation/Fields/Radio Group" />
+
+# <img src="./BmsIcon.png" /> Radio Group
+
+A radio group consists of a set of interconnected radio buttons.
+
+![](./fields/CoverRadioGroup.png)
+
+## Anatomy
+
+![InputFile representation](./fields/RadioGroupRepresentation.png)
+
+## Component
+
+### Row representation
+
+<Canvas of={InputRadioCaptionGroupRow} args={{ label: 'toto' }} />
+
+### Column representation
+
+<Canvas of={InputRadioCaptionGroupColumn} args={{ label: 'toto' }} />
+### Table of props
+
+<Controls of={InputRadioCaptionGroupRow} />

package/src/documentation/search.mdx

@@ -0,0 +1,28 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Default as SearchInputDefault } from '../components/form/BmsSearch.stories.js';
+
+<Meta title="Documentation/Fields/Search" />
+
+# <img src="./BmsIcon.png" /> Search
+
+It allows users to enter text to perform a search among the data, content, or elements present in the interface they are viewing or the system.
+
+![InputFile representation](./fields/CoverSearch.png)
+
+## Anatomy
+
+![InputFile representation](./fields/InputSearchRepresentation.png)
+
+## Component
+
+<Canvas of={SearchInputDefault} args={{ label: 'toto' }} />
+
+### Table of props
+
+<Controls of={SearchInputDefault} />