@ouestfrance/sipa-bms-ui 8.19.0 → 8.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.19.0",
+  "version": "8.21.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -30,16 +30,15 @@
     "url": "https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms.git"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.2",
+    "@chromatic-com/storybook": "^4.1.3",
     "@codemirror/lang-html": "6.4.11",
     "@codemirror/lang-json": "6.0.2",
     "@commitlint/cli": "20.1.0",
     "@commitlint/config-conventional": "20.0.0",
-    "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "10.0.8",
-    "@storybook/addon-links": "10.0.8",
-    "@storybook/vue3-vite": "10.0.8",
+    "@storybook/addon-docs": "10.1.6",
+    "@storybook/addon-links": "10.1.6",
+    "@storybook/vue3-vite": "10.1.6",
     "@types/lodash": "4.17.21",
     "@types/uuid": "11.0.0",
     "@vitejs/plugin-vue": "6.0.2",
@@ -61,15 +60,18 @@
     "lint-staged": "16.2.7",
     "lodash": "4.17.21",
     "lucide-vue-next": "0.554.0",
+    "msw": "^2.12.4",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
+    "remark-gfm": "^4.0.1",
     "sass": "1.94.2",
     "semantic-release": "25.0.2",
     "start-server-and-test": "2.1.3",
-    "storybook": "10.0.8",
-    "storybook-addon-pseudo-states": "10.0.8",
+    "storybook": "10.1.6",
+    "storybook-addon-pseudo-states": "10.1.6",
+    "storybook-addon-tag-badges": "^3.0.2",
     "storybook-vue3-router": "^7.0.0",
     "typescript": "5.2.2",
     "uuid": "13.0.0",
@@ -117,9 +119,8 @@
     ]
   },
   "msw": {
-    "workerDirectory": "public"
-  },
-  "dependencies": {
-    "msw": "^2.3.1"
+    "workerDirectory": [
+      "public"
+    ]
   }
 }

package/src/assets/scss/_conf.scss

@@ -1,4 +1,3 @@
-@forward './formkit';
 @forward './global-variables.scss';
 @use 'sass:list';
 

package/src/assets/scss/app.scss

@@ -7,5 +7,4 @@ $customFontFamily: 'Roboto', Arial, Helvetica, sans-serif;
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
 @include sbu.styles;
-@include sbu.formkit;
 @include sbu.global-variables;

package/src/components/button/BmsAllButtons.stories.js

@@ -1,12 +1,12 @@
 import BmsButton from '@/components/button/BmsButton.vue';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
-import { Heart } from 'lucide-vue-next';
+import { Heart, ArrowLeft, ArrowRight } from 'lucide-vue-next';
 
 const types = ['primary', 'secondary', 'tertiary'];
 const modes = ['default', 'danger'];
 
 export default {
-  title: 'Composants/button',
+  title: 'Composants/button/Button',
   component: BmsButton,
 };
 
