@pablo2410/shared-ui 0.3.2

package/README.md

@@ -0,0 +1,93 @@
+# @oplytics/shared-ui
+
+Shared UI component library for all **Oplytics.digital** subdomains. Provides standardised layouts, hierarchy management, RBAC, reporting, hooks, and design tokens as reusable building blocks.
+
+## Installation
+
+```bash
+pnpm add @oplytics/shared-ui
+```
+
+> Requires `.npmrc` with `@oplytics:registry=https://npm.pkg.github.com`
+
+## Modules
+
+| Module | Import | Description |
+|--------|--------|-------------|
+| **Layout** | `@oplytics/shared-ui/layout` | Config-driven sidebar, page header, footer, layout factory |
+| **Hierarchy** | `@oplytics/shared-ui/hierarchy` | Org hierarchy types, selection state, enterprise override |
+| **RBAC** | `@oplytics/shared-ui/rbac` | 7-role model, permission checks, error constants |
+| **Reporting** | `@oplytics/shared-ui/reporting` | Incident reporting and feedback toolbar types/config |
+| **Components** | `@oplytics/shared-ui/components` | SharedFooter, NotFound, ErrorBoundary, ViewOnlyBadge types |
+| **Hooks** | `@oplytics/shared-ui/hooks` | useMobile, useComposition, usePersistFn |
+| **Theme** | `@oplytics/shared-ui/theme` | Design tokens, color palette, typography, CSS variables |
+
+## Quick Start
+
+```tsx
+// RBAC — check permissions
+import { hasMinimumRole, ALL_ROLES } from '@oplytics/shared-ui/rbac';
+
+if (hasMinimumRole(user.role, 'enterprise_admin')) {
+  // show admin features
+}
+
+// Hierarchy — enterprise override
+import { applyEnterpriseOverride } from '@oplytics/shared-ui/hierarchy';
+
+const resolvedUser = applyEnterpriseOverride(user, req.headers.cookie);
+
+// Layout — service config
+import { SERVICE_CONFIGS, defineServiceLayout } from '@oplytics/shared-ui/layout';
+
+const myConfig = SERVICE_CONFIGS.sqdcp;
+
+// Theme — design tokens
+import { OPLYTICS_COLORS, OPLYTICS_FONTS } from '@oplytics/shared-ui/theme';
+
+// Hooks
+import { useMobile, usePersistFn } from '@oplytics/shared-ui/hooks';
+```
+
+## Theme CSS
+
+Import the canonical Oplytics theme variables:
+
+```css
+@import '@oplytics/shared-ui/theme/oplytics-theme.css';
+```
+
+This provides all `--oplytics-*` CSS custom properties for backgrounds, text, accents, borders, spacing, radius, and shadows.
+
+## Development
+
+```bash
+pnpm install
+pnpm build        # Build with tsup
+pnpm test         # Run vitest
+pnpm typecheck    # TypeScript check
+```
+
+## Architecture
+
+The package is tree-shakeable with separate entry points per module. Each subdomain only imports what it needs:
+
+```
+src/
+  layout/       # SharedSidebar, createServiceLayout, serviceConfigs
+  hierarchy/    # orgHierarchy types, enterpriseOverride
+  rbac/         # Roles, permissions, error constants
+  reporting/    # ReportingToolbar types and config
+  components/   # SharedFooter, NotFound, ErrorBoundary types
+  hooks/        # useMobile, useComposition, usePersistFn
+  theme/        # Design tokens, CSS variables
+```
+
+## Versioning
+
+- **v0.x** — Types, configs, and pure utilities (no React component rendering)
+- **v1.0** — Full React components with shadcn/ui primitives bundled
+
+## License
+
+UNLICENSED — Internal Oplytics.digital use only.

package/dist/chunk-JT3XLKKD.js

@@ -0,0 +1,11 @@
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};
+//# sourceMappingURL=chunk-JT3XLKKD.js.map

package/dist/chunk-JT3XLKKD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/components/index.d.ts

