@ouestfrance/sipa-bms-ui 8.22.2 → 8.22.3

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 = () => {

package/src/components/layout/BmsForm.stories.js

@@ -1,4 +1,10 @@
 import BmsForm from '@/components/layout/BmsForm.vue';
+import BmsInputText from '@/components/form/BmsInputText.vue';
+import BmsSelect from '@/components/form/BmsSelect.vue';
+import BmsTextArea from '@/components/form/BmsTextArea.vue';
+import BmsInputNumber from '@/components/form/BmsInputNumber.vue';
+import BmsButton from '@/components/button/BmsButton.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Composants/layout/Form',
@@ -28,3 +34,213 @@ const Template = (args) => ({
 });
 
 export const Default = Template.bind({});
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  components: {
+    BmsForm,
+    BmsInputText,
+    BmsSelect,
+    BmsTextArea,
+    BmsInputNumber,
+    BmsButton,
+  },
+  setup() {
+    const name = ref(args.name || '');
+    const email = ref(args.email || '');
+    const phone = ref(args.phone || '');
+    const country = ref(args.country || '');
+    const description = ref(args.description || '');
+    const age = ref(args.age || null);
+    return { args, name, email, phone, country, description, age };
+  },
+  template: `
+  <BmsForm>
+    <template #form_1>
+      <h2>Personal Information</h2>
+      <BmsInputText label="Name" v-model="name" placeholder="Enter your name" required />
+      <BmsInputText label="Email" v-model="email" placeholder="Enter your email" required />
+      <BmsInputText label="Phone" v-model="phone" placeholder="Enter your phone number" />
+      <BmsSelect 
+        label="Country" 
+        v-model="country" 
+        placeholder="Select a country"
+        :options="[
+          { label: 'France', value: 'fr' },
+          { label: 'United States', value: 'us' },
+          { label: 'United Kingdom', value: 'uk' },
+          { label: 'Germany', value: 'de' }
+        ]"
+      />
+    </template>
+    <template #form_2>
+      <h2>Additional Details</h2>
+      <BmsTextArea label="Description" v-model="description" placeholder="Enter a description" />
+      <BmsInputNumber label="Age" v-model="age" :min="0" :max="120" />
+    </template>
+    <template #actions>
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="primary">Submit</BmsButton>
+    </template>
+  </BmsForm>
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundForm = SimpleTemplate.bind({});
+PlaygroundForm.parameters = { chromatic: { disable: true } };
+PlaygroundForm.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+// Do: Form with organized sections
+export const DoWithOrganizedSections = SimpleTemplate.bind({});
+DoWithOrganizedSections.parameters = { chromatic: { disable: true } };
+DoWithOrganizedSections.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+// Do: Form with actions
+export const DoWithActions = SimpleTemplate.bind({});
+DoWithActions.parameters = { chromatic: { disable: true } };
+DoWithActions.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+// Don't: Form without actions
+export const DontNoActions = (args) => ({
+  components: {
+    BmsForm,
+    BmsInputText,
+    BmsSelect,
+    BmsTextArea,
+  },
+  setup() {
+    const name = ref(args.name || '');
+    const email = ref(args.email || '');
+    const country = ref(args.country || '');
+    const description = ref(args.description || '');
+    return { args, name, email, country, description };
+  },
+  template: `
+  <BmsForm>
+    <template #form_1>
+      <h2>Personal Information</h2>
+      <BmsInputText label="Name" v-model="name" required />
+      <BmsInputText label="Email" v-model="email" required />
+      <BmsSelect 
+        label="Country" 
+        v-model="country"
+        :options="[
+          { label: 'France', value: 'fr' },
+          { label: 'United States', value: 'us' }
+        ]"
+      />
+    </template>
+    <template #form_2>
+      <h2>Additional Details</h2>
+      <BmsTextArea label="Description" v-model="description" />
+    </template>
+  </BmsForm>
+  `,
+});
+DontNoActions.parameters = { chromatic: { disable: true } };
+DontNoActions.args = {
+  name: '',
+  email: '',
+  country: '',
+  description: '',
+};
+
+export const DoWithActionsButton = SimpleTemplate.bind({});
+DoWithActionsButton.parameters = { chromatic: { disable: true } };
+DoWithActionsButton.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+// Don't: Form without section titles
+export const DontNoSectionTitles = (args) => ({
+  components: {
+    BmsForm,
+    BmsInputText,
+    BmsSelect,
+    BmsTextArea,
+    BmsInputNumber,
+    BmsButton,
+  },
+  setup() {
+    const name = ref(args.name || '');
+    const email = ref(args.email || '');
+    const phone = ref(args.phone || '');
+    const country = ref(args.country || '');
+    const description = ref(args.description || '');
+    const age = ref(args.age || null);
+    return { args, name, email, phone, country, description, age };
+  },
+  template: `
+  <BmsForm>
+    <template #form_1>
+      <BmsInputText label="Name" v-model="name" placeholder="Enter your name" required />
+      <BmsInputText label="Email" v-model="email" placeholder="Enter your email" required />
+      <BmsInputText label="Phone" v-model="phone" placeholder="Enter your phone number" />
+      <BmsSelect 
+        label="Country" 
+        v-model="country" 
+        placeholder="Select a country"
+        :options="[
+          { label: 'France', value: 'fr' },
+          { label: 'United States', value: 'us' }
+        ]"
+      />
+    </template>
+    <template #form_2>
+      <BmsTextArea label="Description" v-model="description" placeholder="Enter a description" />
+      <BmsInputNumber label="Age" v-model="age" :min="0" :max="120" />
+    </template>
+    <template #actions>
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="primary">Submit</BmsButton>
+    </template>
+  </BmsForm>
+  `,
+});
+DontNoSectionTitles.parameters = { chromatic: { disable: true } };
+DontNoSectionTitles.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+export const DoWithSectionTitles = SimpleTemplate.bind({});
+DoWithSectionTitles.parameters = { chromatic: { disable: true } };
+DoWithSectionTitles.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};

package/src/components/layout/BmsHeaderTitle.stories.js

@@ -3,7 +3,6 @@ import BmsButton from '@/components/button/BmsButton.vue';
 import { Flower } from 'lucide-vue-next';
 
 export default {
-  components: { BmsHeaderTitle },
   title: 'Composants/layout/HeaderTitle',
   component: BmsHeaderTitle,
 };
@@ -66,3 +65,139 @@ WithAll.args = {
   documentationUrl: '/docs',
   activityUrl: '/docs',
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  components: { BmsHeaderTitle, BmsButton, Flower },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BmsHeaderTitle v-bind="args">
+    <template v-if="args.logo" #logo>
+      <Flower/>
+    </template>
+    <template v-if="args.afterTitle" #afterTitle>
+      <BmsButton type="tertiary">Secondary action</BmsButton>
+    </template>
+    <template v-if="args.actions" #actions>
+      <span style="display: flex; gap: 8px;">
+        <BmsButton v-if="args.secondaryAction && !args.twoPrimary" type="secondary">{{ args.secondaryLabel || 'Secondary' }}</BmsButton>
+        <BmsButton :type="args.primaryType || 'primary'">{{ args.primaryLabel || 'Primary action' }}</BmsButton>
+        <BmsButton v-if="args.secondaryActionRight" type="secondary">{{ args.secondaryLabel || 'Secondary' }}</BmsButton>
+        <BmsButton v-if="args.twoPrimary && args.secondaryAction" :type="args.primaryType || 'primary'">{{ args.secondaryLabel || 'Delete' }}</BmsButton>
+      </span>
+    </template>
+    <template v-if="args.subtitle" #subtitle>
+      {{ args.subtitle }}
+    </template>
+  </BmsHeaderTitle>
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundHeaderTitle = SimpleTemplate.bind({});
+PlaygroundHeaderTitle.parameters = { chromatic: { disable: true } };
+PlaygroundHeaderTitle.args = {
+  title: 'Page Title',
+};
+
+// Do: Header title with clear title
+export const DoWithClearTitle = SimpleTemplate.bind({});
+DoWithClearTitle.parameters = { chromatic: { disable: true } };
+DoWithClearTitle.args = {
+  title: 'User Settings',
+};
+
+// Do: Header title with label
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  title: 'Edit Profile',
+  label: 'User Profile',
+};
+
+// Do: Header title with actions
+export const DoWithActions = SimpleTemplate.bind({});
+DoWithActions.parameters = { chromatic: { disable: true } };
+DoWithActions.args = {
+  title: 'Dashboard',
+  actions: true,
+};
+
+// Do: Header title with secondary action
+export const DoWithSecondaryAction = SimpleTemplate.bind({});
+DoWithSecondaryAction.parameters = { chromatic: { disable: true } };
+DoWithSecondaryAction.args = {
+  title: 'Edit Document',
+  actions: true,
+  secondaryAction: true,
+  secondaryLabel: 'Import',
+  primaryLabel: 'Add',
+};
+
+// Do: Header title with subtitle
+export const DoWithSubtitle = SimpleTemplate.bind({});
+DoWithSubtitle.parameters = { chromatic: { disable: true } };
+DoWithSubtitle.args = {
+  title: 'Project Overview',
+  subtitle: 'Manage your project settings and team members',
+};
+
+// Do: Header title with helper links
+export const DoWithHelperLinks = SimpleTemplate.bind({});
+DoWithHelperLinks.parameters = { chromatic: { disable: true } };
+DoWithHelperLinks.args = {
+  title: 'Configuration',
+  documentationUrl: '/docs/configuration',
+  activityUrl: '/activity',
+};
+
+// Don't: Missing title
+export const DontNoTitle = SimpleTemplate.bind({});
+DontNoTitle.parameters = { chromatic: { disable: true } };
+DontNoTitle.args = {};
+
+export const DoWithTitle = SimpleTemplate.bind({});
+DoWithTitle.parameters = { chromatic: { disable: true } };
+DoWithTitle.args = {
+  title: 'Page Title',
+};
+
+// Don't: Too long title
+export const DontLongTitle = SimpleTemplate.bind({});
+DontLongTitle.parameters = { chromatic: { disable: true } };
+DontLongTitle.args = {
+  title:
+    'This is a very long page title that should not be used because it makes the header difficult to read and breaks the layout',
+};
+
+export const DoShortTitle = SimpleTemplate.bind({});
+DoShortTitle.parameters = { chromatic: { disable: true } };
+DoShortTitle.args = {
+  title: 'Settings',
+};
+
+// Don't: Two primary buttons
+export const DontTwoPrimaryButtons = SimpleTemplate.bind({});
+DontTwoPrimaryButtons.parameters = { chromatic: { disable: true } };
+DontTwoPrimaryButtons.args = {
+  title: 'Edit Document',
+  actions: true,
+  twoPrimary: true,
+  primaryType: 'primary',
+  primaryLabel: 'Add',
+  secondaryAction: true,
+  secondaryLabel: 'Delete',
+};
+
+// Don't: Inverted button order
+export const DontInvertedButtonOrder = SimpleTemplate.bind({});
+DontInvertedButtonOrder.parameters = { chromatic: { disable: true } };
+DontInvertedButtonOrder.args = {
+  title: 'Edit Document',
+  actions: true,
+  secondaryActionRight: true,
+  secondaryLabel: 'Import',
+  primaryLabel: 'Add',
+};