[![ci-cd](https://github.com/transferwise/neptune-web/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/transferwise/neptune-web/actions) [![NPM](https://badge.fury.io/js/%40transferwise%2Fcomponents.svg)](https://www.npmjs.com/package/@transferwise/components)

# Neptune Web React Components

Neptune is the Design System built by and used at TransferWise. Neptune Web is the Neptune framework for Web. Neptune Web provides a way to build high quality, consistent user experiences on the web with ease.

This is the Neptune Web React component library. It uses [Neptune CSS](https://github.com/transferwise/neptune-web/tree/main/packages/css).

## Usage

Neptune Components are published to npm as [@transferwise/components](https://www.npmjs.com/package/@transferwise/components).

```
# pnpm
pnpm install @transferwise/components react react-dom prop-types @wise/art

# yarn
yarn add @transferwise/components react react-dom prop-types @wise/art

# npm
npm install @transferwise/components react react-dom prop-types @wise/art
```

```js
// These CSS files should be imported once in your application
import '@transferwise/neptune-css/dist/css/neptune.css';
import '@transferwise/components/build/main.css';

import en from '@transferwise/components/build/i18n/en.json';
import { Provider, Button, Size } from '@transferwise/components';

export default function Hello() {
  return (
    <Provider i18n={{ locale: 'en-UK', messages: en }}>
      <Button size={Size.SMALL} block={true}>
        Hello Neptune
      </Button>
    </Provider>
  );
}
```

### Mocks for testing

We expose reusable mocks for Jest and Vitest under an isolated entry point. They can be applied by passing the testing framework as the parameter:

```ts
import { mockMatchMedia, mockResizeObserver } from '@transferwise/components/build/mocks';
import { jest } from '@jest/globals';
import { vi } from 'vitest';

mockMatchMedia(jest); // With Jest
mockResizeObserver(vi); // With Vitest
```

## Documentation

Visit the [docs](https://transferwise.github.io/neptune-web/about/Home) for information on getting started, usage information and examples for each component.

## Contributing

We love contribution! 🙏 Read [the guide](https://github.com/transferwise/neptune-web/blob/main/packages/components/CONTRIBUTING.md) to get started.