@@ -14,41 +14,68 @@ const AllButtonsTemplate = () => ({
   components: {
     BmsButton,
     BmsIconButton,
+    ArrowLeft,
+    ArrowRight,
     Heart,
   },
   setup() {
     return { types, modes };
   },
   template: `
-    <div style="display:grid;grid-template-columns:repeat(3, auto); gap:1em; justify-items: start;">
+    <div style="display:grid;grid-template-columns:repeat(4, auto); gap:1em; justify-items: start; align-items: center;">
       <template v-for="mode in modes" :key="mode">
         <template v-for="type in types">
-          <template v-for="to in [null,'/path']" :key="to">
-            <BmsButton :mode="mode" :type="type" :to="to">
-              Button {{ mode }} {{ type }} {{ to ? ' avec une URL ' : '' }}
+            <BmsButton :mode="mode" :type="type" small>
+              Button {{ mode }} {{ type }}  small
             </BmsButton>
-            <BmsButton :mode="mode" :type="type" class="_hover" :to="to">
-              Button {{ mode }} {{ type }}  {{ to ? ' avec une URL ' : '' }} hovered
+            <BmsButton :mode="mode" :type="type">
+              Button {{ mode }} {{ type }} 
             </BmsButton>
-            <BmsButton :mode="mode" :type="type" disabled :to="to">
-              Button {{ mode }} {{ type }} {{ to ? ' avec une URL ' : '' }} disabled
+            <BmsButton :mode="mode" :type="type" class="_hover">
+              Button {{ mode }} {{ type }}   hovered
+            </BmsButton>
+            <BmsButton :mode="mode" :type="type" disabled>
+              Button {{ mode }} {{ type }}  disabled
             </BmsButton>
-          </template>
         </template>
       </template>
+      
+      <BmsButton small>
+        <template #start> <ArrowLeft/> </template>
+          Button  small
+        <template #end> <ArrowRight/> </template>
+      </BmsButton>
+      <BmsButton>
+        <template #start> <ArrowLeft/> </template>
+          Button 
+        <template #end> <ArrowRight/> </template>
+      </BmsButton>
+      <BmsButton class="_hover">
+        <template #start> <ArrowLeft/> </template>
+          Button hovered
+        <template #end> <ArrowRight/> </template>
+      </BmsButton>
+      <BmsButton disabled>
+        <template #start> <ArrowLeft/> </template>
+          Button disabled
+        <template #end> <ArrowRight/> </template>
+      </BmsButton>
+
 
-      <BmsIconButton v-bind="args" :to="to">
-        <Heart />
-      </BmsIconButton>
-      <BmsIconButton v-bind="args" class="_hover" :to="to">
-        <Heart />
-      </BmsIconButton>
-      <BmsIconButton v-bind="args" disabled>
-        <Heart />
-      </BmsIconButton>
-      <BmsIconButton v-bind="args" disabled :to="to">
-        <Heart />
-      </BmsIconButton>
+      <template v-for="mode in modes" :key="mode">
+        <BmsIconButton v-bind="args" :mode="mode" small>
+          <Heart />
+        </BmsIconButton>
+        <BmsIconButton v-bind="args" :mode="mode">
+          <Heart />
+        </BmsIconButton>
+        <BmsIconButton v-bind="args" :mode="mode" class="_hover">
+          <Heart />
+        </BmsIconButton>
+        <BmsIconButton v-bind="args" :mode="mode" disabled>
+          <Heart />
+        </BmsIconButton>
+      </template>
     </div>
   `,
 });

package/src/components/button/BmsButton.stories.js

@@ -1,10 +1,21 @@
 import BmsButton from '@/components/button/BmsButton.vue';
