@teo-garcia/react-shared 0.1.8 → 1.0.0

package/dist/components/viewport-info/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewport-info/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/viewport-info/index.js

@@ -1 +0,0 @@
-export { ViewportInfo } from './viewport-info.js';

package/dist/components/viewport-info/viewport-info.d.ts

@@ -1,40 +0,0 @@
-import type { EnvironmentAdapter } from '../../types';
-export interface ViewportInfoProps {
-    /** Environment adapter to detect if running in development mode */
-    environmentAdapter: EnvironmentAdapter;
-}
-/**
- * ViewportInfo component - Displays current viewport dimensions and Tailwind breakpoint
- *
- * This component is useful during development to see the current viewport size and
- * which Tailwind breakpoint is active. It automatically hides in production.
- *
- * Features:
- * - Shows viewport width and height in pixels
- * - Displays active Tailwind CSS breakpoint (default, sm, md, lg, xl, 2xl)
- * - Auto-updates on window resize
- * - Only renders in development mode
- * - Fixed position in bottom-right corner
- *
- * @example Next.js
- * ```tsx
- * import { ViewportInfo } from '@teo-garcia/react-shared/components'
- * import { nextEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
- *
- * function App() {
- *   return <ViewportInfo environmentAdapter={nextEnvironmentAdapter} />
- * }
- * ```
- *
- * @example React Router / Vite
- * ```tsx
- * import { ViewportInfo } from '@teo-garcia/react-shared/components'
- * import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
- *
- * function App() {
- *   return <ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
- * }
- * ```
- */
-export declare const ViewportInfo: ({ environmentAdapter }: ViewportInfoProps) => import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=viewport-info.d.ts.map

package/dist/components/viewport-info/viewport-info.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"viewport-info.d.ts","sourceRoot":"","sources":["../../../src/components/viewport-info/viewport-info.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAErD,MAAM,WAAW,iBAAiB;IAChC,mEAAmE;IACnE,kBAAkB,EAAE,kBAAkB,CAAA;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,YAAY,GAAI,wBAAwB,iBAAiB,mDAmDrE,CAAA"}

package/dist/components/viewport-info/viewport-info.js

