open-index/open-npm huggingface dataset:
npm package: @rmbtn/alivecraft
Description: AliveCraft Design System for AliveInvite
Author: Rambutan Digital
Latest version: 1.0.1

# AliveCraft

A Node package to encapsulate AliveCraft Design System, for use with NikahSatu's (formerly AliveInvite) projects

## Prerequisites

- Node.js (v12.14.0), with npm

## Overview
The build process for AliveCraft includes the following tools:

- `postcss-loader`, for loading `postcss` plugins to transform our (S)CSS files
- `tailwindcss`, a `postcss` plugin for incorporating Tailwind's utility classes and its useful advanced features)
- `node-sass`, for compiling our `.scss` files into `.css`
- `clean-css-loader`, for minifying CSS for production build
- `mini-css-extract-plugin`, for outputting the final CSS build

## Installation

### Using yarn (for Rails project with `webpacker`)
```
yarn add @rmbtn/alivecraft
```

### Local Installation (for developers)
Follow these steps to install this package locally on your Rails project (especially for package developers who would want to do a test drive before publishing to npm):

1. Clone this repo by doing `git clone git@github.com:rambutandigital/alivecraft.git`
2. `cd` into the cloned repo directory
3. Run `npm pack`
4. Copy the tarball into your home directory by running `cp rmbtn-alivecraft-x.x.x.tgz ~`
5. `cd` into your Rails project directory.
6. Then, install the package locally by running `yarn add ~/rmbtn-alivecraft-x.x.x.tgz`
7. Enjoy!

Note: `x.x.x` stands for the version of the package.

Alternatively, you could use `npm-link` ([link](https://docs.npmjs.com/cli/link.html)) method to test the package locally (by symlinking) without having to recreate a tarball everytime you made changes to the package (see below).

### Alternative to `npm-pack` for Development (easier and less cumbersome way)

1. Clone this repo by doing `git clone git@github.com:rambutandigital/alivecraft.git`
2. `cd` into the cloned repo directory
3. Run `npm link`
4. `cd` into a directory where you want to test out AliveCraft
5. Do `npm link @rmbtn/alivecraft`

## How to Use?

Just add the following line to your main `.scss` (to be compiled by the `webpacker` gem) in your Rails project:
```
@import '~@rmbtn/alivecraft'

```

Note: The `~` (tilde) is needed to tell `webpacker` (which uses `sass-loader` plugin under the hood) that the import is not a relative import, i.e. the `css` files are to be loaded from `node_modules`folder.


## How to Build for Production?

Follow these steps to build the package manually on your machine:

1. Clone this repo
2. Run `npm install`
3. Run `npm run build` (note that this command is defined in `package.json`)
4. The compiled CSS and JS files will be placed in the `/dist` directory.

Note: For step 3, I have also added `npm run build-dev` command which will be useful to inspect the non-minified compiled css in `\dist`.

This README is a work-in-progress.