@trackany-device/components 1.0.0

package/src/platform/context.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type { PlatformAdapter, PlatformLinkProps, PlatformForm, NavigateOptions } from './types';
+import { defaultAdapter } from './adapters/default';
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+const PlatformContext = createContext<PlatformAdapter>(defaultAdapter);
+
+// ─── Provider ────────────────────────────────────────────────────────────────
+
+/**
+ * Provide a platform adapter to the component tree.
+ *
+ * Place this at the root of each app:
+ *   - core/ + login/ → wrap with createInertiaAdapter(...)
+ *   - web/           → wrap with createNextjsAdapter(...)
+ *   - Storybook      → no provider needed (defaultAdapter kicks in)
+ */
+export function PlatformProvider({
+    adapter,
+    children,
+}: {
+    adapter: PlatformAdapter;
+    children: ReactNode;
+}) {
+    return (
+        <PlatformContext.Provider value={adapter}>
+            {children}
+        </PlatformContext.Provider>
+    );
+}
+
+// ─── usePlatform ─────────────────────────────────────────────────────────────
+
+/** Returns the full adapter. Use the fine-grained hooks below in most cases. */
+export function usePlatform(): PlatformAdapter {
+    return useContext(PlatformContext);
+}
+
+// ─── Fine-grained hooks ──────────────────────────────────────────────────────
+
+/**
+ * Platform-agnostic Link component.
+ *
+ * Usage in components:
+ *   const PlatformLink = usePlatformLink();
+ *   return <PlatformLink href="/foo">Go</PlatformLink>;
+ *
+ * Or use the <PlatformLink> convenience component exported below.
+ */
+export function usePlatformLink() {
+    return useContext(PlatformContext).Link;
+}
+
+/** Programmatic navigation — platform's router.visit / router.push / window.location */
+export function usePlatformNavigate() {
+    return useContext(PlatformContext).navigate;
+}
+
+/** Current URL (pathname + search). Reactive in SPA routers. */
+export function usePlatformUrl(): string {
+    return useContext(PlatformContext).useCurrentUrl();
+}
+
+/**
+ * Shared page props injected by the server.
+ * In Inertia: all shared() props.
+ * In Next.js: whatever was passed to createNextjsAdapter({ pageProps }).
+ * In Storybook/default: empty object.
+ */
+export function usePlatformPageProps<T extends Record<string, unknown>>(): T {
+    return useContext(PlatformContext).usePageProps<T>();
+}
+
+/**
+ * Inertia-compatible form hook.
+ * In Inertia: Inertia's real useForm.
+ * Everywhere else: fetch-based implementation with the same interface.
+ */
+export function usePlatformForm<T extends Record<string, unknown>>(
+    initialData: T,
+): PlatformForm<T> {
+    return useContext(PlatformContext).useForm<T>(initialData);
+}
+
+/** Document head component, or null if the platform manages head via other means. */
+export function usePlatformHead() {
+    return useContext(PlatformContext).Head;
+}
+
+// ─── Convenience components ──────────────────────────────────────────────────
+
+/**
+ * Drop-in replacement for <a href> or Inertia's <Link>.
+ * Automatically uses the platform's router.
+ *
+ * Usage:
+ *   import { PlatformLink } from '@trackany-device/components';
+ *   <PlatformLink href="/dashboard">Dashboard</PlatformLink>
+ */
+export function PlatformLink(props: PlatformLinkProps) {
+    const Link = usePlatformLink();
+    return <Link {...props} />;
+}

package/src/platform/index.ts

@@ -0,0 +1,27 @@
+// Types
+export type {
+    PlatformAdapter,
+    PlatformLinkProps,
+    PlatformForm,
+    PlatformHeadProps,
+    NavigateOptions,
+    FormSubmitOptions,
+} from './types';
+
+// Provider + hooks + PlatformLink component
+export {
+    PlatformProvider,
+    PlatformLink,
+    usePlatform,
+    usePlatformLink,
+    usePlatformNavigate,
+    usePlatformUrl,
+    usePlatformPageProps,
+    usePlatformForm,
+    usePlatformHead,
+} from './context';
+
+// Adapters — each app picks the one matching its framework
+export { defaultAdapter } from './adapters/default';
+export { createInertiaAdapter } from './adapters/inertia';
+export { createNextjsAdapter } from './adapters/nextjs';

package/src/platform/types.ts

