@tcn/ui 0.0.1

package/src/utils/click_away_listener.stories.tsx

@@ -0,0 +1,264 @@
+import React, { useRef, useState } from 'react';
+import { ClickAwayListener } from './click_away_listener.js';
+
+export default {
+  title: 'Click Away Listener',
+};
+
+export function Baseline() {
+  const [message, setMessage] = useState('');
+
+  return (
+    <div>
+      <ClickAwayListener
+        onClickAway={() => {
+          setMessage('Clicked Outside');
+        }}
+      >
+        <div
+          style={{
+            width: '200px',
+            height: '100px',
+            boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+            borderRadius: '20px',
+            display: 'inline-grid',
+            placeItems: 'center center',
+          }}
+        >
+          {message}
+        </div>
+      </ClickAwayListener>
+    </div>
+  );
+}
+
+export function OtherRefChecks() {
+  const redRef = useRef<HTMLDivElement | null>(null);
+  const blueRef = useRef<HTMLDivElement | null>(null);
+  const refs = [redRef, blueRef];
+  const [message, setMessage] = useState('');
+
+  return (
+    <div>
+      <ClickAwayListener
+        refs={refs}
+        onClickAway={() => {
+          setMessage('Clicked Outside');
+        }}
+      >
+        <div
+          style={{
+            width: '200px',
+            height: '100px',
+            boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+            borderRadius: '20px',
+            display: 'inline-grid',
+            placeItems: 'center center',
+          }}
+        >
+          {message}&nbsp;
+        </div>
+      </ClickAwayListener>
+      <div
+        ref={redRef}
+        style={{
+          width: '100px',
+          height: '100px',
+          boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+          borderRadius: '20px',
+          display: 'inline-grid',
+          placeItems: 'center center',
+          backgroundColor: 'red',
+        }}
+      >
+        &nbsp;
+      </div>
+      <div
+        ref={blueRef}
+        style={{
+          width: '100px',
+          height: '100px',
+          boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+          borderRadius: '20px',
+          display: 'inline-grid',
+          placeItems: 'center center',
+          backgroundColor: 'blue',
+        }}
+      >
+        &nbsp;
+      </div>
+    </div>
+  );
+}
+
+export function MountOnFocus() {
+  const [show, setShow] = useState(false);
+  const redRef = useRef<HTMLDivElement | null>(null);
+  const blueRef = useRef<HTMLDivElement | null>(null);
+  const refs = [redRef, blueRef];
+  const [message, setMessage] = useState('');
+
+  return (
+    <div>
+      <input
+        placeholder="Click Here"
+        onFocus={() => {
+          setShow(true);
+        }}
+      />
+      {show && (
+        <ClickAwayListener
+          refs={refs}
+          onClickAway={() => {
+            setMessage('Clicked Outside');
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '80%',
+              boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+              borderRadius: '20px',
+              display: 'inline-grid',
+              placeItems: 'center center',
+              backgroundColor: '#f1f1f1',
+            }}
+          >
+            {message}&nbsp;
+          </div>
+        </ClickAwayListener>
+      )}
+    </div>
+  );
+}
+
+export function WithException() {
+  const [message, setMessage] = useState('');
+  const [clickCount, setClickCount] = useState(0);
+
+  // Function that determines if a clicked element should be treated as an exception
+  const isException = (target: HTMLElement) => {
+    // Check if the clicked element is within the toolbar or notification area
+    return (
+      target.closest('[data-exception="toolbar"]') !== null ||
+      target.closest('[data-exception="notification"]') !== null ||
+      target.classList.contains('exception-button')
+    );
+  };
+
+  const handleClickAway = () => {
+    setMessage('Clicked Outside');
+    setClickCount(prev => prev + 1);
+  };
+
+  return (
+    <div style={{ padding: '20px', position: 'relative' }}>
+      <h3>Click Away with Exceptions</h3>
+      <p>
+        Click outside the main box to trigger click away. But clicking on the toolbar or
+        notification won't trigger it.
+      </p>
+
+      {/* Toolbar that should be an exception */}
+      <div
+        data-exception="toolbar"
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          right: '0',
+          height: '50px',
+          backgroundColor: '#e3f2fd',
+          border: '2px solid #2196f3',
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 20px',
+          gap: '10px',
+          zIndex: 10,
+        }}
+      >
+        <button
+          className="exception-button"
+          style={{
+            padding: '8px 16px',
+            backgroundColor: '#2196f3',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+          }}
+        >
+          Toolbar Button
+        </button>
+        <span>This toolbar is an exception - clicking here won't trigger click away</span>
+      </div>
+
+      {/* Notification area that should be an exception */}
+      <div
+        data-exception="notification"
+        style={{
+          position: 'absolute',
+          top: '60px',
+          right: '20px',
+          width: '200px',
+          height: '80px',
+          backgroundColor: '#fff3e0',
+          border: '2px solid #ff9800',
+          borderRadius: '8px',
+          padding: '10px',
+          zIndex: 10,
+        }}
+      >
+        <div style={{ fontWeight: 'bold', color: '#f57c00' }}>Notification Area</div>
+        <div style={{ fontSize: '12px', color: '#666' }}>
+          This area is also an exception
+        </div>
+      </div>
+
+      {/* Main click away listener */}
+      <ClickAwayListener onClickAway={handleClickAway} isException={isException}>
+        <div
+          style={{
+            marginTop: '100px',
+            width: '300px',
+            height: '200px',
+            boxShadow: '0 0 20px rgba(0,0,0,0.3)',
+            borderRadius: '12px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#f5f5f5',
+            border: '2px solid #333',
+          }}
+        >
+          <div style={{ textAlign: 'center' }}>
+            <h4>Main Content Area</h4>
+            <p style={{ margin: '10px 0' }}>
+              {message || 'Click outside to trigger click away'}
+            </p>
+            <p style={{ fontSize: '12px', color: '#666' }}>Click count: {clickCount}</p>
+            <p style={{ fontSize: '11px', color: '#999', maxWidth: '250px' }}>
+              Try clicking on the toolbar or notification area - those won't trigger the
+              click away!
+            </p>
+          </div>
+        </div>
+      </ClickAwayListener>
+
+      {/* Regular area that will trigger click away */}
+      <div
+        style={{
+          marginTop: '20px',
+          padding: '10px',
+          backgroundColor: '#f0f0f0',
+          borderRadius: '4px',
+        }}
+      >
+        <p>This area will trigger click away when clicked</p>
+      </div>
+    </div>
+  );
+}

