@ouestfrance/sipa-bms-ui 8.22.2 → 8.23.0

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();
+    }
   }
 };
 

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

@@ -1,16 +1,16 @@
 import BmsTag from '@/components/form/BmsTag.vue';
-import { Activity, Trash } from 'lucide-vue-next';
+import { Activity, Trash, X } from 'lucide-vue-next';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/Tag',
+  component: BmsTag,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/Tag',
-  component: BmsTag,
 };
 
 const Template = (args) => ({
@@ -71,3 +71,119 @@ export const CantBeDismissed = Template.bind({});
 CantBeDismissed.args = {
   canBeDismissed: false,
 };
+
+// Simple template for documentation (without small variant)
+const SimpleTemplate = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsTag,
+    Activity,
+    X,
+  },
+  template: `
+  <BmsTag v-bind="args">
+    {{ args.content || 'Tag' }}
+  </BmsTag>
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundTag = SimpleTemplate.bind({});
+PlaygroundTag.parameters = { chromatic: { disable: true } };
+PlaygroundTag.args = {
+  content: 'Filter',
+  active: false,
+  canBeDismissed: true,
+};
+
+// Do: Tag with clear content
+export const DoWithClearContent = SimpleTemplate.bind({});
+DoWithClearContent.parameters = { chromatic: { disable: true } };
+DoWithClearContent.args = {
+  content: 'Active',
+  active: true,
+  canBeDismissed: true,
+};
+
+// Do: Tag with dismissible option
+export const DoWithDismissible = SimpleTemplate.bind({});
+DoWithDismissible.parameters = { chromatic: { disable: true } };
+DoWithDismissible.args = {
+  content: 'Filter',
+  active: false,
+  canBeDismissed: true,
+};
+
+// Do: Tag with active state
+export const DoWithActiveState = SimpleTemplate.bind({});
+DoWithActiveState.parameters = { chromatic: { disable: true } };
+DoWithActiveState.args = {
+  content: 'Selected',
+  active: true,
+  canBeDismissed: true,
+};
+
+// Do: Tag with disabled state
+export const DoWithDisabledState = SimpleTemplate.bind({});
+DoWithDisabledState.parameters = { chromatic: { disable: true } };
+DoWithDisabledState.args = {
+  content: 'Locked',
+  active: false,
+  disabled: true,
+  canBeDismissed: false,
+};
+
+// Do: Tag with short content
+export const DoWithShortContent = SimpleTemplate.bind({});
+DoWithShortContent.parameters = { chromatic: { disable: true } };
+DoWithShortContent.args = {
+  content: 'New',
+  active: false,
+  canBeDismissed: true,
+};
+
+// Don't: Tag with too long content
+export const DontLongContent = SimpleTemplate.bind({});
+DontLongContent.parameters = { chromatic: { disable: true } };
+DontLongContent.args = {
+  content:
+    'This is a very long tag content that should not be used because it makes the tag difficult to read and breaks the layout',
+  active: false,
+  canBeDismissed: true,
+};
+
+// Don't: Tag with empty or unclear content
+export const DontEmptyContent = SimpleTemplate.bind({});
+DontEmptyContent.parameters = { chromatic: { disable: true } };
+DontEmptyContent.args = {
+  content: '',
+  active: false,
+  canBeDismissed: true,
+};
+
+export const DoClearContent = SimpleTemplate.bind({});
+DoClearContent.parameters = { chromatic: { disable: true } };
+DoClearContent.args = {
+  content: 'Filter',
+  active: false,
+  canBeDismissed: true,
+};
+
+// Don't: Tag that cannot be dismissed when it should
+export const DontCantDismissWhenNeeded = SimpleTemplate.bind({});
+DontCantDismissWhenNeeded.parameters = { chromatic: { disable: true } };
+DontCantDismissWhenNeeded.args = {
+  content: 'Temporary filter',
+  active: false,
+  canBeDismissed: false,
+};
+
+export const DoCanDismiss = SimpleTemplate.bind({});
+DoCanDismiss.parameters = { chromatic: { disable: true } };
+DoCanDismiss.args = {
+  content: 'Temporary filter',
+  active: false,
+  canBeDismissed: true,
+};

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

@@ -1,16 +1,17 @@
 import BmsTextArea from '@/components/form/BmsTextArea.vue';
 import { within } from 'storybook/test';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/TextArea',
+  component: BmsTextArea,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/TextArea',
-  component: BmsTextArea,
 };
 
 const Template = (args) => ({
@@ -74,3 +75,146 @@ 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: {
+    BmsTextArea,
+  },
+  template: `
+  <BmsTextArea v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundTextArea = SimpleTemplate.bind({});
+PlaygroundTextArea.parameters = { chromatic: { disable: true } };
+PlaygroundTextArea.args = {
+  label: 'Description',
+  placeholder: 'Enter your description here...',
+};
+
+// Do: Simple textarea with label
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Comments',
+  placeholder: 'Enter your comments',
+};
+
+// Do: Textarea with placeholder
+export const DoWithPlaceholder = SimpleTemplate.bind({});
+DoWithPlaceholder.parameters = { chromatic: { disable: true } };
+DoWithPlaceholder.args = {
+  label: 'Description',
+  placeholder: 'Describe your project in detail...',
+};
+
+// Do: Textarea with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Message',
+  placeholder: 'Enter your message',
+  captions: ['Maximum 500 characters'],
+};
+
+// Do: Disabled state
+export const DoDisabled = SimpleTemplate.bind({});
+DoDisabled.parameters = { chromatic: { disable: true } };
+DoDisabled.args = {
+  label: 'Notes',
+  modelValue: 'This is a read-only note that cannot be edited.',
+  disabled: true,
+};
+
+// Do: Loading state
+export const DoLoading = SimpleTemplate.bind({});
+DoLoading.parameters = { chromatic: { disable: true } };
+DoLoading.args = {
+  label: 'Description',
+  placeholder: 'Loading...',
+  loading: true,
+};
+
+// Do: Textarea with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Description',
+  placeholder: 'Enter description',
+  modelValue: 'Too short',
+  errors: ['Description must be at least 20 characters'],
+};
+
+// Do: Textarea with helpful caption
+export const DoWithHelpfulCaption = SimpleTemplate.bind({});
+DoWithHelpfulCaption.parameters = { chromatic: { disable: true } };
+DoWithHelpfulCaption.args = {
+  label: 'Project description',
+  placeholder: 'Describe your project',
+  modelValue: 'Short',
+  captions: ['Please provide a detailed description of at least 50 characters'],
+  errors: ['Description is too short'],
+};
+
+// Don't: Long labels
+export const DontLongLabel = SimpleTemplate.bind({});
+DontLongLabel.parameters = { chromatic: { disable: true } };
+DontLongLabel.args = {
+  label:
+    'Please enter your complete and detailed project description including all relevant information about the project goals, timeline, and expected outcomes',
+  placeholder: 'Description',
+};
+
+export const DoShortLabel = SimpleTemplate.bind({});
+DoShortLabel.parameters = { chromatic: { disable: true } };
+DoShortLabel.args = {
+  label: 'Description',
+  placeholder: 'Enter description',
+};
+
+// Don't: No label
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  placeholder: 'Enter your message here',
+};
+
+// Don't: Generic placeholder
+export const DontGenericPlaceholder = SimpleTemplate.bind({});
+DontGenericPlaceholder.parameters = { chromatic: { disable: true } };
+DontGenericPlaceholder.args = {
+  label: 'Message',
+  placeholder: 'Enter text here',
+};
+
+export const DoSpecificPlaceholder = SimpleTemplate.bind({});
+DoSpecificPlaceholder.parameters = { chromatic: { disable: true } };
+DoSpecificPlaceholder.args = {
+  label: 'Message',
+  placeholder: 'Describe the issue you encountered...',
+};
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'Description',
+  placeholder: 'Enter description',
+  modelValue: 'Too short',
+};
+
+// Don't: No caption for complex requirements
+export const DontNoCaption = SimpleTemplate.bind({});
+DontNoCaption.parameters = { chromatic: { disable: true } };
+DontNoCaption.args = {
+  label: 'Project description',
+  placeholder: 'Enter description',
+  modelValue: 'Short',
+  errors: ['Error'],
+};

package/src/components/form/RawAutocomplete.vue

@@ -161,7 +161,9 @@ watch(
 );
 
 const onClick = () => {
-  isDatalistOpen.value = !isDatalistOpen.value;
+  if (!props.disabled) {
+    isDatalistOpen.value = !isDatalistOpen.value;
+  }
 };
 
 const onInput = () => {