@segmentify/common

Shared logic, hooks, and utilities for Segmentify MFEs (Micro-Frontends).

Overview

This repository contains shared code extracted from various Segmentify applications to ensure consistency, reduce duplication, and simplify maintenance across the MFE ecosystem.

Project Structure

• context/: Shared React contexts (e.g., HostData).
• hooks/: Reusable React hooks (useTranslation, useDocumentTitle, useServiceWorker, etc.).
• stores/: Shared state management (e.g., ApiKeyStore).
• middlewares/: Shared middleware (e.g., logger).
• lib/: Utility functions and API client factories.
• layout/: Shared layout components and factories.
• mfe/: MFE-specific utilities (e.g., remote URL resolution).

Getting Started

Installation

npm install @segmentify/common
# or
pnpm add @segmentify/common

Usage

Example of using a shared hook:

import { useDocumentTitle } from '@segmentify/common';

const MyComponent = () => {
  useDocumentTitle('My Page Title');
  return <div>...</div>;
};

Development

Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the library for production.
• npm run lint: Runs ESLint for code quality checks.
• npm run test: Runs unit tests using Vitest.
• npm run knip: Finds unused files and dependencies.
• npm run changeset: Create a new version changeset.