@magic-engineering/components
v2.2.9
Published
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 Re
Downloads
25
Readme
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!
- First create a new branch. Name it as you wish.
- 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>
.
- 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.