@ouestfrance/sipa-bms-ui 8.22.2 → 8.22.3

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/BmsInputRadioCaptionGroup.stories.js

@@ -1,17 +1,18 @@
 import BmsInputRadioCaptionGroup from '@/components/form/BmsInputRadioCaptionGroup.vue';
 import BmsInputRadioCaption from '@/components/form/BmsInputRadioCaption.vue';
 import { StatusType } from '@/models/status-type.model';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputRadioCaptionGroup',
+  component: BmsInputRadioCaptionGroup,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/InputRadioCaptionGroup',
-  component: BmsInputRadioCaptionGroup,
 };
 
 const Template = (args) => ({
@@ -164,3 +165,138 @@ Slot.args = {
   label: 'This is a field label',
   slot: true,
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputRadioCaptionGroup,
+  },
+  template: `
+  <BmsInputRadioCaptionGroup v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundRadioCaptionGroup = SimpleTemplate.bind({});
+PlaygroundRadioCaptionGroup.parameters = { chromatic: { disable: true } };
+PlaygroundRadioCaptionGroup.args = {
+  label: 'Payment method',
+  modelValue: '',
+  options: [
+    {
+      value: 'credit',
+      label: 'Credit Card',
+      captions: ['Visa, Mastercard, Amex'],
+    },
+    { value: 'paypal', label: 'PayPal', captions: ['Pay with PayPal account'] },
+    {
+      value: 'bank',
+      label: 'Bank Transfer',
+      captions: ['Direct bank transfer'],
+    },
+  ],
+};
+
+// Do: Radio caption group with clear labels
+export const DoWithClearLabels = SimpleTemplate.bind({});
+DoWithClearLabels.parameters = { chromatic: { disable: true } };
+DoWithClearLabels.args = {
+  label: 'Subscription plan',
+  modelValue: '',
+  options: [
+    { value: 'basic', label: 'Basic', captions: ['$9/month'] },
+    { value: 'pro', label: 'Pro', captions: ['$29/month'] },
+    { value: 'enterprise', label: 'Enterprise', captions: ['Custom pricing'] },
+  ],
+};
+
+// Do: Radio caption group with helpful captions
+export const DoWithHelpfulCaptions = SimpleTemplate.bind({});
+DoWithHelpfulCaptions.parameters = { chromatic: { disable: true } };
+DoWithHelpfulCaptions.args = {
+  label: 'Delivery option',
+  modelValue: '',
+  options: [
+    { value: 'standard', label: 'Standard', captions: ['5-7 business days'] },
+    { value: 'express', label: 'Express', captions: ['2-3 business days'] },
+    { value: 'overnight', label: 'Overnight', captions: ['Next business day'] },
+  ],
+};
+
+// Do: Radio caption group with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Payment method',
+  modelValue: '',
+  errors: ['Please select a payment method'],
+  options: [
+    { value: 'credit', label: 'Credit Card', captions: ['Visa, Mastercard'] },
+    { value: 'paypal', label: 'PayPal', captions: ['Pay with PayPal'] },
+  ],
+};
+
+// 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 an option',
+  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 plan',
+  modelValue: '',
+  options: [
+    { value: 'basic', label: 'Basic' },
+    { value: 'pro', label: 'Pro' },
+    { value: 'enterprise', label: 'Enterprise' },
+  ],
+};
+
+// Do: Radio caption group in column layout
+export const DoWithColumnLayout = SimpleTemplate.bind({});
+DoWithColumnLayout.parameters = { chromatic: { disable: true } };
+DoWithColumnLayout.args = {
+  label: 'Delivery option',
+  modelValue: '',
+  align: 'column',
+  options: [
+    {
+      value: 'standard',
+      label: 'Standard Delivery',
+      captions: ['5-7 business days - Free'],
+    },
+    {
+      value: 'express',
+      label: 'Express Delivery',
+      captions: ['2-3 business days - $10'],
+    },
+    {
+      value: 'overnight',
+      label: 'Overnight Delivery',
+      captions: ['Next business day - $25'],
+    },
+  ],
+};

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

@@ -1,17 +1,18 @@
 import BmsInputRadioGroup from '@/components/form/BmsInputRadioGroup.vue';
 import BmsInputRadio from '@/components/form/BmsInputRadio.vue';
 import { StatusType } from '@/models/status-type.model';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputRadioGroup',
+  component: BmsInputRadioGroup,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/InputRadioGroup',
-  component: BmsInputRadioGroup,
 };
 
 const Template = (args) => ({
@@ -118,3 +119,120 @@ Slot.args = {
   label: 'This is a field label',
   slot: true,
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputRadioGroup,
+  },
+  template: `
+  <BmsInputRadioGroup v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundRadioGroup = SimpleTemplate.bind({});
+PlaygroundRadioGroup.parameters = { chromatic: { disable: true } };
+PlaygroundRadioGroup.args = {
+  label: 'Gender',
+  modelValue: '',
+  values: [
+    { value: 'male', label: 'Male' },
+    { value: 'female', label: 'Female' },
+    { value: 'other', label: 'Other' },
+  ],
+};
+
+// Do: Radio group with clear labels
+export const DoWithClearLabels = SimpleTemplate.bind({});
+DoWithClearLabels.parameters = { chromatic: { disable: true } };
+DoWithClearLabels.args = {
+  label: 'Notification preference',
+  modelValue: '',
+  values: [
+    { value: 'email', label: 'Email' },
+    { value: 'sms', label: 'SMS' },
+    { value: 'push', label: 'Push notifications' },
+  ],
+};
+
+// Do: Radio group with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Account type',
+  modelValue: '',
+  captions: ['Select the type of account you want to create'],
+  values: [
+    { value: 'personal', label: 'Personal' },
+    { value: 'business', label: 'Business' },
+  ],
+};
+
+// Do: Radio group with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Gender',
+  modelValue: '',
+  errors: ['Please select a gender'],
+  values: [
+    { value: 'male', label: 'Male' },
+    { value: 'female', label: 'Female' },
+    { value: 'other', label: 'Other' },
+  ],
+};
+
+// 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 an option',
+  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: 'Gender',
+  modelValue: '',
+  values: [
+    { value: 'male', label: 'Male' },
+    { value: 'female', label: 'Female' },
+  ],
+};
+
+// Do: Radio group in column layout
+export const DoWithColumnLayout = SimpleTemplate.bind({});
+DoWithColumnLayout.parameters = { chromatic: { disable: true } };
+DoWithColumnLayout.args = {
+  label: 'Notification preference',
+  modelValue: '',
+  align: 'column',
+  captions: ['Choose how you want to receive notifications'],
+  values: [
+    { value: 'email', label: 'Email notifications' },
+    { value: 'sms', label: 'SMS notifications' },
+    { value: 'push', label: 'Push notifications' },
+    { value: 'none', label: 'No notifications' },
+  ],
+};