@ouestfrance/sipa-bms-ui 8.20.0 → 8.22.0

package/src/components/layout/BmsFloatingWindow.vue

@@ -1,11 +1,35 @@
 <template>
-  <div class="floating-window-wrapper">
-    <div class="floating-window" v-show="open">
-      <div class="floating-window__header">
-        <h2>{{ title }}</h2>
+  <div ref="wrapperRef" class="floating-window-wrapper">
+    <div
+      v-if="isDragging"
+      class="floating-window__drag-overlay"
+      @mousemove="onDrag"
+      @mouseup="onDragEnd"
+    />
+    <div
+      ref="windowRef"
+      class="floating-window"
+      :class="{
+        'floating-window--expanded': isExpanded,
+        'floating-window--dragging': isDragging,
+      }"
+      v-show="open"
+      :style="windowStyle"
+    >
+      <div class="floating-window__header" @mousedown="onDragStart">
+        <h3 class="floating-window__header__title">{{ title }}</h3>
         <div class="floating-window__header__buttons">
-          <BmsIconButton :tooltip-text="'Maximiser la fenêtre'" disabled>
-            <Maximize2 />
+          <BmsIconButton
+            v-if="expandable"
+            class="floating-window__expand-btn"
+            :class="{ 'floating-window__expand-btn--expanded': isExpanded }"
+            :tooltip-text="
+              isExpanded ? 'Réduire la fenêtre' : 'Maximiser la fenêtre'
+            "
+            @click.prevent.stop="toggleExpand"
+          >
+            <Minimize2 v-if="isExpanded" />
+            <Maximize2 v-else />
           </BmsIconButton>
           <BmsIconButton @click.prevent.stop="open = false">
             <X />
@@ -20,14 +44,223 @@
 </template>
 
 <script setup lang="ts">
-import { Maximize2, X } from 'lucide-vue-next';
+import { Maximize2, Minimize2, X } from 'lucide-vue-next';
 import BmsIconButton from '../button/BmsIconButton.vue';
+import { ref, computed, onMounted, watch, type CSSProperties } from 'vue';
 
-defineProps<{ title: string }>();
+export type Placement =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'center';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    defaultPlacement?: Placement;
+    expandable?: boolean;
+    expandedWidth?: string;
+    expandedHeight?: string;
+    expandTarget?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    defaultPlacement: 'center',
+    expandable: false,
+    expandedWidth: '100%',
+    expandedHeight: '100%',
+    expandTarget: undefined,
+    width: '50%',
+    height: '40%',
+  },
+);
 
 const open = defineModel<boolean>({
   default: false,
 });
