LETM Atomic UI

Shared Atomic UI component library for LETM microfrontends.

Built using:

• React
• TypeScript
• Tailwind CSS
• Vite

Published as npm package:

@letm/atomic-ui

Installation

Install package inside any MFE/application:

npm install @letm/atomic-ui

Import styles globally:

import "@letm/atomic-ui/styles.css";

Use components:

import { Button } from "@letm/atomic-ui";

export default function App() {
  return (
    <Button variant="primary">
      Click Me
    </Button>
  );
}

Local Development

Go to package:

cd packages/atomic-ui

Install dependencies:

npm install

Build package:

npm run build

Folder Structure

packages/atomic-ui/
├── src/
│   ├── components/
│   ├── styles.css
│   └── index.ts
├── package.json
├── tsconfig.json
└── vite.config.ts

Creating New Component

Example structure:

src/components/Input/
├── Input.tsx
├── Input.types.ts
└── index.ts

Export component from:

src/index.ts

Example:

export * from "./components/Input";

Build Package

From root:

npm run build

Or from package:

cd packages/atomic-ui
npm run build

Build output:

dist/
├── index.js
├── index.cjs
├── index.d.ts
└── styles.css

Publish Package

Step 1 — Login to npm

npm login

Verify logged-in user:

npm whoami

Step 2 — Update Package Version

Patch release:

npm version patch

Minor release:

npm version minor

Major release:

npm version major

Examples:

1.0.0 → Initial release
1.0.1 → Bug fix
1.1.0 → New component
2.0.0 → Breaking changes

Step 3 — Publish to npm

From package folder:

cd packages/atomic-ui
npm publish --access public

Or from monorepo root:

npm publish --workspace @letm/atomic-ui --access public

Updating Package in MFE

Install latest version:

npm install @letm/atomic-ui@latest

Install specific version:

npm install @letm/[email protected]

Best Practices

Do

• Keep components reusable
• Use TypeScript types
• Keep accessibility support
• Export from barrel files
• Maintain semantic versioning

Avoid

• Hardcoded business logic
• Direct MFE dependencies
• Importing internal files directly
• Bundling React inside package

Recommended Future Improvements

• Storybook
• Changesets
• CI/CD auto publish
• Design tokens package
• Shared icon package
• Theme support
• Visual regression testing

Current Stack

• React
• TypeScript
• Tailwind CSS v4
• Vite
• npm Workspaces
• Microfrontend Architecture

Using Different Atomic UI Versions in Different MFEs

Each MFE can use its own version of @letm/atomic-ui.

Example:

product-mfe  → @letm/[email protected]
checkout-mfe → @letm/[email protected]
account-mfe  → @letm/[email protected]