-import { ArrowLeft, ArrowRight, Camera, Heart, Wand } from 'lucide-vue-next';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Camera,
+  Heart,
+  Wand,
+  Check,
+} from 'lucide-vue-next';
 import { StatusType } from '@/models';
 
 export default {
   title: 'Composants/button/Button',
   component: BmsButton,
+  tags: ['with_useable_code'],
+  parameters: {
+    chromatic: { disable: true },
+  },
   argTypes: {
     type: {
       control: { type: 'select' },
@@ -24,87 +35,162 @@ export default {
 const Template = (args) => ({
   components: {
     BmsButton,
-    ArrowRight,
-    ArrowLeft,
-    Camera,
-    Heart,
-    Wand,
   },
   setup() {
     return { args };
   },
   template: `
-    <BmsButton v-bind="args">Save me</BmsButton>
-    <br>
-    <br>
-    <BmsButton v-bind="args">
-      Next page
-      <template #end><ArrowRight /></template>
-    </BmsButton>
-    <br>
-    <br>
-    <BmsButton  v-bind="args">
-      <template #start>
-        <Heart/>
-      </template>
-      Icons left & right
-      <template #end> 
-        <Wand/>
-      </template>
-      </BmsButton>
-      <br>
-      <br>
     <BmsButton v-bind="args">
-    <template #start><ArrowLeft /></template>
-    Retour
+      Save
     </BmsButton>
-    <br>
-  `,
+      `,
 });
 
-export const Primary = Template.bind({});
-Primary.args = {
-  type: 'primary',
-};
+export const Playground = Template.bind({});
+Playground.args = {};
 
-export const PrimaryDanger = Template.bind({});
-PrimaryDanger.args = {
+// Stories for documentation examples (Do/Don't)
+export const DoSimple = Template.bind({});
+DoSimple.args = {
   type: 'primary',
-  mode: StatusType.Danger,
 };
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  type: 'secondary',
+export const DoDanger = Template.bind({});
+DoDanger.args = {
+  mode: 'danger',
 };
 
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  type: 'tertiary',
+export const DoSmall = Template.bind({});
+DoSmall.args = {
+  small: true,
 };
 
-const TemplateSmall = (args) => ({
-  components: {
-    BmsButton,
-    ArrowRight,
-    ArrowLeft,
-    Camera,
-    Heart,
-    Wand,
-  },
-  setup() {
-    return { args };
-  },
+// Do: Button with icon at start
+export const DoIconStart = () => ({
+  components: { BmsButton, Check },
+  template: `
+    <BmsButton type="primary">
+      <template #start><Check /></template>
+      Confirm
+    </BmsButton>
+      `,
+});
+
+// Do: Button with icon at end
+export const DoIconEnd = () => ({
+  components: { BmsButton, ArrowRight },
   template: `
-    <BmsButton v-bind="args">Save me</BmsButton>
-    <br/>
-    <br/>
-    <BmsButton v-bind="args" small>Save me</BmsButton>
- 
+    <BmsButton type="primary">
+      Next
+      <template #end><ArrowRight /></template>
+    </BmsButton>
   `,
 });
 
-export const Small = TemplateSmall.bind({});
-Small.args = {
-  type: 'primary',
-};
+// Do: Submit button
+export const DoSubmit = () => ({
+  components: { BmsButton },
+  template: `
+    <form>
+      <BmsButton type="primary" :submit="true">Submit form</BmsButton>
+    </form>
+  `,
+});
+
+// Don't: Long labels
+export const DontLongLabel = () => ({
+  components: { BmsButton },
+  template:
+    '<BmsButton type="primary">Click here to save your changes to the document</BmsButton>',
+});
+
+export const DoShortLabel = () => ({
+  components: { BmsButton },
+  template: '<BmsButton type="primary">Save changes</BmsButton>',
+});
+
+// Don't: Multiple primary buttons
+export const DontMultiplePrimary = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Save</BmsButton>
+      <BmsButton type="primary">Cancel</BmsButton>
+      <BmsButton type="primary">Delete</BmsButton>
+    </div>
+  `,
+});
+
+export const DoOnePrimary = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Save</BmsButton>
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="secondary">Delete</BmsButton>
+    </div>
+  `,
+});
+
+// Don't: Too many icons
+export const DontTooManyIcons = () => ({
+  components: { BmsButton, Heart, Wand, Check, ArrowRight },
+  template: `
+    <BmsButton type="primary">
+      <template #start><Heart /><Wand /></template>
+      Save changes
+      <template #end><Check /><ArrowRight /></template>
+    </BmsButton>
+  `,
+});
+
+export const DoOneIcon = () => ({
+  components: { BmsButton, ArrowRight },
+  template: `
+    <BmsButton type="primary">
+      <template #end><ArrowRight /></template>
+      Next
+    </BmsButton>
+  `,
+});
+
+// Don't: Generic labels
+export const DontGenericLabel = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Click here</BmsButton>
+      <BmsButton type="primary">Submit</BmsButton>
+    </div>
+  `,
+});
+
+export const DoSpecificLabel = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Save changes</BmsButton>
+      <BmsButton type="primary">Confirm order</BmsButton>
+    </div>
+  `,
+});
+
+// Don't: Primary for cancel
+export const DontPrimaryForCancel = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="primary">Cancel</BmsButton>
+      <BmsButton type="secondary">Save</BmsButton>
+    </div>
+  `,
+});
+
+export const DoPrimaryForSave = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="primary">Save</BmsButton>
+    </div>
+  `,
+});

package/src/components/button/BmsIconButton.stories.js

@@ -1,11 +1,16 @@
-import { Heart } from 'lucide-vue-next';
+import { SquarePen } from 'lucide-vue-next';
 import BmsIconButton from './BmsIconButton.vue';
 import { StatusType } from '@/models';
 import { vueRouter } from 'storybook-vue3-router';
 
+const WITH_DEFAULT_SLOT = {
+  default: '<SquarePen/>',
+};
+
 export default {
   title: 'Composants/button/IconButton',
   component: BmsIconButton,
+  tags: ['with_useable_code'],
   decorators: [
     vueRouter([
       {
@@ -26,21 +31,21 @@ export default {
 const Template = (args) => ({
   components: {
     BmsIconButton,
-    Heart,
+    SquarePen,
   },
   setup() {
     return { args };
   },
   template: `
     <br><b>default</b>
-    <BmsIconButton v-bind="args"><Heart/></BmsIconButton>
+    <BmsIconButton v-bind="args"><SquarePen/></BmsIconButton>
     <br>
     <br> <b>:hover</b>
-    <BmsIconButton v-bind="args" class="_hover"><Heart/></BmsIconButton>
+    <BmsIconButton v-bind="args" class="_hover"><SquarePen/></BmsIconButton>
 
     <br>
     <br> <b>Small</b>
