@mgdis/mg-components 5.9.1 → 5.10.1

package/dist/types/components.d.ts

@@ -26,7 +26,7 @@ import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export namespace Components {
     interface MgActionMore {
         /**
-          * Define button properties Default: {variant: 'flat', isIcon: true}.
+          * Define button properties
          */
         "button": MgActionMoreButtonType;
         /**
@@ -34,7 +34,7 @@ export namespace Components {
          */
         "displayChevron": boolean;
         /**
-          * Define displaied icon Default: {icon: 'ellipsis'}
+          * Define displaied icon
          */
         "icon": MgActionMoreIconType;
         /**
@@ -100,11 +100,11 @@ export namespace Components {
     }
     interface MgCard {
         /**
-          * Define variant prop Default: undefined
+          * Define variant prop
          */
         "variant": undefined | VariantType1;
         /**
-          * Define variantStyle prop Default: undefined
+          * Define variantStyle prop
          */
         "variantStyle": undefined | VariantStyleType;
     }
@@ -153,7 +153,6 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -216,7 +215,6 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -279,7 +277,6 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -354,7 +351,6 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -437,7 +433,6 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -504,7 +499,6 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -571,7 +565,6 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -654,7 +647,6 @@ export namespace Components {
         "displayCharacterLeft": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -719,7 +711,6 @@ export namespace Components {
         "required": boolean;
         /**
           * Public method to play input focus
-          * @returns
          */
         "setFocus": () => Promise<void>;
         /**
@@ -750,7 +741,6 @@ export namespace Components {
         "displayCharacterLeft": boolean;
         /**
           * Public method to display errors
-          * @returns
          */
         "displayError": () => Promise<void>;
         /**
@@ -867,7 +857,6 @@ export namespace Components {
         "isOnOff": boolean;
         /**
           * Items are the possible options to select
-          * @returns
          */
         "items": string[] | ToggleValue[];
         /**
@@ -901,7 +890,7 @@ export namespace Components {
     }
     interface MgItemMore {
         /**
-          * Define icon Default: {icon: 'ellipsis-vertical'}
+          * Define icon
          */
         "icon": IconType;
         /**
@@ -909,13 +898,13 @@ export namespace Components {
          */
         "size": SizeType;
         /**
-          * Define slot label element Default: {display: false}
+          * Define slot label element
          */
         "slotlabel": SlotLabelType;
     }
     interface MgMenu {
         /**
-          * Component display direction. Default: "horizontal"
+          * Component display direction.
          */
         "direction": Direction;
         /**
@@ -927,13 +916,13 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Define mg-menu size Default: 'regular'
+          * Define mg-menu size
          */
         "size": MenuSizeType;
     }
     interface MgMenuItem {
         /**
-          * Define menu-item content expanded. Default: false.
+          * Define menu-item content expanded.
          */
         "expanded": boolean;
         /**
@@ -941,11 +930,11 @@ export namespace Components {
          */
         "href": string;
         /**
-          * Identifier is used to control mg-popover Default: createID('mg-menu-item');
+          * Identifier is used to control mg-popover
          */
         "identifier": string;
         /**
-          * Define menu-item status. Default: "visible"
+          * Define menu-item status.
          */
         "status": Status;
     }
@@ -1443,7 +1432,7 @@ declare global {
 declare namespace LocalJSX {
     interface MgActionMore {
         /**
-          * Define button properties Default: {variant: 'flat', isIcon: true}.
+          * Define button properties
          */
         "button"?: MgActionMoreButtonType;
         /**
@@ -1451,7 +1440,7 @@ declare namespace LocalJSX {
          */
         "displayChevron"?: boolean;
         /**
-          * Define displaied icon Default: {icon: 'ellipsis'}
+          * Define displaied icon
          */
         "icon"?: MgActionMoreIconType;
         /**
@@ -1521,11 +1510,11 @@ declare namespace LocalJSX {
     }
     interface MgCard {
         /**
-          * Define variant prop Default: undefined
+          * Define variant prop
          */
         "variant"?: undefined | VariantType1;
         /**
-          * Define variantStyle prop Default: undefined
+          * Define variantStyle prop
          */
         "variantStyle"?: undefined | VariantStyleType;
     }
@@ -2314,7 +2303,6 @@ declare namespace LocalJSX {
         "isOnOff"?: boolean;
         /**
           * Items are the possible options to select
-          * @returns
          */
         "items": string[] | ToggleValue[];
         /**
@@ -2356,7 +2344,7 @@ declare namespace LocalJSX {
     }
     interface MgItemMore {
         /**
-          * Define icon Default: {icon: 'ellipsis-vertical'}
+          * Define icon
          */
         "icon"?: IconType;
         /**
@@ -2364,13 +2352,13 @@ declare namespace LocalJSX {
          */
         "size"?: SizeType;
         /**
-          * Define slot label element Default: {display: false}
+          * Define slot label element
          */
         "slotlabel"?: SlotLabelType;
     }
     interface MgMenu {
         /**
-          * Component display direction. Default: "horizontal"
+          * Component display direction.
          */
         "direction"?: Direction;
         /**
@@ -2382,13 +2370,13 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * Define mg-menu size Default: 'regular'
+          * Define mg-menu size
          */
         "size"?: MenuSizeType;
     }
     interface MgMenuItem {
         /**
-          * Define menu-item content expanded. Default: false.
+          * Define menu-item content expanded.
          */
         "expanded"?: boolean;
         /**
@@ -2396,7 +2384,7 @@ declare namespace LocalJSX {
          */
         "href"?: string;
         /**
-          * Identifier is used to control mg-popover Default: createID('mg-menu-item');
+          * Identifier is used to control mg-popover
          */
         "identifier"?: string;
         /**
@@ -2408,7 +2396,7 @@ declare namespace LocalJSX {
          */
         "onStatus-change"?: (event: MgMenuItemCustomEvent<MgMenuItem['status']>) => void;
         /**
-          * Define menu-item status. Default: "visible"
+          * Define menu-item status.
          */
         "status"?: Status;
     }

package/dist/types/locales/index.d.ts

@@ -126,9 +126,8 @@ declare const messages: {
 };
 /**
  * Get Intl object
- *
- * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
+ * @param element - element we need to get the language
+ * @returns messages object
  */
 export declare const initLocales: (element: HTMLElement) => {
   locale: string;

package/dist/types/utils/behaviors.utils.d.ts

@@ -15,8 +15,6 @@ export declare class OverflowBehavior {
    **********/
   /**
    * Disconnect ResizeObserver
-   *
-   * @returns {void}
    */
   disconnect: () => void;
   /************
@@ -24,61 +22,48 @@ export declare class OverflowBehavior {
    ************/
   /**
    * run overflow behavior
-   *
-   * @param {number} width width of the container. Optional.
-   * @returns {void}
+   * @param width - width of the container. Optional.
    */
   private run;
   /**
    * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-   *
-   * @param {Element} element element to parse
-   * @returns {Element[]} children
+   * @param element - element to parse
+   * @returns children
    */
   private getInteractiveItems;
   /**
    * Update displayed items in container from a given available space
-   *
-   * @param {number} availableWidth available width in container to display child items
-   * @returns {void}
+   * @param availableWidth - available width in container to display child items
    */
   private updateDisplayedItems;
   /**
    * Utility method to know if item overflow partialy or totaly in the container
-   *
-   * @param {number} cumulateWidth previous sibling elements cumulate width + item width
-   * @param {HTMLElement} item item HTML element
-   * @param {number} availableWidth container available width
-   * @returns {boolean} truthy if element is overflow
+   * @param cumulateWidth - previous sibling elements cumulate width + item width
+   * @param item - item HTML element
+   * @param availableWidth - container available width
+   * @returns truthy if element is overflow
    */
   private isOverflowElement;
   /**
    * Utility method to know if a given element is the 'MORE' element
-   *
-   * @param {Element} element element to match with 'MORE' element
-   * @returns {boolean} truthy if element is the 'MORE' element
+   * @param element - element to match with 'MORE' element
+   * @returns truthy if element is the 'MORE' element
    */
   private isMoreElement;
   /**
    * Toggle display item element
-   *
-   * @param {HTMLElement} item item to control
-   * @param {boolean} isHidden is item hidden
-   * @returns {void}
+   * @param item - item to control
+   * @param isHidden - is item hidden
    */
   private toggleItem;
   /**
    * Toggle element's hidde attribute
-   *
-   * @param {Element} element element to toggle
-   * @param {boolean} isHidden element is hidden
-   * @returns {void}
+   * @param element - element to toggle
+   * @param isHidden - element is hidden
    */
   private toggleElement;
   /**
    * Remove hidden attributes on all items
-   *
-   * @returns {void}
    */
   private restoreItems;
 }

package/dist/types/utils/components.utils.d.ts

@@ -1,9 +1,8 @@
 /**
  * Create random ID
- *
- * @param {string} prefix  add prefix to created ID
- * @param {number} length ID length
- * @returns {string} ID
+ * @param prefix - add prefix to created ID
+ * @param length - ID length
+ * @returns ID
  */
 export declare const createID: (prefix?: string, length?: number) => string;
 /**
@@ -15,45 +14,37 @@ export declare class ClassList {
   constructor(classlist?: string[]);
   /**
    * Add class
-   *
-   * @param {string} className class name to add
-   * @returns {void}
+   * @param className - class name to add
    */
   add: (className: string) => void;
   /**
    * Delete class
-   *
-   * @param {string} className class name to delete
-   * @returns {void}
+   * @param className - class name to delete
    */
   delete: (className: string) => void;
   /**
    * Check if class exist in list
-   *
-   * @param {string} className class name to check
-   * @returns {boolean} class name is in the list
+   * @param className - class name to check
+   * @returns class name is in the list
    */
   has: (className: string) => boolean;
   /**
    * Join classes seperated by spaces
-   *
-   * @returns {string} joined values
+   * @returns joined values
    */
   join: () => string;
 }
 /**
  * Check if all items are string
- *
- * @param {unknown} items items to check
- * @returns {boolean} all items are string
+ * @param items - items to check
+ * @returns all items are string
  */
 export declare const allItemsAreString: (items: unknown) => items is string[];
 /**
  * Check if element is a heading
- *
- * @param {Element} element slotted element
- * @param {string[]} tagNames allowed tag names list
- * @returns {boolean} element is a heading
+ * @param element - slotted element
+ * @param tagNames - allowed tag names list
+ * @returns element is a heading
  */
 export declare const isTagName: (element: Element, tagNames: string[]) => boolean;
 /**
@@ -61,16 +52,15 @@ export declare const isTagName: (element: Element, tagNames: string[]) => boolea
  */
 export declare const focusableElements = "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]";
 /**
- *
- * @param {Window} localWindow the window we are lookink for other windows
- * @returns {Window[]} The list of windows found
+ * Get windows
+ * @param localWindow - the window we are lookink for other windows
+ * @returns The list of windows found
  */
 export declare const getWindows: (localWindow: Window) => Window[];
 /**
  * Get parent windows
- *
- * @param {Window} localWindow the window we are lookink for parents
- * @param {Window[]} windows The list of allready found windows
- * @returns {Window[]} The list of windows found
+ * @param localWindow - the window we are lookink for parents
+ * @param windows - The list of allready found windows
+ * @returns The list of windows found
  */
 export declare const getParentWindows: (localWindow: Window, windows?: Window[]) => Window[];

package/dist/types/utils/locale.utils.d.ts

@@ -1,18 +1,16 @@
 /**
  * Format number to the locale currency
- *
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @param {string} currency currency to apply
- * @returns {string} formatted currency
+ * @param number - number to format
+ * @param locale - locale to apply
+ * @param currency - currency to apply
+ * @returns formatted currency
  */
 export declare const localeCurrency: (number: number, locale: string, currency: string) => string;
 /**
  * Format number to locale
- *
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @returns {string} formatted number
+ * @param number - number to format
+ * @param locale - locale to apply
+ * @returns formatted number
  */
 export declare const localeNumber: (number: number, locale: string) => string;
 /**
@@ -21,20 +19,18 @@ export declare const localeNumber: (number: number, locale: string) => string;
 export declare const dateRegExp: RegExp;
 /**
  * Locale date format
- *
- * @param {string} date date to format
- * @param {string} locale locale to apply
- * @returns {string} formatted date
+ * @param date - date to format
+ * @param locale - locale to apply
+ * @returns formatted date
  */
 export declare const localeDate: (date: string, locale: string) => string;
 /**
  * Get locale and messages
  * We load the defined locale but for now we only support the first subtag for messages
- *
- * @param {HTMLElement} element element we need to get the language
- * @param {unknown} messages messages to use
- * @param {string} defaultLocale default messages locale
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
+ * @param element - element we need to get the language
+ * @param messages - messages to use
+ * @param defaultLocale - default messages locale
+ * @returns messages object
  */
 export declare const getLocaleMessages: (element: HTMLElement, messages: unknown, defaultLocale: string) => {
   locale: string;

package/dist/types/utils/unit.test.utils.d.ts

@@ -1,22 +1,18 @@
 import { MockCustomEvent } from '@stencil/core/mock-doc';
 /**
  * Clone Deep function
- *
- * @param {unknown} obj object to clone
- * @returns {unknown} cloned json
+ * @param obj - object to clone
+ * @returns cloned json
  */
 export declare const cloneDeep: (obj: unknown) => unknown;
 /**
  * Utility function that mocks the `MutationObserver` API. Recommended to execute inside `beforeEach`.
- *
  * @param mutationObserverMock - Parameter that is sent to the `Object.defineProperty`
  * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
  * mock the mutation observer, but its methods.
  * You can manually fire an intersection entry:
- * @param {Function} mutationObserverMock.disconnect disconnect function
- * @param {Function} mutationObserverMock.observe observe function
- * @param {Function} mutationObserverMock.takeRecords takeRecords function
- * @returns {MutationObserver} Mocked MutationObserver
+ * @param mutationObserverMock - configuration object
+ * @returns Mocked MutationObserver
  * @example
  * ```
  * let fireMo;
@@ -37,14 +33,12 @@ type SetupMutationObserverMockParams = {
 export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: SetupMutationObserverMockParams) => typeof MutationObserver;
 /**
  * Utility function that mocks the `ResizeObserver` API. Recommended to execute inside `beforeEach`.
- *
  * @param resizeObserverMock - Parameter that is sent to the `Object.defineProperty`
  * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
  * mock the resize observer, but its methods.
  * You can manually fire an intersection entry:
- * @param {Function} resizeObserverMock.disconnect disconnect function
- * @param {Function} resizeObserverMock.observe observe function
- * @returns {ResizeObserver} Mocked ResizeObserver
+ * @param resizeObserverMock - configuration object
+ * @returns Mocked ResizeObserver
  * @example
  * ```
  * let fireRo;
@@ -70,38 +64,31 @@ type setupResizeObserverMockParams = {
 export declare const setupResizeObserverMock: ({ disconnect, observe }: setupResizeObserverMockParams) => typeof ResizeObserver;
 /**
  * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
- *
- * @returns {void}
  * @example
  * ```
  * setupSubmitEventMock();
  * ```
+ * @returns custom event mock
  */
 export declare const setupSubmitEventMock: () => typeof MockCustomEvent;
 /**
  * force popover id when component use randomed identifier
- *
- * @param {Element} component element wich include mg-popover
- * @param {string} id new fixed id
- * @param {string} interactiveElement element where attribute 'aria-controls' is set
- * @returns {void}
+ * @param component - element wich include mg-popover
+ * @param id - new fixed id
+ * @param interactiveElement - element where attribute 'aria-controls' is set
  */
 export declare const forcePopoverId: (component: Element, id: string, interactiveElement?: string) => void;
 /**
  * fix popper console.error in test
- * it is generated in @popperjs/core/dist/cjs/popper.js l.1859
+ * it is generated in `@popperjs/core/dist/cjs/popper.js l.1859`
  * this is due to internal function isHTMLElement(), so we can not mock it directly.
  * this function check if test DOM element mockHTMLElement instance is 'instanceof HTMLElement'
  * so we only override the console.error side effect for this error
- *
- * @returns {void}
  */
 export declare const mockConsoleError: () => void;
 /**
  * Add missing window.frames property to test context
  * usefull for component with iframe listeners, ex: mg-popover
- *
- * @returns {void}
  */
 export declare const mockWindowFrames: () => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.9.1",
+  "version": "5.10.1",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -30,8 +30,8 @@
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/plugin-transform-react-jsx": "^7.20.13",
+    "@playwright/test": "^1.33.0",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-    "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",
@@ -43,31 +43,29 @@
     "@types/jest": "npm:@types/jest@^26",
     "@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.3.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
     "chromatic": "^6.15.0",
     "css-loader": "^5.2.7",
-    "eslint": "^7.32.0",
-    "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",
+    "eslint": "^8.39.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "jest": "npm:jest@^26",
     "jest-cli": "npm:jest-cli@^26",
     "jest-image-snapshot": "^4.5.1",
     "jest-junit": "^15.0.0",
     "jsx-dom": "^8.0.4",
     "npm-run-all": "^4.1.5",
+    "playwright-config": "^1.0.0",
     "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
     "sass": "^1.58.0",
     "sass-loader": "^10.4.1",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
-    "turbo": "^1.8.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "@mgdis/linting-stencil": "1.0.0",
+    "eslint-config-stencil": "1.0.0",
+    "tsconfig": "1.0.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {
@@ -82,10 +80,11 @@
     "test": "TZ=UTC stencil test --spec --e2e",
     "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
     "test:e2e": "stencil test --e2e",
+    "test:e2e:playwright": "pnpm dlx playwright test",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
     "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider build-storybook",
-    "coverage": "TZ=UTC stencil test --spec --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\""
+    "coverage": "TZ=UTC stencil test --spec --no-build --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\""
   }
 }