open-index/open-npm huggingface dataset:
npm package: @maps-ui/react
Description: Package with many customizable React components to use in your projects.
Author: Matheus Andrade
Latest version: 2.4.3

<h1 align="center">Maps Ui - React ⚛️</h1>

<div align="center">
 <img src="https://user-images.githubusercontent.com/84635540/197596859-54121500-97f8-4a12-8439-05e306a085e5.png" width="450px" alt="Pexels React Image"/>
</div>

<p align="center">
 <a href="#intro">Introduction</a> •
 <a href="#intro">Documentation</a> •
 <a href="#components">Components</a> •
 <a href="#footer">Footer</a>
</p>

<h3 align="center">Package with  many customizable React components to use in your projects.</h3>

<h4 align="center">
  <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/home--page">Access Documentation</a> -
  <a href="https://github.com/MatheusAndrade23/Maps-Ui"> View on GitHub</a>
</h4>

<br />

<h2 id="intro">Introduction</h2>

To install:

```sh
npm install @maps-ui/react
```

To use the components:

```js
import { Button, Box, Tooltip, TooltipProvider } from '@maps-ui/react'

export const MyPage = () => {
  return (
    <TooltipProvider>
      <Box as="section" css={{ padding: '10px' }}>
        <Tooltip content="Send Content">
          <Button variant="secondary">Send</Button>
        </Tooltip>
      </Box>
    </TooltipProvider>
  )
}
```

Result:

<img src="https://user-images.githubusercontent.com/84635540/197596732-f20ca6bd-623d-49c3-b0c2-74803305b95f.gif" />

<br />

---

<br />

<h2 id="docs">Documentation</h2>

To access the complete documentation and see how to use and customize each component, <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/home--page">click here.</a>

<br />

---

<br />

<h2 id="components">Components</h2>

These are currently the components available for use:

- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/surfaces-box--primary">
    Box
  </a>

- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/form-button--primary">
    Button
  </a>
- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/form-check-box--primary">
    Check box
  </a>
- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/form-multi-step--primary">
    Multi Step
  </a>
- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/form-text-area--primary">
    Text Area
  </a>
- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/form-text-input--primary">
    Text Input
  </a>

- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/typography-heading--primary">
    Heading
  </a>
- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/typography-text--primary">
    Text
  </a>

- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/special-toast--primary">
    Toast
  </a>
- <a href="https://matheusandrade23.github.io/Maps-Ui/?path=/docs/special-tooltip--primary">
    Tooltip
  </a>

<br />

---

<p>
  🌟 If you liked it, consider giving it a star on
  <a href="https://github.com/MatheusAndrade23/Maps-Ui"> GitHub!</a> 🌟
</p>
npm package: @mapsindoors/components
Description: Web components for MapsIndoors
Latest version: 13.33.8


# MapsIndoors Web Components

**Stencil project with MI-Components**