@@ -0,0 +1,105 @@
+import type { ComponentType, ReactNode } from 'react';
+
+// ─── Link ────────────────────────────────────────────────────────────────────
+
+export interface PlatformLinkProps {
+    href: string;
+    children?: ReactNode;
+    className?: string;
+    onClick?: (e?: React.MouseEvent) => void;
+    target?: string;
+    rel?: string;
+    /** Preserve scroll position after navigation (Inertia option, ignored elsewhere) */
+    preserveScroll?: boolean;
+    /** Replace history entry instead of pushing (SPA routers) */
+    replace?: boolean;
+    [key: string]: unknown;
+}
+
+// ─── Navigate ────────────────────────────────────────────────────────────────
+
+export interface NavigateOptions {
+    replace?: boolean;
+    preserveScroll?: boolean;
+    preserveState?: boolean;
+}
+
+// ─── useForm ─────────────────────────────────────────────────────────────────
+
+export interface FormSubmitOptions<T = Record<string, unknown>> {
+    preserveScroll?: boolean;
+    preserveState?: boolean;
+    onSuccess?: (data?: unknown) => void;
+    onError?: (errors: Partial<Record<keyof T, string>>) => void;
+    onFinish?: () => void;
+}
+
+export interface PlatformForm<T extends Record<string, unknown>> {
+    data: T;
+    setData: {
+        (field: keyof T, value: unknown): void;
+        (values: Partial<T>): void;
+    };
+    errors: Partial<Record<keyof T, string>>;
+    processing: boolean;
+    wasSuccessful: boolean;
+    recentlySuccessful: boolean;
+    isDirty: boolean;
+    post:   (url: string, options?: FormSubmitOptions<T>) => void;
+    put:    (url: string, options?: FormSubmitOptions<T>) => void;
+    patch:  (url: string, options?: FormSubmitOptions<T>) => void;
+    delete: (url: string, options?: FormSubmitOptions<T>) => void;
+    reset:  (...fields: (keyof T)[]) => void;
+    clearErrors: (...fields: (keyof T)[]) => void;
+    setError: (field: keyof T, message: string) => void;
+}
+
+// ─── Head ────────────────────────────────────────────────────────────────────
+
+export interface PlatformHeadProps {
+    title?: string;
+    description?: string;
+}
+
+// ─── Adapter ─────────────────────────────────────────────────────────────────
+
+export interface PlatformAdapter {
+    /**
+     * SPA-aware link component. Falls back to <a> in environments
+     * where no router is available (Storybook, static sites).
+     */
+    Link: ComponentType<PlatformLinkProps>;
+
+    /**
+     * Programmatic navigation. Uses the platform's router if available,
+     * otherwise falls back to window.location.
+     */
+    navigate: (href: string, options?: NavigateOptions) => void;
+
+    /**
+     * Returns the current URL/pathname. Reactive in SPA routers.
+     */
+    useCurrentUrl: () => string;
+
+    /**
+     * Returns shared page props injected by the server or a parent provider.
+     * In Inertia: usePage<T>().props
+     * In Next.js: data from PlatformPagePropsProvider
+     * Default: empty object
+     */
+    usePageProps: <T extends Record<string, unknown>>() => T;
+
+    /**
+     * Inertia-compatible form hook. In Inertia this is the real useForm.
+     * In all other environments it is a fetch-based implementation that
+     * exposes the same interface.
+     */
+    useForm: <T extends Record<string, unknown>>(initialData: T) => PlatformForm<T>;
+
+    /**
+     * Document head management. In Inertia this is <Head>. In Next.js
+     * metadata is managed via the `metadata` export so this is null.
+     * Components should render nothing when Head is null.
+     */
+    Head: ComponentType<PlatformHeadProps> | null;
+}

package/src/styles/layouts/sidebar-fixed.css

