# Morphe · [![NPM Version](https://img.shields.io/npm/v/morphe.svg)](https://www.npmjs.com/package/morphe) [![License](https://img.shields.io/npm/l/morphe?style=flat)](https://github.com/man-o-to/morphe/blob/master/LICENSE)

Morphe is a React component library design system built for [Swipebox](https://github.com/man-o-to). This project is a fork of [Pinterest's Gestalt](https://github.com/pinterest/gestalt) design system, customized and maintained for Swipebox's specific needs.

## About This Fork

Morphe is based on Pinterest's excellent Gestalt design system but has been renamed and customized for use in Swipebox. We maintain this fork to:

- Customize design tokens and branding for Swipebox
- Add Swipebox-specific components and features
- Control our dependency versioning independently
- Iterate quickly on our product needs

**Credit**: This design system is built on the foundation of [Gestalt](https://gestalt.pinterest.systems/), Pinterest's open-source design system. We're grateful to the Gestalt team for their excellent work.

## Installation

The package can be installed via npm:

```bash
npm i morphe --save
npm i morphe-charts --save
npm i morphe-datepicker --save
```

Or via yarn:

```bash
yarn add morphe
yarn add morphe-charts
yarn add morphe-datepicker
```

## Usage

Morphe exports each component as ES6 modules and a single, precompiled CSS file:

```js
import { Text } from 'morphe';
import 'morphe/dist/morphe.css';
import 'morphe/dist/morphe-datepicker.css';
```

That syntax is Webpack specific (and will work with Create React App), but you can use Morphe anywhere that supports ES6 module bundling and global CSS.

## Development

Morphe is a [multi-project monorepo](https://yarnpkg.com/lang/en/docs/workspaces/). The docs and components are all organized as separate packages that share similar tooling.

Install project dependencies and run tests:

```bash
yarn
yarn test
```

Build and watch Morphe & run the docs server:

```bash
yarn start
```

Visit [http://localhost:3000/](http://localhost:3000) and click on a component to view the docs.

## Codemods

When a release will cause breaking changes — in usage or in typing — we provide a codemod to ease the upgrade process. Codemods are organized by release in `/packages/morphe-codemods`.

### Codemod Usage

Clone the Morphe repo locally if you haven't already. Run the relevant codemod(s) in the relevant directory of your repo (not the Morphe repo): anywhere the component to be updated is used. Example usage for a codebase using TypeScript:

```bash
yarn codemod --parser=tsx -t={relative/path/to/codemod} relative/path/to/your/code.tsx
```

For a dry run to see what the changes will be, add the `-d` (dry run) and `-p` (print output) flags (pipe stdout to a file for easier inspection if you like).

## Releasing

Every commit to master performs a release. Please follow [semantic versioning](https://semver.org/).

- `patch release`: documentation updates / spelling mistakes in code / internal scripts
- `minor release`: add component / add component props / API change with codemod
- `major release`: backwards incompatible API change without codemod

Example PR title: `Avatar: Add outline prop`

## TypeScript Support

Morphe officially supports and maintains TypeScript declaration files.

## License

This project maintains the same Apache 2.0 license as the original Gestalt project.

## Contributing

This is a private design system for Swipebox. We don't currently accept external contributions, but we appreciate your interest!

For questions or issues, please open a GitHub issue.