+
+const wrapperRef = ref<HTMLElement | null>(null);
+const windowRef = ref<HTMLElement | null>(null);
+const position = ref<{ x: number; y: number } | null>(null);
+const computedSize = ref<{ width: number; height: number } | null>(null);
+const isDragging = ref(false);
+const dragOffset = ref({ x: 0, y: 0 });
+const isExpanded = ref(false);
+const positionBeforeExpand = ref<{ x: number; y: number } | null>(null);
+const expandedStyle = ref<CSSProperties | null>(null);
+
+function computeInitialPosition(): { x: number; y: number } | null {
+  if (!wrapperRef.value || !windowRef.value) return null;
+
+  const wrapperRect = wrapperRef.value.getBoundingClientRect();
+  const windowRect = windowRef.value.getBoundingClientRect();
+  const padding = 16;
+
+  switch (props.defaultPlacement) {
+    case 'top-left':
+      return { x: wrapperRect.left + padding, y: wrapperRect.top + padding };
+    case 'top-right':
+      return {
+        x: wrapperRect.right - windowRect.width - padding,
+        y: wrapperRect.top + padding,
+      };
+    case 'bottom-left':
+      return {
+        x: wrapperRect.left + padding,
+        y: wrapperRect.bottom - windowRect.height - padding,
+      };
+    case 'bottom-right':
+      return {
+        x: wrapperRect.right - windowRect.width - padding,
+        y: wrapperRect.bottom - windowRect.height - padding,
+      };
+    case 'center':
+    default:
+      return null;
+  }
+}
+
+function initPosition() {
+  if (props.defaultPlacement !== 'center' && !position.value) {
+    position.value = computeInitialPosition();
+  }
+}
+
+onMounted(() => {
+  if (open.value) {
+    initPosition();
+  }
+});
+
+watch(open, (newVal) => {
+  if (newVal) {
+    requestAnimationFrame(initPosition);
+  }
+});
+
+const windowStyle = computed<CSSProperties>(() => {
+  if (isExpanded.value && expandedStyle.value) {
+    return expandedStyle.value;
+  }
+
+  const sizeStyle: CSSProperties = {};
+  if (computedSize.value) {
+    sizeStyle.width = `${computedSize.value.width}px`;
+    sizeStyle.height = `${computedSize.value.height}px`;
+  } else {
+    if (props.width) {
+      sizeStyle.width = props.width;
+    }
+    if (props.height) {
+      sizeStyle.height = props.height;
+    }
+  }
+
+  if (!position.value) {
+    return sizeStyle;
+  }
+
+  return {
+    position: 'absolute',
+    left: `${position.value.x}px`,
+    top: `${position.value.y}px`,
+    ...sizeStyle,
+  };
+});
+
+function computeExpandedStyle(): CSSProperties {
+  if (props.expandTarget) {
+    const targetEl = document.querySelector(props.expandTarget);
+    if (targetEl) {
+      const targetRect = targetEl.getBoundingClientRect();
+      return {
+        position: 'fixed',
+        left: `${targetRect.left}px`,
+        top: `${targetRect.top}px`,
+        width:
+          props.expandedWidth === '100%'
+            ? `${targetRect.width}px`
+            : props.expandedWidth,
+        height:
+          props.expandedHeight === '100%'
+            ? `${targetRect.height}px`
+            : props.expandedHeight,
+        maxWidth: 'none',
+        maxHeight: 'none',
+      };
+    }
+  }
+
+  return {
+    position: 'absolute',
+    width: props.expandedWidth,
+    height: props.expandedHeight,
+    maxWidth: 'none',
+    maxHeight: 'none',
+  };
+}
+
+function toggleExpand() {
+  if (isExpanded.value) {
+    expandedStyle.value = null;
+    position.value = positionBeforeExpand.value;
+    isExpanded.value = false;
+  } else {
+    positionBeforeExpand.value = position.value;
+    expandedStyle.value = computeExpandedStyle();
+    isExpanded.value = true;
+  }
+}
+
+function onDragStart(event: MouseEvent) {
+  if (
+    (event.target as HTMLElement).closest('.floating-window__header__buttons')
+  ) {
+    return;
+  }
+
+  if (isExpanded.value) {
+    return;
+  }
+
+  isDragging.value = true;
+
+  if (windowRef.value) {
+    const rect = windowRef.value.getBoundingClientRect();
+    dragOffset.value = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    };
+
+    if (!computedSize.value) {
+      computedSize.value = { width: rect.width, height: rect.height };
+    }
+
+    if (!position.value) {
+      position.value = { x: rect.left, y: rect.top };
+    }
+  }
+
+  document.addEventListener('mousemove', onDrag);
+  document.addEventListener('mouseup', onDragEnd);
+}
+
+function onDrag(event: MouseEvent) {
+  if (!isDragging.value) return;
+
+  position.value = {
+    x: event.clientX - dragOffset.value.x,
+    y: event.clientY - dragOffset.value.y,
+  };
+}
+
+function onDragEnd() {
+  isDragging.value = false;
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', onDragEnd);
+}
 </script>
 
 <style scoped lang="scss">
