Hanzo-ui-core NPM

Hanzo UI CSS Architecture

Hanzo-ui-css-architecture is a UI library for React applications, that provides tokens, functions and mixins that we are going to use in our projects.

We can use this library using NPM, that is configurate the src for the complete sources. To use this library, just install in the project.

To update this library, need to update the package version and then publish using the NPM.

The tokens, foundations are based on design system UICore Design System Template

Requirements

Node v18.14.2

Installation

In the source of the project, run npm install to install the dependencies. There is no build for this project, because the idea is to work with the NPM package and the elements will be accessible in the path: @import '@hanzo/hanzo-ui-core/src/core.scss'; Using this all the css architecture elements will be available in the project.

Updates/new features

To develop Hanzo-ui-core, you must have Node.js version 18.14.2 or higher installed on your machine. You can clone the repository from GitHub and then run npm install or yarn install to install the dependencies:

When the new feature is developed, you need to update the version inside the package.json and publish using npm.

Publish to NPM

npm login

If you have two-factor authentication enabled, when prompted, enter a one-time password.
Test you are authenticated.

npm whoami

Create token. TOKEN
Authenticate to the Package Registry If you would like to install a package from a private project, you would have to authenticate to the Package Registry. Skip this step if the project is not private.

npm config set -- //repos.codehanzo.com/api/v4/projects/376/packages/npm/:_authToken="${TOKEN}"

Set the registry

npm config set @hanzo:registry https://repos.codehanzo.com/api/v4/projects/376/packages/npm/

Update the version in the package.json
Publish to NPM

npm publish

If everything went fine, there is available the new NPM package with the updated version

Install the package in the project you need.

npm install @hanzo/hanzo-ui-core@1.0.8

Requirement in the project you will use this NPM package

This project is using the scss files and need a proper webpack configuration to compile. You can based in this webconfig: https://repos.codehanzo.com/hanzo/hanzo-ui-basics-react/-/blob/master/webpack.config.js

Need to install npm dependencies for:

css-loader
sass
sass-loader

In the global css file or when you need to use some css architecture file or config, need to import the core css. @import '@hanzo/hanzo-ui-core/src/core.scss';