chore(root): archive examples into tech-preview (#315)

packages/__tech-preview__/examples/react/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useColorScheme';
+export * from './useMediaQuery';

packages/__tech-preview__/examples/react/src/hooks/useColorScheme.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+type ColorScheme = 'light' | 'dark';
+
+export function useColorScheme(): ColorScheme {
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(() => {
+    if (typeof window === 'undefined') {
+      return 'light';
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setColorScheme(event.matches ? 'dark' : 'light');
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  return colorScheme;
+}

packages/__tech-preview__/examples/react/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+export const useIsomorphicLayoutEffect: typeof useLayoutEffect | typeof useEffect
+  = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

packages/__tech-preview__/examples/react/src/hooks/useMediaQuery.ts

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+interface UseMediaQueryOptions {
+  defaultValue?: boolean;
+  initializeWithValue?: boolean;
+}
+
+const IS_SERVER = typeof window === 'undefined';
+
+export function useMediaQuery(
+  query: string,
+  {
+    defaultValue = false,
+    initializeWithValue = true,
+  }: UseMediaQueryOptions = {},
+): boolean {
+  const getMatches = (query: string): boolean => {
+    if (IS_SERVER) {
+      return defaultValue;
+    }
+    return window.matchMedia(query).matches;
+  };
+
+  const [matches, setMatches] = useState<boolean>(() => {
+    if (initializeWithValue) {
+      return getMatches(query);
+    }
+    return defaultValue;
+  });
+
+  // Handles the change event of the media query.
+  function handleChange() {
+    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+    setMatches(getMatches(query));
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    matchMedia.addEventListener('change', handleChange);
+
+    return () => {
+      matchMedia.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}