@ouestfrance/sipa-bms-ui 8.22.2 → 8.23.0

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

@@ -6,14 +6,14 @@ import { ref } from 'vue';
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputCheckboxCaptionGroup',
+  component: BmsInputCheckboxCaptionGroup,
   parameters: {
     docs: {
       page: template,
     },
   },
   tags: ['with_useable_code'],
-  title: 'Composants/form/InputCheckboxCaptionGroup',
-  component: BmsInputCheckboxCaptionGroup,
 };
 
 const Template = (args) => ({
@@ -171,3 +171,158 @@ Errors.args = {
   label: 'This is a field label',
   errors: ['Error 1', 'Error 2'],
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || []);
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputCheckboxCaptionGroup,
+  },
+  template: `
+  <BmsInputCheckboxCaptionGroup v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundCheckboxCaptionGroup = SimpleTemplate.bind({});
+PlaygroundCheckboxCaptionGroup.parameters = { chromatic: { disable: true } };
+PlaygroundCheckboxCaptionGroup.args = {
+  label: 'Select features',
+  modelValue: [],
+  options: [
+    {
+      value: 'feature1',
+      label: 'Feature 1',
+      captions: ['Basic feature included'],
+    },
+    { value: 'feature2', label: 'Feature 2', captions: ['Advanced feature'] },
+    { value: 'feature3', label: 'Feature 3', captions: ['Premium feature'] },
+  ],
+};
+
+// Do: Checkbox caption group with clear labels
+export const DoWithClearLabels = SimpleTemplate.bind({});
+DoWithClearLabels.parameters = { chromatic: { disable: true } };
+DoWithClearLabels.args = {
+  label: 'Notification preferences',
+  modelValue: [],
+  options: [
+    {
+      value: 'email',
+      label: 'Email notifications',
+      captions: ['Receive updates via email'],
+    },
+    {
+      value: 'sms',
+      label: 'SMS notifications',
+      captions: ['Receive updates via SMS'],
+    },
+    {
+      value: 'push',
+      label: 'Push notifications',
+      captions: ['Receive browser notifications'],
+    },
+  ],
+};
+
+// Do: Checkbox caption group with helpful captions
+export const DoWithHelpfulCaptions = SimpleTemplate.bind({});
+DoWithHelpfulCaptions.parameters = { chromatic: { disable: true } };
+DoWithHelpfulCaptions.args = {
+  label: 'Subscription add-ons',
+  modelValue: [],
+  options: [
+    {
+      value: 'storage',
+      label: 'Extra Storage',
+      captions: ['+100GB storage space'],
+    },
+    {
+      value: 'support',
+      label: 'Priority Support',
+      captions: ['24/7 priority support'],
+    },
+    {
+      value: 'analytics',
+      label: 'Advanced Analytics',
+      captions: ['Detailed usage analytics'],
+    },
+  ],
+};
+
+// Do: Checkbox caption group in column layout
+export const DoWithColumnLayout = SimpleTemplate.bind({});
+DoWithColumnLayout.parameters = { chromatic: { disable: true } };
+DoWithColumnLayout.args = {
+  label: 'Select services',
+  modelValue: [],
+  align: 'column',
+  options: [
+    {
+      value: 'service1',
+      label: 'Service 1',
+      captions: ['Description of service 1 with more details'],
+    },
+    {
+      value: 'service2',
+      label: 'Service 2',
+      captions: ['Description of service 2 with more details'],
+    },
+    {
+      value: 'service3',
+      label: 'Service 3',
+      captions: ['Description of service 3 with more details'],
+    },
+  ],
+};
+
+// Do: Checkbox caption group with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Select features',
+  modelValue: [],
+  errors: ['Please select at least one feature'],
+  options: [
+    { value: 'feature1', label: 'Feature 1', captions: ['Basic feature'] },
+    { value: 'feature2', label: 'Feature 2', captions: ['Advanced feature'] },
+  ],
+};
+
+// Don't: Missing labels
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  modelValue: [],
+  options: [
+    { value: 'option1', label: 'Option 1', captions: ['Description'] },
+    { value: 'option2', label: 'Option 2', captions: ['Description'] },
+  ],
+};
+
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Choose options',
+  modelValue: [],
+  options: [
+    { value: 'option1', label: 'Option 1', captions: ['Description'] },
+    { value: 'option2', label: 'Option 2', captions: ['Description'] },
+  ],
+};
+
+// Don't: No captions when needed
+export const DontNoCaptions = SimpleTemplate.bind({});
+DontNoCaptions.parameters = { chromatic: { disable: true } };
+DontNoCaptions.args = {
+  label: 'Subscription add-ons',
+  modelValue: [],
+  options: [
+    { value: 'storage', label: 'Extra Storage' },
+    { value: 'support', label: 'Priority Support' },
+    { value: 'analytics', label: 'Advanced Analytics' },
+  ],
+};

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

@@ -6,13 +6,13 @@ import { ref } from 'vue';
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputCheckboxGroup',
+  component: BmsInputCheckboxGroup,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/InputCheckboxGroup',
-  component: BmsInputCheckboxGroup,
 };
 
 const Template = (args) => ({
@@ -92,3 +92,120 @@ Errors.args = {
   label: 'This is a field label',
   errors: ['Error 1', 'Error 2'],
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || []);
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputCheckboxGroup,
+  },
+  template: `
+  <BmsInputCheckboxGroup v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundCheckboxGroup = SimpleTemplate.bind({});
+PlaygroundCheckboxGroup.parameters = { chromatic: { disable: true } };
+PlaygroundCheckboxGroup.args = {
+  label: 'Select interests',
+  modelValue: [],
+  values: [
+    { value: 'sports', label: 'Sports' },
+    { value: 'music', label: 'Music' },
+    { value: 'travel', label: 'Travel' },
+  ],
+};
+
+// Do: Checkbox group with clear labels
+export const DoWithClearLabels = SimpleTemplate.bind({});
+DoWithClearLabels.parameters = { chromatic: { disable: true } };
+DoWithClearLabels.args = {
+  label: 'Communication preferences',
+  modelValue: [],
+  values: [
+    { value: 'email', label: 'Email' },
+    { value: 'sms', label: 'SMS' },
+    { value: 'phone', label: 'Phone' },
+  ],
+};
+
+// Do: Checkbox group with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Select categories',
+  modelValue: [],
+  captions: ['You can select multiple categories'],
+  values: [
+    { value: 'tech', label: 'Technology' },
+    { value: 'design', label: 'Design' },
+    { value: 'business', label: 'Business' },
+  ],
+};
+
+// Do: Checkbox group in column layout
+export const DoWithColumnLayout = SimpleTemplate.bind({});
+DoWithColumnLayout.parameters = { chromatic: { disable: true } };
+DoWithColumnLayout.args = {
+  label: 'Select permissions',
+  modelValue: [],
+  align: 'column',
+  captions: ['Select all permissions you want to grant'],
+  values: [
+    { value: 'read', label: 'Read access' },
+    { value: 'write', label: 'Write access' },
+    { value: 'delete', label: 'Delete access' },
+    { value: 'admin', label: 'Admin access' },
+  ],
+};
+
+// Do: Checkbox group with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Select interests',
+  modelValue: [],
+  errors: ['Please select at least one interest'],
+  values: [
+    { value: 'sports', label: 'Sports' },
+    { value: 'music', label: 'Music' },
+  ],
+};
+
+// Don't: Missing labels
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  modelValue: [],
+  values: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+  ],
+};
+
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Choose options',
+  modelValue: [],
+  values: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+  ],
+};
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'Select interests',
+  modelValue: [],
+  values: [
+    { value: 'sports', label: 'Sports' },
+    { value: 'music', label: 'Music' },
+  ],
+};

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

