open-index/open-npm huggingface dataset:
npm package: @metyis-ds/avatar
Description: Avatar component, capable of rendering given image or falling back to custom text (e.g. person's initials) if there is an error rendering the image.
Latest version: 0.0.3

## @metyis-ds/Avatar

Avatar component, capable of rendering given image or falling back to custom text (e.g. person's initials) if there is an error rendering the image.

### Install

```shell
  $ yarn add @metyis-ds/avatar
```
npm package: @metyis-ds/card
Description: The Card component is merely a wrapper for the different Card components. it is advisable to pass only those components (CardHeader, CardBody, CardFooter) as children, even though you can still pass whatever you please as seen in the example below. A vali
Latest version: 1.0.2

## @metyis-ds/card

The Card component is merely a wrapper for the different Card components. it is advisable to pass only those components (CardHeader, CardBody, CardFooter) as children, even though you can still pass whatever you please as seen in the example below. A valid example for a different component would be for instance a Divider.

### Install

```shell
  $ yarn add @metyis-ds/card
```
npm package: @metyis-ds/checkbox
Description: Simple Checkbox component.
Latest version: 0.0.8

## @metyis-ds/Checkbox

Simple Checkbox component.

@diana-ui could be refactored to not rely on classnames for styling and instead use styled components. This would be more inline with the code on other components.
In that refactor, the use of grey colors (or custom colors in general) could also be removed to avoid having to include grey colors in metyis-ds' palette for compatibility purposes.

### Install

```shell
  $ yarn add @metyis-ds/checkbox
```
npm package: @metyis-ds/cta
Description: CTA stands for "Call To Action". This component is essentially a button, but visually it's much more striking than a button.
Latest version: 0.1.5

## @metyis-ds/cta

CTA stands for "Call To Action".
This component is essentially a button, but visually it's much more striking than a button.

Two variants exist, primary and secondary, the only difference between them being padding and font size.

### Install

```shell
  $ yarn add @metyis-ds/cta
```
npm package: @metyis-ds/dropdown
Description: Simple Dropdown component. At the moment, the MultipleDropdown hasn't been implemented yet as the designs aren't finished but it is on the backlog.
Latest version: 0.0.7

## @metyis-ds/Dropdown

Simple Dropdown component.
At the moment, the MultipleDropdown hasn't been implemented yet as the designs aren't finished but it is on the backlog.

### Install

```shell
  $ yarn add @metyis-ds/dropdown
```
npm package: @metyis-ds/link
Description: Links are underlined by default. There is a variant of Link if `isSubtle` is true where the underline is animated on hover (or if forced with `forceHover`).
Latest version: 0.2.4

## @metyis-ds/link

Links are underlined by default.
There is a variant of Link if `isSubtle` is true where the underline is animated on hover (or if forced with `forceHover`).

Furthermore, if no href is passed, Link will have a `span` as a root element instead of an `a` to support cases like `react-router`, where a library exports its own `a` which will wrap this component. Thus, the styles are exported and something like `<a><a></a></a>` can be avoided.

Finally, there are three available sizes: `lg`, `md` and `sm`.

### Install

```shell
  $ yarn add @metyis-ds/link
```
npm package: @metyis-ds/menu
Description: This component can be used to display a popup with a list. It uses the `Popover` component underneath to show the options. These options are preferably used with MenuItem
Latest version: 0.1.0

## @metyis-ds/menu

This component can be used to display a popup with a list. It uses the `Popover` component underneath to show the options.
These options are preferably used with MenuItem

### Install

```shell
  $ yarn add @metyis-ds/menu
```
npm package: @metyis-ds/radio
Description: Radio component and some variations. BaseRadio and the components that extend it, SimpleRadio and TabRadio, dont extend @Diana-ui's Radio. They should be extended to do so in the future.
Latest version: 0.0.5

## @metyis-ds/Radio

Radio component and some variations.
BaseRadio and the components that extend it, SimpleRadio and TabRadio, dont extend @Diana-ui's Radio.
They should be extended to do so in the future.

### Install

```shell
  $ yarn add @metyis-ds/radio
```
npm package: @metyis-ds/tag
Description: A Tag labels UI objects for quick recognition and navigation. There are two variants, Tag and ColoredTag with customizable background and text color. They have slightly different UIs.
Latest version: 1.1.5

## @metyis-ds/tag

A Tag labels UI objects for quick recognition and navigation.
There are two variants, Tag and ColoredTag with customizable background and text color. They have slightly different UIs.

### Install

```shell
  $ yarn add @metyis-ds/tag
```
npm package: @metyis-ds/toggle
Description: The Toggle component allows the user to input a boolean value. An optional icon may be visually added to the inside of the toggle.
Latest version: 0.1.2

## @metyis-ds/Toggle

The Toggle component allows the user to input a boolean value.
An optional icon may be visually added to the inside of the toggle.

### Install

```shell
  $ yarn add @metyis-ds/toggle
```
npm package: @metyis-ds/tooltip
Description: The component will show the information provided in the Title and the children prop. The tooltip appears after hovering over the element passed in the renderHeader prop. It has the option to show on hover that is default true, but you can switch to false 
Latest version: 0.1.1

## @metyis-ds/tooltip

The component will show the information provided in the Title and the children prop.
The tooltip appears after hovering over the element passed in the renderHeader prop.
It has the option to show on hover that is default true, but you can switch to false making it available on click, proper for mobile interactions.

### Install

```shell
  $ yarn add @metyis-ds/tooltip
```
npm package: @metyis-tools/eslint-config
Description: <h2> Usage </h2>
Latest version: 0.0.7

# @metyis-tools/eslint-config

<h2> Usage </h2>

Install it locally:

```
$ yarn add @metyis-tools/eslint-config
```

Then, you need to tell eslint where to find this configuration, so one way of doing it is by going to the package.json file, and add the following:

```json
{
  "eslintConfig": {
    "extends": "@metyis-tools/eslint-config"
  },
  "eslintIgnore": [
    /** You can also set ignored files/directories here */
  ]
}
```

## Screenshot Example

<img src="../../docs/images/eslintprettier.png" />

In this case the `"project": "../../../tsconfig.eslint.json"` is there to tell eslint which files I want to include:

tsconfig.eslint.json:

<img src="../../docs/images/tsconfig.lint.png" />
npm package: @metyis-tools/generate-api
Description: ## Usage
Latest version: 0.0.9

# @metyis-tools/generate-api

## Usage

You can either use `npx` to execute it just like:

```
 $ npx @metyis-tools/generate-api -o ./src/api
```

or you can install it globally and run the command as `metyis-api`:

```
$ yarn global add @metyis-tools/generate-api
$ metyis-api -o ./src/api
```

## Typical usage

Typical usage would be:

if running for the first time:

```shell
    $ npx @metyis-tools/generate-api -o ./src/api
```

subsequent runs:

```shell
    $ npx @metyis-tools/generate-api -o ./src/api -i config/api-urls.json
```

## Options:

- --help, -h
  Shows the help menu

- --out, -o
  Output directory, here is where `swagger-typescript-api` will generate its files.

- --in, -i
  Input json. If the project where this is going to be used already has a file with all the needed urls (by default `config/api-urls.json`) it'll use the EP's provided here.

- --clean, -c
  Cleans the output directory before generating
npm package: @metyis-tools/prettier-config
Description: <h2> Usage </h2>
Latest version: 0.0.3

# @metyis-tools/prettier-config

<h2> Usage </h2>

Install it locally:

```
$ yarn add @metyis-tools/prettier-config
```

Then, you need to tell prettier where to find this configuration, so one way of doing it is by going to the `package.json` file and add the following:

```json
{
  "prettier": "@metyis-tools/prettier-config/.prettierrc.json"
}
```

## Screenshot Example

<img src="../../docs/images/eslintprettier.png" />
npm package: @metyis-tools/scripts
Description: ## Installation
Latest version: 0.0.19

# @metyis-tools/scripts

## Installation

Install it globally:

```
$ yarn global add @metyis-tools/scripts
```

## Usage

- `metyis-icons` - Used for generating `index.ts` file with all icons from a folder imported into it. _Run `metyis-icons -h` for help_.
npm package: @metyis-tools/template
Description: ## Usage
Latest version: 0.0.9

# @metyis-tools/template

## Usage

You can either use `npx` to execute it just like:

```
 $ npx @metyis-tools/template component help
```

or you can install it globally and run the command as `metyis-gen`:

```
$ yarn global add @metyis-tools/template
$ metyis-gen component help
```

Using `npx` is recommended since you'll always use the latest version

## Examples

### Creating a component on DDM Design System:

```shell
    $ npx @metyis-tools/template component new Button --scope @ddm-design-system
```

This will ALWAYS create the new components inside `packages/components` dir!

## Screenshot Changes

<img src="../../docs/images/generator.png" />