@ouestfrance/sipa-bms-ui 8.22.2 → 8.22.3

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

@@ -1,6 +1,6 @@
 import BmsInputText from '@/components/form/BmsInputText.vue';
 import { within } from 'storybook/test';
-import { BookOpen, CloudLightning } from 'lucide-vue-next';
+import { BookOpen, CloudLightning, Mail, Eye } from 'lucide-vue-next';
 import template from '@/documentation/template_field_dependency.mdx';
 import { ref } from 'vue';
 
@@ -114,3 +114,271 @@ export const WithFocusState = {
     await canvas.getByRole('input').focus();
   },
 };
+
+// Simple template for documentation (without small variant)
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputText,
+    BookOpen,
+    CloudLightning,
+  },
+  template: `
+  <BmsInputText v-bind="args" v-model="modelValue">
+    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
+    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
+  </BmsInputText>
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundInputText = SimpleTemplate.bind({});
+PlaygroundInputText.parameters = { chromatic: { disable: true } };
+PlaygroundInputText.args = {
+  label: 'Email address',
+  placeholder: 'example@email.com',
+};
+
+// Do: Simple input with label
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Full name',
+  placeholder: 'John Doe',
+};
+
+// Do: Input with placeholder
+export const DoWithPlaceholder = SimpleTemplate.bind({});
+DoWithPlaceholder.parameters = { chromatic: { disable: true } };
+DoWithPlaceholder.args = {
+  label: 'Email address',
+  placeholder: 'example@email.com',
+};
+
+// Do: Input with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Password',
+  placeholder: 'Enter your password',
+  captions: ['Must be at least 8 characters'],
+};
+
+// Do: Input with icon at start
+export const DoWithIconStart = () => ({
+  components: { BmsInputText, Mail },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Email" 
+      v-model="value"
+      placeholder="example@email.com"
+    >
+      <template #icon-start><Mail /></template>
+    </BmsInputText>
+  `,
+});
+DoWithIconStart.parameters = { chromatic: { disable: true } };
+
+// Do: Input with icon at end
+export const DoWithIconEnd = () => ({
+  components: { BmsInputText, Eye },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Password" 
+      v-model="value"
+      placeholder="Enter your password"
+    >
+      <template #icon-end><Eye /></template>
+    </BmsInputText>
+  `,
+});
+DoWithIconEnd.parameters = { chromatic: { disable: true } };
+
+// Do: Input with both icons
+export const DoWithIcons = () => ({
+  components: { BmsInputText, Mail, Eye },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Email" 
+      v-model="value"
+      placeholder="example@email.com"
+    >
+      <template #icon-start><Mail /></template>
+      <template #icon-end><Eye /></template>
+    </BmsInputText>
+  `,
+});
+DoWithIcons.parameters = { chromatic: { disable: true } };
+
+// Do: Disabled state
+export const DoDisabled = SimpleTemplate.bind({});
+DoDisabled.parameters = { chromatic: { disable: true } };
+DoDisabled.args = {
+  label: 'Account ID',
+  modelValue: 'ACC-12345',
+  disabled: true,
+};
+
+// Do: Loading state
+export const DoLoading = SimpleTemplate.bind({});
+DoLoading.parameters = { chromatic: { disable: true } };
+DoLoading.args = {
+  label: 'Email',
+  placeholder: 'Loading...',
+  loading: true,
+};
+
+// Do: Input with max length
+export const DoWithMaxLength = SimpleTemplate.bind({});
+DoWithMaxLength.parameters = { chromatic: { disable: true } };
+DoWithMaxLength.args = {
+  label: 'Username',
+  placeholder: 'Enter username',
+  maxlength: 20,
+  modelValue: 'myusernameiswaytoolong',
+};
+
+// Do: Input with min and max length
+export const DoWithMinMaxLength = SimpleTemplate.bind({});
+DoWithMinMaxLength.parameters = { chromatic: { disable: true } };
+DoWithMinMaxLength.args = {
+  label: 'Password',
+  placeholder: 'Enter password',
+  minlength: 8,
+  maxlength: 20,
+  modelValue: 'pass123',
+};
+
+// Don't: Long labels
+export const DontLongLabel = SimpleTemplate.bind({});
+DontLongLabel.parameters = { chromatic: { disable: true } };
+DontLongLabel.args = {
+  label:
+    'Please enter your complete full name including first name, middle name if applicable, and last name',
+  placeholder: 'Name',
+};
+
+export const DoShortLabel = SimpleTemplate.bind({});
+DoShortLabel.parameters = { chromatic: { disable: true } };
+DoShortLabel.args = {
+  label: 'Full name',
+  placeholder: 'John Doe',
+};
+
+// Don't: No label
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  placeholder: 'Enter your email',
+};
+
+// Don't: Generic placeholder
+export const DontGenericPlaceholder = SimpleTemplate.bind({});
+DontGenericPlaceholder.parameters = { chromatic: { disable: true } };
+DontGenericPlaceholder.args = {
+  label: 'Email',
+  placeholder: 'Enter text here',
+};
+
+export const DoSpecificPlaceholder = SimpleTemplate.bind({});
+DoSpecificPlaceholder.parameters = { chromatic: { disable: true } };
+DoSpecificPlaceholder.args = {
+  label: 'Email',
+  placeholder: 'example@email.com',
+};
+
+// Don't: Too many icons
+export const DontTooManyIcons = () => ({
+  components: { BmsInputText, Mail, Eye, BookOpen },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Email" 
+      v-model="value"
+      placeholder="example@email.com"
+    >
+      <template #icon-start>
+        <Mail />
+        <BookOpen />
+      </template>
+      <template #icon-end>
+        <Eye />
+        <BookOpen />
+      </template>
+    </BmsInputText>
+  `,
+});
+DontTooManyIcons.parameters = { chromatic: { disable: true } };
+
+export const DoOneIcon = () => ({
+  components: { BmsInputText, Mail },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Email" 
+      v-model="value"
+      placeholder="example@email.com"
+    >
+      <template #icon-start><Mail /></template>
+    </BmsInputText>
+  `,
+});
+DoOneIcon.parameters = { chromatic: { disable: true } };
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'Email',
+  placeholder: 'email@example.com',
+  modelValue: 'invalid-email',
+};
+
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Email',
+  placeholder: 'email@example.com',
+  modelValue: 'invalid-email',
+  errors: ['Please enter a valid email address'],
+};
+
+// Don't: No caption for complex requirements
+export const DontNoCaption = SimpleTemplate.bind({});
+DontNoCaption.parameters = { chromatic: { disable: true } };
+DontNoCaption.args = {
+  label: 'Username',
+  placeholder: 'Enter username',
+  modelValue: 'JohnDoe',
+  errors: ['Error'],
+};
+
+export const DoWithHelpfulCaption = SimpleTemplate.bind({});
+DoWithHelpfulCaption.parameters = { chromatic: { disable: true } };
+DoWithHelpfulCaption.args = {
+  label: 'Username',
+  placeholder: 'Enter username',
+  modelValue: 'JohnDoe',
+  errors: ['Username is already taken'],
+};