package/src/utils/click_away_listener.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useCallback, useRef } from 'react';
+import { useForkRef } from './hooks/use_fork_ref.js';
+export interface ClickAwayListenerProps {
+  children: React.ReactElement;
+  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;
+  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';
+  touchEvent?: 'onTouchStart' | 'onTouchEnd';
+  isException?: (target: HTMLElement) => boolean;
+  // An array of refs that wont trigger the click away listener
+  refs?: React.RefObject<Element>[];
+}
+const eventMap = {
+  onClick: 'click',
+  onMouseDown: 'mousedown',
+  onMouseUp: 'mouseup',
+};
+const touchMap = {
+  onTouchStart: 'touchstart',
+  onTouchEnd: 'touchend',
+};
+
+function isEventWithinElement(
+  event: MouseEvent | TouchEvent,
+  node: HTMLElement | null,
+  activated: boolean,
+  refs: (Element | null)[]
+) {
+  if (!activated) {
+    return true;
+  }
+
+  let isWithinElement: boolean;
+
+  if (event.composedPath) {
+    isWithinElement =
+      [node, ...refs].find((ref: any) => {
+        return event.composedPath().indexOf(ref) > -1;
+      }) !== undefined;
+  } else {
+    isWithinElement =
+      !document.documentElement.contains(event.target as any) ||
+      [node, ...refs].find((ref: any) => {
+        return ref?.contains(event.target);
+      }) !== undefined;
+  }
+
+  return isWithinElement;
+}
+
+export const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(
+  function ClickAwayListener(
+    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },
+    ref
+  ) {
+    const nodeRef = useRef<HTMLElement | null>(null);
+    const startedActionWithinElementRef = useRef<boolean>(true);
+    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];
+    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];
+    const newRef = useForkRef(ref, nodeRef, (children as any).ref);
+    const activatedRef = React.useRef(false);
+
+    React.useEffect(() => {
+      // Ensure that this component is not "activated" synchronously.
+      // https://github.com/facebook/react/issues/20074
+      window.setTimeout(() => {
+        activatedRef.current = true;
+      }, 0);
+      return () => {
+        activatedRef.current = false;
+      };
+    }, []);
+
+    const trackAction = useCallback(
+      (event: any) => {
+        startedActionWithinElementRef.current = isEventWithinElement(
+          event,
+          nodeRef.current,
+          activatedRef.current,
+          refs.map(r => r.current)
+        );
+      },
+      [refs]
+    );
+
+    const eventHandler = useCallback(
+      (event: any) => {
+        const startedFromWithinElement = startedActionWithinElementRef.current;
+        const isWithinElement = isEventWithinElement(
+          event,
+          nodeRef.current,
+          activatedRef.current,
+          refs.map(r => r.current)
+        );
+
+        if (
+          !isWithinElement &&
+          !startedFromWithinElement &&
+          (!isException || !isException(event.target))
+        ) {
+          onClickAway(event);
+        }
+      },
+      [onClickAway, refs, isException]
+    );
+
+    useEffect(() => {
+      document.addEventListener('mousedown', trackAction);
+      document.addEventListener('touchstart', trackAction);
+      document.addEventListener(DOMMouseEvent, eventHandler);
+      document.addEventListener(DOMTouchEvent, eventHandler);
+      return () => {
+        document.removeEventListener('mousedown', trackAction);
+        document.removeEventListener('touchstart', trackAction);
+        document.removeEventListener(DOMMouseEvent, eventHandler);
+        document.removeEventListener(DOMTouchEvent, eventHandler);
+      };
+    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);
+
+    return React.cloneElement(children, {
+      ...children.props,
+      ref: newRef,
+    });
+  }
+);