-    <BmsIconButton v-bind="args" small><Heart/></BmsIconButton>
+    <BmsIconButton v-bind="args" small><SquarePen/></BmsIconButton>
 
 
     <br> <b>BmsIconButton must be on same alignment (using BmsLink and native button html tag)</b>
@@ -48,7 +53,7 @@ const Template = (args) => ({
         tooltip-text="BmsIconButton with BmsLink"
         to="/toto"
     >
-      <Heart/>
+      <SquarePen/>
     </BmsIconButton>
     <BmsIconButton
         tooltip-text="BmsIconButton with button html tag"
@@ -59,13 +64,14 @@ const Template = (args) => ({
 });
 
 export const IconButton = Template.bind({});
-IconButton.args = {};
+IconButton.args = { ...WITH_DEFAULT_SLOT };
 
 export const IconButtonWithTargetLink = Template.bind({});
 IconButtonWithTargetLink.args = {
   target: '_blank',
   to: { name: 'firstRoute' },
+  ...WITH_DEFAULT_SLOT,
 };
 
 export const DangerIconButton = Template.bind({});
-DangerIconButton.args = { mode: StatusType.Danger };
+DangerIconButton.args = { mode: StatusType.Danger, ...WITH_DEFAULT_SLOT };

package/src/components/button/UiButton.stories.js

@@ -18,6 +18,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/button/UiButton',
   component: UiButton,
   argTypes: {
@@ -119,20 +120,50 @@ const TemplateIcon = ({ mode }) => ({
 
 export const IconButton = TemplateIcon.bind({});
 IconButton.args = {};
+IconButton.parameters = {
+  docs: {
+    // 👇 Disable Code panel for this specific story
+    codePanel: false,
+  },
+};
 
 export const IconButtonWithRouterArg = Template.bind({});
 IconButtonWithRouterArg.args = { to: { name: 'route' } };
+IconButtonWithRouterArg.parameters = {
+  docs: {
+    // 👇 Disable Code panel for this specific story
+    codePanel: false,
+  },
+};
 
 export const Error = Template.bind({});
 Error.args = {
   color: StatusType.Danger,
 };
+Error.parameters = {
+  docs: {
+    // 👇 Disable Code panel for this specific story
+    codePanel: false,
+  },
+};
 
 export const PrimaryUI = Template.bind({});
 PrimaryUI.args = {};
+PrimaryUI.parameters = {
+  docs: {
+    // 👇 Disable Code panel for this specific story
+    codePanel: false,
+  },
+};
 
 export const SecondaryUI = Template.bind({});
 SecondaryUI.args = {
   color: StatusType.Default,
   mode: 'outline',
 };
+SecondaryUI.parameters = {
+  docs: {
+    // 👇 Disable Code panel for this specific story
+    codePanel: false,
+  },
+};

package/src/components/feedback/BmsCircularProgress.stories.js

@@ -1,10 +1,8 @@
 import BmsCircularProgress from '@/components/feedback/BmsCircularProgress.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
   title: 'Composants/feedback/CircularProgress',
   component: BmsCircularProgress,
-  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
     progress: {
       control: { type: 'number' },
@@ -12,24 +10,19 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: {
     BmsCircularProgress,
   },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: `
     <BmsCircularProgress v-bind="args" />
   `,
 });
 
 export const NoProgress = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 NoProgress.args = {
   progress: 0,
 };

package/src/components/feedback/BmsLoader.stories.js

@@ -1,22 +1,17 @@
 import BmsLoader from '@/components/feedback/BmsLoader.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
   title: 'Composants/feedback/Loader',
   component: BmsLoader,
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: {
     BmsLoader,
   },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: `
     <BmsLoader v-bind="args">
       This is content
@@ -25,7 +20,6 @@ const Template = (args) => ({
 });
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Primary.args = {
   size: 64,
 };

package/src/components/feedback/BmsTooltip.stories.js

@@ -60,5 +60,6 @@ const TemplateSlot = (args) => ({
 });
 export const WithSlot = TemplateSlot.bind({});
 WithSlot.args = {};
+
 export const WithTooltipText = TemplateSlot.bind({});
 WithTooltipText.args = { tooltipText: 'this is my tooltip' };

package/src/components/feedback/UiTooltip.stories.js

@@ -7,6 +7,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/feedback/UiTooltip',
   component: UiTooltip,
 };