package/src/components/form/BmsMultiSelect.vue

@@ -108,7 +108,9 @@ onKeyUp('Tab', closeDatalist);
 onKeyDown('Backspace', onBackspace);
 
 const onSelectClick = () => {
-  isDatalistOpen.value = !isDatalistOpen.value;
+  if (!props.disabled) {
+    isDatalistOpen.value = !isDatalistOpen.value;
+  }
 };
 const onInput = (e: InputEvent) => {
   emits('input', e);

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

@@ -1,16 +1,17 @@
 import BmsSearch from '@/components/form/BmsSearch.vue';
 import { within } from 'storybook/test';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/Search',
+  component: BmsSearch,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/Search',
-  component: BmsSearch,
 };
 
 const Template = (args) => ({
@@ -70,3 +71,89 @@ export const WithFocusState = {
     await canvas.getByRole('input').focus();
   },
 };
+
+// Simple template for documentation (without small variant)
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsSearch,
+  },
+  template: `
+  <BmsSearch v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundSearch = SimpleTemplate.bind({});
+PlaygroundSearch.parameters = { chromatic: { disable: true } };
+PlaygroundSearch.args = {
+  placeholder: 'Search...',
+  modelValue: '',
+};
+
+// Do: Search with clear placeholder
+export const DoWithClearPlaceholder = SimpleTemplate.bind({});
+DoWithClearPlaceholder.parameters = { chromatic: { disable: true } };
+DoWithClearPlaceholder.args = {
+  placeholder: 'Search products...',
+  modelValue: '',
+};
+
+// Do: Search with value and clear button
+export const DoWithValue = SimpleTemplate.bind({});
+DoWithValue.parameters = { chromatic: { disable: true } };
+DoWithValue.args = {
+  placeholder: 'Search...',
+  modelValue: 'search term',
+};
+
+// Do: Disabled state
+export const DoDisabled = SimpleTemplate.bind({});
+DoDisabled.parameters = { chromatic: { disable: true } };
+DoDisabled.args = {
+  placeholder: 'Search...',
+  modelValue: 'search term',
+  disabled: true,
+};
+
+// Do: Search with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  placeholder: 'Search...',
+  modelValue: 'invalid search',
+  errors: ['Search query is too short'],
+};
+
+// Don't: Generic placeholder
+export const DontGenericPlaceholder = SimpleTemplate.bind({});
+DontGenericPlaceholder.parameters = { chromatic: { disable: true } };
+DontGenericPlaceholder.args = {
+  placeholder: 'Type here',
+  modelValue: '',
+};
+
+export const DoSpecificPlaceholder = SimpleTemplate.bind({});
+DoSpecificPlaceholder.parameters = { chromatic: { disable: true } };
+DoSpecificPlaceholder.args = {
+  placeholder: 'Search by name, email, or ID...',
+  modelValue: '',
+};
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  placeholder: 'Search...',
+  modelValue: 'invalid',
+};
+
+// Don't: Search without placeholder
+export const DontNoPlaceholder = SimpleTemplate.bind({});
+DontNoPlaceholder.parameters = { chromatic: { disable: true } };
+DontNoPlaceholder.args = {
+  modelValue: '',
+};

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

@@ -1,16 +1,17 @@
 import BmsSelect from '@/components/form/BmsSelect.vue';
 import { within } from 'storybook/test';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/Select',
+  component: BmsSelect,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/Select',
-  component: BmsSelect,
 };
 
 const Template = (args) => ({
@@ -141,3 +142,220 @@ WithIncorrectValue.args = {
     { label: 'c', value: 'c' },
   ],
 };
+
+// Simple template for documentation (without small variant)
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsSelect,
+  },
+  template: `
+  <BmsSelect v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundSelect = SimpleTemplate.bind({});
+PlaygroundSelect.parameters = { chromatic: { disable: true } };
+PlaygroundSelect.args = {
+  label: 'Country',
+  placeholder: 'Select a country',
+  modelValue: '',
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+    { label: 'Spain', value: 'es' },
+    { label: 'Italy', value: 'it' },
+  ],
+};
+
+// Do: Simple select with label
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Country',
+  modelValue: '',
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+    { label: 'Spain', value: 'es' },
+  ],
+};
+
+// Do: Select with placeholder
+export const DoWithPlaceholder = SimpleTemplate.bind({});
+DoWithPlaceholder.parameters = { chromatic: { disable: true } };
+DoWithPlaceholder.args = {
+  label: 'Country',
+  placeholder: 'Choose your country',
+  modelValue: '',
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+    { label: 'Spain', value: 'es' },
+  ],
+};
+
+// Do: Select with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Payment method',
+  placeholder: 'Select payment method',
+  modelValue: '',
+  captions: ['We accept all major credit cards'],
+  options: [
+    { label: 'Credit Card', value: 'cc' },
+    { label: 'PayPal', value: 'pp' },
+    { label: 'Bank Transfer', value: 'bt' },
+  ],
+};
+
+// Do: Disabled state
+export const DoDisabled = SimpleTemplate.bind({});
+DoDisabled.parameters = { chromatic: { disable: true } };
+DoDisabled.args = {
+  label: 'Country',
+  modelValue: 'fr',
+  disabled: true,
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+    { label: 'Spain', value: 'es' },
+  ],
+};
+
+// Do: Loading state
+export const DoLoading = SimpleTemplate.bind({});
+DoLoading.parameters = { chromatic: { disable: true } };
+DoLoading.args = {
+  label: 'Country',
+  placeholder: 'Loading...',
+  loading: true,
+  modelValue: '',
+  options: [],
+};
+
+// Do: Select with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Country',
+  placeholder: 'Select a country',
+  modelValue: '',
+  errors: ['Please select a country'],
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+    { label: 'Spain', value: 'es' },
+  ],
+};
+
+// Do: Select with helpful caption
+export const DoWithHelpfulCaption = SimpleTemplate.bind({});
+DoWithHelpfulCaption.parameters = { chromatic: { disable: true } };
+DoWithHelpfulCaption.args = {
+  label: 'Payment method',
+  placeholder: 'Select payment method',
+  modelValue: '',
+  captions: ['Select your preferred payment method to proceed'],
+  errors: ['Payment method is required'],
+  options: [
+    { label: 'Credit Card', value: 'cc' },
+    { label: 'PayPal', value: 'pp' },
+    { label: 'Bank Transfer', value: 'bt' },
+  ],
+};
+
+// Don't: Long labels
+export const DontLongLabel = SimpleTemplate.bind({});
+DontLongLabel.parameters = { chromatic: { disable: true } };
+DontLongLabel.args = {
+  label:
+    'Please select the country where you currently reside and where you would like to receive your shipment',
+  placeholder: 'Country',
+  modelValue: '',
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+  ],
+};
+
+export const DoShortLabel = SimpleTemplate.bind({});
+DoShortLabel.parameters = { chromatic: { disable: true } };
+DoShortLabel.args = {
+  label: 'Country',
+  placeholder: 'Select country',
+  modelValue: '',
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+  ],
+};
+
+// Don't: No label
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  placeholder: 'Select an option',
+  modelValue: '',
+  options: [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+  ],
+};
+
+// Don't: Generic placeholder
+export const DontGenericPlaceholder = SimpleTemplate.bind({});
+DontGenericPlaceholder.parameters = { chromatic: { disable: true } };
+DontGenericPlaceholder.args = {
+  label: 'Country',
+  placeholder: 'Select',
+  modelValue: '',
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+  ],
+};
+
+export const DoSpecificPlaceholder = SimpleTemplate.bind({});
+DoSpecificPlaceholder.parameters = { chromatic: { disable: true } };
+DoSpecificPlaceholder.args = {
+  label: 'Country',
+  placeholder: 'Choose your country',
+  modelValue: '',
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+  ],
+};
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'Country',
+  placeholder: 'Select a country',
+  modelValue: '',
+  options: [
+    { label: 'France', value: 'fr' },
+    { label: 'Germany', value: 'de' },
+  ],
+};
+
+// Don't: No caption for complex requirements
+export const DontNoCaption = SimpleTemplate.bind({});
+DontNoCaption.parameters = { chromatic: { disable: true } };
+DontNoCaption.args = {
+  label: 'Payment method',
+  placeholder: 'Select payment method',
+  modelValue: '',
+  errors: ['Error'],
+  options: [
+    { label: 'Credit Card', value: 'cc' },
+    { label: 'PayPal', value: 'pp' },
+  ],
+};

package/src/components/form/BmsSelect.vue

@@ -96,9 +96,11 @@ const onSelect = (option: any) => {
 };
 
 const onSelectClick = () => {
-  isDatalistOpen.value = !isDatalistOpen.value;
-  if (isDatalistOpen) {
-    setFocus();
+  if (!props.disabled) {
+    isDatalistOpen.value = !isDatalistOpen.value;
+    if (isDatalistOpen) {
+      setFocus();
+    }
   }
 };