@sirsluginston/sharedui 2.0.0

package/README.md

@@ -0,0 +1,130 @@
+# @sirsluginston/sharedui
+
+Server-Driven UI component library for SirSluginston Co.
+
+## Installation
+
+```bash
+npm install @sirsluginston/sharedui
+```
+
+**Peer Dependencies:**
+```bash
+npm install react react-dom
+```
+
+## Quick Start
+
+```tsx
+import { StatePage, applyTheme } from '@sirsluginston/sharedui';
+import '@sirsluginston/sharedui/dist/style.css';
+
+// Apply brand theme
+applyTheme({
+  primaryColor: '#1a365d',
+  secondaryColor: '#2d3748',
+  accentColor: '#319795'
+});
+
+// Render a page
+function App() {
+  return (
+    <StatePage
+      brand={brandConfig}
+      data={stateData}
+    />
+  );
+}
+```
+
+## Exports
+
+### Page Templates (Primary)
+Pre-composed pages for SDUI rendering:
+
+| Template | Description |
+|----------|-------------|
+| `NationPage` | Nation-level overview with state directory |
+| `StatePage` | State-level with cities directory + recent events |
+| `CityPage` | City-level with companies directory + recent events |
+| `CompanyPage` | Company profile with sites + event history |
+| `SitePage` | Individual site (e.g., "Walmart #1234") |
+
+### Block Components
+Composable sections for custom pages:
+
+- `Hero` - Title, breadcrumbs, score badge
+- `StatGrid` - Statistics cards grid
+- `Directory` - Searchable entity list (cities, companies, etc.)
+- `RecentEvents` - Event/incident feed
+- `FilterSidebar` - Left sidebar with filters
+- `InfoSidebar` - Right sidebar with metadata + ad slot
+- `AdSlot` - Placeholder for advertisements
+- `MobileAdBanner` - Sticky bottom banner for mobile
+
+### Layout Components
+- `Shell` - Page wrapper (header, footer, theming)
+- `Header` - Brand navigation header
+- `Footer` - Copyright and links
+
+### Core UI Components
+- `Button`, `Card`, `Badge`, `Input`
+- `Table`, `Modal`, `Alert`, `Tabs`
+- `Tooltip`, `Spinner`, `Skeleton`
+
+### Hooks & Utilities
+- `useTheme()` - Dark mode toggle hook
+- `applyTheme(config)` - Apply brand colors to CSS variables
+
+### Types
+Full TypeScript definitions exported:
+- `BrandConfig` - Brand configuration
+- `NationPageData`, `StatePageData`, `CityPageData`, etc.
+- `EntityStats`, `DirectoryItem`, `RecentEvent`
+
+## Theming
+
+SharedUI uses CSS variables for theming. Override at runtime:
+
+```ts
+import { applyTheme } from '@sirsluginston/sharedui';
+
+applyTheme({
+  primaryColor: '#your-primary',
+  secondaryColor: '#your-secondary', 
+  accentColor: '#your-accent'
+});
+```
+
+Or override in CSS:
+```css
+:root {
+  --primary-color: #custom;
+  --accent-color: #custom;
+}
+```
+
+## Responsive Layout
+
+The `page-layout` CSS class provides:
+- **Desktop (>1400px)**: 3-column grid (filters | main | info)
+- **Tablet (992-1400px)**: 2-column (main | info)
+- **Mobile (<992px)**: Single column + sticky ad banner
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server with demo
+npm run dev
+
+# Build library
+npm run build
+```
+
+## License
+
+MIT © SirSluginston Co
+

package/dist/index.d.ts

@@ -0,0 +1,444 @@
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+export declare const AdSlot: default_2.FC<AdSlotProps>;
+
+declare interface AdSlotProps {
+    position: 'sidebar' | 'left-sidebar' | 'banner' | 'inline';
+    width?: number | string;
+    height?: number | string;
+}
+
+export declare const Alert: default_2.FC<AlertProps>;
+
+declare interface AlertProps {
+    children: default_2.ReactNode;
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+
+/**
+ * Apply theme colors to CSS variables
+ * Can be called standalone (e.g., from SSR/static shell) or via useTheme hook
+ */
+export declare function applyTheme(theme: BrandTheme): void;
+
+export declare const Badge: default_2.FC<BadgeProps>;
+
+declare interface BadgeProps {
+    children: default_2.ReactNode;
+    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline';
+    size?: 'sm' | 'md';
+}
+
+/**
+ * Brand Configuration
+ *
+ * Stored in DynamoDB: VentureOS-Projects
+ * PK: BRAND#{slug}, SK: CONFIG
+ *
+ * Structure is IDENTICAL - no mapping/transformation.
+ * Frontend fetches and uses directly.
+ */
+export declare interface BrandConfig {
+    slug: string;
+    name: string;
+    tagline?: string;
+    logoUrl?: string;
+    theme: BrandTheme;
+    scoreConfig?: ScoreConfig;
+    typography?: BrandTypography;
+    footer: {
+        copyrightBrand: string;
+        yearCreated: number;
+        poweredBy?: string;
+        links?: FooterLink[];
+    };
+    navItems: NavItem[];
+}
+
+export declare interface BrandTheme {
+    primaryColor: string;
+    secondaryColor: string;
+    accentColor: string;
+    surfaceLight?: string;
+    surfaceDark?: string;
+    textLight?: string;
+    textDark?: string;
+    defaultTheme?: 'light' | 'dark' | 'auto';
+}
+
+export declare interface BrandTypography {
+    fontSans?: string;
+    fontSerif?: string;
+    spaceUnit?: number;
+    radiusMaster?: number;
+}
+
+export declare const Button: default_2.FC<ButtonProps>;
+
+declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    icon?: default_2.ReactNode;
+    children: default_2.ReactNode;
+}
+
+export declare const Card: default_2.FC<CardProps>;
+
+declare interface CardProps {
+    title?: string;
+    subtitle?: string;
+    children: default_2.ReactNode;
+    hoverable?: boolean;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    className?: string;
+    style?: default_2.CSSProperties;
+    onClick?: () => void;
+}
+
+export declare const CityPage: default_2.FC<CityPageProps>;
+
+export declare interface CityPageData {
+    name: string;
+    slug: string;
+    state: string;
+    stateName: string;
+    stats: EntityStats;
+    directory: DirectoryItem[];
+    recentByAgency: Record<string, RecentEvent[]>;
+    meta?: EntityMeta;
+}
+
+declare interface CityPageProps {
+    brand: BrandConfig;
+    data: CityPageData;
+    onAccountClick?: () => void;
+    onNotificationClick?: () => void;
+}
+
+declare interface Column<T> {
+    key: keyof T | string;
+    header: string;
+    render?: (item: T) => default_2.ReactNode;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+}
+
+export declare const CompanyPage: default_2.FC<CompanyPageProps>;
+
+export declare interface CompanyPageData {
+    name: string;
+    slug: string;
+    stats: EntityStats;
+    sites?: DirectoryItem[];
+    recentEvents: RecentEvent[];
+    meta?: EntityMeta;
+}
+
+declare interface CompanyPageProps {
+    brand: BrandConfig;
+    data: CompanyPageData;
+    onAccountClick?: () => void;
+    onNotificationClick?: () => void;
+}
+
+export declare const Directory: default_2.FC<DirectoryProps>;
+
+export declare interface DirectoryItem {
+    slug: string;
+    name: string;
+    count: number;
+    subtitle?: string;
+}
+
+declare interface DirectoryProps {
+    title: string;
+    items: DirectoryItem[];
+    basePath: string;
+    emptyMessage?: string;
+    showSearch?: boolean;
+    initialLimit?: number;
+}
+
+export declare interface EntityMeta {
+    population?: number;
+    flagUrl?: string;
+    logoUrl?: string;
+    industry?: string;
+    founded?: number;
+    headquarters?: string;
+    [key: string]: unknown;
+}
+
+export declare interface EntityStats {
+    totalViolations: number;
+    totalInjuries?: number;
+    totalFatalities?: number;
+    totalFines?: number;
+    avgFines?: number;
+    score?: number;
+    scoreLabel?: string;
+    trend?: {
+        direction: 'up' | 'down' | 'flat';
+        percentage: number;
+    };
+}
+
+export declare const FilterSidebar: default_2.FC<FilterSidebarProps>;
+
+declare interface FilterSidebarProps {
+    showAd?: boolean;
+}
+
+export declare const Footer: default_2.FC<FooterProps>;
+
+export declare interface FooterLink {
+    label: string;
+    url: string;
+}
+
+declare interface FooterProps {
+    copyrightBrand: string;
+    yearCreated: number;
+    poweredBy?: string;
+    links?: FooterLink[];
+}
+
+export declare const Header: default_2.FC<HeaderProps>;
+
+declare interface HeaderProps {
+    brand: BrandConfig;
+    darkMode: boolean;
+    onThemeToggle: () => void;
+    onAccountClick?: () => void;
+    onNotificationClick?: () => void;
+}
+
+export declare const Hero: default_2.FC<HeroProps>;
+
+declare interface HeroProps {
+    title: string;
+    subtitle?: string;
+    breadcrumbs?: {
+        label: string;
+        path?: string;
+    }[];
+    score?: {
+        value: number;
+        label: string;
+        betaDisclaimer?: boolean;
+    };
+}
+
+export declare const InfoSidebar: default_2.FC<InfoSidebarProps>;
+
+declare interface InfoSidebarProps {
+    meta?: EntityMeta;
+    showAd?: boolean;
+}
+
+export declare const Input: default_2.FC<InputProps>;
+
+declare interface InputProps extends default_2.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+    icon?: default_2.ReactNode;
+}
+
+export declare const LoadingOverlay: default_2.FC<LoadingOverlayProps>;
+
+declare interface LoadingOverlayProps {
+    message?: string;
+}
+
+export declare const MobileAdBanner: default_2.FC;
+
+export declare const Modal: default_2.FC<ModalProps>;
+
+declare interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: default_2.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    showCloseButton?: boolean;
+}
+
+export declare const NationPage: default_2.FC<NationPageProps>;
+
+export declare interface NationPageData {
+    name: string;
+    slug: string;
+    stats: EntityStats;
+    directory: DirectoryItem[];
+    meta?: EntityMeta;
+}
+
+declare interface NationPageProps {
+    brand: BrandConfig;
+    data: NationPageData;
+    onAccountClick?: () => void;
+    onNotificationClick?: () => void;
+}
+
+export declare interface NavItem {
+    label: string;
+    path?: string;
+    onClick?: () => void;
+    inNavbar?: boolean;
+    children?: NavItem[];
+}
+
+export declare interface RecentEvent {
+    eventId: string;
+    eventTitle: string;
+    eventDescription?: string;
+    eventDate?: string;
+    companySlug?: string;
+    companyName?: string;
+    citySlug?: string;
+    city?: string;
+    state?: string;
+    agency: string;
+}
+
+export declare const RecentEvents: default_2.FC<RecentEventsProps>;
+
+declare interface RecentEventsProps {
+    title: string;
+    events: RecentEvent[];
+    viewMorePath?: string;
+    showAgencyBadge?: boolean;
+}
+
+export declare interface ScoreConfig {
+    name: string;
+    type: string;
+    icon?: string;
+    betaDisclaimer?: boolean;
+}
+
+export declare const Shell: default_2.FC<ShellProps>;
+
+declare interface ShellProps {
+    brand: BrandConfig;
+    children: default_2.ReactNode;
+    onAccountClick?: () => void;
+    onNotificationClick?: () => void;
+}
+
+export declare const SitePage: default_2.FC<SitePageProps>;
+
+export declare interface SitePageData {
+    name: string;
+    siteId: string;
+    companySlug: string;
+    companyName: string;
+    stats: EntityStats;
+    siblings?: DirectoryItem[];
+    recentEvents: RecentEvent[];
+    meta?: EntityMeta;
+}
+
+declare interface SitePageProps {
+    brand: BrandConfig;
+    data: SitePageData;
+    onAccountClick?: () => void;
+    onNotificationClick?: () => void;
+}
+
+export declare const Skeleton: default_2.FC<SkeletonProps>;
+
+export declare const SkeletonCard: default_2.FC;
+
+declare interface SkeletonProps {
+    width?: string | number;
+    height?: string | number;
+    variant?: 'text' | 'rect' | 'circle';
+    animation?: 'pulse' | 'wave' | 'none';
+}
+
+export declare const SkeletonText: default_2.FC<{
+    lines?: number;
+}>;
+
+export declare const Spinner: default_2.FC<SpinnerProps>;
+
+declare interface SpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    color?: string;
+}
+
+export declare const StatePage: default_2.FC<StatePageProps>;
+
+export declare interface StatePageData {
+    name: string;
+    slug: string;
+    abbreviation: string;
+    stats: EntityStats;
+    directory: DirectoryItem[];
+    recentByAgency: Record<string, RecentEvent[]>;
+    meta?: EntityMeta;
+}
+
+declare interface StatePageProps {
+    brand: BrandConfig;
+    data: StatePageData;
+    onAccountClick?: () => void;
+    onNotificationClick?: () => void;
+}
+
+export declare const StatGrid: default_2.FC<StatGridProps>;
+
+declare interface StatGridProps {
+    stats: EntityStats;
+    columns?: 2 | 3 | 4;
+}
+
+declare interface Tab {
+    id: string;
+    label: string;
+    content: default_2.ReactNode;
+    disabled?: boolean;
+}
+
+export declare function Table<T>({ columns, data, keyExtractor, onRowClick, emptyMessage, striped, }: TableProps<T>): JSX_2.Element;
+
+declare interface TableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    keyExtractor: (item: T) => string;
+    onRowClick?: (item: T) => void;
+    emptyMessage?: string;
+    striped?: boolean;
+}
+
+export declare const Tabs: default_2.FC<TabsProps>;
+
+declare interface TabsProps {
+    tabs: Tab[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+    variant?: 'underline' | 'pills';
+}
+
+export declare const Tooltip: default_2.FC<TooltipProps>;
+
+declare interface TooltipProps {
+    content: default_2.ReactNode;
+    children: default_2.ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+}
+
+export declare function useTheme(brandConfig: BrandConfig): {
+    darkMode: boolean;
+    toggleDarkMode: () => void;
+};
+
+export { }