NMS Shared UI Library

A centralized React + TypeScript shared library designed for Micro Frontend (MFE) architecture. This library will be consumed by the Host application and all Remote applications as a reusable NPM package.

Prerequisites

Ensure the following are installed on your machine:

node -v
npm -v

Recommended:

Node.js >= 22
npm >= 10

Install Dependencies

npm install

Project Structure

src
│
├── api
├── components
├── hooks
├── layouts
├── themes
├── types
├── utils
│
└── index.ts

docs/

README.md
CONTRIBUTING.md
package.json
tsconfig.json
vite.config.ts
eslint.config.js
.prettierrc

Available Scripts

Start Development Server

npm run dev

Run TypeScript Validation

npx tsc --noEmit

Validates TypeScript configuration without generating build files.

Run ESLint

npm run lint

Checks code quality and coding standards.

Format Source Code

npm run format

Formats source files using Prettier.

Build Library

npm run build

Generates build artifacts inside the dist folder.

Expected output:

dist/
├── index.js
├── index.d.ts

Generate Local NPM Package

npm pack

Expected output:

nms-shared-ui-library-1.0.0.tgz

Development Workflow

Step 1: Install Dependencies

npm install

Step 2: Validate TypeScript

npx tsc --noEmit

Step 3: Run Linting

npm run lint

Step 4: Format Code

npm run format

Step 5: Build Library

npm run build

Step 6: Generate Package

npm pack

Verify Build Artifacts

After successful build:

npm run build

Verify:

dist/
├── index.js
├── index.d.ts

Verify Package Generation

Generate package:

npm pack

Verify generated file:

nms-shared-ui-library-1.0.0.tgz

Test Local Installation

Create a sample consumer application:

mkdir test-consumer
cd test-consumer

npm init -y

Install generated package:

npm install ../nms-shared-ui-library/nms-shared-ui-library-1.0.0.tgz

Verify installation:

npm ls @nms/shared-ui-library

Package Usage Example

import {} from '@nms/shared-ui-library';

Acceptance Criteria Verification

Run all commands successfully:

npx tsc --noEmit

npm run lint

npm run format

npm run build

npm pack

Successful execution confirms:

• TypeScript configuration is valid
• ESLint configuration is valid
• Prettier configuration is valid
• Build completes successfully
• Package artifacts are generated successfully
• Package can be distributed through NPM
• Package can be consumed by Host and MFE applications

Coding Standards

• Use TypeScript Strict Mode
• Use Functional Components
• Use Named Exports
• Follow ESLint rules
• Follow Prettier formatting
• Write reusable and generic code
• Avoid application-specific business logic
• Follow project folder structure and naming conventions

Future Scope

The following features will be implemented in upcoming stories:

• Design Tokens
• Theme Configuration
• Core Components (Button, Input, Select, Checkbox, Radio, TextArea)
• Layout Components
• Advanced Components
• Storybook Integration
• Unit Testing
• CI/CD Pipeline
• Organizational NPM Registry Publishing