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

Usage

Neptune Components are published to npm as @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

// 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>
  );
}

TypeScript | Type Declarations

This package exposes type declarations for all components.

Note: types for some of components are not 100% accurate (some of them will be just any), this is due to fact that many of components written on JavaScript and types generated by react-to-typescript-definitions based of components PropTypes and unfortunatly the library doesn't resolve all PropTypes features and use cases (e.g custom validators, PropTypes.objectOf, requireIf, etc). But bear with us as eventually it would be fully on TypeScript.

Please follow rules for JS components in order to generate accurate types for them.

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:

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 for information on getting started, usage information and examples for each component.

Contributing

We love contribution! 🙏 Read the guide to get started.