@mgdis/mg-components 5.5.0 → 5.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "description": "MG Components",
   "packageManager": "pnpm@7.17.1",
   "engineStrict": true,
@@ -28,50 +28,51 @@
     "outputName": "junit.xml"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
-    "@stencil/core": "^2.20.0",
+    "@popperjs/core": "^2.11.6",
+    "@stencil/core": "^2.22.1",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.14",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
-    "@storybook/html": "^6.5.14",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/html": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "^26.0.24",
-    "@types/jest-image-snapshot": "^4.3.1",
+    "@types/jest-image-snapshot": "^4.3.2",
+    "@types/node": "^18.14.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.3.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "chromatic": "^6.10.1",
+    "chromatic": "^6.15.0",
     "css-loader": "^5.2.7",
     "eslint": "^7.32.0",
-    "eslint-plugin-jsdoc": "^38.0.6",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-storybook": "^0.6.8",
+    "eslint-plugin-jsdoc": "^38.1.6",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-storybook": "^0.6.10",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "jest-image-snapshot": "^4.5.1",
-    "jest-junit": "^13.0.0",
-    "jsx-dom": "^8.0.1-beta.1",
+    "jest-junit": "^13.2.0",
+    "jsx-dom": "^8.0.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
-    "puppeteer": "^13.3.2",
-    "sass": "^1.41.0",
-    "sass-loader": "^10.2.0",
+    "prettier": "^2.8.3",
+    "puppeteer": "^13.7.0",
+    "sass": "^1.58.0",
+    "sass-loader": "^10.4.1",
     "style-loader": "^2.0.0",
-    "ts-node": "^10.7.0",
-    "turbo": "^1.6.3",
+    "ts-node": "^10.9.1",
+    "turbo": "^1.8.1",
     "typescript": "~4.4.4"
   },
   "license": "BSD-3-Clause",
@@ -85,7 +86,7 @@
     "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
     "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
     "test": "TZ=UTC stencil test --spec --e2e",
-    "test:unit": "TZ=UTC stencil test --spec",
+    "test:unit": "TZ=UTC stencil test --spec --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\"",
     "test:e2e": "stencil test --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",

package/readme.md

@@ -20,45 +20,47 @@ To run MG Components, clone this repository, go to your new directory and run:
 # This repository uses pnpm as package manager
 corepack enable
 pnpm i
-npm run start
+pnpm start
 ```
 
 To build for production, run:
 
 ```bash
-npm run build
+pnpm build
 ```
 
 To run tests for the components, run:
 
 ```bash
-npm run test
+pnpm test
 
 # only unit tests
-npm run test:unit
+pnpm test:unit
 
 # only e2e tests
-npm run test:e2e
+pnpm test:e2e
 
 # filter on filename
-npm run test -- mg-icon
-npm run test:unit -- mg-icon
+pnpm test -- mg-icon
+pnpm test:unit -- mg-icon
 ```
 
 <!-- Not working for now: To regenerate snapshot you must add the `-u` parameter. -->
 
+To regenerate snapshot you must add the `--updateSnapshot` parameter.
+
 For E2E tests you **must** use [WSL](https://docs.microsoft.com/fr-fr/windows/wsl/install) or a Linux OS to get the same screenshots as the GitLab CI.
 
 To add a component, run:
 
 ```bash
-npm run generate component-path
+pnpm generate component-path
 
 # example for an atom
-npm run generate atoms/mg-icon
+pnpm generate atoms/mg-icon
 
 # example for a molecule
-npm run generate molecules/mg-message
+pnpm generate molecules/mg-message
 ```
 
 ## Naming Components
@@ -100,24 +102,6 @@ When a selector contains too many declaration it is recommended to organize them
 }
 ```
 
