@mgdis/mg-components 3.1.0

package/dist/types/stories/buttons.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    align: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Buttons: any;

package/dist/types/stories/grids.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const Grid: any;

package/dist/types/stories/icons.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    size: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Icons: any;

package/dist/types/stories/messages.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    variant: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Messages: any;

package/dist/types/stories/tags.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const Tags: any;

package/dist/types/stories/typography.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const Typography: any;

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

@@ -0,0 +1,43 @@
+/**
+ * Create random ID
+ * @param prefix {string} add prefix to created ID
+ * @returns {string} ID
+ */
+export declare function createID(prefix?: string, length?: number): string;
+/**
+ * Class to manage component classlist
+ * Set() are not working when imported in project
+ */
+export declare class ClassList {
+  classes: string[];
+  constructor(classlist?: string[]);
+  /**
+   * Add class
+   * @param className
+   * @returns {void}
+   */
+  add: (className: string) => void;
+  /**
+   * Delete class
+   * @param className
+   * @returns {void}
+   */
+  delete: (className: string) => void;
+  /**
+   * Check if class exist in list
+   * @param className
+   * @returns {boolean}
+   */
+  has: (className: string) => boolean;
+  /**
+   * Join classes seperated by spaces
+   * @returns {string}
+   */
+  join: () => string;
+}
+/**
+ * Check if all items are string
+ * @param items
+ * @returns {boolean}
+ */
+export declare function allItemsAreString(items: Array<string>): boolean;

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

@@ -0,0 +1,22 @@
+/**
+ * Format number to the locale currency
+ * @param number {number}
+ * @returns {string} formatted currency
+ */
+export declare function localeCurrency(number: number): string;
+/**
+ * Format number to locale
+ * @param number {number}
+ * @returns {string} formatted number
+ */
+export declare function localeNumber(number: number): string;
+/**
+ * Date RegExp
+ */
+export declare const dateRegExp: RegExp;
+/**
+ * Locale date format
+ * @param date {string}
+ * @returns {string} formatted date
+ */
+export declare function localeDate(date: string): string;

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

@@ -0,0 +1,5 @@
+import { E2EPage } from '@stencil/core/testing';
+import { Page as PuppeteerPage } from 'puppeteer';
+export declare type DesignSystemE2EPage = E2EPage & Pick<PuppeteerPage, 'screenshot' | 'viewport'>;
+export declare function createPage(htmlString?: string): Promise<DesignSystemE2EPage>;
+export declare const cloneDeep: (el: any) => any;

package/loader/cdn.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,12 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function applyPolyfills(): Promise<void>;

package/loader/index.es2017.js

@@ -0,0 +1,3 @@
+
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,4 @@
+
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm-es5/loader.js';

package/loader/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "mg-components-loader",
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@mgdis/mg-components",
+  "version": "3.1.0",
+  "description": "MG Components",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/mg-components/mg-components.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "maintainers": [
+    "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:es": "eslint src/**/*.{ts,tsx}",
+    "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
+    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
+    "test": "stencil test --spec --e2e",
+    "test:unit": "stencil test --spec",
+    "test:e2e": "stencil test --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "storybook": "start-storybook -p 6006 -s www/build",
+    "storybook:build": "build-storybook",
+    "prepare": "husky install"
+  },
+  "jest-junit": {
+    "outputDirectory": "coverage",
+    "outputName": "junit.xml"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.2",
+    "@stencil/core": "^2.14.1",
+    "normalize.css": "^8.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
+    "@stencil/eslint-plugin": "^0.4.0",
+    "@stencil/sass": "^1.5.2",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/html": "^6.4.19",
+    "@storybook/preset-scss": "^1.0.3",
+    "@types/jest": "^26.0.24",
+    "@types/jest-image-snapshot": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-jsx-pragmatic": "^1.0.2",
+    "css-loader": "^5.2.7",
+    "eslint": "^7.32.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-storybook": "^0.5.7",
+    "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",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.5",
+    "prettier": "^2.5.1",
+    "puppeteer": "^13.3.2",
+    "sass": "^1.41.0",
+    "sass-loader": "^10.2.0",
+    "style-loader": "^2.0.0",
+    "typescript": "^4.4.3"
+  },
+  "license": "BSD-3-Clause"
+}

package/readme.md

@@ -0,0 +1,159 @@
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
+# MG Components
+
+This project centralize MGDIS standalone Web Components using [Stencil](https://stenciljs.com/).
+
+All components refer to [PDA9-61 Spec](https://jira.mgdis.fr/browse/PDA9-61).
+
+## Stencil
+
+Stencil is a compiler for building fast web apps using Web Components.
+
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+
+## Getting Started
+
+To run MG Components, clone this repo to a new directory:
+
+```bash
+git clone https://gitlab.mgdis.fr/core/core-ui/mg-components
+cd mg-components
+```
+
+and run:
+
+```bash
+npm ci
+npm start
+```
+
+To build for production, run:
+
+```bash
+npm run build
+```
+
+To run tests for the components, run:
+
+```bash
+npm run test
+
+# only unit tests
+npm run test:unit
+
+# only e2e tests
+npm run test:e2e
+
+# filter on filename
+npm run test -- mg-icon
+```
+To regenerate snapshot you must add the `-u` parameter.
+
+To add a component, run:
+
+```bash
+npm run generate component-path
+
+# example for an atom
+npm run generate atoms/mg-icon
+
+# example for a molecule
+npm run generate molecules/mg-message
+```
+
+## Naming Components
+
+When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+
+Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the MGDIS generated web components use the prefix `mg`.
+
+## Using this library
+
+There are three strategies we recommend for using web components built with Stencil.
+
+The first step for all three of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+
+### Script tag
+
+- Put a script tag similar to this `<script src='https://unpkg.com/mg-button@0.0.1/dist/mg-button.esm.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc
+
+### Node Modules
+
+- Run `npm install @mgdis/mg-button --save`
+- Put a script tag similar to this `<script src='node_modules/mg-button/dist/mg-button.esm.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc
+
+### In a stencil-starter app
+
+- Run `npm install @mgdis/mg-button --save`
+- Add an import to the npm packages `import @mgdis/mg-button;`
+- Then you can use the element anywhere in your template, JSX, html etc
+
+## Style
+
+### Naming methodology
+
+MG Components is using [BEM](https://en.bem.info/) (Block, Element, Modifier) methodology with the [two dashes style](https://en.bem.info/methodology/naming-convention/#two-dashes-style) naming scheme.
+
+### Declaration organisation
+
+When a selector contains too many declaration it is recommended to organize them by theme : Display, Decoration, Font, Others.
+
+```CSS
+.mg-button {
+  // Display
+  display: inline-block;
+  vertical-align: middle;
+  min-height: 3.5rem;
+  padding: 0.6rem 1.2rem;
+  // Decoration
+  background-image: none;
+  border-radius: 0.3rem;
+  border: 0.1rem solid transparent;
+  cursor: pointer;
+  // Font
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  // Others
+  touch-action: manipulation;
+}
+```
+
+### 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
+](https://github.com/pixtron/storybook-addon-docs-stencil) is used to generate the doc. **To be up to date on local it needs a fresh build**.
+
+### run
+
+```bash
+npm run 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'}