https://github.com/mapbox/mr-ui

UI components for Mapbox projects
https://github.com/mapbox/mr-ui

frontend-shared frontend-tooling priority

Last synced: 3 months ago
JSON representation

UI components for Mapbox projects

• Host: GitHub
• URL: https://github.com/mapbox/mr-ui
• Owner: mapbox
• License: bsd-2-clause
• Created: 2018-07-16T19:48:38.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-07-18T08:46:07.000Z (4 months ago)
• Last Synced: 2024-07-18T13:06:37.920Z (4 months ago)
• Topics: frontend-shared, frontend-tooling, priority
• Language: TypeScript
• Homepage: https://mapbox.github.io/mr-ui/
• Size: 12.7 MB
• Stars: 87
• Watchers: 92
• Forks: 7
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        
# @mapbox/mr-ui

![mr-ui logo](https://github.com/mapbox/mr-ui/raw/main/logo/mr-ui.gif)

[![Build Status](https://app.travis-ci.com/mapbox/mr-ui.svg?branch=main)](https://app.travis-ci.com/mapbox/mr-ui)

Pronounced `'mis-tər yü-'ī`. **M**apbox **R**eact **UI** components.

UI components for Mapbox projects. See docs at https://mapbox.github.io/mr-ui/.

**This project is for internal Mapbox usage.** The code is open source and we appreciate bug reports; but we will only consider feature requests and pull requests from Mapbox developers.

## Installation

```

npm install @mapbox/mr-ui

```

On Mapbox projects, pair these components with version 1.1.0+ of Mapbox's custom [Assembly](https://labs.mapbox.com/assembly/) build. (This is not in `peerDependencies` because you might use `` and `` tags instead of the npm package.)

The public Assembly build should work fine, with maybe one or two hiccups.

## Usage

**Import individual components!** All components are exposed at `@mapbox/mr-ui/{component-name}`. For example:

```js

import Modal from '@mapbox/mr-ui/modal';

import Tooltip from '@mapbox/mr-ui/tooltip';

```

Only the component itself and whatever *it* depends on will be drawn into your bundle.

### Utility functions

There are a few utility functions you can import from `@mapbox/mr-ui/utils/{name}`.

See [the utils documentation](./src/components/utils/README.md).

## Development

Here are some commands you'll probably want to use:

```bash

# Start the documentation site.

npm start

# Start Jest's CLI in watch mode.

npx jest --watchAll

# Lint and test everything.

npm test

```

### Publishing

The `build` command creates a `pkg/` directory that contains the code we want to publish, organized the way we want it. So `pkg/` is the directory that we publish. `pkg/package.json` is a clone of `package.json` but with `private: true` removed.

- Increment version numbers in `package.json` and `package.lock.json`, and ensure the changelog has an entry for the latest version. Then, create a new Git tag.

- Build the `pkg/` directory: `npm run build`.

- `cd` into the `pkg/` directory and `mbx npm publish` from there.

- `cd` back to root and run `npm run deploy-docs` to update the docs at https://mapbox.github.io/mr-ui/