@ouestfrance/sipa-bms-ui 7.14.1

package/src/documentation/secondaryButton.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import Button from '../components/button/BmsButton.vue';
+
+<Meta title="Documentation/Buttons/Secondary Button" />
+
+# <img src="./BmsIcon.png" /> Secondary Button
+
+## Anatomy
+
+Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+![](./button/CoverSecondaryButton.png)
+
+## Component
+
+## Usage
+
+## Rules

package/src/documentation/select.mdx

@@ -0,0 +1,31 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Default as FieldDefault } from '../plugins/field/FieldComponent.stories.js';
+import { Default as TextDefault } from '../components/form/BmsInputText.stories.js';
+import BmsInput from '../components/form/BmsInputText.vue';
+import { Default as SelectDefault } from '../components/form/BmsSelect.stories.js';
+
+<Meta title="Documentation/Fields/Select" />
+
+# <img src="./BmsIcon.png" /> Select
+
+Selects (or "dropdowns")," enable users to select from a list of options within a confined area. The available options within the list may vary depending on the context.
+
+![](./fields/CoverSelect.png)
+
+## Anatomy
+
+![](./fields/SelectRepresentation.png)
+
+## Component
+
+<Canvas of={SelectDefault} args={{ label: 'toto' }} />
+
+### Table of props
+
+<Controls of={SelectDefault} />

package/src/documentation/tag.mdx

@@ -0,0 +1,28 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Default as TagDefault } from '../components/form/BmsTag.stories.js';
+
+<Meta title="Documentation/Tag" />
+
+# <img src="./BmsIcon.png" /> Tag
+
+Tags are components that allow users to add differents options to forms or interfaces. A tag can be active or desactive by the user and closable (its the principal difference with Chips).
+
+![Tag representation](./tag/CoverTag.png)
+
+## Anatomy
+
+![Tag representation](./tag/TagRepresentation.png)
+
+## Component
+
+<Canvas of={TagDefault} args={{ label: 'toto' }} />
+
+### Table of props
+
+<Controls of={TagDefault} />

package/src/documentation/template_field_dependency.mdx