@@ -0,0 +1,161 @@
+/**
+ * SidebarFixedLayout (Metronic demo1) — structural CSS.
+ *
+ * Applied via body class ".sidebar-fixed-layout" set by the layout component
+ * on mount and removed on unmount.
+ *
+ * Variables:
+ *   --sidebar-width            current sidebar width (collapses to --sidebar-width-collapse)
+ *   --sidebar-width-collapse   icon-only width when sidebar is collapsed
+ *   --sidebar-default-width    full expanded width (used on hover to re-expand)
+ *   --header-height            height of the fixed header
+ *   --sidebar-transition-*     animation timing
+ */
+
+@layer components {
+  .sidebar-fixed-layout {
+    --sidebar-transition-duration: 0.3s;
+    --sidebar-transition-timing: ease;
+    --sidebar-width: 280px;
+    --sidebar-width-collapse: 80px;
+    --sidebar-default-width: 280px;
+    --header-height: 70px;
+  }
+
+  @media (max-width: theme(--breakpoint-lg)) {
+    .sidebar-fixed-layout {
+      --sidebar-width: 280px;
+      --header-height: 60px;
+    }
+  }
+
+  /* Base chrome */
+  .sidebar-fixed-layout .layout-header {
+    height: var(--header-height);
+  }
+
+  .sidebar-fixed-layout .layout-sidebar {
+    width: var(--sidebar-width);
+  }
+
+  /* Fixed header pushes wrapper down */
+  .sidebar-fixed-layout.header-fixed .layout-wrapper {
+    padding-top: var(--header-height);
+  }
+
+  /* Desktop: fixed sidebar offsets the wrapper */
+  @media (min-width: theme(--breakpoint-lg)) {
+    .sidebar-fixed-layout .layout-sidebar {
+      width: var(--sidebar-width);
+      transition: width var(--sidebar-transition-duration)
+        var(--sidebar-transition-timing);
+    }
+
+    .sidebar-fixed-layout .layout-sidebar .sidebar-header {
+      height: var(--header-height);
+    }
+
+    .sidebar-fixed-layout .layout-sidebar .sidebar-wrapper {
+      width: var(--sidebar-default-width);
+    }
+
+    .sidebar-fixed-layout .layout-sidebar .sidebar-logo {
+      width: var(--sidebar-default-width);
+    }
+
+    .sidebar-fixed-layout .layout-sidebar .small-logo {
+      display: none;
+    }
+
+    .sidebar-fixed-layout .layout-wrapper {
+      padding-inline-start: var(--sidebar-width);
+    }
+
+    .sidebar-fixed-layout.header-fixed .layout-header {
+      inset-inline-start: var(--sidebar-width);
+    }
+
+    .sidebar-fixed-layout.header-fixed .layout-wrapper {
+      padding-top: var(--header-height);
+    }
+
+    /* Collapsed state */
+    .sidebar-fixed-layout.sidebar-collapse {
+      --sidebar-width: var(--sidebar-width-collapse);
+    }
+
+    .sidebar-fixed-layout.sidebar-collapse .layout-sidebar {
+      transition: width var(--sidebar-transition-duration)
+        var(--sidebar-transition-timing);
+    }
+
+    .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:hover {
+      width: var(--sidebar-default-width);
+    }
+
+    .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) .default-logo {
+      display: none;
+    }
+
+    .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) .small-logo {
+      display: flex;
+    }
+
+    /* Hide accordion labels/badges when collapsed and not hovered */
+    .sidebar-fixed-layout.sidebar-collapse
+      .layout-sidebar:not(:hover)
+      [data-slot='accordion-menu-title'],
+    .sidebar-fixed-layout.sidebar-collapse
+      .layout-sidebar:not(:hover)
+      [data-slot='badge'],
+    .sidebar-fixed-layout.sidebar-collapse
+      .layout-sidebar:not(:hover)
+      [data-slot='accordion-menu-sub-indicator'] {
+      display: none !important;
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .sidebar-fixed-layout.sidebar-collapse
+      .layout-sidebar:not(:hover)
+      [data-slot='accordion-menu-sub-content'] {
+      visibility: hidden;
+      position: absolute;
+      height: 0;
+      width: 0;
+    }
+
+    .sidebar-fixed-layout.sidebar-collapse
+      .layout-sidebar:not(:hover)
+      [data-slot='accordion-menu-label'] {
+      visibility: hidden;
+      position: relative;
+    }
+
+    .sidebar-fixed-layout.sidebar-collapse
+      .layout-sidebar:not(:hover)
+      [data-slot='accordion-menu-label']::before {
+      content: '...';
+      color: currentColor;
+      font-size: inherit;
+      position: absolute;
+      visibility: visible;
+      display: inline-block;
+      inset-inline-start: 0;
+      top: 0.25rem;
+      margin-inline-start: -0.15rem;
+      transform: translateX(100%);
+    }
+  }
+
+  /* Smooth transitions after layout initialises (avoids flash on mount) */
+  .sidebar-fixed-layout.layout-initialized .layout-wrapper {
+    transition: padding-inline-start var(--sidebar-transition-duration)
+      var(--sidebar-transition-timing);
+  }
+
+  .sidebar-fixed-layout.layout-initialized .layout-header {
+    transition: inset-inline-start var(--sidebar-transition-duration)
+      var(--sidebar-transition-timing);
+  }
+}