aMOREIRA 🌳

This repo contains the components for aMORA's Design System. It is built on top of Mantine. It contains a NPM library and a Storybook.

This repo was created using Mantine's Vite Template.

Importing aMOREIRA library 📥

Using npm, add it to your project using

npm install amoreira-ui --save

Running Storybook 📕

First, install dependencies with npm install, then run:

npm run storybook

It runs locally on port :6006

Development 🧑‍💻

To develop in this repo, first clone the repository and run yarn install on the root.

The repo is organized as such

.storybook
src
├─ components
│   ├─ Buttons
│   │   ├─ button
│   │   │   ├─ index.ts
│   │   │   ├─ Button.css
│   │   │   ├─ Button.stories.tsx
│   │   │   ├─ Button.tsx
│   │   │   └─ Button.types.ts
│   │   └─ index.ts
│   ├─ Navigation
│   │   └─ ...
│   ├─ Forms
│   │   └─ ...
│   └─ index.ts
└─ index.ts

The index.ts files always export everything inside their folders. To visualize your work, create a component in its designated folder and run Storybook.

Building and publishing to NPM 🚧

Before publishing, remember to update the package version in package.json using Semantic Versioning. To build our dist, we use Rollup, which is a module bundler for Javascript that creates our dist

npm run rollup

Then you must log into npm using aMORA's NPM credentials

npm login

And then

npm publish