@rmbtn/alivecraft v1.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) 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_modulesfolder.

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.