[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://bitbucket.org/aircall/tractor)

# 🤩 @aircall/tractor

The Aircall Tractor design system Foundations.

Latest Published version available on: [https://tractor.aircall.io/latest/](https://tractor.aircall.io/latest/)
Next version available on: [https://tractor.aircall-staging.com/next/](https://tractor.aircall-staging.com/next/)

## ✨ Features

- 🌈 Aircall Design System designed for web applications.
- 📦 A set of high-quality React components out of the box written with Styled-components.
- 🛡 Written in TypeScript with predictable static types.
- 🎨 Powerful theme customization in every detail.

## 📦 Install

```bash
npm install --save @aircall/tractor @aircall/icons @aircall/hooks
```

```bash
yarn add @aircall/tractor @aircall/tractor @aircall/icons @aircall/hooks
```

## 🔨 Usage

```jsx
import { Button, Tractor } from '@aircall/tractor';

const App = () => (
  <Tractor injectStyle>
    <Button>Click me</Button>
  </Tractor>
);
```

You are ready to go 🚜 ⚡️

> You **must** wrap your React Tree components using the `Tractor` component otherwise the Tractor components won't be able to grab the `theme` thus they will fail.

## ⌨️ Development

Please check the instructions on the main [ReadME file](https://gitlab.com/aircall/shared/hydra#%EF%B8%8F-development)

Make sure that your project is using a single version of React otherwise you will end up having errors:

### Theming

Tractor comes with Aircall brand specifications, including colors, spacing, typography variants and more. It is highly recommended to stick with those default specifications.

In some cases, you app might need, for instance additional color tokens that are application specific. you can follow [these instructions](https://tractor.aircall.io/latest/?path=/docs/customization-theme--docs)

## 🤝 Contributing

Click on this [link](./CONTRIBUTION.md) to learn more about how's to contribute.