@@ -0,0 +1,19 @@
+import {
+  Meta,
+  Title,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/addon-docs/blocks';
+
+<Meta isTemplate />
+
+<Title />
+
+Ce composant nécessite d'avoir le plugin `field` d'installé (voir [README](https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms#les-plugins)).
+
+<Primary />
+
+<Controls />
+
+<Stories />

package/src/documentation/textArea.mdx

@@ -0,0 +1,27 @@
+import {
+  Canvas,
+  Meta,
+  Story,
+  Stories,
+  Controls,
+} from '@storybook/addon-docs/blocks';
+import { Default as TextAreaDefault } from '../components/form/BmsTextArea.stories.js';
+
+<Meta title="Documentation/Fields/Text Area" />
+
+# <img src="./BmsIcon.png" /> Text Area
+
+Text area allows users to input and edit multiple lines of text such as paragraphs, comments, or descriptions.
+![InputFile representation](./fields/CoverTextArea.png)
+
+## Anatomy
+
+![InputFile representation](./fields/InputTextAreaRepresentation.png)
+
+## Component
+
+<Canvas of={TextAreaDefault} args={{ label: 'toto' }} />
+
+### Table of props
+
+<Controls of={TextAreaDefault} />

package/src/documentation/typography.mdx

@@ -0,0 +1,93 @@
+import { Canvas, Meta, Story, Typeset } from '@storybook/addon-docs/blocks';
+import { Link, Paragraph } from './typography.stories.js';
+
+<Meta title="Documentation/Style/Typography" />
+
+# <img src="./BmsIcon.png" /> Typography
+
+## h1
+
+**Font:** Roboto
+
+**Weights:** 400(regular)
+
+<Typeset
+  fontSizes={[Number(typography.size.l1)]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+## h2
+
+**Font:** Roboto
+
+**Weights:** 500(semibold)
+
+<Typeset
+  fontSizes={[Number(typography.size.l2)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+## h3
+
+**Font:** Roboto
+
+**Weights:** 500(semibold)
+
+<Typeset
+  fontSizes={[Number(typography.size.l3)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+## Paragraph
+
+**Font:** Roboto
+
+**Weights:** 400(regular)
+
+<Typeset
+  fontSizes={[Number(typography.size.m1), Number(typography.size.m2)]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+## Link
+
+**Font:** Roboto
+
+<Canvas of={Link}></Canvas>
+
+## Information
+
+**Font:** Roboto
+
+<Canvas of={Paragraph}></Canvas>
+export const typography = {
+  type: {
+    primary: '"Roboto",',
+  },
+  weight: {
+    regular: '400',
+    semibold: '500',
+    bold: '700',
+  },
+  size: {
+    l1: 40,
+    l2: 28,
+    l3: 20,
+    m1: 16,
+    m2: 16,
+    s1: 12,
+    s2: 14,
+    s3: 16,
+  },
+};
+
+export const SampleText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

package/src/documentation/typography.stories.js

@@ -0,0 +1,26 @@
+export default {
+  title: 'Exemples/Typography',
+  tags: ['!autodocs', '!dev'],
+};
+
+const LinkTemplate = () => ({
+  setup() {
+    return {};
+  },
+  components: {},
+  template: `
+    <a href="http://www.google.com">Link</a>
+      `,
+});
+
+export const Link = LinkTemplate.bind({});
+Link.args = {};
+
+const ParagraphTemplate = () => ({
+  template: `
+    <p class="information">Information</p>
+        `,
+});
+
+export const Paragraph = ParagraphTemplate.bind({});
+Paragraph.args = {};

package/src/helpers/cocarde.helper.spec.ts

@@ -0,0 +1,14 @@
+import { getInitials } from './cocarde.helper';
+
+describe('getInitials', () => {
+  test.each([
+    { siteName: 'X', expected: 'X' },
+    { siteName: 'Toto', expected: 'TO' },
+    { siteName: 'Ouest-France', expected: 'OF' },
+    { siteName: 'Voiles et voiliers', expected: 'VV' },
+    { siteName: "Nom super long avec plein d'adjectifs", expected: 'NS' },
+    { siteName: '', expected: '' },
+  ])('with $siteName should diplay $expected', ({ siteName, expected }) => {
+    expect(getInitials(siteName)).toEqual(expected);
+  });
+});

package/src/helpers/cocarde.helper.ts

@@ -0,0 +1,22 @@
+export const getInitials = (name: string) => {
+  if (name.length === 0) return '';
+
+  name = name.replace('-', ' ').replace('et', '').replace('&', '');
+
+  const allWords = name.split(' ').filter((w) => w.length > 0);
+
+  let firstLetter = '';
+  let secondLetter = '';
+
+  firstLetter = allWords[0][0].toLocaleUpperCase();
+
+  if (allWords.length > 1) {
+    // If more than 1 word, we take the first letter of the second word
+    secondLetter = allWords[1][0].toLocaleUpperCase();
+  } else if (allWords[0].length > 1) {
+    // If only 1 word with more than 1 letter, we take the second letter of the first word
+    secondLetter = allWords[0][1].toLocaleUpperCase();
+  }
+
+  return firstLetter + secondLetter;
+};

package/src/helpers/date.helper.spec.ts

@@ -0,0 +1,91 @@
+import { relativeDate } from '@/helpers/date.helper';
+
+const relativeDateI18n = {
+  MINUTE: ['minute', 'minutes'],
+  HOUR: ['hour', 'hours'],
+  DAY: ['day', 'days'],
+  AGO: 'ago',
+  IN: 'In',
+  NEAR: 'less than a',
+};
+
+const relativeDateFormatFunction = (val: string | number | Date) => `${val}`;
+
+const factory = (params: any) => {
+  const now = Date.now();
+  return {
+    to: now,
+    from: now,
+    output: {
+      AGO: 'VALUE TIMING OPERATOR',
+      IN: 'OPERATOR VALUE TIMING',
+    },
+    i18n: {
+      ...relativeDateI18n,
+    },
+    ...params,
+  };
+};
+
+describe('relativeDate', () => {
+  it('should return less than a minute ago', () => {
+    const { value: result } = relativeDate(
+      factory({ to: 1602249814871, from: 1602249814871 }),
+      relativeDateFormatFunction,
+    );
+    expect(result).toEqual(
+      `${relativeDateI18n.NEAR} ${relativeDateI18n.MINUTE[0]} ${relativeDateI18n.AGO}`,
+    );
+  });
+
+  it('should return 5 minutes ago', () => {
+    const { value: result } = relativeDate(
+      factory({
+        to: Date.now() - 300000,
+      }),
+      relativeDateFormatFunction,
+    );
+
+    expect(result).toEqual(
+      `5 ${relativeDateI18n.MINUTE[1]} ${relativeDateI18n.AGO}`,
+    );
+  });
+
+  it('should return 1 day ago', () => {
+    const { value: result } = relativeDate(
+      factory({
+        to: Date.now() - 86400000,
+      }),
+      relativeDateFormatFunction,
+    );
+
+    expect(result).toEqual(
+      `1 ${relativeDateI18n.DAY[0]} ${relativeDateI18n.AGO}`,
+    );
+  });
+
+  it('should return in 1 hour', () => {
+    const { value: result } = relativeDate(
+      factory({
+        to: Date.now() + 3600000,
+      }),
+      relativeDateFormatFunction,
+    );
+
+    expect(result).toEqual(
+      `${relativeDateI18n.IN} 1 ${relativeDateI18n.HOUR[0]}`,
+    );
+  });
+
+  it('should return the timestamp', () => {
+    const date = Date.now() + 800000000;
+    const { value: result } = relativeDate(
+      factory({
+        to: date,
+      }),
+      relativeDateFormatFunction,
+    );
+
+    expect(result).toEqual(`${date}`);
+  });
+});

package/src/helpers/date.helper.ts

@@ -0,0 +1,105 @@
+export interface RelativeDateOptions {
+  to: number;
+  from: number;
+  output: RelativeDateOptionsOutput;
+  i18n: RelativeDateOptionsI18n;
+}
+
+export interface RelativeDateOptionsOutput {
+  AGO: string;
+  IN: string;
+}
+
+export interface RelativeDateOptionsI18n {
+  MINUTE: string[];
+  HOUR: string[];
+  DAY: string[];
+  AGO: string;
+  IN: string;
+  NEAR: string;
+}
+
+export interface RelativeDateValue {
+  value: string;
+  diff: number;
+}
+
+export declare type RelativeDateFormatFunction = (
+  value: string | number | Date,
+) => string;
+
+export const relativeDateDefaultFormatFunction: RelativeDateFormatFunction = (
+  val: string | number | Date,
+): string => new Date(val).toLocaleDateString();
+
+export const relativeDate = (
+  params: Partial<RelativeDateOptions> = {},
+  format: RelativeDateFormatFunction = relativeDateDefaultFormatFunction,
+): RelativeDateValue => {
+  const options: RelativeDateOptions = {
+    to: Date.now(),
+    from: Date.now(),
+    output: {
+      AGO: 'OPERATOR VALUE TIMING',
+      IN: 'OPERATOR VALUE TIMING',
+    },
+    i18n: {
+      MINUTE: ['minute', 'minutes'],
+      HOUR: ['heure', 'heures'],
+      DAY: ['jour', 'jours'],
+      AGO: 'Il y a',
+      IN: 'Dans',
+      NEAR: `moins d'une`,
+    },
+    ...params,
+  };
+
+  const fromInSeconds = options.from / 1000;
+  const toInSeconds = options.to / 1000;
+  const diff = Math.round(Math.abs(toInSeconds - fromInSeconds));
+  const timeMomentOperator = toInSeconds - fromInSeconds > 0 ? 'IN' : 'AGO';
+  let coef = 60;
+  let unit = 'MINUTE';
+
+  if (diff >= 604800) {
+    return {
+      diff,
+      value: format(options.to),
+    };
+  }
+
+  if (diff >= 3600 && diff < 86400) {
+    unit = 'HOUR';
+    coef = 3600;
+  } else if (diff >= 86400 && diff < 604800) {
+    unit = 'DAY';
+    coef = 86400;
+  }
+
+  const value = Math.round(diff / coef);
+  const mapObj = {
+    OPERATOR: options.i18n[timeMomentOperator],
+    VALUE: `${diff < 60 ? options.i18n.NEAR : value}`,
+    TIMING:
+      options.i18n[unit as keyof RelativeDateOptionsI18n][
+        value === 1 || diff < 60 ? 0 : 1
+      ],
+  };
+  const re = new RegExp(Object.keys(mapObj).join('|'), 'gi');
+
+  return {
+    diff,
+    value: options.output[timeMomentOperator].replace(
+      re,
+      (matched: string) => mapObj[matched as keyof typeof mapObj],
+    ),
+  };
+};
+
+export const readableDate = (dateAt: string) => {
+  try {
+    return new Date(dateAt).getTime();
+  } catch (e) {
+    return null;
+  }
+};

package/src/helpers/file.helper.spec.ts

@@ -0,0 +1,60 @@
+import { isFileImage, getImageFromFile } from '@/helpers/file.helper';
+import { base64StringToBlob } from 'blob-util';
+
+const file = new File(
+  [
+    base64StringToBlob(
+      'iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==',
+      'image/png',
+    ),
+  ],
+  'image.png',
+  { type: 'image/png' },
+);
+
+describe('File Helper', () => {
+  describe('isFileImage', () => {
+    it('should return false if file is not image', () => {
+      expect(isFileImage({ ...file, type: 'toto' } as File)).toEqual(false);
+    });
+    it('should return true if file is png', () => {
+      expect(isFileImage({ ...file, type: 'image/png' } as File)).toEqual(true);
+    });
+    it('should return false if file is gif', () => {
+      expect(isFileImage({ ...file, type: 'image/gif' } as File)).toEqual(true);
+    });
+    it('should return false if file is jpeg', () => {
+      expect(isFileImage({ ...file, type: 'image/jpeg' } as File)).toEqual(
+        true,
+      );
+    });
+  });
+  describe('getImageFromFile', () => {
+    it('should return promise with formatted answer for image', async () => {
+      const result = await getImageFromFile(file);
+      expect(result).toEqual({
+        img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==',
+        name: 'image.png',
+      });
+    });
+    it('should reject promise if file is not correct', async () => {
+      expect.assertions(1);
+      try {
+        await getImageFromFile(
+          new File(
+            [
+              base64StringToBlob(
+                'iVBORw0KGgoAAAANSUh2P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==',
+                'toto',
+              ),
+            ],
+            'image.png',
+            { type: 'titi' },
+          ),
+        );
+      } catch (error) {
+        expect(error).toBeTruthy();
+      }
+    });
+  });
+});

package/src/helpers/file.helper.ts

@@ -0,0 +1,24 @@
+export const isFileImage = (file: File): boolean => {
+  return [
+    'image/png',
+    'image/gif',
+    'image/jpeg',
+    'image/svg',
+    'image/svg+xml',
+  ].includes(file.type);
+};
+
+export const getImageFromFile = async (
+  file: File,
+): Promise<{ img: string | ArrayBuffer | null; name: string }> => {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => {
+      resolve({ img: fr.result, name: file.name });
+    };
+    fr.readAsDataURL(file);
+    fr.onerror = (error) => {
+      reject(error);
+    };
+  });
+};

package/src/helpers/index.ts

@@ -0,0 +1,6 @@
+export * from './date.helper';
+export * from './file.helper';
+export * from './location.helper';
+export * from './problem.helper';
+export * from './string.helper';
+export * from './table.helper';