@tcn/ui 0.0.1

package/src/utils/hooks/use_resize_observer.ts

@@ -0,0 +1,148 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+type ResizeHandler = (
+  newWidth: number,
+  newHeight: number,
+  entry: ResizeObserverEntry
+) => void;
+interface Size {
+  width: number;
+  height: number;
+}
+export enum TriggerConfig {
+  Both = 0,
+  Width,
+  Height,
+}
+class ResizeObserverRegistry {
+  private _resizeObserver: ResizeObserver;
+  private _elementHandlers: WeakMap<Element, ResizeHandler[]>;
+  private _elementSizes: WeakMap<Element, Size>;
+  private _elementTriggerConfig: WeakMap<Element, TriggerConfig>;
+  constructor() {
+    this._elementHandlers = new WeakMap();
+    this._elementSizes = new WeakMap();
+    this._elementTriggerConfig = new WeakMap();
+    this._resizeObserver = new ResizeObserver(entries => {
+      requestAnimationFrame(() => {
+        for (let entry of entries) {
+          const size = this._elementSizes.get(entry.target);
+          if (size != null) {
+            const newHeight = entry.borderBoxSize[0].blockSize;
+            const newWidth = entry.borderBoxSize[0].inlineSize;
+            const triggerConfig = this._elementTriggerConfig.get(entry.target);
+            const hasHeightChanged = newHeight !== size.height;
+            const hasWidthChanged = newWidth !== size.width;
+            const hasSizeChanged = hasHeightChanged || hasWidthChanged;
+            size.width = newWidth;
+            size.height = newHeight;
+            if (hasSizeChanged) {
+              const shouldTriggerHeightChange =
+                hasHeightChanged &&
+                (triggerConfig === TriggerConfig.Both ||
+                  triggerConfig === TriggerConfig.Height);
+              const shouldTriggerWidthChange =
+                hasWidthChanged &&
+                (triggerConfig === TriggerConfig.Both ||
+                  triggerConfig === TriggerConfig.Width);
+              const shouldTrigger = shouldTriggerHeightChange || shouldTriggerWidthChange;
+              if (shouldTrigger) {
+                const handlers = this._elementHandlers.get(entry.target);
+                handlers?.forEach(handler => handler(newWidth, newHeight, entry));
+              }
+            }
+          }
+        }
+      });
+    });
+  }
+  register(
+    element: Element,
+    handler: ResizeHandler,
+    triggerConfig: TriggerConfig = TriggerConfig.Both
+  ) {
+    this._elementSizes.set(element, {
+      width: 0,
+      height: 0,
+    });
+    this._elementTriggerConfig.set(element, triggerConfig);
+    this._resizeObserver.observe(element);
+    const handlers = this.getElementHandlers(element);
+    handlers.push(handler);
+    return () => {
+      const handlerIndex = handlers.indexOf(handler);
+      if (handlerIndex > -1) {
+        handlers.splice(handlerIndex, 1);
+      }
+      if (handlers.length <= 0) {
+        this._elementHandlers.delete(element);
+        this._elementSizes.delete(element);
+        this._elementTriggerConfig.delete(element);
+        this._resizeObserver.unobserve(element);
+      }
+    };
+  }
+  getElementHandlers(element: Element) {
+    let handlers = this._elementHandlers.get(element);
+    if (handlers == null) {
+      handlers = [];
+      this._elementHandlers.set(element, handlers);
+    }
+    return handlers as ResizeHandler[];
+  }
+}
+const resizeObserverRegistry = new ResizeObserverRegistry();
+export function useResizeObserver<T extends Element>(
+  resizeHandler: ResizeHandler,
+  triggerConfig: TriggerConfig = TriggerConfig.Both
+) {
+  const [element, setElement] = useState<T | null>(null);
+
+  const callbackRef = useCallback((newElement: T | null) => {
+    setElement(newElement);
+  }, []);
+
+  const resizeHandlerRef = useRef<ResizeHandler>(resizeHandler);
+  resizeHandlerRef.current = resizeHandler;
+
+  useLayoutEffect(() => {
+    if (element != null) {
+      const unregister = resizeObserverRegistry.register(
+        element,
+        resizeHandlerRef.current,
+        triggerConfig
+      );
+
+      const rect = element.getBoundingClientRect();
+
+      // Simulated properties
+      const simulatedEntry = {
+        target: element,
+        contentRect: rect,
+        borderBoxSize: [
+          {
+            inlineSize: rect.width,
+            blockSize: rect.height,
+          },
+        ],
+        contentBoxSize: [
+          {
+            inlineSize: rect.width,
+            blockSize: rect.height,
+          },
+        ],
+        devicePixelContentBoxSize: [
+          {
+            inlineSize: rect.width * window.devicePixelRatio,
+            blockSize: rect.height * window.devicePixelRatio,
+          },
+        ],
+      };
+
+      resizeHandlerRef.current(rect.width, rect.height, simulatedEntry);
+
+      return unregister;
+    }
+  }, [triggerConfig, element]);
+
+  return callbackRef;
+}

