open-index/open-npm huggingface dataset:
npm package: @mgdis/img
Description: Image used in MGDIS products
Author: Simon Duhem
Latest version: 2.6.0

# @mgdis/img

This package is designed to manage images used in MGDIS products.

Images **MUST** be in the SVG file format.

Images should be placed in the `src` directory, within their respective folders. Currently, we have `icons` and `illustrations` folders.

## Figma Import

Icons are imported from our Figma design system. The script downloads SVG icons, optimizes them, and saves them to files.

### Prerequisites

Before running the script, make sure you have the following:

- Figma API access token
- Figma file key
- Figma page key

Set these values in the `.env` file:

```bash
FIGMA_ACCESS_TOKEN=<your-access-token>
FIGMA_FILE_KEY=<your-file-key>
FIGMA_PAGE_ID=<your-page-id>
```

### Run

To run the import, execute the following command:

```bash
pnpm import:figma
```

## Build

During the build process, SVG files in each folder are minified, PNG alternatives are generated, and an `index.json` file containing the file names is created.

There is also a command available to clean the `src` files. By running the `svgo:src` command, SVGs will be prettified (not minified).

## Illustations

To allow for customization, classes must be added to every SVG element (path, circle, etc.).

The required format for these classes is: `svg-{filename}-color-{number}`.

For example, if the file name is `no-data.svg`, the classes should be `svg-no-data-color-1`, `svg-no-data-color-2`, `svg-no-data-color-3`, and so on.
npm package: @mgdis/mg-components
Description: MG Components
Latest version: 6.22.0

# @mgdis/mg-components

## Introduction

**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 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.

## Key Features

- **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.

## Atomic Design

MG Components follows the **Atomic Design** methodology, which divides UI components into hierarchical levels:

- **Atoms**: Basic building blocks (e.g., buttons, icons).
- **Molecules**: Groups of atoms working together (e.g., input fields, menus).

<!-- 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.
  -->

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).