package/src/utils/default_value.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, test } from 'vitest';
+import { defaultValue } from './default_value.js';
+
+describe('defaultValue', () => {
+  test('Undefined Value', () => {
+    const value = undefined;
+    const backupValue = 'Hello World!';
+    const result = defaultValue(value, backupValue);
+
+    expect(result).toBe('Hello World!');
+  });
+
+  test('Defined Value', () => {
+    const value = 'Hello John!';
+    const backupValue = 'Hello World!';
+    const result = defaultValue(value, backupValue);
+
+    expect(result).toBe('Hello John!');
+  });
+});

package/src/utils/default_value.ts

@@ -0,0 +1,3 @@
+export function defaultValue<T>(value: T | null | undefined, defaultValue: T) {
+  return value == null ? defaultValue : value;
+}

package/src/utils/focus_redirect.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export interface FocusRedirectProps {
+  onRedirect: () => void;
+}
+
+export const FocusRedirect = React.forwardRef(function FocusRedirect(
+  { onRedirect }: FocusRedirectProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  return (
+    <div
+      ref={ref}
+      tabIndex={0}
+      onFocus={onRedirect}
+      style={{
+        padding: 0,
+        margin: 0,
+        width: 0,
+        height: 0,
+        opacity: 0,
+        position: 'relative',
+      }}
+    ></div>
+  );
+});

package/src/utils/hooks/make_context_hook.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export type NonUndefined<T> = T extends undefined ? never : T;
+
+const makeContextHook = <T>(context: React.Context<T>, name?: string) => {
+  return () => {
+    const contextValue = React.useContext(context);
+    if (contextValue === undefined) {
+      if (name) {
+        throw new Error(`Context ${name} was accessed outside of a context provider!`);
+      }
+      throw new Error('Context must be used within a Context Provider!');
+    }
+    return contextValue as NonUndefined<T>;
+  };
+};
+export { makeContextHook };