package/src/utils/index.ts

@@ -0,0 +1,20 @@
+export * from './focus_redirect.js';
+export * from './click_away_listener.js';
+export * from './scroll_away_listener.js';
+
+export * from './hooks/make_context_hook.js';
+export * from './hooks/use_draggable.js';
+export * from './hooks/use_fork_ref.js';
+export * from './hooks/use_media_query.js';
+export * from './hooks/use_resize_observer.js';
+
+export * from './default_value.js';
+
+export * from './calendar/calendar_date.js';
+export * from './calendar/calendar_dates_generator.js';
+export * from './calendar/month.js';
+export * from './calendar/get_months_of_year.js';
+export * from './calendar/get_days_of_week.js';
+
+export * from './types/variations.js';
+export * from './types/dimensions.js';

package/src/utils/responsive/responsive_renderer.stories.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Meta } from '@storybook/react-vite';
+import { BodyText } from '../../typography/index.js';
+import { StyleBox } from '../../stacks/story_components/style_box.js';
+import { ResponsiveRenderer } from './responsive_renderer.js';
+
+const meta: Meta<typeof ResponsiveRenderer> = {
+  title: 'ResponsiveRenderer',
+  component: ResponsiveRenderer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+export function Default() {
+  return (
+    <ResponsiveRenderer
+      mobile={
+        <StyleBox
+          className="surface-primary"
+          padding="16px"
+          borderRadius="8px"
+          boxShadow="0 2px 4px rgba(0,0,0,0.1)"
+        >
+          <BodyText>Mobile Layout</BodyText>
+          <BodyText>This content is optimized for smaller screens</BodyText>
+        </StyleBox>
+      }
+      desktop={
+        <StyleBox
+          className="surface-primary"
+          padding="24px"
+          borderRadius="8px"
+          boxShadow="0 4px 8px rgba(0,0,0,0.1)"
+          width="400px"
+        >
+          <BodyText>Desktop Layout</BodyText>
+          <BodyText>This content is optimized for larger screens</BodyText>
+        </StyleBox>
+      }
+    />
+  );
+}
+
+export function CustomBreakpoint() {
+  return (
+    <ResponsiveRenderer
+      breakpoint={1024}
+      mobile={
+        <StyleBox
+          className="surface-primary"
+          padding="16px"
+          borderRadius="8px"
+          boxShadow="0 2px 4px rgba(0,0,0,0.1)"
+        >
+          <BodyText>Tablet/Mobile Layout</BodyText>
+          <BodyText>Shows on screens smaller than 1024px</BodyText>
+        </StyleBox>
+      }
+      desktop={
+        <StyleBox
+          className="surface-primary"
+          padding="24px"
+          borderRadius="8px"
+          boxShadow="0 4px 8px rgba(0,0,0,0.1)"
+          width="400px"
+        >
+          <BodyText>Large Desktop Layout</BodyText>
+          <BodyText>Shows on screens 1024px and larger</BodyText>
+        </StyleBox>
+      }
+    />
+  );
+}

package/src/utils/responsive/responsive_renderer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useMediaQuery } from '../hooks/use_media_query.js';
+
+export interface ResponsiveRendererProps {
+  /**
+   * Component to render on mobile devices (width < 768px)
+   */
+  mobile: React.ReactNode;
+  /**
+   * Component to render on desktop devices (width >= 768px)
+   */
+  desktop: React.ReactNode;
+  /**
+   * Optional breakpoint in pixels. Defaults to 768px
+   */
+  breakpoint?: number;
+}
+
+/**
+ * A component that renders different content based on screen size.
+ * Uses the useMediaQuery hook to detect screen size changes.
+ */
+export function ResponsiveRenderer({
+  mobile,
+  desktop,
+  breakpoint = 450,
+}: ResponsiveRendererProps) {
+  const isDesktop = useMediaQuery(`(min-width: ${breakpoint}px)`);
+
+  return isDesktop ? desktop : mobile;
+}

