@shipfox/react-ui 0.5.0 → 0.6.0

package/src/components/typography/text.tsx

@@ -24,7 +24,15 @@ export type TextProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>
     bold?: boolean;
   };
 
-export function Text({children, className, size, as, compact, bold, ...props}: TextProps) {
+export function Text({
+  children,
+  className,
+  size,
+  as,
+  compact = true,
+  bold = false,
+  ...props
+}: TextProps) {
   const Component = as ?? 'p';
   return (
     <Component

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useCopyToClipboard';
+export * from './useMediaQuery';
 export * from './useResolvedTheme';
 export * from './useShikiHighlight';
 export * from './useShikiStyleInjection';

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,87 @@
+import {useEffect, useState} from 'react';
+
+class MediaQueryManager {
+  private queries = new Map<string, MediaQueryList>();
+  private listeners = new Map<string, Set<() => void>>();
+  private changeHandlers = new Map<string, () => void>();
+
+  getMatches(query: string): boolean {
+    if (typeof window === 'undefined') return false;
+
+    if (!this.queries.has(query)) {
+      this.queries.set(query, window.matchMedia(query));
+      this.listeners.set(query, new Set());
+    }
+
+    const mediaQuery = this.queries.get(query);
+    return mediaQuery ? mediaQuery.matches : false;
+  }
+
+  subscribe(query: string, callback: () => void): () => void {
+    if (typeof window === 'undefined') {
+      return () => {
+        // Cleanup function for SSR - no-op
+      };
+    }
+
+    if (!this.queries.has(query)) {
+      this.queries.set(query, window.matchMedia(query));
+      this.listeners.set(query, new Set());
+    }
+
+    const mediaQuery = this.queries.get(query);
+    const listeners = this.listeners.get(query);
+
+    if (!mediaQuery || !listeners) {
+      return () => {
+        // Cleanup function - no-op if query wasn't found
+      };
+    }
+
+    listeners.add(callback);
+
+    if (listeners.size === 1) {
+      const changeHandler = () => {
+        for (const cb of listeners) {
+          cb();
+        }
+      };
+      this.changeHandlers.set(query, changeHandler);
+      mediaQuery.addEventListener('change', changeHandler);
+    }
+
+    return () => {
+      listeners.delete(callback);
+
+      if (listeners.size === 0) {
+        const changeHandler = this.changeHandlers.get(query);
+        if (changeHandler) {
+          mediaQuery.removeEventListener('change', changeHandler);
+          this.changeHandlers.delete(query);
+        }
+        this.queries.delete(query);
+        this.listeners.delete(query);
+      }
+    };
+  }
+}
+
+const mediaQueryManager = new MediaQueryManager();
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => mediaQueryManager.getMatches(query));
+
+  useEffect(() => {
+    const updateMatches = () => {
+      setMatches(mediaQueryManager.getMatches(query));
+    };
+
+    const unsubscribe = mediaQueryManager.subscribe(query, updateMatches);
+
+    updateMatches();
+
+    return unsubscribe;
+  }, [query]);
+
+  return matches;
+}

package/tsconfig.build.json

@@ -9,5 +9,11 @@
     "types": ["@shipfox/vite/client"]
   },
   "include": ["src"],
-  "exclude": ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.tsx", "**/*.stories.ts"]
+  "exclude": [
+    "**/*.test.tsx",
+    "**/*.test.ts",
+    "**/*.stories.tsx",
+    "**/*.stories.ts",
+    "**/build-css-entry.ts"
+  ]
 }

package/vite.css.config.ts

@@ -0,0 +1,30 @@
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {defineConfig} from '@shipfox/vite';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default defineConfig(
+  {
+    plugins: [react(), tailwindcss()],
+    build: {
+      outDir: 'dist',
+      emptyOutDir: false,
+      cssCodeSplit: false,
+      rollupOptions: {
+        input: resolve(__dirname, 'src/build-css-entry.ts'),
+        output: {
+          entryFileNames: 'css-entry.js',
+          assetFileNames: 'styles.css',
+        },
+      },
+    },
+    css: {
+      minify: true,
+    },
+  },
+  import.meta.url,
+);