@mgdis/mg-components 5.4.0 → 5.6.0

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "MG Components",
+  "packageManager": "pnpm@7.17.1",
+  "engineStrict": true,
+  "engines": {
+    "pnpm": ">=7"
+  },
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
@@ -18,73 +23,73 @@
     "Simon Duhem <duhem-s@mgdis.fr>",
     "Nicolas Jouanno <jouanno-n@mgdis.fr>"
   ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
-    "lint": "run-s lint:es lint:prettier",
-    "lint:fix": "run-s lint:es:fix lint:prettier:fix",
-    "lint:es": "eslint src/**/*.{ts,tsx,js}",
-    "lint:es:fix": "eslint src/**/*.{ts,tsx} --fix",
-    "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:e2e": "stencil test --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
-    "prepare": "husky install"
-  },
   "jest-junit": {
     "outputDirectory": "coverage",
     "outputName": "junit.xml"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
-    "@stencil/core": "^2.18.1",
+    "@popperjs/core": "^2.11.6",
+    "@stencil/core": "^2.21.0",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-react-jsx": "^7.20.7",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.13",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-docs": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/html": "^6.5.13",
+    "@storybook/addon-a11y": "^6.5.15",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/html": "^6.5.15",
     "@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",
     "@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.14.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.7",
+    "eslint-plugin-jsdoc": "^38.1.6",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.0",
+    "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.3",
     "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.2",
+    "puppeteer": "^13.7.0",
+    "sass": "^1.57.1",
+    "sass-loader": "^10.4.1",
     "style-loader": "^2.0.0",
-    "ts-node": "^10.7.0",
-    "typescript": "^4.4.3"
+    "ts-node": "^10.9.1",
+    "turbo": "^1.7.0",
+    "typescript": "~4.4.4"
   },
-  "license": "BSD-3-Clause"
-}
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "lint": "run-s lint:es lint:prettier",
+    "lint:fix": "run-s lint:es:fix lint:prettier:fix",
+    "lint:es": "eslint src/**/*.{ts,tsx}",
+    "lint:es:fix": "eslint src/**/*.{ts,tsx} --fix",
+    "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:e2e": "stencil test --e2e",
+    "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"
+  }
+}

package/readme.md

@@ -17,46 +17,50 @@ Stencil components are just Web Components, so they work in any major framework
 To run MG Components, clone this repository, go to your new directory and run:
 
 ```bash
-npm ci
-npm run start
+# This repository uses pnpm as package manager
+corepack enable
+pnpm i
+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
@@ -124,10 +128,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/components/locale.utils.js

@@ -1,40 +0,0 @@
-/**
- * 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
- */
-function localeCurrency(number, locale, currency) {
-  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
-}
-/**
- * Format number to locale
- *
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @returns {string} formatted number
- */
-function localeNumber(number, locale) {
-  return new Intl.NumberFormat(locale).format(number);
-}
-/**
- * Date RegExp
- */
-const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
-/**
- * Locale date format
- *
- * @param {string} date date to format
- * @param {string} locale locale to apply
- * @returns {string} formatted date
- */
-function localeDate(date, locale) {
-  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
-    return '';
-  }
-  return new Intl.DateTimeFormat(locale).format(new Date(date));
-}
-
-export { localeCurrency as a, localeNumber as b, dateRegExp as d, localeDate as l };

package/dist/components/mg-menu.conf.js

@@ -1,10 +0,0 @@
-/**
- * Menu direction type
- */
-var Direction;
-(function (Direction) {
-  Direction["VERTICAL"] = "vertical";
-  Direction["HORIZONTAL"] = "horizontal";
-})(Direction || (Direction = {}));
-
-export { Direction as D };