The library is published on NPM as: [@mapsindoors/components](https://www.npmjs.com/package/@mapsindoors/components)

Read more about Stencil here: [Getting started](https://stenciljs.com/docs/getting-started)

## Local development

In a terminal:

```bash
$ git clone git@github.com:MapsPeople/web-ui.git && cd web-ui
$ npm ci && npx lerna run build && cd packages/components
$ npm run start
```

When the server is up and running, open the project demo page in your browser:
<http://localhost:3000/>

For "manually" controlling the components, open the Inspector to change attribute(s) in the HTML, or call methods via the developer console.

## Getting started

### MI Components as an NPM dependency in an Angular project

- Install the MapsIndoors components dependency with `npm install @mapsindoors/components`
- Install the TypeScript definitions for Google Maps JavaScript API with `npm install @types/googlemaps`
- Follow the instructions provided by Stencil to use a Stencil-built web component collection: <https://stenciljs.com/docs/angular>

### Setting the element type

When getting a reference to a MI Component element in the view, the type can be set like so:

```html
<mi-search #search mapsindoors="true" [placeholder]="Start typing to search..."></mi-search>
```

```TypeScript
@ViewChild('search') miSearchComponent:
ElementRef<HTMLMiSearchElement>;
```

### Docs

To check out the compiled Docs site, it's important to first build the components and then serve the documentation site:

```bash
npm run build
npm run docs.start
```

Open the browser on <http://localhost:8000> to see the site running.

If you just want to build the Docs folder, run this command: `npm run build && npm run docs.build`
npm package: @mapsindoors/css
Description: CSS components and helpers using MapsIndoors Design Tokens (midt)
Author: MapsPeople A/S
Latest version: 3.1.2

# MapsIndoors CSS

CSS button component and helpers using MapsIndoors Design Tokens ([midt](https://www.npmjs.com/package/@mapsindoors/midt))

The component is using the BEM methodology.

See the demo page (index.html) for an overview.

## Release a new version

To release a new version:

1. Make your changes and commit them
1. Update the version number in `package.json` based on [Semantic Versioning](https://semver.org)
1. Tag the last commit with the version number in this format: `v1.2.3`
1. Push your commits with `git push origin --tags`
1. GitHub Actions on the repo will create a Release with the tag's version number and push that versioned release to npm

## mi-button

The `.mi-button` block class is used for styling buttons.

Basic example:

```html
<button type="button" class="mi-button mi-button--primary">Click me</button>
```

Variants:

- `mi-button--primary`
- `mi-button--base`
- `mi-button--outline`
- `mi-button--link`.

## Helpers

The `helpers.css`-file is a range of _CSS utility classes_ that each serve a particular purpose.

Example:

```html
<body class="debug">
```

Sets golden yellow lines around all elements on the page for easier debugging (when using `.flex` for instance).

Other examples:

- `.max-height-xx-large` to set a `max-height` of `40px`
- `.width-none` to set a `width` of `none`
- `.inline-flex` to set `display: inline-flex;`
- `.margin-auto` to center items with `margin-left` and `margin-right` set to `auto`
npm package: @mapsindoors/eslint-config
Description: Common eslint configuration for MapsIndoors JavaScript projects
Author: MapsPeople A/S
Latest version: 1.5.0

# eslint-config-mapsindoors

ESLint [configuration](http://eslint.org/docs/developer-guide/shareable-configs.html) used within MapsPeople A/S

## Install

Install with [npm](https://www.npmjs.com/):

```sh
npm install --save @mapsindoors/eslint-config
```

Install with [yarn](https://yarnpkg.com):

```sh
yarn add @mapsindoors/eslint-config
```
npm package: @mapsindoors/eslint-config-typescript
Description: ESLint shareable config used in MapsIndoors TypeScript projects. Extends eslint-config-mapsindoors
Author: MapsPeople A/S
Latest version: 1.4.0

# eslint-config-mapsindoors-typescript

ESLint [shareable config](http://eslint.org/docs/developer-guide/shareable-configs.html) used in MapsIndoors TypeScript projects.

Extends [eslint-config-mapsindoors](https://github.com/MapsPeople/eslint-config-mapsindoors)

## Install

Install with [npm](https://www.npmjs.com/):

```sh
npm install --save @mapsindoors/eslint-config-typescript
```

Install with [yarn](https://yarnpkg.com):

```sh
yarn add @mapsindoors/eslint-config-typescript
```
npm package: @mapsindoors/midt
Description: Design Tokens for MapsIndoors
Author: MapsPeople A/S
Latest version: 18.3.0

# MapsIndoors Design Tokens (midt)

`midt` contains the MapsIndoors Design Tokens and tools to use them.

The tokes are compiled from JSON to SCSS mixins using [Amazon's Style Dictionary](https://github.com/amzn/style-dictionary), but you can use them as JSON objects or CSS classes too.

Install from `npm` using `npm i -D @mapsindoors/midt@latest`.

This repository uses `main` as the primary branch.

<details><summary><b>Use the SCSS mixins</b></summary>

Using the color-`@mixin` on a class in your CSS could look like this:

```css
.test {
  @include color.red(60);
}
```

If you want to make the color a shade darker, increase the number:

```css
.test {
  @include color.red(70);
}
```

You can use the same principles for applying padding or margin to an element like this:

```css
.test {
  @include margin(xx-large);
  @include padding(small);
}
```

Or set the z-index:

```css
.test {
  @include z-index(toast);
}
```

</details>

<details><summary><b>Use with SASS' <code>@use</code> function</b></summary>

SASS is moving away from explicitly `@import`ing towards [declaring what you want to `@use`](https://sass-lang.com/documentation/at-rules/use) instead:

```scss
@use 'color';

.test {
  @include color.red(60);
}
```

</details>

<details><summary><b>List of available mixins</b></summary>

These are all of the available mixins, and how you can reference them after installing this package:

```scss
@use "node_modules/midt/background-color";
@use "node_modules/midt/border-color";
@use "node_modules/midt/border-radius";
@use "node_modules/midt/border";
@use "node_modules/midt/color";
@use "node_modules/midt/elevation";
@use "node_modules/midt/font";
@use "node_modules/midt/icons";
@use "node_modules/midt/margin";
@use "node_modules/midt/opacity";
@use "node_modules/midt/padding";
@use "node_modules/midt/sizing";
@use "node_modules/midt/transitions";
@use "node_modules/midt/z-index";
```

</details>

<details><summary><b>Build</b></summary>

1. Clone this repository `git clone git@github:mapspeople/web-ui.git && cd web-ui/packages/midt`
2. Build the Design Tokens using `style-dictionary`:

```bash
npm run build
```

You should see something like this output:

```bash
> midt@1.0.0 build ~/dev/midt
> style-dictionary build

scss
✔︎  build/scss/_variables.scss
```

If you want to watch for changes to the `properties` folder, you can use `npm run watch` and `_variables.scss` will be updated continuously.

You can read more about how Style Dictionary handles the merging and compilation of the JSON-files in the [Style Dictionary repository](https://github.com/amzn/style-dictionary).
</details>
npm package: @mapsindoors/typescript-interfaces
Description: Shared TypeScript interfaces library for MapsIndoors TypeScript-based projects.
Author: MapsPeople A/S
Latest version: 2.1.2

# MapsIndoors Shared TypeScript Interfaces Library

Shared TypeScript interfaces library for MapsIndoors TypeScript-based projects.

## Publishing

When you want to publish to your changes to NPM, do the following from the root directory on the master branch:

- Make sure you have pulled everything from the master branch, including tags
- Describe the changes in `CHANGELOG.md`
- Run `npm login`
- Run `npm version patch | minor | major`

The `npm version` command will upgrade the package, commit it and push to the remote repository, and publish a distribution build to [@mapsindoors/components](https://www.npmjs.com/package/@mapsindoors/components)