@ouestfrance/sipa-bms-ui 8.18.0 → 8.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.18.0",
+  "version": "8.20.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -70,6 +70,7 @@
     "start-server-and-test": "2.1.3",
     "storybook": "10.0.8",
     "storybook-addon-pseudo-states": "10.0.8",
+    "storybook-addon-tag-badges": "^3.0.2",
     "storybook-vue3-router": "^7.0.0",
     "typescript": "5.2.2",
     "uuid": "13.0.0",

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

@@ -5,6 +5,7 @@ import { StatusType } from '@/models';
 export default {
   title: 'Composants/button/Button',
   component: BmsButton,
+  tags: ['with_useable_code'],
   argTypes: {
     type: {
       control: { type: 'select' },
@@ -62,49 +63,40 @@ const Template = (args) => ({
   `,
 });
 
+const WITH_DEFAULT_SLOT = {
+  start: '<Heart/>',
+  default: 'Mon texte',
+  end: '<Wand/>',
+};
+
 export const Primary = Template.bind({});
 Primary.args = {
   type: 'primary',
+  ...WITH_DEFAULT_SLOT,
 };
 
 export const PrimaryDanger = Template.bind({});
 PrimaryDanger.args = {
+  ...WITH_DEFAULT_SLOT,
   type: 'primary',
   mode: StatusType.Danger,
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
+  ...WITH_DEFAULT_SLOT,
   type: 'secondary',
 };
 
 export const Tertiary = Template.bind({});
 Tertiary.args = {
+  ...WITH_DEFAULT_SLOT,
   type: 'tertiary',
 };
 
-const TemplateSmall = (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" small>Save me</BmsButton>
- 
-  `,
-});
-
-export const Small = TemplateSmall.bind({});
+export const Small = Template.bind({});
 Small.args = {
+  ...WITH_DEFAULT_SLOT,
   type: 'primary',
+  small: true,
 };

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,
 };

package/src/components/form/BmsAutocomplete.stories.js

@@ -2,6 +2,7 @@ import BmsAutocomplete from '@/components/form/BmsAutocomplete.vue';
 import { Cat, Heart, Wheat } from 'lucide-vue-next';
 
 import template from '@/documentation/template_field_dependency.mdx';
+import { DEFAULT_FIELD_INPUT } from '../../../.storybook/constants';
 
 export default {
   parameters: {
@@ -9,7 +10,8 @@ export default {
       page: template,
     },
   },
-  title: 'Composants/form/AutocompleteTextIcon',
+  tags: ['with_useable_code'],
+  title: 'Composants/form/Autocomplete',
   component: BmsAutocomplete,
   argTypes: {},
 };
@@ -31,6 +33,7 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
@@ -42,6 +45,7 @@ Default.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
@@ -54,6 +58,7 @@ Disabled.args = {
 
 export const Loading = Template.bind({});
 Loading.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   loading: true,
   options: [
@@ -66,6 +71,7 @@ Loading.args = {
 
 export const WithStringArray = Template.bind({});
 WithStringArray.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: ['titi', 'toto', 'tutu'],
   modelValue: '',
@@ -74,6 +80,7 @@ WithStringArray.args = {
 
 export const WithValue = Template.bind({});
 WithValue.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
@@ -86,6 +93,7 @@ WithValue.args = {
 export const Opened = Template.bind({});
 Opened.parameters = { pseudo: { focus: 'input' } };
 Opened.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
@@ -97,6 +105,7 @@ Opened.args = {
 };
 export const IconsWithValue = Template.bind({});
 IconsWithValue.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i', icon: Heart },
@@ -109,6 +118,7 @@ IconsWithValue.args = {
 export const IconsOpened = Template.bind({});
 IconsOpened.parameters = { pseudo: { focus: 'input' } };
 IconsOpened.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i', icon: Heart },

package/src/components/form/BmsBetweenInput.stories.js

@@ -1,6 +1,6 @@
 import { BookOpen, CloudLightning } from 'lucide-vue-next';
 import BmsBetweenInput from './BmsBetweenInput.vue';
-import { StatusType, InputType } from '../../models';
+import { InputType, StatusType } from '../../models';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
@@ -11,6 +11,7 @@ export default {
     },
   },
   title: 'Composants/form/BetweenInput',
+  tags: ['with_useable_code'],
   component: BmsBetweenInput,
 };
 
@@ -32,8 +33,20 @@ const Template = (args) => ({
   `,
 });
 
+const DEFAULT_BEETWEEN_INPUT = {
+  inputType: InputType.NUMBER,
+  label: 'My label',
+  required: false,
+  optional: false,
+  disabled: false,
+  helperText: 'help me !',
+  captions: [],
+  errors: [],
+};
+
 export const Default = Template.bind({});
 Default.args = {
+  ...DEFAULT_BEETWEEN_INPUT,
   label: 'My label',
   placeholderFrom: 'Placeholder From',
   placeholderTo: 'Placeholder To',
@@ -42,6 +55,7 @@ Default.args = {
 
 export const WithDate = Template.bind({});
 WithDate.args = {
+  ...DEFAULT_BEETWEEN_INPUT,
   inputType: InputType.DATETIME,
   label: 'My label',
   placeholderFrom: 'Placeholder From',
@@ -51,6 +65,7 @@ WithDate.args = {
 
 export const WithBadPresetValueDate = Template.bind({});
 WithBadPresetValueDate.args = {
+  ...DEFAULT_BEETWEEN_INPUT,
   inputType: InputType.DATETIME,
   label: 'My label',
   placeholderFrom: 'Placeholder From',
@@ -62,6 +77,7 @@ WithBadPresetValueDate.args = {
 
 export const WithErrors = Template.bind({});
 WithErrors.args = {
+  ...DEFAULT_BEETWEEN_INPUT,
   label: 'My label',
   placeholderFrom: 'Placeholder From',
   placeholderTo: 'Placeholder To',

package/src/components/form/BmsFilePicker.stories.js

@@ -9,6 +9,7 @@ export default {
     },
   },
   title: 'Composants/form/FilePicker',
+  tags: ['with_useable_code'],
   component: BmsFilePicker,
   argTypes: {
     limit: {
@@ -31,10 +32,11 @@ const Template = (args) => ({
 });
 
 export const Empty = Template.bind({});
-Empty.args = {};
+Empty.args = { modelValue: [], limit: 5 };
 
 export const WithFiles = Template.bind({});
 WithFiles.args = {
+  limit: 5,
   modelValue: [
     {
       name: 'Name of a file',

package/src/components/form/BmsInputBooleanCheckbox.stories.js

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { StatusType } from '@/models';
 
 import template from '@/documentation/template_field_dependency.mdx';
+import { DEFAULT_FIELD_INPUT } from '../../../.storybook/constants';
 
 export default {
   parameters: {
@@ -10,6 +11,7 @@ export default {
       page: template,
     },
   },
+  tags: ['with_useable_code'],
   title: 'Composants/form/InputBooleanCheckbox',
   component: BmsInputBooleanCheckbox,
 };
@@ -42,12 +44,14 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
+  ...DEFAULT_FIELD_INPUT,
   labelValue: 'check me !',
   name: 'myCheckboxName',
 };
 
 export const WithNotBooleanModelValue = Template.bind({});
 WithNotBooleanModelValue.args = {
+  ...DEFAULT_FIELD_INPUT,
   modelValue: 'COCHEEEEEEEE',
   labelValue: 'check me !',
   name: 'myCheckboxName',
@@ -55,6 +59,7 @@ WithNotBooleanModelValue.args = {
 
 export const DefaultWithCheckedValue = Template.bind({});
 DefaultWithCheckedValue.args = {
+  ...DEFAULT_FIELD_INPUT,
   modelValue: true,
   labelValue: 'check me !',
   name: 'myCheckboxName',
@@ -62,6 +67,7 @@ DefaultWithCheckedValue.args = {
 
 export const WithLabel = Template.bind({});
 WithLabel.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My label',
   labelValue: 'check me !',
   modelValue: false,
@@ -70,6 +76,7 @@ WithLabel.args = {
 
 export const WithLabelAsSlot = Template.bind({});
 WithLabelAsSlot.args = {
+  ...DEFAULT_FIELD_INPUT,
   name: 'myCheckboxName',
   labelValue: 'check me !',
   modelValue: false,
@@ -78,6 +85,7 @@ WithLabelAsSlot.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  ...DEFAULT_FIELD_INPUT,
   name: 'myCheckboxName',
   labelValue: 'check me !',
   label: 'My label',
@@ -87,6 +95,7 @@ Disabled.args = {
 
 export const Error = Template.bind({});
 Error.args = {
+  ...DEFAULT_FIELD_INPUT,
   name: 'myCheckboxName',
   labelValue: 'check me !',
   label: 'My label',

package/src/components/form/BmsInputCheckboxCaption.stories.js

@@ -9,6 +9,7 @@ export default {
       page: template,
     },
   },
+  tags: ['with_useable_code'],
   title: 'Composants/form/InputCheckboxCaption',
   component: BmsInputCheckboxCaption,
 };
@@ -38,8 +39,18 @@ const Template = (args) => ({
     `,
 });
 
+const DEFAULT_CHECKBOXCAPTION_INPUT = {
+  label: 'Mon texte',
+  options: [],
+  required: false,
+  disabled: false,
+  captions: [],
+  errors: [],
+};
+
 export const Default = Template.bind({});
 Default.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   modelValue: null,
   label: 'MyLabel',
   name: 'myInput',
@@ -47,6 +58,7 @@ Default.args = {
 
 export const WithLabelAsSlot = Template.bind({});
 WithLabelAsSlot.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   modelValue: null,
   labelSlot: 'This is a slotted value',
   name: 'myInput',
@@ -54,6 +66,7 @@ WithLabelAsSlot.args = {
 
 export const WithCaptions = Template.bind({});
 WithCaptions.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   label: 'My label',
   modelValue: null,
   captions: ['Caption form my label 1', 'Caption form my label 2'],
@@ -62,6 +75,7 @@ WithCaptions.args = {
 
 export const WithCaptionMode = Template.bind({});
 WithCaptionMode.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   label: 'My label',
   modelValue: null,
   captions: [
@@ -75,6 +89,7 @@ WithCaptionMode.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   label: 'My label',
   modelValue: null,
   disabled: true,
@@ -84,6 +99,7 @@ Disabled.args = {
 
 export const Error = Template.bind({});
 Error.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   label: 'My label',
   modelValue: null,
   errors: ['Error 1', 'Error 2'],

package/src/components/form/BmsInputCheckboxCaptionGroup.stories.js

@@ -11,6 +11,7 @@ export default {
       page: template,
     },
   },
+  tags: ['with_useable_code'],
   title: 'Composants/form/InputCheckboxCaptionGroup',
   component: BmsInputCheckboxCaptionGroup,
 };
@@ -30,8 +31,21 @@ const Template = (args) => ({
     `,
 });
 
+const DEFAULT_CHECKBOXCAPTION_INPUT = {
+  options: [],
+  required: false,
+  optional: false,
+  disabled: false,
+  helperText: 'help me !',
+  captions: [],
+  errors: [],
+  align: 'right',
+};
+
 export const DefaultRow = Template.bind({});
 DefaultRow.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
+  label: 'This is a field label',
   options: [
     { value: 'tata', label: 'Tata', captions: ['Caption for tata'] },
     { value: 'titi', label: 'Titi', captions: ['Caption for titi'] },
@@ -43,11 +57,11 @@ DefaultRow.args = {
     { label: 'Caption for group', mode: StatusType.Success },
   ],
   modelValue: [],
-  label: 'This is a field label',
 };
 
 export const DefaultColumn = Template.bind({});
 DefaultColumn.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -61,6 +75,7 @@ DefaultColumn.args = {
 
 export const WithCaptionMode = Template.bind({});
 WithCaptionMode.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     {
       value: 'tata',
@@ -89,6 +104,7 @@ WithCaptionMode.args = {
 
 export const DefaultSelected = Template.bind({});
 DefaultSelected.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -101,6 +117,7 @@ DefaultSelected.args = {
 
 export const FullHelp = Template.bind({});
 FullHelp.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -115,6 +132,7 @@ FullHelp.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -128,6 +146,7 @@ Disabled.args = {
 
 export const Required = Template.bind({});
 Required.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -141,6 +160,7 @@ Required.args = {
 
 export const Errors = Template.bind({});
 Errors.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },

package/src/components/form/BmsInputText.vue

@@ -53,6 +53,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   required: false,
   disabled: false,
+  small: false,
 });
 
 const input: Ref<HTMLElement | null> = ref(null);