-### Accessibility
-
-A good pratice is to manage hover, focus and active state at the same place.
-
-```SCSS
-/* SCSS */
-button {
-  &:hover, &:focus, &:active {
-    text-decoration: underline;
-  }
-}
-
-/* CSS */
-button:hover, button:focus, button:active {
-  text-decoration: underline;
-}
-```
-
 ## Storybook
 
 The plugin [storybook-addon-docs-stencil
@@ -126,10 +110,17 @@ The plugin [storybook-addon-docs-stencil
 ### run
 
 ```bash
-npm run storybook
+pnpm storybook
 ```
 
 ### Notes
 
-- camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
-- Boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+To display components in our `stories`, we use the `filterArgs` method to only show the necessary arguments in the code example. It takes in the first parameter an object containing the arguments to be used, and in the second parameter, an object containing the component default values.
+
+```JS
+const Template = (args: any): HTMLElement => (
+  <mg-tooltip {...filterArgs(args, { placement: 'bottom' })}>
+    <mg-icon icon="info-circle"></mg-icon>
+  </mg-tooltip>
+);
+```

package/dist/.storybook/utils.js

@@ -1,24 +0,0 @@
-export const filterArgs = (args, defaultValues) => {
-  const filteredArgs = {};
-  for (const k in args) {
-    if (!k.startsWith('slot')) {
-      const arg = args[k];
-      // Change camelCase k to kebab-case
-      const key = k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-      // Change value to boolean true value, will be replace during render
-      if (typeof arg === 'boolean' && arg === true) {
-        filteredArgs[key] = 'mg__storybook__boolean-true';
-      }
-      // Do not add args if is default value
-      else if (!defaultValues || !Object.keys(defaultValues).includes(k) || defaultValues[k] !== arg) {
-        filteredArgs[key] = arg;
-      }
-    }
-  }
-  // Add comment when args contain object, will be replace during render
-  const argsObjects = Object.entries(args).filter(arg => typeof arg[1] === 'object');
-  if (argsObjects.length > 0) {
-    filteredArgs['mg__storybook__comment'] = `/!\\ Object props are not rendered in the code example: ${argsObjects.map(([a]) => a).join(', ')}.`;
-  }
-  return filteredArgs;
-};

package/dist/collection/components/atoms/mg-badge/doc/mg-badge.stories.js

@@ -1,27 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-import { variants } from '../mg-badge.conf';
-export default {
-  component: 'mg-badge',
-  title: 'Atoms/mg-badge',
-  argTypes: {
-    value: {
-      control: { type: 'text' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-badge", Object.assign({}, filterArgs(args, { variant: variants[0] })));
-export const MgBadge = Template.bind({});
-MgBadge.args = {
-  value: '99',
-  label: 'unread messages',
-  variant: variants[0],
-  outline: false,
-};

package/dist/collection/components/atoms/mg-button/doc/mg-button.stories.js

@@ -1,38 +0,0 @@
-import { h } from '@stencil/core';
-import { variants, buttonTypes } from '../mg-button.conf';
-import { icons } from '../../mg-icon/mg-icon.conf';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-button',
-  title: 'Atoms/mg-button',
-  argTypes: {
-    type: {
-      options: [undefined, ...buttonTypes],
-      control: { type: 'select' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-button", Object.assign({}, filterArgs(args, { variant: variants[0] })), args.slot);
-export const MgButton = Template.bind({});
-MgButton.args = {
-  slot: 'Text button',
-  variant: variants[0],
-  label: 'Explicit aria label',
-  identifier: undefined,
-  disabled: false,
-  disableOnClick: false,
-  isIcon: false,
-  type: undefined,
-  fullWidth: undefined,
-};
-export const IsIcon = Template.bind({});
-IsIcon.args = Object.assign(Object.assign({}, MgButton.args), { isIcon: true, slot: h("mg-icon", { icon: Object.keys(icons)[0] }) });
-export const DisableOnClick = Template.bind({});
-DisableOnClick.args = Object.assign(Object.assign({}, MgButton.args), { disableOnClick: true });

package/dist/collection/components/atoms/mg-card/doc/mg-card.stories.js

@@ -1,18 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-card',
-  title: 'Atoms/mg-card',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-card", Object.assign({}, filterArgs(args)), args.slot);
-export const MgCard = Template.bind({});
-MgCard.args = {
-  slot: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-};

package/dist/collection/components/atoms/mg-character-left/doc/mg-character-left.stories.js

@@ -1,20 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-character-left',
-  title: 'Atoms/mg-character-left',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-character-left", Object.assign({}, filterArgs(args)));
-export const MgCharacterLeft = Template.bind({});
-MgCharacterLeft.args = {
-  identifier: 'identifier',
-  characters: '',
-  maxlength: 400,
-};

package/dist/collection/components/atoms/mg-divider/doc/mg-divider.stories.js

@@ -1,18 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-divider',
-  title: 'Atoms/mg-divider',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-divider", Object.assign({}, filterArgs(args, { size: 'regular' })));
-export const MgDivider = Template.bind({});
-MgDivider.args = {
-  size: 'regular',
-};

package/dist/collection/components/atoms/mg-icon/doc/mg-icon.stories.js

@@ -1,41 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-import { icons, sizes, variants } from '../mg-icon.conf';
-export default {
-  component: 'mg-icon',
-  title: 'Atoms/mg-icon',
-  argTypes: {
-    icon: {
-      options: Object.keys(icons),
-      control: { type: 'select' },
-    },
-    size: {
-      options: sizes,
-      control: { type: 'select' },
-    },
-    variant: {
-      options: [undefined, ...variants],
-      control: { type: 'select' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => {
-  const color = args.color;
-  delete args.color;
-  // return element
-  return (h("div", { style: { color } }, h("mg-icon", Object.assign({}, filterArgs(args, { size: sizes[1] })))));
-};
-export const MgIcon = Template.bind({});
-MgIcon.args = {
-  color: '',
-  icon: Object.keys(icons)[0],
-  size: undefined,
-  spin: false,
-};

package/dist/collection/components/atoms/mg-input-title/doc/mg-input-title.stories.js

@@ -1,21 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-input-title',
-  title: 'Atoms/mg-input-title',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-title", Object.assign({}, filterArgs(args)), args.slot);
-export const MgInputTitle = Template.bind({});
-MgInputTitle.args = {
-  slot: 'Label',
-  identifier: 'identifier',
-  required: true,
-  isLegend: false,
-};

package/dist/collection/components/atoms/mg-tag/doc/mg-tag.stories.js

@@ -1,22 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-import { variants } from '../mg-tag.conf';
-export default {
-  component: 'mg-tag',
-  title: 'Atoms/mg-tag',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-tag", Object.assign({}, filterArgs(args, { variant: variants[0] })), args.slot);
-export const MgTag = Template.bind({});
-MgTag.args = {
-  slot: 'Label',
-  variant: variants[0],
-  outline: false,
-  soft: false,
-};

package/dist/collection/components/atoms/mg-tooltip/doc/mg-tooltip.stories.js

@@ -1,50 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-tooltip',
-  title: 'Atoms/mg-tooltip',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    placement: {
-      control: { type: 'select' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("mg-icon", { icon: "info-circle" })));
-export const MgTooltip = Template.bind({});
-MgTooltip.args = {
-  identifier: 'identifier',
-  message: 'This is a tooltip message',
-  placement: undefined,
-  display: false,
-  disabled: false,
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateButton = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("mg-button", null, "Action")));
-export const MgTooltipOnButton = TemplateButton.bind({});
-MgTooltipOnButton.args = Object.assign({}, MgTooltip.args);
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateSpan = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("span", null, "any text")));
-export const MgTooltipOnSpan = TemplateSpan.bind({});
-MgTooltipOnSpan.args = Object.assign({}, MgTooltip.args);

package/dist/collection/components/molecules/inputs/mg-input-checkbox/doc/mg-input-checkbox.stories.js

@@ -1,50 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-export default {
-  component: 'mg-input-checkbox',
-  title: 'Molecules/Inputs/mg-input-checkbox',
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-checkbox", Object.assign({}, filterArgs(args)));
-export const MgInputCheckbox = Template.bind({});
-MgInputCheckbox.args = {
-  // Global
-  value: [
-    {
-      title: 'HT',
-      value: true,
-    },
-    {
-      title: 'TTC',
-      value: false,
-      disabled: true,
-    },
-    {
-      title: 'Mixte (HT/TTC)',
-      value: null,
-    },
-  ],
-  identifier: 'identifier',
-  name: 'input-name',
-  // Label
-  label: 'Option',
-  labelOnTop: false,
-  labelHide: false,
-  // placement
-  inputVerticalList: false,
-  // Input
-  required: false,
-  disabled: false,
-  readonly: false,
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-};

package/dist/collection/components/molecules/inputs/mg-input-date/doc/mg-input-date.stories.js

@@ -1,43 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-export default {
-  component: 'mg-input-date',
-  title: 'Molecules/Inputs/mg-input-date',
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-date", Object.assign({}, filterArgs(args)));
-const date = new Date();
-const getFormatedNumber = (number) => {
-  return `${number > 9 ? number : '0' + number}`;
-};
-export const MgInputDate = Template.bind({});
-MgInputDate.args = {
-  // Global
-  value: `${date.getFullYear()}-${getFormatedNumber(date.getMonth())}-${getFormatedNumber(date.getDate())}`,
-  identifier: 'identifier',
-  name: 'input-name',
-  // Label
-  label: 'Label',
-  labelOnTop: false,
-  labelHide: false,
-  // Input
-  required: true,
-  readonly: false,
-  disabled: false,
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-};
-export const MgInputDateMinMax = Template.bind({});
-MgInputDateMinMax.args = Object.assign(Object.assign({}, MgInputDate.args), {
-  // date range
-  min: `${date.getFullYear()}-01-01`, max: `${date.getFullYear() + 1}-12-31`
-});

package/dist/collection/components/molecules/inputs/mg-input-numeric/doc/mg-input-numeric.stories.js

@@ -1,68 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-import { types } from '../mg-input-numeric.conf';
-export default {
-  component: 'mg-input-numeric',
-  title: 'Molecules/Inputs/mg-input-numeric',
-  argTypes: {
-    type: {
-      options: types,
-      control: { type: 'select' },
-    },
-    mgWidth: {
-      options: [undefined, 2, 4, 16, 'full'],
-      control: { type: 'select' },
-    },
-  },
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-numeric", Object.assign({}, filterArgs(args)));
-/**
- * Global use
- */
-export const MgInputNumeric = Template.bind({});
-MgInputNumeric.args = {
-  // Global
-  value: '',
-  identifier: 'identifier',
-  name: 'input-name',
-  type: types[0],
-  // Label
-  label: 'Label',
-  labelOnTop: false,
-  labelHide: false,
-  // Input
-  placeholder: 'placeholder',
-  required: true,
-  disabled: false,
-  readonly: false,
-  max: undefined,
-  min: undefined,
-  mgWidth: undefined,
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-};
-const TemplateSlot = args => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const helpText = args.helpText;
-  delete args.helpText;
-  // return element
-  return (h("mg-input-numeric", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText }), h("span", { slot: "append-input" }, "km")));
-};
-/**
- * Global use
- */
-export const AppendSlot = TemplateSlot.bind({});
-AppendSlot.args = Object.assign({}, MgInputNumeric.args);