@@ -45,25 +278,65 @@ const open = defineModel<boolean>({
   align-items: center;
   pointer-events: none;
 
+  .floating-window__drag-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: var(--bms-z-index-modal);
+    pointer-events: all;
+    cursor: grabbing;
+  }
+
   .floating-window {
     background-color: var(--bms-white);
-    height: 100%;
-    width: 100%;
     border-radius: var(--bms-border-radius-large);
     border: 1px solid var(--bms-grey-10);
     pointer-events: all;
     display: grid;
     grid-template-rows: auto 1fr;
-    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.25);
     z-index: var(--bms-z-index-modal);
+    transition:
+      left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &--expanded {
+      border-radius: 0;
+      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+
+      .floating-window__header {
+        cursor: default;
+
+        &:active {
+          cursor: default;
+        }
+      }
+    }
+
+    &--dragging {
+      transition: none;
+    }
 
     &__header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--bms-grey-10);
-      padding: 1em;
-      h2 {
+      padding: 0.5em;
+      cursor: grab;
+      user-select: none;
+
+      &:active {
+        cursor: grabbing;
+      }
+
+      &__title {
         margin: 0;
       }
     }

package/src/components/layout/BmsModal.stories.js

@@ -1,6 +1,7 @@
 import BmsModal from '@/components/layout/BmsModal.vue';
+import BmsProblem from '@/components/utils/BmsProblem.vue';
+import { isProblem } from '@/helpers/problem.helper.ts';
 import { StatusType } from '@/models/status-type.model';