package/src/utils/hooks/use_draggable.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+
+interface DraggableOptions {
+  startDragCallback: (startX: number, startY: number) => void;
+  dragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;
+  endDragCallback: (
+    deltaX: number,
+    deltaY: number,
+    startX: number,
+    startY: number
+  ) => void;
+}
+
+// const handleRef: Ref<HTMLElement> = useDraggable(
+//   (startX: number, startY: number) => {},
+//   (deltaX: number, deltaY: number, startX: number, startY: number) => {},
+//   (deltaX: number, deltaY: number, startX: number, startY: number) => {}
+// );
+
+export function useDraggable(options: DraggableOptions) {
+  const ref = useRef<HTMLElement | null>(null);
+  const startDragCallbackRef = useRef(options.startDragCallback);
+  startDragCallbackRef.current = options.startDragCallback;
+  const dragCallbackRef = useRef(options.dragCallback);
+  dragCallbackRef.current = options.dragCallback;
+  const endDragCallbackRef = useRef(options.endDragCallback);
+  endDragCallbackRef.current = options.endDragCallback;
+
+  useEffect(() => {
+    const element = ref.current;
+    let startX = 0;
+    let startY = 0;
+
+    function drag(event: MouseEvent) {
+      const deltaX = event.clientX - startX;
+      const deltaY = event.clientY - startY;
+
+      dragCallbackRef.current(deltaX, deltaY, startX, startY);
+    }
+
+    function endDrag(event: MouseEvent) {
+      const deltaX = event.clientX !== undefined ? event.clientX - startX : 0;
+      const deltaY = event.clientY !== undefined ? event.clientY - startY : 0;
+      endDragCallbackRef.current(deltaX, deltaY, startX, startY);
+      document.body.removeEventListener('mousemove', drag);
+      document.body.removeEventListener('mouseup', endDrag);
+      document.body.removeEventListener('mouseleave', endDrag);
+    }
+
+    function startDrag(event: MouseEvent) {
+      startX = event.clientX;
+      startY = event.clientY;
+
+      startDragCallbackRef.current(startX, startY);
+
+      document.body.addEventListener('mousemove', drag);
+      document.body.addEventListener('mouseup', endDrag);
+      document.body.addEventListener('mouseleave', endDrag);
+    }
+
+    if (element != null) {
+      element.addEventListener('mousedown', startDrag);
+    }
+
+    return () => {
+      element?.removeEventListener('mousedown', startDrag);
+      document.body.removeEventListener('mousemove', drag);
+      document.body.removeEventListener('mouseup', endDrag);
+      document.body.removeEventListener('mouseleave', endDrag);
+    };
+  }, []);
+
+  return ref;
+}

package/src/utils/hooks/use_fork_ref.ts

@@ -0,0 +1,18 @@
+import React, { useCallback } from 'react';
+
+export function useForkRef<T>(...args: (React.Ref<T> | undefined)[]) {
+  return useCallback((obj: any | null) => {
+    args.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(obj);
+      } else if (
+        typeof ref === 'object' &&
+        ref != null &&
+        ref.hasOwnProperty('current')
+      ) {
+        (ref as any).current = obj;
+      }
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: it is actually an array literal biome is wrong.
+  }, args);
+}

package/src/utils/hooks/use_media_query.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+/**
+ * Custom hook that returns a boolean indicating if the current viewport
+ * matches the given media query.
+ *
+ * @param query - The media query to match against (e.g. "(min-width: 768px)")
+ * @returns boolean indicating if the media query matches
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = React.useState(false);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+
+    // Set initial value
+    setMatches(mediaQuery.matches);
+
+    // Create event listener
+    const handler = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // Add the listener
+    mediaQuery.addEventListener('change', handler);
+
+    // Clean up
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, [query]);
+
+  return matches;
+}