KIS UI Library

A modern, maintainable, and scalable UI component library for KIS products, built with Material-UI v5, React, and TypeScript. This library follows the Atomic Design Pattern and ensures complete encapsulation of Material-UI, preventing direct MUI usage in consuming applications.

Getting Started

As you develop the kiosk / admin portals, you will likely have to make edits to this project and use them in tandem with those repos. Rather than republishing this over and over in the npm registry, you should link your local version of kis-ui into any and all dependent repos. Before continuing, install yalc:

yarn global add yalc

Developing

Setup and run storybook

To get the UI library up run the below command.

yarn install

Developing alongside a dependent application

To make updates to this package and have them propagate to any dependent applications, run the following set of steps:

1. [Do this once] Publish your kis-ui repo to your local yalc repository (found at ~/.yalc)

yarn build
yalc publish

2. Link it to your dependent project. The project will then use your yalc published kis-ui. For example:

cd /path/to/kis-kiosk
yalc link @kis-technologies/kis-ui

3. Make edits to this repo, and push those changes to all dependent repos (yalc automatically tracks this, so a single push will propagate changes to both the kiosk and admin portals, for example).

yalc update

To remove the link in dependent repo:

yalc remove @kistech/kis-ui-2024

Example Usage

import { Button, Typography } from '@kistech/kis-ui-2024';
export const LoginPage = () => (
<>
    <Typography variant="h5">Sign In</Typography>
    <Button appearance="kis-orange" size="medium">
    Submit
    </Button>
</>
);

Built With

The kis-ui library is built using the following technologies and tools:

• React: For building the user interface components in a declarative way.
• Material-UI: For using pre-built Material Design components and styling.
  • @mui/material: Core Material-UI components.
  • @mui/icons-material: Material Design icons.
  • @mui/system, @mui/styles: Utilities and styles for custom styling.
• TypeScript: For adding static types and improving code reliability.
• Rollup: Module bundler for packaging the library in multiple formats (ESM, CJS).
  • rollup-plugin-peer-deps-external: External peer dependency plugin for Rollup.
  • rollup-plugin-postcss: For handling CSS imports in Rollup.
  • rollup-plugin-terser: For minifying the code during the build process.
• Storybook: For developing and displaying UI components in isolation.
• Jest and React Testing Library: For testing components.
• Yarn: Package manager for managing dependencies and running scripts.
• ESLint: For linting the codebase to ensure consistent style and catch errors.

Prerequisites

1. Node.js (version 18.x or later) and Yarn are required to develop with this UI library. You can download them here:

   • Node.js
   • Yarn

2. Clone the repository and navigate to the project directory:

   git clone <repo_url>
   cd kis-ui-2024

3. Then follow the steps mentioned in Developing section

Adding Components

This library follows the Atomic Design methodology, with components structured into three main levels:

• Atoms – Basic elements like buttons, inputs, labels.
• Molecules – Combinations of atoms forming functional UI pieces.
• Organisms – Relatively complex and reusable UI sections composed of molecules and/or atoms.

To add a new component:

1. Decide if your component is an Atom, Molecule, or Organism.
2. Navigate to the corresponding folder in src/components/.
3. Create a new folder for your component (e.g., MyComponent/).
4. Inside that folder, add the following files:

   MyComponent/
   ├── MyComponent.tsx
   ├── MyComponent.styled.ts
   ├── MyComponent.types.ts (optional)
   ├── MyComponent.test.tsx (optional)
   └── index.ts

5. Update the index.ts file of the corresponding layer to export your new component.
6. Ensure it is exported from the root src/index.ts file if it needs to be consumed externally.

Tests

yarn test

Building

yarn build

Deploying

This project uses Jenkins for CI/CD and automates deployment to npm when changes are pushed to the master branch.

Deployment Steps

1. A Jenkins pipeline is configured to:

   • Install dependencies using yarn install
   • Build the project using yarn build
   • Publish the package to npm when on the master branch

2. The deployment process uses a secure npm token stored in Jenkins credentials (NPM_TOKEN).

3. .npmrc is generated at runtime for authentication, and the package is published with:

   npm publish

4. After each pipeline run, the workspace is cleaned using cleanWs() to ensure a fresh state.

NOTE: Deployment happens automatically. Make sure your package.json version is updated before merging into master.

Versioning

This library follows Semantic Versioning (MAJOR.MINOR.PATCH):

• MAJOR version — for incompatible API changes
• MINOR version — for new, backward-compatible features
• PATCH version — for backward-compatible bug fixes

Version updates should be made in the package.json file before publishing a new release.

📌 Example: If you introduce a breaking change, update the major version: "version": "2.0.0"

Deployment to npm is automated through Jenkins when changes are pushed to the master branch (see Deploying).

Licensing

This library is proprietary and intended solely for use within KIS products.
Unauthorized use, distribution, or modification outside of KIS Technologies is strictly prohibited.