@magic-engineering/components

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:

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.

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

Publishing new version

This component library is maintain independently of the other projects that we own. How we consume this library is by publishing it to npm and install it where we need. That means in order to publish new versions of the library we need to actually publish a new version onto the npm network.

Bumping versions

Before we can publish we need to make sure we properly bump the version of the package. The process of actually compiling the library is done separately, so that is not something you need to be worried about to be doing manually.

Let's get started!

1. First create a new branch. Name it as you wish.
2. On the new branch run the following command:

npm version patch

patch here refers to the type of version we wanna bump. The version should respect the semver spectrum: <major>.<minor>.<patch>.

1. Commit the newly bumped version

After all that, open a MR against master branch and merge it when pipeline succeeds.

Publishing

After the above step is done, the master pipeline will have a Publish manual step enabled. Click on that step which will trigger the npm publishing process of the new version.

That's it.