@@ -1,15 +1,16 @@
 import BmsInputCode from '@/components/form/BmsInputCode.vue';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputCode',
+  component: BmsInputCode,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/InputCode',
-  component: BmsInputCode,
 };
 
 const Template = (args) => ({
@@ -51,3 +52,109 @@ Disabled.args = {
   <div></div>
   <div></div>`,
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputCode,
+  },
+  template: `
+  <BmsInputCode v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundInputCode = SimpleTemplate.bind({});
+PlaygroundInputCode.parameters = { chromatic: { disable: true } };
+PlaygroundInputCode.args = {
+  label: 'Code editor',
+  type: 'json',
+  modelValue: '{\n  "key": "value"\n}',
+};
+
+// Do: Input code with clear label
+export const DoWithClearLabel = SimpleTemplate.bind({});
+DoWithClearLabel.parameters = { chromatic: { disable: true } };
+DoWithClearLabel.args = {
+  label: 'JSON Configuration',
+  type: 'json',
+  modelValue: '{\n  "name": "example"\n}',
+};
+
+// Do: Input code with HTML type
+export const DoWithHtmlType = SimpleTemplate.bind({});
+DoWithHtmlType.parameters = { chromatic: { disable: true } };
+DoWithHtmlType.args = {
+  label: 'HTML Template',
+  type: 'html',
+  modelValue: '<div class="container">\n  <p>Content</p>\n</div>',
+};
+
+// Do: Input code with JSON type and validation
+export const DoWithJsonType = SimpleTemplate.bind({});
+DoWithJsonType.parameters = { chromatic: { disable: true } };
+DoWithJsonType.args = {
+  label: 'Configuration JSON',
+  type: 'json',
+  modelValue: '{\n  "setting": true,\n  "value": 42\n}',
+  captions: ['JSON syntax is automatically validated'],
+};
+
+// Do: Input code with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Code snippet',
+  type: 'html',
+  modelValue: '<div>Example</div>',
+  captions: ['Enter valid HTML code'],
+};
+
+// Do: Disabled state
+export const DoDisabled = SimpleTemplate.bind({});
+DoDisabled.parameters = { chromatic: { disable: true } };
+DoDisabled.args = {
+  label: 'Read-only code',
+  type: 'json',
+  modelValue: '{\n  "readonly": true\n}',
+  disabled: true,
+};
+
+// Do: Input code with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'JSON Configuration',
+  type: 'json',
+  modelValue: '{\n  "invalid": json\n}',
+  errors: ['Invalid JSON syntax'],
+};
+
+// Don't: Missing labels
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  type: 'json',
+  modelValue: '{\n  "key": "value"\n}',
+};
+
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Code editor',
+  type: 'json',
+  modelValue: '{\n  "key": "value"\n}',
+};
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'JSON Configuration',
+  type: 'json',
+  modelValue: '{\n  "invalid": syntax\n}',
+};

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