@@ -0,0 +1,152 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Component, ReactNode, ErrorInfo } from 'react';
+
+interface ErrorBoundaryProps {
+    /** Fallback UI to show when an error is caught. If not provided, uses the default Oplytics error UI. */
+    fallback?: ReactNode;
+    /** Error handler callback — use for logging/reporting */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Children to wrap */
+    children: ReactNode;
+    /** CSS class for the fallback container */
+    className?: string;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
+interface NotFoundPageProps {
+    /** Title text (default: "Page Not Found") */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Home path to navigate to (default: "/") */
+    homePath?: string;
+    /** Back button handler (default: window.history.back) */
+    onBack?: () => void;
+    /** Home button handler — if provided, overrides the <a> link */
+    onHome?: () => void;
+    /** CSS class for the container */
+    className?: string;
+}
+declare function NotFoundPage({ title, description, homePath, onBack, onHome, className, }: NotFoundPageProps): react_jsx_runtime.JSX.Element;
+
+interface ManusDialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Dialog title */
+    title: string;
+    /** Optional subtitle */
+    subtitle?: string;
+    /** Optional logo/icon to show in the header */
+    logo?: string | ReactNode;
+    /** Dialog content */
+    children: ReactNode;
+    /** Footer content (e.g. action buttons) */
+    footer?: ReactNode;
+    /** Max width class (default: "max-w-md") */
+    maxWidth?: string;
+    /** CSS class for the dialog panel */
+    className?: string;
+    /** Whether clicking the overlay closes the dialog (default: true) */
+    closeOnOverlay?: boolean;
+}
+declare function ManusDialog({ open, onClose, title, subtitle, logo, children, footer, maxWidth, className, closeOnOverlay, }: ManusDialogProps): react_jsx_runtime.JSX.Element;
+
+interface ChatMessage {
+    id: string;
+    role: "user" | "assistant" | "system";
+    content: string;
+    timestamp: number;
+    /** Whether the message is still streaming */
+    isStreaming?: boolean;
+}
+interface AIChatBoxProps {
+    /** Chat messages to display */
+    messages: ChatMessage[];
+    /** Handler when user sends a message */
+    onSend: (message: string) => void;
+    /** Whether the assistant is currently generating a response */
+    isLoading?: boolean;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Title for the chat header */
+    title?: string;
+    /** Whether to show the chat in a floating panel (default: false — inline) */
+    floating?: boolean;
+    /** Whether the floating panel is open */
+    isOpen?: boolean;
+    /** Toggle floating panel open/closed */
+    onToggle?: () => void;
+    /** Render prop for message content (e.g. to use Streamdown for markdown) */
+    renderContent?: (content: string, isStreaming?: boolean) => ReactNode;
+    /** Max height for the messages area (default: "400px") */
+    maxHeight?: string;
+    /** CSS class for the container */
+    className?: string;
+    /** Whether to show the header (default: true) */
+    showHeader?: boolean;
+}
+declare function AIChatBox({ messages, onSend, isLoading, placeholder, title, floating, isOpen, onToggle, renderContent, maxHeight, className, showHeader, }: AIChatBoxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MapView — Google Maps integration with Manus proxy authentication.
+ *
+ * Provides a MapView component with onMapReady callback for initialising
+ * Google Maps services (Places, Geocoder, Directions, Drawing, etc.).
+ * All map functionality works directly in the browser via the Manus proxy.
+ *
+ * Usage:
+ *   <MapView
+ *     apiKey={import.meta.env.VITE_FRONTEND_FORGE_API_KEY}
+ *     forgeBaseUrl={import.meta.env.VITE_FRONTEND_FORGE_API_URL}
+ *     initialCenter={{ lat: 40.7128, lng: -74.0060 }}
+ *     initialZoom={15}
+ *     onMapReady={(map) => { mapRef.current = map; }}
+ *   />
+ */
+declare global {
+    interface Window {
+        google?: typeof google;
+    }
+}
+interface MapViewProps {
+    /** Manus Forge API key (VITE_FRONTEND_FORGE_API_KEY) */
+    apiKey: string;
+    /** Manus Forge base URL (VITE_FRONTEND_FORGE_API_URL) */
+    forgeBaseUrl?: string;
+    /** Initial map center */
+    initialCenter?: google.maps.LatLngLiteral;
+    /** Initial zoom level */
+    initialZoom?: number;
+    /** Callback when the map is ready — use to store ref and initialise services */
+    onMapReady?: (map: google.maps.Map) => void;
+    /** Map ID for cloud-based map styling */
+    mapId?: string;
+    /** CSS class for the map container */
+    className?: string;
+}
+declare function MapView({ apiKey, forgeBaseUrl, initialCenter, initialZoom, onMapReady, mapId, className, }: MapViewProps): react_jsx_runtime.JSX.Element;
+
+interface ViewOnlyBadgeProps {
+    /** Custom label (default: "View Only") */
+    label?: string;
+    /** Size variant */
+    size?: "sm" | "md";
+    /** CSS class */
+    className?: string;
+}
+declare function ViewOnlyBadge({ label, size, className, }: ViewOnlyBadgeProps): react_jsx_runtime.JSX.Element;
+
+export { AIChatBox, type AIChatBoxProps, type ChatMessage, ErrorBoundary, type ErrorBoundaryProps, ManusDialog, type ManusDialogProps, MapView, type MapViewProps, NotFoundPage, type NotFoundPageProps, ViewOnlyBadge, type ViewOnlyBadgeProps };