# Magic Components

This repo contains a set of React components that we at Magic can use to build our apps. We use scss to author our styles and bootstrap. The goal of this project is to be able to integrate as seamless as possible in existing and new projects built with React.

## Table of contents

## Installing

The Magic Components package can be installed via npm with a regular install command:

```sh
npm install @magic-engineering/components
# or
yarn add @magic-engineering/components
```

## Using the Magic Components

In order to successfully use Magic Components you need to import the compiled css file that defines the styling rules for entire set of components. Afterwards you can import any component and it'll be ready and styled.

```jsx
import "@magic-engineering/components/dist/magic-components.css";
import { Button } from "@magic-engineering/components";

// Now you can use it
<Button label="Sign up" onClick={handleOnSignup} />;
```

## Contributing

Everyone is more than welcomed to contribute and maintain the components that we have. Before starting to write any component code please read the following description of how to do it and how the repository is structured.

### Packaging

The entire suite of components is getting bundled as one package. That package is then published onto npm under `@magic-engineering/components`. The bundle is created using [microbundle](https://github.com/developit/microbundle) a tool that compiles to modern output formats and compresses the static assets.

### Testing

For actual testing we use unit tests in order to lock functionality of a certain component. For viewing the end result of a certain component we use `storybook`. For exploring different uses of a certain component we have a local `./sandbox` folder where you can play around with the _production_ version of the package.