@@ -1,69 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RulerIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
-/**
- * ViewportInfo component - Displays current viewport dimensions and Tailwind breakpoint
- *
- * This component is useful during development to see the current viewport size and
- * which Tailwind breakpoint is active. It automatically hides in production.
- *
- * Features:
- * - Shows viewport width and height in pixels
- * - Displays active Tailwind CSS breakpoint (default, sm, md, lg, xl, 2xl)
- * - Auto-updates on window resize
- * - Only renders in development mode
- * - Fixed position in bottom-right corner
- *
- * @example Next.js
- * ```tsx
- * import { ViewportInfo } from '@teo-garcia/react-shared/components'
- * import { nextEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
- *
- * function App() {
- *   return <ViewportInfo environmentAdapter={nextEnvironmentAdapter} />
- * }
- * ```
- *
- * @example React Router / Vite
- * ```tsx
- * import { ViewportInfo } from '@teo-garcia/react-shared/components'
- * import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
- *
- * function App() {
- *   return <ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
- * }
- * ```
- */
-export const ViewportInfo = ({ environmentAdapter }) => {
-    // State to track viewport dimensions
-    const [{ width: viewportWidth, height: viewportHeight }, setViewportSize] = useState(() => ({
-        width: 0,
-        height: 0,
-    }));
-    useEffect(() => {
-        // Guard against SSR - window is not available on the server
-        if (globalThis.window == undefined) {
-            return;
-        }
-        // Handler to update viewport dimensions
-        const handleResize = () => {
-            setViewportSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        };
-        // Set initial dimensions
-        handleResize();
-        // Listen for resize events
-        window.addEventListener('resize', handleResize);
-        // Cleanup listener on unmount
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    // Only show in development mode
-    if (!environmentAdapter.isDevelopment())
-        return null;
-    return (_jsxs("aside", { className: "fixed bottom-0 right-0 flex items-center gap-x-1 rounded-l-lg px-4 py-2 bg-primary text-primary-foreground font-semibold", children: [_jsx(RulerIcon, { className: "size-5" }), _jsxs("p", { className: "text-lg flex gap-x-2", children: [viewportWidth, "px - ", viewportHeight, "px -", _jsx("span", { className: "inline sm:hidden font-semibold", children: "default" }), _jsx("span", { className: "hidden sm:inline md:hidden font-semibold", children: "sm" }), _jsx("span", { className: "hidden md:inline lg:hidden font-semibold", children: "md" }), _jsx("span", { className: "hidden lg:inline xl:hidden font-semibold", children: "lg " }), _jsx("span", { className: "hidden xl:inline 2xl:hidden font-semibold", children: "xl" }), _jsx("span", { className: "hidden 2xl:inline font-semibold", children: "2xl" })] })] }));
-};

package/dist/hooks/use-healthcheck.d.ts

@@ -1,42 +0,0 @@
-export interface UseHealthcheckOptions {
-    /** The healthcheck endpoint URL (default: http://localhost:3000/api/healthcheck) */
-    url?: string;
-    /** Enable/disable the query (default: true) */
-    enabled?: boolean;
-}
-/**
- * useHealthcheck hook - Fetches health status from an API endpoint
- *
- * This hook uses React Query to fetch and cache the health status of your API.
- * It's useful for monitoring if your backend is available and responding.
- *
- * @param options - Configuration options
- * @returns React Query result with health status data
- *
- * @example Basic usage
- * ```tsx
- * import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
- *
- * function HealthStatus() {
- *   const { data, isLoading, error } = useHealthcheck()
- *
- *   if (isLoading) return <div>Checking health...</div>
- *   if (error) return <div>Health check failed</div>
- *   return <div>Status: {data?.status}</div>
- * }
- * ```
- *
- * @example Custom URL
- * ```tsx
- * import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
- *
- * function HealthStatus() {
- *   const { data } = useHealthcheck({
- *     url: 'http://localhost:8080/health'
- *   })
- *   return <div>{data?.status}</div>
- * }
- * ```
- */
-export declare const useHealthcheck: (options?: UseHealthcheckOptions) => import("@tanstack/react-query").UseQueryResult<any, Error>;
-//# sourceMappingURL=use-healthcheck.d.ts.map

package/dist/hooks/use-healthcheck.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-healthcheck.d.ts","sourceRoot":"","sources":["../../src/hooks/use-healthcheck.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,qBAAqB;IACpC,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,cAAc,GAAI,UAAS,qBAA0B,+DAkBjE,CAAA"}

package/dist/hooks/use-healthcheck.js

@@ -1,53 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-/**
- * useHealthcheck hook - Fetches health status from an API endpoint
- *
- * This hook uses React Query to fetch and cache the health status of your API.
- * It's useful for monitoring if your backend is available and responding.
- *
- * @param options - Configuration options
- * @returns React Query result with health status data
- *
- * @example Basic usage
- * ```tsx
- * import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
- *
- * function HealthStatus() {
- *   const { data, isLoading, error } = useHealthcheck()
- *
- *   if (isLoading) return <div>Checking health...</div>
- *   if (error) return <div>Health check failed</div>
- *   return <div>Status: {data?.status}</div>
- * }
- * ```
- *
- * @example Custom URL
- * ```tsx
- * import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
- *
- * function HealthStatus() {
- *   const { data } = useHealthcheck({
- *     url: 'http://localhost:8080/health'
- *   })
- *   return <div>{data?.status}</div>
- * }
- * ```
- */
-export const useHealthcheck = (options = {}) => {
-    const { url = 'http://localhost:3000/api/healthcheck', enabled = true } = options;
-    return useQuery({
-        queryKey: ['healthcheck', url],
-        queryFn: async () => {
-            const response = await fetch(url);
-            if (!response.ok) {
-                throw new Error(`Health check failed: ${response.statusText}`);
-            }
-            return await response.json();
-        },
-        enabled,
-        // Refetch every 30 seconds to keep health status fresh
-        refetchInterval: 30000,
-        // Retry failed requests
-        retry: 3,
-    });
-};

package/dist/utils/environment.d.ts

@@ -1,71 +0,0 @@
-/**
- * Environment detection utilities
- *
- * These utilities help detect the runtime environment (development, production, server, client).
- * They work across different frameworks by checking both process.env and import.meta.env.
- */
-/**
- * Check if running in development mode
- * Works with both Next.js (process.env) and Vite (import.meta.env)
- *
- * @returns true if in development mode
- *
- * @example
- * ```tsx
- * import { isDevelopment } from '@teo-garcia/react-shared/utils'
- *
- * if (isDevelopment()) {
- *   console.log('Running in dev mode')
- * }
- * ```
- */
-export declare const isDevelopment: () => boolean;
-/**
- * Check if running in production mode
- * Works with both Next.js (process.env) and Vite (import.meta.env)
- *
- * @returns true if in production mode
- *
- * @example
- * ```tsx
- * import { isProduction } from '@teo-garcia/react-shared/utils'
- *
- * if (isProduction()) {
- *   // Enable analytics
- * }
- * ```
- */
-export declare const isProduction: () => boolean;
-/**
- * Check if code is running on the server (SSR)
- * Works by detecting the absence of window object
- *
- * @returns true if running on server
- *
- * @example
- * ```tsx
- * import { isServer } from '@teo-garcia/react-shared/utils'
- *
- * if (isServer()) {
- *   // Server-only code
- * }
- * ```
- */
-export declare const isServer: () => boolean;
-/**
- * Check if code is running on the client (browser)
- * Works by detecting the presence of window object
- *
- * @returns true if running on client
- *
- * @example
- * ```tsx
- * import { isClient } from '@teo-garcia/react-shared/utils'
- *
- * if (isClient()) {
- *   // Client-only code like localStorage access
- * }
- * ```
- */
-export declare const isClient: () => boolean;
-//# sourceMappingURL=environment.d.ts.map

package/dist/utils/environment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"environment.d.ts","sourceRoot":"","sources":["../../src/utils/environment.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,QAAO,OAYhC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,QAAO,OAE/B,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,QAAO,OAE3B,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,QAAO,OAE3B,CAAA"}

package/dist/utils/environment.js

@@ -1,86 +0,0 @@
-/**
- * Environment detection utilities
- *
- * These utilities help detect the runtime environment (development, production, server, client).
- * They work across different frameworks by checking both process.env and import.meta.env.
- */
-/**
- * Check if running in development mode
- * Works with both Next.js (process.env) and Vite (import.meta.env)
- *
- * @returns true if in development mode
- *
- * @example
- * ```tsx
- * import { isDevelopment } from '@teo-garcia/react-shared/utils'
- *
- * if (isDevelopment()) {
- *   console.log('Running in dev mode')
- * }
- * ```
- */
-export const isDevelopment = () => {
-    // Check process.env first (Next.js, Node.js)
-    if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
-        return true;
-    }
-    // Check import.meta.env (Vite, modern bundlers)
-    if (typeof import.meta !== 'undefined' && import.meta.env?.DEV === true) {
-        return true;
-    }
-    return false;
-};
-/**
- * Check if running in production mode
- * Works with both Next.js (process.env) and Vite (import.meta.env)
- *
- * @returns true if in production mode
- *
- * @example
- * ```tsx
- * import { isProduction } from '@teo-garcia/react-shared/utils'
- *
- * if (isProduction()) {
- *   // Enable analytics
- * }
- * ```
- */
-export const isProduction = () => {
-    return !isDevelopment();
-};
-/**
- * Check if code is running on the server (SSR)
- * Works by detecting the absence of window object
- *
- * @returns true if running on server
- *
- * @example
- * ```tsx
- * import { isServer } from '@teo-garcia/react-shared/utils'
- *
- * if (isServer()) {
- *   // Server-only code
- * }
- * ```
- */
-export const isServer = () => {
-    return typeof window === 'undefined';
-};
-/**
- * Check if code is running on the client (browser)
- * Works by detecting the presence of window object
- *
- * @returns true if running on client
- *
- * @example
- * ```tsx
- * import { isClient } from '@teo-garcia/react-shared/utils'
- *
- * if (isClient()) {
- *   // Client-only code like localStorage access
- * }
- * ```
- */
-export const isClient = () => {
-    return !isServer();
-};

package/dist/utils/msw.d.ts

@@ -1,54 +0,0 @@
-/**
- * Mock Service Worker (MSW) setup utilities
- *
- * These utilities help set up MSW for API mocking in development and testing.
- * They provide consistent factories for creating MSW workers across projects.
- */
-import type { RequestHandler } from 'msw';
-/**
- * Creates and starts a browser MSW worker
- * Use this in client-side applications (Next.js, React Router, etc.)
- *
- * @param handlers - Array of request handlers to use
- * @param options - MSW worker options
- * @returns Promise that resolves when worker is started
- *
- * @example
- * ```tsx
- * import { setupMSWBrowser } from '@teo-garcia/react-shared/utils'
- * import { handlers } from './handlers'
- *
- * // In your app initialization
- * if (isDevelopment()) {
- *   await setupMSWBrowser(handlers)
- * }
- * ```
- */
-export declare const setupMSWBrowser: (handlers: RequestHandler[], options?: {
-    onUnhandledRequest?: "bypass" | "warn" | "error";
-}) => Promise<import("msw/browser").SetupWorker>;
-/**
- * Creates and starts a Node.js MSW server
- * Use this in server-side applications and tests
- *
- * @param handlers - Array of request handlers to use
- * @param options - MSW server options
- * @returns Promise that resolves to the server instance
- *
- * @example
- * ```tsx
- * import { setupMSWServer } from '@teo-garcia/react-shared/utils'
- * import { handlers } from './handlers'
- *
- * // In your test setup
- * const server = await setupMSWServer(handlers)
- *
- * beforeAll(() => server.listen())
- * afterEach(() => server.resetHandlers())
- * afterAll(() => server.close())
- * ```
- */
-export declare const setupMSWServer: (handlers: RequestHandler[], options?: {
-    onUnhandledRequest?: "bypass" | "warn" | "error";
-}) => Promise<import("msw/node").SetupServerApi>;
-//# sourceMappingURL=msw.d.ts.map

package/dist/utils/msw.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"msw.d.ts","sourceRoot":"","sources":["../../src/utils/msw.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,cAAc,EAAE,EAC1B,UAAU;IAAE,kBAAkB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CAAE,+CAU/D,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,cAAc,EAAE,EAC1B,UAAU;IAAE,kBAAkB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CAAE,+CAU/D,CAAA"}

package/dist/utils/msw.js

@@ -1,62 +0,0 @@
-/**
- * Mock Service Worker (MSW) setup utilities
- *
- * These utilities help set up MSW for API mocking in development and testing.
- * They provide consistent factories for creating MSW workers across projects.
- */
-/**
- * Creates and starts a browser MSW worker
- * Use this in client-side applications (Next.js, React Router, etc.)
- *
- * @param handlers - Array of request handlers to use
- * @param options - MSW worker options
- * @returns Promise that resolves when worker is started
- *
- * @example
- * ```tsx
- * import { setupMSWBrowser } from '@teo-garcia/react-shared/utils'
- * import { handlers } from './handlers'
- *
- * // In your app initialization
- * if (isDevelopment()) {
- *   await setupMSWBrowser(handlers)
- * }
- * ```
- */
-export const setupMSWBrowser = async (handlers, options) => {
-    const { setupWorker } = await import('msw/browser');
-    const worker = setupWorker(...handlers);
-    await worker.start({
-        onUnhandledRequest: options?.onUnhandledRequest ?? 'bypass',
-    });
-    return worker;
-};
-/**
- * Creates and starts a Node.js MSW server
- * Use this in server-side applications and tests
- *
- * @param handlers - Array of request handlers to use
- * @param options - MSW server options
- * @returns Promise that resolves to the server instance
- *
- * @example
- * ```tsx
- * import { setupMSWServer } from '@teo-garcia/react-shared/utils'
- * import { handlers } from './handlers'
- *
- * // In your test setup
- * const server = await setupMSWServer(handlers)
- *
- * beforeAll(() => server.listen())
- * afterEach(() => server.resetHandlers())
- * afterAll(() => server.close())
- * ```
- */
-export const setupMSWServer = async (handlers, options) => {
-    const { setupServer } = await import('msw/node');
-    const server = setupServer(...handlers);
-    server.listen({
-        onUnhandledRequest: options?.onUnhandledRequest ?? 'bypass',
-    });
-    return server;
-};