@gluenetworks/core-ui

@gluenetworks/core-ui

This is a UI library wrapper built around Kendo React.

Storybook is used as a presentation for UI components.

Sass is used as a language for writing CSS. All of the styles are exported as mixins.

Local Development

Run npm run build:sass script to build the theme and core styles. Output of this script is lacated in root/dist/css.

Run npm run start script to start Storybook Development Server and open http://localhost:6006 to view it in the browser.

Build

Rollup is used as a build tool. Configuration is located in root/rollup.config.cjs.

Run npm run build script to validate and create a production build.

Output build is located in root/dist folder.

Note

During the build process build:sass script will

• Generate output styles for core, light and dark theme
• Copy the root/src/scss/private/font/oxygen and root/src/scss/private/icons/cui-icons into output folder

During the build process rollup will

• Generate necessary typed definitions
• Bundle javascipt into one file ( tests and stories are ommited )
• Copy entire root/src/scss/public folder into output folder ( styles are not compiled )

Storybook

Run npm run build:storybook script to generate static storybook build. Files are located in root/storybook-static.

Run npx http-server storybook-static script to start a http server and open http://127.0.0.1:8080 to view it in the browser.

Publish

Automatic publishing of the package is done using semantic-release.

The configuration file is located in root/.releaserc.json.

Note

If you are fixin a bug, or slightly modify something then update the patch version, otherwise if you add a new package or add a new component update the minor version.

And if you introduce a breaking change to then update major version.

Link in local

Run npm run build script to build the project to root/dist folder.

Run npm link.

Open app project where package.json is located and run npm link @gluenetworks/core-ui.

Test

Jest is used as a testing framework. Configuration is located in root/jest.config.json.

Run npm run test script to run unit tests.

Run npm run test:watch script to run unit tests in watch mode.

Run npm run test:coverage script to generate coverage.

Lint

Project is using eslint as a linting tool. Configuration is located in root/.eslintrc.json.

Run npm run lint script to lint the application. Linting in only done on root/src folder.

Run npm run lint:fix script to automatically apply linting recommendations.

Git

Project is using husky to validate precommit and prepush actions.

Also it validates commit messages using angular commit conventions.

Using in another project

Run npm i --save @gluenetworks/core-ui to install the package.

To load the theme and core styles navigate to your root index.tsx|js file and add these lines

import '@gluenetworks/core-ui/dist/css/core.css';
import '@gluenetworks/core-ui/dist/css/light.css';

To use the variables, theme and color-pallete navigate to your root index.sass file and add these lines

@use '~@gluenetworks/core-ui/dist/scss' as cuiModule;

// Load custom module
@include customModule.load(cuiModule.$theme-light, cuiModule.$cui-variables, cuiModule.$color-palette);

Public variables

These are the ariables that are available in @gluenetworks/core-ui/dist/scss

• $theme-light - light theme colors
• $theme-dark - dark theme colors
• $cui-variables - common variables for font styles, spacing, animations etc.
• $color-pallete - additional colors that do not change with the theme

Custom icons

Apart from Kendo icon library there are custom icons located in root/src/scss/private/icons/cui-icons.

Icomoon is used to generate icon fonts.

To modify the library

• Click on the Import Icons button and select the root/src/scss/private/icons/cui-icons/selection.json to load the library
• Add/Remove/Modify the icons
• Be sure that you have seleceted all the icons should be exported
• Click on the Generate Font and dowload the zip
• Open the zip and copy contents of the fonts folder and selection.json into root/src/scss/private/icons/cui-icons (replace current files)
• Open the zip and style.css. Copy all new icon classes to root/src/scss/private/icons/_icons.scss