package/src/utils/scroll_away_listener.stories.tsx

@@ -0,0 +1,293 @@
+import React, { useState } from 'react';
+import { ScrollAwayListener } from './scroll_away_listener.js';
+
+export default {
+  title: 'Scroll Away Listener',
+};
+
+export function Baseline() {
+  const [message, setMessage] = useState('');
+
+  return (
+    <div style={{ overflow: 'auto', width: '100%', height: '100%' }}>
+      <div style={{ height: '200vh', padding: '20px' }}>
+        <ScrollAwayListener
+          onScrollAway={() => {
+            setMessage('Scrolled Away');
+          }}
+        >
+          <div
+            style={{
+              width: '200px',
+              height: '100px',
+              boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+              borderRadius: '20px',
+              display: 'inline-grid',
+              placeItems: 'center center',
+              backgroundColor: '#f1f1f1',
+              position: 'sticky',
+              top: '20px',
+            }}
+          >
+            {message || 'Scroll to trigger'}
+          </div>
+        </ScrollAwayListener>
+        <div style={{ height: '100vh', backgroundColor: '#e0e0e0', marginTop: '20px' }}>
+          <p>Scroll down to trigger the scroll away listener</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function WithException() {
+  const [message, setMessage] = useState('');
+
+  return (
+    <div style={{ overflow: 'auto', width: '100%', height: '100%' }}>
+      <div style={{ height: '200vh', padding: '20px' }}>
+        <ScrollAwayListener
+          isException={target => {
+            // Don't trigger when scrolling within elements with class 'exception'
+            return target.closest('.exception') !== null;
+          }}
+          onScrollAway={() => {
+            setMessage('Scrolled Away (except from exception areas)');
+          }}
+        >
+          <div
+            style={{
+              width: '200px',
+              height: '100px',
+              boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+              borderRadius: '20px',
+              display: 'inline-grid',
+              placeItems: 'center center',
+              backgroundColor: '#f1f1f1',
+              position: 'sticky',
+              top: '20px',
+            }}
+          >
+            {message || 'Scroll to trigger'}
+          </div>
+        </ScrollAwayListener>
+
+        <div
+          className="exception"
+          style={{
+            height: '100px',
+            backgroundColor: '#ffeb3b',
+            marginTop: '20px',
+            overflow: 'auto',
+            padding: '10px',
+          }}
+        >
+          <p>This area is an exception - scrolling here won't trigger the listener</p>
+          <div style={{ height: '200px', backgroundColor: '#fff3cd' }}>
+            <p>Scroll within this yellow area - it won't trigger the listener</p>
+          </div>
+        </div>
+
+        <div style={{ height: '100vh', backgroundColor: '#e0e0e0', marginTop: '20px' }}>
+          <p>Scroll down here to trigger the scroll away listener</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TooltipExample() {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipMessage, setTooltipMessage] = useState('');
+
+  return (
+    <div style={{ overflow: 'auto', width: '100%', height: '100%' }}>
+      <div style={{ height: '200vh', padding: '20px' }}>
+        <button
+          onMouseEnter={() => setShowTooltip(true)}
+          style={{
+            padding: '10px 20px',
+            fontSize: '16px',
+            cursor: 'pointer',
+            backgroundColor: '#007bff',
+            color: 'white',
+            border: 'none',
+            borderRadius: '5px',
+          }}
+        >
+          Hover for tooltip
+        </button>
+
+        {showTooltip && (
+          <ScrollAwayListener
+            onScrollAway={() => {
+              setShowTooltip(false);
+              setTooltipMessage('Tooltip closed due to scroll');
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                top: '60px',
+                left: '20px',
+                padding: '10px',
+                backgroundColor: '#333',
+                color: 'white',
+                borderRadius: '5px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.3)',
+                zIndex: 1000,
+              }}
+            >
+              This is a tooltip that closes when you scroll away
+            </div>
+          </ScrollAwayListener>
+        )}
+
+        {tooltipMessage && (
+          <div style={{ marginTop: '10px', color: '#666' }}>{tooltipMessage}</div>
+        )}
+
+        <div style={{ height: '100vh', backgroundColor: '#e0e0e0', marginTop: '20px' }}>
+          <p>Scroll down to close the tooltip</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PopoverExample() {
+  const [showPopover, setShowPopover] = useState(false);
+  const [popoverMessage, setPopoverMessage] = useState('');
+
+  return (
+    <div style={{ overflow: 'auto', width: '100%', height: '100%' }}>
+      <div style={{ height: '200vh', padding: '20px' }}>
+        <button
+          onClick={() => setShowPopover(!showPopover)}
+          style={{
+            padding: '10px 20px',
+            fontSize: '16px',
+            cursor: 'pointer',
+            backgroundColor: '#28a745',
+            color: 'white',
+            border: 'none',
+            borderRadius: '5px',
+          }}
+        >
+          {showPopover ? 'Hide' : 'Show'} Popover
+        </button>
+
+        {showPopover && (
+          <ScrollAwayListener
+            onScrollAway={() => {
+              setShowPopover(false);
+              setPopoverMessage('Popover closed due to scroll');
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                top: '60px',
+                left: '20px',
+                width: '300px',
+                padding: '20px',
+                backgroundColor: 'white',
+                border: '1px solid #ddd',
+                borderRadius: '8px',
+                boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
+                zIndex: 1000,
+              }}
+            >
+              <h3>Popover Content</h3>
+              <p>This popover will close when you scroll away from it.</p>
+              <button
+                onClick={() => setShowPopover(false)}
+                style={{
+                  padding: '5px 10px',
+                  backgroundColor: '#dc3545',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '3px',
+                  cursor: 'pointer',
+                }}
+              >
+                Close
+              </button>
+            </div>
+          </ScrollAwayListener>
+        )}
+
+        {popoverMessage && (
+          <div style={{ marginTop: '10px', color: '#666' }}>{popoverMessage}</div>
+        )}
+
+        <div style={{ height: '100vh', backgroundColor: '#e0e0e0', marginTop: '20px' }}>
+          <p>Scroll down to close the popover</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function MultipleListeners() {
+  const [message1, setMessage1] = useState('');
+  const [message2, setMessage2] = useState('');
+
+  return (
+    <div style={{ overflow: 'auto', width: '100%', height: '100%' }}>
+      <div style={{ height: '200vh', padding: '20px' }}>
+        <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
+          <ScrollAwayListener
+            onScrollAway={() => {
+              setMessage1('First listener triggered');
+            }}
+          >
+            <div
+              style={{
+                width: '150px',
+                height: '80px',
+                boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+                borderRadius: '10px',
+                display: 'inline-grid',
+                placeItems: 'center center',
+                backgroundColor: '#ff6b6b',
+                color: 'white',
+                position: 'sticky',
+                top: '20px',
+              }}
+            >
+              {message1 || 'Listener 1'}
+            </div>
+          </ScrollAwayListener>
+
+          <ScrollAwayListener
+            onScrollAway={() => {
+              setMessage2('Second listener triggered');
+            }}
+          >
+            <div
+              style={{
+                width: '150px',
+                height: '80px',
+                boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+                borderRadius: '10px',
+                display: 'inline-grid',
+                placeItems: 'center center',
+                backgroundColor: '#4ecdc4',
+                color: 'white',
+                position: 'sticky',
+                top: '20px',
+              }}
+            >
+              {message2 || 'Listener 2'}
+            </div>
+          </ScrollAwayListener>
+        </div>
+
+        <div style={{ height: '100vh', backgroundColor: '#e0e0e0' }}>
+          <p>Scroll down to trigger both listeners</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/utils/scroll_away_listener.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from 'react';
+import { useForkRef } from './hooks/use_fork_ref.js';
+export interface ScrollAwayListenerProps {
+  children: React.ReactElement;
+  isException?: (target: HTMLElement) => boolean;
+  onScrollAway: () => void;
+}
+
+/**
+ * This can be used for things that need to disappear when the user scrolls somewhere other
+ * than the place this component surrounds.
+ *
+ * Mainly this will be used for tooltips and popovers. It should be used with caution and
+ * correctly. If too many things are listening for other things scrolling it can become
+ * quite inefficient. Within the Popover it doesn't add it to the JSX until the popover is
+ * visible. That way the scroll away isn't alway listening to scroll events on the
+ * document.
+ */
+export const ScrollAwayListener = React.forwardRef<HTMLElement, ScrollAwayListenerProps>(
+  function ScrollAwayListener(
+    { children, onScrollAway, isException }: ScrollAwayListenerProps,
+    ref
+  ) {
+    const nodeRef = useRef<any>(null);
+    const newRef = useForkRef(ref, nodeRef, (children as any).ref);
+    useEffect(() => {
+      const onScroll = (event: any) => {
+        let insideDOM: boolean;
+        if (isException && isException(event.target)) {
+          insideDOM = true;
+        } else if (event.composedPath) {
+          insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+        } else {
+          insideDOM =
+            !document.documentElement.contains(event.target) ||
+            nodeRef.current.contains(event.target);
+        }
+
+        if (!insideDOM) {
+          onScrollAway();
+          document.removeEventListener('scroll', onScroll, true);
+          event.preventDefault();
+        }
+      };
+      document.addEventListener('scroll', onScroll, true);
+      return () => {
+        document.removeEventListener('scroll', onScroll, true);
+      };
+    }, [onScrollAway, isException]);
+    return React.cloneElement(children, {
+      ...children.props,
+      ref: newRef,
+    });
+  }
+);

package/src/utils/types/dimensions.ts

@@ -0,0 +1,16 @@
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface Dimensions {
+  width: number;
+  height: number;
+}
+
+export interface Rect {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}

package/src/utils/types/variations.ts

@@ -0,0 +1,4 @@
+export type Size = 'sm' | 'md' | 'lg';
+export type ExpandedSize = Size | 'xs' | 'xl';
+export type Hierarchy = 'primary' | 'secondary' | 'tertiary';
+export type Emphasis = 'strong' | 'normal' | 'faint';

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "~tooling/*": [
+        "../tooling/src/*"
+      ],
+      "~aip-160/*": [
+        "../aip-160/src/*"
+      ],
+      "~icons/*": [
+        "../icons/src/*"
+      ],
+      "~sb-blackcat-addon/*": [
+        "../sb-blackcat-addon/src/*"
+      ],
+      "~state/*": [
+        "../state/src/*"
+      ],
+      "~ui/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "types/**/*"
+  ]
+}

package/types/css_variables.d.ts

@@ -0,0 +1,8 @@
+import 'react';
+
+declare module 'react' {
+  interface CSSProperties extends React.CSSProperties {
+    [key: `--${string}-color`]: React.CSSProperties['color'];
+    [key: `--${string}-background-color`]: React.CSSProperties['backgroundColor'];
+  }
+}