@@ -1,17 +1,18 @@
 import BmsInputFile from './BmsInputFile.vue';
 import { within } from 'storybook/test';
 import { base64StringToBlob } from 'blob-util';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputFile',
+  component: BmsInputFile,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/InputFile',
-  component: BmsInputFile,
 };
 
 const Template = (args) => ({
@@ -157,3 +158,110 @@ WideWithImage.args = {
   limit: 1,
   wide: true,
 };
+
+// Simple template for documentation (without small variant)
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || []);
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputFile,
+  },
+  template: `
+  <BmsInputFile v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundInputFile = SimpleTemplate.bind({});
+PlaygroundInputFile.parameters = { chromatic: { disable: true } };
+PlaygroundInputFile.args = {
+  label: 'Upload file',
+  modelValue: [],
+  limit: 10,
+};
+
+// Do: Input file with clear label
+export const DoWithClearLabel = SimpleTemplate.bind({});
+DoWithClearLabel.parameters = { chromatic: { disable: true } };
+DoWithClearLabel.args = {
+  label: 'Upload document',
+  modelValue: [],
+  limit: 10,
+};
+
+// Do: Input file with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Upload image',
+  modelValue: [],
+  captions: ['Maximum file size: 10MB'],
+  limit: 10,
+};
+
+// Do: Input file with accept filter
+export const DoWithAcceptFilter = SimpleTemplate.bind({});
+DoWithAcceptFilter.parameters = { chromatic: { disable: true } };
+DoWithAcceptFilter.args = {
+  label: 'Upload image',
+  modelValue: [],
+  accept: 'image/*',
+  captions: ['Only image files are allowed'],
+  limit: 10,
+};
+
+// Do: Disabled state
+export const DoDisabled = SimpleTemplate.bind({});
+DoDisabled.parameters = { chromatic: { disable: true } };
+DoDisabled.args = {
+  label: 'Upload file',
+  modelValue: [],
+  disabled: true,
+  limit: 10,
+};
+
+// Do: Input file with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Upload file',
+  modelValue: [],
+  errors: ['Please upload a file'],
+  limit: 10,
+};
+
+// Don't: Missing label
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  modelValue: [],
+  limit: 10,
+};
+
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Upload file',
+  modelValue: [],
+  limit: 10,
+};
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'Upload file',
+  modelValue: [],
+  limit: 10,
+};
+
+// Don't: No caption for file requirements
+export const DontNoCaption = SimpleTemplate.bind({});
+DontNoCaption.parameters = { chromatic: { disable: true } };
+DontNoCaption.args = {
+  label: 'Upload file',
+  modelValue: [],
+  limit: 5,
+};

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

@@ -70,12 +70,22 @@ WithIcons.args = {
   iconEnd: true,
 };
 
+export const WithLimitAndEmptyValue = Template.bind({});
+WithLimitAndEmptyValue.args = {
+  label: 'My label',
+  modelValue: null,
+  modelValueSmall: undefined,
+  min: 5,
+  max: 8,
+  errors: [],
+};
+
 export const WithLimitExceeded = Template.bind({});
 WithLimitExceeded.args = {
   label: 'My label',
-  modelValue: 10,
+  modelValue: 0,
   modelValueSmall: 2,
-  min: 5,
+  min: 1,
   max: 8,
   errors: [{ label: 'Error 1' }],
 };

package/src/components/form/BmsInputNumber.vue

@@ -70,7 +70,8 @@ const classes = computed(() => {
 
 const checkLimit = () => {
   internalErrors.value = [];
-  if (props.min !== undefined && props.modelValue < props.min) {
+  const hasValue = props.modelValue !== null && props.modelValue !== undefined;
+  if (hasValue && props.min !== undefined && props.modelValue < props.min) {
     internalErrors.value = [
       'Valeur inférieure au minimum autorisé (min : ' + props.min + ')',
     ];