rachnakala-common

v0.1.0

Published

3 months ago

[![Version](https://img.shields.io/npm/v/@rachnakala/common.svg)](https://www.npmjs.com/package/@rachnakala/common) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![Build](https://img.shields.io/badge/build-passing-brightgreen.s

0High
0Medium
0Low

harshitlodhi2003

@rachnakala/common

Overview

@rachnakala/common is the foundational shared library for the RachnaKala multi-domain e-commerce platform. It provides type-safe TypeScript definitions, a centralized API client, React hooks, contexts, base UI components, and utilities used across all subdomains: Storefront (rachnakala.shop), Admin Dashboard (admin.rachnakala.shop), Sales CRM (sales.rachnakala.shop), Support Hub (support.rachnakala.shop), and Orders Management (orders.rachnakala.shop).

This library ensures consistency in data models, API interactions, state management, and UI primitives while supporting a permanent dark theme with glassmorphism aesthetics—translucent, blurred elements for an artistic, immersive experience. Built for scalability, it integrates with a shared PostgreSQL schema (via Supabase) and FastAPI backend, enforcing multi-tenant isolation and role-based access.

Version: 1.0.0 (as of November 05, 2025)
Tech Stack: TypeScript, React 18+, Axios, Tailwind CSS 3+
Design Philosophy: Zero vendor lock-in, type-safe, performant, and extensible. Glassmorphism for visual unity (e.g., bg-white/10 backdrop-blur-lg with subtle glows).

For full platform context, see the RachnaKala + Local Hosting Manager Roadmap and Technical Documentation.

Features

Shared Types: Comprehensive interfaces for entities like Product, Order, User, and Tenant.
API Client: Axios-based with automatic token/tenant injection and 401 error handling.
React Hooks & Contexts: useAuth, useTenant, useFetch, AuthProvider, TenantProvider for global state.
Base UI Components: Glassmorphic Button, Input, Card, Modal with dark theme and pulse-glow animations.
Utilities: Formatters, validators, and Tailwind config for currency (INR), dates, and validation.
Multi-Domain Ready: Tenant-aware, role-based (e.g., admin, sales_agent, customer).

Installation

Install via npm (or yarn/pnpm) in each domain project:

npm install @rachnakala/common

For monorepo development (recommended for local linking):

Clone the platform repo:

git clone https://github.com/rachna-kala/rachnakala-platform.git
cd rachnakala-platform
npm install

Build the common library:
```
cd packages/common
npm run build
```

Link in domain projects (e.g., storefront):

cd ../storefront
npm link ../../packages/common

Environment variables (add to .env.local in each domain):

NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_PUBLIC_DOMAIN_TYPE=storefront  # storefront|admin|sales|support|orders

Usage

1. Shared Types

Import entities for type safety:

import { Product, Order, User, Tenant } from '@rachnakala/common/types';

interface ProductListProps {
  products: PaginatedResponse<Product>;
}

2. API Client

Centralized HTTP requests with interceptors:

import apiClient, { API_ENDPOINTS } from '@rachnakala/common/api';

const response = await apiClient.get(API_ENDPOINTS.products.list, { params: { page: 1 } });
const { data } = response;  // Typed as PaginatedResponse<Product>

3. Hooks & Contexts

Wrap your app root with providers:

// app/layout.tsx (in any domain)
import { AuthProvider, TenantProvider } from '@rachnakala/common/contexts';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <AuthProvider>
          <TenantProvider>
            {children}
          </TenantProvider>
        </AuthProvider>
      </body>
    </html>
  );
}

Use hooks in components:

import { useAuth } from '@rachnakala/common/hooks';
import { useFetch } from '@rachnakala/common/hooks';
import { Button } from '@rachnakala/common/components';

function ProductDashboard() {
  const { user, isAuthenticated, login } = useAuth();
  const { data: products, isLoading } = useFetch<PaginatedResponse<Product>>('/api/v1/products');

  if (!isAuthenticated) {
    return <Button onClick={() => login('[email protected]', 'password')}>Login</Button>;
  }

  return (
    <div>
      {isLoading ? <p>Loading...</p> : <ul>{products?.items.map(p => <li key={p.id}>{p.name}</li>)}</ul>}
    </div>
  );
}

4. Base UI Components

Glassmorphic, dark-themed primitives:

import { Button, Input, Card, Modal } from '@rachnakala/common/components';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="primary" onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Input
        type="email"
        placeholder="Enter email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="mb-4"  // Focus glows with primary purple
      />
      <Card header={<h2>Login</h2>}>
        <p>Glassmorphic content here.</p>
      </Card>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Welcome">
        <p>Translucent dialog with blur.</p>
      </Modal>
    </>
  );
}

5. Utilities & Styling

import { formatCurrency, validateEmail } from '@rachnakala/common/utils';

// Usage
const price = formatCurrency(299.99);  // "₹299.99"
validateEmail('[email protected]');  // true

Tailwind config (extend in domain tailwind.config.js):

const commonConfig = require('@rachnakala/common/styles/tailwind.config');
module.exports = { ...commonConfig };

Repository Structure

packages/common/
├── src/
│   ├── types/          # Shared interfaces (e.g., index.ts with Product, Order)
│   │   └── index.ts
│   ├── api/            # Axios client & endpoints
│   │   ├── client.ts
│   │   ├── constants.ts
│   │   └── index.ts
│   ├── hooks/          # React hooks (useAuth, useTenant, useFetch)
│   │   ├── useAuth.ts
│   │   ├── useTenant.ts
│   │   ├── useFetch.ts
│   │   └── index.ts
│   ├── contexts/       # Providers (AuthContext, TenantContext)
│   │   ├── AuthContext.tsx
│   │   ├── TenantContext.tsx
│   │   └── index.ts
│   ├── components/     # Base UI (Button, Input, Card, Modal)
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Card.tsx
│   │   ├── Modal.tsx
│   │   └── index.ts
│   ├── utils/          # Formatters, validators
│   │   ├── formatters.ts
│   │   ├── validation.ts
│   │   └── index.ts
│   └── styles/         # Tailwind config with glassmorphism & pulse-glow
│       └── tailwind.config.js
├── package.json        # NPM package config
├── tsconfig.json       # TypeScript config
└── README.md           # This file

Development

Scripts

npm run build      # Build for production
npm run dev        # Watch mode for development
npm run test       # Run tests (add Jest/Vitest as needed)
npm publish        # Publish to NPM (requires auth)

Contributing

Fork/clone the repo.
Create a feature branch: git checkout -b feature/glassmorphism-updates.
Build & test: npm run build.
Commit: git commit -m "Add pulse-glow animation".
PR to main with description linking to issues.

Follow Conventional Commits for versioning.

Testing

Unit tests for hooks/utils (e.g., via React Testing Library).
Storybook for components (install @storybook/react locally).
E2E: Test in a domain prototype (e.g., storefront login flow).

License

MIT License. See LICENSE for details.

Acknowledgments

Built for RachnaKala.shop – Premium handcrafted goods e-commerce.
Inspired by glassmorphism trends for artistic depth.
Thanks to the RachnaKala Development Team (as of November 05, 2025).

Ready for multi-domain scaling! 🚀 For domain-specific guides, see the platform docs folder.