@mgdis/mg-components 6.8.0 → 6.10.0

package/README.md

@@ -2,89 +2,28 @@
 
 ## Introduction
 
-MG Components is a reusable component library that aims to help MGDIS developers build UIs faster. It provides a collection of UI components that are designed to be productive, framework-agnostic, and satisfying to use. The library follows the principles of the Atomic Design methodology, which divides UI components into small, reusable parts.
+**MG Components** is a reusable component library designed to help MGDIS developers build user interfaces more efficiently. It provides a collection of modular, framework-agnostic UI components that are easy to use, accessible, and customizable. The library is built following the **Atomic Design** methodology, which organizes components into small, reusable building blocks.
 
-Components in MG Components are written using [StencilJS](https://stenciljs.com/), a compiler for building fast web apps using Web Components. The library utilizes [StorybookJS](https://storybook.js.org/) for component development and documentation.
+Components in MG Components are developed using [StencilJS](https://stenciljs.com/), a compiler for creating fast, standards-based Web Components. This ensures compatibility with all modern browsers and seamless integration with any framework (e.g., AngularJS, Vue, etc) or even without a framework. The library also leverages [StorybookJS](https://storybook.js.org/) for component documentation and testing.
 
-### Atomic Design
+## Key Features
 
-Atomic Design is an interface design method that takes into account the constraints of development. It emphasizes the need to consider technical design constraints when creating web designs. You can learn more about Atomic Design in this [introduction to Atomic Design](https://openclassrooms.com/fr/courses/5249021-initiez-vous-a-la-methode-atomic-design/5630171-decouvrez-l-atomic-design) (in French).
+- **Reusable Components**: Modular and framework-agnostic, designed for flexibility and scalability.
+- **Accessibility**: Built with WAI-ARIA standards to ensure inclusive user experiences.
+- **Customizable**: Easily adaptable to your design system using CSS variables.
+- **Cross-Framework Compatibility**: Works with AngularJS, Vue, or no framework at all.
 
-### Stencil
+## Atomic Design
 
-MG Components is built using Stencil, a compiler for building fast web apps using Web Components. Stencil combines the best concepts from popular frontend frameworks and generates 100% standards-based Web Components that can run in any modern browser. Stencil components can be used with any major framework or even without a framework.
+MG Components follows the **Atomic Design** methodology, which divides UI components into hierarchical levels:
 
-## Developer
+- **Atoms**: Basic building blocks (e.g., buttons, icons).
+- **Molecules**: Groups of atoms working together (e.g., input fields, menus).
 
-### Scripts
+<!-- Not for now
+- **Organisms**: Complex structures composed of molecules and atoms (e.g., navigation bars, tables).
+- **Templates**: Page-level layouts defining structure and content hierarchy.
+- **Pages**: Final implementations of templates with real content.
+  -->
 
-To build for production, run:
-
-```bash
-pnpm build
-```
-
-To run tests for the components, run:
-
-```bash
-pnpm test
-
-# only unit tests
-pnpm test:unit
-
-# only e2e tests
-pnpm test:e2e
-
-# filter on filename
-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
-pnpm generate component-path
-
-# example for an atom
-pnpm generate atoms/mg-icon
-
-# example for a molecule
-pnpm generate molecules/mg-message
-```
-
-### Naming Components
-
-All of the MGDIS generated web components must use the prefix `mg`.
-
-### Using this library
-
-You will find how to use the library instructions in the [Getting Started section](./GETTING-STARTED.md).
-
-### 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
-pnpm storybook
-```
-
-#### Notes
-
-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>
-);
-```
+Learn more about Atomic Design in this [introduction to Atomic Design](https://openclassrooms.com/fr/courses/5249021-initiez-vous-a-la-methode-atomic-design/5630171-decouvrez-l-atomic-design).

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;
+//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map
+
+//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map

package/dist/cjs/app-globals-V2Kpy_OQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-globals-V2Kpy_OQ.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"names":[],"mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}

package/dist/cjs/events.utils-D5SAtkpQ.js

@@ -0,0 +1,28 @@
+'use strict';
+
+/**
+ * Keyboard keys
+ */
+const Keys = {
+    TAB: 'Tab',
+    ENTER: 'Enter',
+    DOWN: 'Down',
+    UP: 'Up',
+    LEFT: 'Left',
+    RIGHT: 'Right',
+    ARROWDOWN: 'ArrowDown',
+    ARROWUP: 'ArrowUp',
+    ARROWRIGHT: 'ArrowRight',
+    ARROWLEFT: 'ArrowLeft',
+    HOME: 'Home',
+    END: 'End',
+    ESC: 'Esc',
+    ESCAPE: 'Escape',
+    NUMPADENTER: 'NumpadEnter',
+    SPACE: 'Space',
+};
+
+exports.Keys = Keys;
+//# sourceMappingURL=events.utils-D5SAtkpQ.js.map
+
+//# sourceMappingURL=events.utils-D5SAtkpQ.js.map

package/dist/cjs/events.utils-D5SAtkpQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.utils-D5SAtkpQ.js","sources":["src/utils/events.utils.ts"],"sourcesContent":["/**\n * Keyboard keys\n */\nexport const Keys: Record<string, KeyboardEvent['key']> = {\n  TAB: 'Tab',\n  ENTER: 'Enter',\n  DOWN: 'Down',\n  UP: 'Up',\n  LEFT: 'Left',\n  RIGHT: 'Right',\n  ARROWDOWN: 'ArrowDown',\n  ARROWUP: 'ArrowUp',\n  ARROWRIGHT: 'ArrowRight',\n  ARROWLEFT: 'ArrowLeft',\n  HOME: 'Home',\n  END: 'End',\n  ESC: 'Esc',\n  ESCAPE: 'Escape',\n  NUMPADENTER: 'NumpadEnter',\n  SPACE: 'Space',\n};\n"],"names":[],"mappings":";;AAAA;;AAEG;AACU,MAAA,IAAI,GAAyC;AACxD,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,KAAK,EAAE,OAAO;;;;;"}