-import { BmsProblem, isProblem } from '../../index';
 
 const openNotification = {
   details: 'this is a detail',

package/src/components/layout/BmsSplitWindow.vue

@@ -55,7 +55,6 @@ const collapsedLocal = ref(props.collapsed ?? false);
 watch(
   () => props.collapsed,
   (val) => {
-    console.log('watch:collapsed', val);
     collapsedLocal.value = val ?? false;
   },
 );

package/src/components/table/BmsTableFilters.vue

@@ -53,7 +53,7 @@
           :autocompleteRequest="filter?.autocompleteRequest"
           :options="getFilterOptions(filter) as any"
           @input="
-            (e: InputEvent) =>
+            (e: any) =>
               $emits('filterInput', {
                 filterKey: filter.key,
                 value: (e.target as HTMLInputElement).value,

package/src/documentation/button/primaryButton.mdx

@@ -0,0 +1,142 @@
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import {
+  Playground,
+  DoSimple,
+  DoDanger,
+  DoSmall,
+  DoIconStart,
+  DoIconEnd,
+  DoSubmit,
+  DontLongLabel,
+  DoShortLabel,
+  DontMultiplePrimary,
+  DoOnePrimary,
+  DontTooManyIcons,
+  DoOneIcon,
+  DontGenericLabel,
+  DoSpecificLabel,
+  DontPrimaryForCancel,
+  DoPrimaryForSave,
+} from '../../components/button/BmsButton.stories.js';
+
+<Meta title="Documentation/Buttons/Primary" />
+
+# <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, it is essential to create a hierarchy of actions and use a primary and several secondary or tertiary buttons.
+
+## 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
+
+Use the controls below to interact with the component and see how it behaves with different configurations.
+
+<Canvas of={Playground} />
+
+### Props
+
+<Controls of={Playground} />
+
+## Usage Examples
+
+### ✅ Do: Simple action button
+
+Use a clear, concise label (maximum 3 words) for the primary action.
+
+<Canvas of={DoSimple} />
+
+### ✅ Do: Button with icon at start
+
+Icons can help clarify the action. Place them at the start of the button.
+
+<Canvas of={DoIconStart} />
+
+### ✅ Do: Button with icon at end
+
+Place icons at the end for navigation or forward actions.
+
+<Canvas of={DoIconEnd} />
+
+### ✅ Do: Submit button
+
+Use `submit` prop for form submissions.
+
+<Canvas of={DoSubmit} />
+
+### ✅ Do: Danger mode
+
+Use danger mode for destructive actions that require caution.
+
+<Canvas of={DoDanger} />
+
+### ✅ Do: Small variant
+
+Use the small variant when space is limited.
+
+<Canvas of={DoSmall} />
+
+## Rules
+
+### ⛔ Don't: Long labels
+
+Avoid long labels that exceed 3 words. Keep button text concise and action-oriented.
+
+**❌ Don't:**
+
+<Canvas of={DontLongLabel} />
+
+**✅ Do:**
+
+<Canvas of={DoShortLabel} />
+
+### ⛔ Don't: Multiple primary buttons
+
+Never use multiple primary buttons on the same screen. Use only one primary button per interface.
+
+**❌ Don't:**
+
+<Canvas of={DontMultiplePrimary} />
+
+**✅ Do:**
+
+<Canvas of={DoOnePrimary} />
+
+### ⛔ Don't: Overuse of icons
+
+Don't overload buttons with multiple icons or decorative elements that don't add value.
+
+**❌ Don't:**
+
+<Canvas of={DontTooManyIcons} />
+
+**✅ Do:**
+
+<Canvas of={DoOneIcon} />
+
+### ⛔ Don't: Generic labels
+
+Avoid generic labels like "Click here" or "Submit". Use specific action verbs.
+
+**❌ Don't:**
+
+<Canvas of={DontGenericLabel} />
+
+**✅ Do:**
+
+<Canvas of={DoSpecificLabel} />
+
+### ⛔ Don't: Primary for secondary actions
+
+Don't use primary buttons for secondary or cancel actions. Reserve primary buttons for the main action.
+
+**❌ Don't:**
+
+<Canvas of={DontPrimaryForCancel} />
+
+**✅ Do:**
+
+<Canvas of={DoPrimaryForSave} />

package/src/documentation/{secondaryButton.mdx → button/secondaryButton.mdx}

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
-import Button from '../components/button/BmsButton.vue';
+import Button from '../../components/button/BmsButton.vue';
 
-<Meta title="Documentation/Buttons/Secondary Button" />
+<Meta title="Documentation/Buttons/Secondary" />
 
 # <img src="./BmsIcon.png" /> Secondary Button
 

package/src/documentation/foundation/contributing.mdx

@@ -0,0 +1,72 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Foundation/Contributing" />
+
+# <img src="./BmsIcon.png" /> Contributing
+
+We welcome contributions from the community! To keep the codebase healthy and consistent, please follow the process outlined below before submitting a Merge Request (MR).
+
+## Contribution – Challenging the Need for Evolution
+
+> **Before adding or modifying a component, question the underlying need.**  
+> In a design system every change propagates across many products, so it’s crucial to ensure that new work truly adds value.
+
+1. **Define the problem** – Who experiences the pain point? What user goal does it affect?
+2. **Consider existing solutions** – Can the issue be solved with a variant, a token adjustment, or a composition of existing components?
+3. **Evaluate impact** – Think about bundle size, visual consistency, accessibility, and maintenance overhead.
+
+Applying this disciplined approach helps the design system stay lean, cohesive, and future‑proof while preventing unnecessary churn.
+
+## 1️ Discuss the Change First
+
+Before you start coding, **open a thread** on Teams describing the problem you want to solve or the feature you’d like to add. Include:
+
+- A clear description of the motivation.
+- Any relevant design sketches or screenshot.
+- Links to related tickets or upstream discussions.
+
+This early conversation helps us:
+
+- Validate that the change aligns with the project roadmap.
+- Identify potential design conflicts early.
+- Agree on an implementation approach.
+
+Only after we give a **“Go‑ahead”** comment should you begin work on the MR.
+
+## 2️ Follow Our Development Standards
+
+Your contribution must meet the project's quality expectations:
+
+(WIP)
+
+If any of these checks fail, the MR will be returned for revision.
+
+## 3️ Submit Your Merge Request
+
+When the feature is complete:
+
+1. (WIP)
+
+## 4️ Review Process
+
+- **Automated checks**: CI will automatically reject the MR if linting, tests, or build steps fail.
+- **Human review**: At least one core maintainer will review the code. They may request changes, ask clarifying questions, or suggest improvements.
+- **Approval**: Once all reviewers approve and CI passes, the MR will be merged.
+
+> **We reserve the right to reject any MR** that does not meet our development standards, conflicts with the project direction, or introduces regressions. Rejections will be accompanied by constructive feedback so you can adjust and resubmit.
+
+## 5️ Post‑Merge Checklist
+
+- Verify that the change appears in the next release notes.
+- Close the associated issue (or move it to _Done_).
+- Celebrate 🎉 – you’ve contributed to the project!
+
+---
+
+### Additional Tips (Optional)
+
+- **Keep PRs small** – aim for a single logical change per MR.
+- **Write clear commit messages** – follow the Conventional Commits format (`feat: add …`, `fix: resolve …`).
+- **Respect the Code of Conduct** – treat all contributors with respect and professionalism.
+
+Thank you for helping make this project better! 🙏

package/src/documentation/foundation/gettingstarted.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Foundation/Getting started" />
+
+# <img src="./BmsIcon.png" /> Getting started
+
+All the information are located in the Read Me on [Gitlab](https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms)

package/src/documentation/{principles.mdx → foundation/principles.mdx}

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 ![](./CoverBmsUI.png)
 
-<Meta title="Documentation/Principles" />
+<Meta title="Foundation/Principles" />
 
 # <img src="./BmsIcon.png" /> Principles
 
@@ -16,13 +16,13 @@ bms UI focuses on the essentials, we concentrate on what is useful for interface
 
 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.
 
-## 📖 Documentation of the **bms UI** Design System
+## Documentation of the **bms UI** Design System
 
 > **Mission** – Provide a **single Design System** dedicated to the Sipa group’s Back‑Office tools, limiting the use of the Vue framework and offering a constraint‑driven approach to interface design and construction. Goal: reduce costs, ensure visual and functional consistency, and simplify maintenance.
 
 ---
 
-### 1️⃣ Context & Objectives
+### 1️ Context & Objectives
 
 - **Who?**  
   The bms UI Design System is actually maintained by the frontend team of **bms**.
@@ -35,7 +35,7 @@ A constraint-based design system is designed to offer a consistent user experien
 - **Target audience**  
   Front‑end developers, designers, QA engineers, project managers, and anyone involved in creating or maintaining Back‑Office interfaces.
 
-### 2️⃣ Core Principles
+### 2️ Core Principles
 
 #### 2.1 Focused – Essentials First
 
@@ -59,19 +59,19 @@ A constraint-based design system is designed to offer a consistent user experien
 
 These constraints are **declarative** – they’re baked directly into components (e.g., `mode="danger"` to have a red button), preventing stylistic drift.
 
-### 3️⃣ Project Architecture
+### 3️ Project Architecture
 
 - **Single export** – `import BmsButton from '../components/button/BmsButton.vue';`
 - **Integrated Storybook** – Each component has a `*.stories.js` file showcasing the UI and the props & slots for each component.```
 - **Typescript components** - Each component as typed props & events, and the relevant types are exported by the library (e.g. TableHeader, Caption, etc.)
 
-### 4️⃣ Usage Guide
+### 4️ Usage Guide
 
-#### 4.1 Installation
+Installation
 
 Gitlab documentation https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms#installation
 
-### 5️⃣ Quick FAQ
+### 5️ Quick FAQ
 
 - **Can I add a custom color?**  
   **Answer:** No – all colors must come from the defined palette. If a legitimate need arises, open a **Jira** ticket.
@@ -82,7 +82,7 @@ Gitlab documentation https://gitlab.ouest-france.fr/sipa-ouest-france/platform/p
 - **Does the design system support dark mode?**  
   **Answer:** No – theming is not available at this time.
 
-### 6️⃣ Contact & Support
+### 6️ Contact & Support
 
 - **Teams**: [#🎨bmsUI](https://teams.microsoft.com/l/channel/19%3Au9dPXr-JjoRoaLat-EyS-QEKit1ZzUwQ7G0VrzvDkTE1%40thread.tacv2/%F0%9F%8E%A8bmsUI?groupId=677fd2f9-de86-4bf9-a00c-71817f033ad3&tenantId=a59e9cc9-4ed4-43c4-9f1e-ca78d44b0072&ngc=true&allowXTenantAccess=)
 - **Issues**: [#Jira] (⚠️ WIP)