@tcn/ui 0.0.1

package/src/overlay/portal/portal.stories.tsx

@@ -0,0 +1,43 @@
+import { ClickAwayListener } from '../../utils/index.js';
+import React, { useState } from 'react';
+import { Portal } from '../portal/portal.js';
+import { StyleBox } from '../../stacks/story_components/style_box.js';
+import { ZStack } from '../../stacks/z_stack.js';
+
+export default {
+  title: 'Portal',
+};
+
+export function ClickAwayListenerPortal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggle() {
+    setIsOpen(!isOpen);
+  }
+
+  return (
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>
+      {isOpen && (
+        <Portal>
+          <ZStack width="100%" height="100%">
+            <ClickAwayListener onClickAway={toggle}>
+              <StyleBox
+                borderRadius="10px"
+                boxShadow="0px 0px 8px 1px rgba(0,0,0,0.35)"
+                outline="1px solid rgba(0,0,0,0.25)"
+                backgroundColor="white"
+                width="100px"
+                height="100px"
+              >
+                <ZStack width="100%" height="100%">
+                  A Portal
+                </ZStack>
+              </StyleBox>
+            </ClickAwayListener>
+          </ZStack>
+        </Portal>
+      )}
+    </ZStack>
+  );
+}

package/src/overlay/portal/portal.tsx

@@ -0,0 +1,26 @@
+import React, { useState, useLayoutEffect } from 'react';
+import { usePortalPlatform } from './portal_platform_context.js';
+
+export interface PortalProps {
+  children: React.ReactNode | React.ReactNode[];
+  zIndex?: number;
+}
+
+export const Portal = ({ children, zIndex }: PortalProps) => {
+  const portalPlatform = usePortalPlatform();
+
+  const [portal] = useState(() => {
+    return portalPlatform.createPortal();
+  });
+
+  useLayoutEffect(() => {
+    portal.setZIndex(zIndex);
+  }, [portal, zIndex]);
+
+  useLayoutEffect(() => {
+    portalPlatform.mountPortal(portal);
+    return () => portalPlatform.unmountPortal(portal);
+  }, [portal, portalPlatform]);
+
+  return portal.render(children);
+};

package/src/overlay/portal/portal_platform.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import './portal.css';
+
+export class PortalPresenter {
+  private _window: Window & typeof globalThis;
+  div: HTMLDivElement;
+  hasMounted = false;
+
+  constructor(win = window, zIndex: number | string = '0') {
+    this._window = win;
+    this.div = this._window.document.createElement('div');
+    this.div.className = 'portal';
+    this.setZIndex(zIndex);
+  }
+
+  setZIndex(zIndex: number | string = '0') {
+    if (this.div != null) {
+      this.div.style.zIndex = zIndex.toString();
+    }
+  }
+
+  render(children: React.ReactNode) {
+    if (this.div == null) {
+      return null;
+    }
+
+    return createPortal(children, this.div);
+  }
+}
+
+export class PortalPlatform {
+  private _window: Window & typeof globalThis;
+  private _root: HTMLElement;
+  private _portals: PortalPresenter[] = [];
+
+  readonly platform: HTMLDivElement;
+
+  constructor(win = window, root: HTMLElement = win.document.body) {
+    this._window = win;
+    this._root = root;
+    this.platform = this._getPlatformRoot();
+    this.platform.classList.add('platform-root');
+  }
+
+  private _getPlatformRoot() {
+    const existingPlatformRoot = this._window.document.body.querySelector(
+      '.platform-root'
+    ) as HTMLDivElement | null;
+    if (!existingPlatformRoot) {
+      const root = this._window.document.createElement('div');
+      const portalPlatform = this._window.document.createElement('div');
+      portalPlatform.id = 'portal-platform';
+      portalPlatform.classList.add('portal-platform');
+      root.appendChild(portalPlatform);
+
+      return root;
+    } else {
+      return existingPlatformRoot;
+    }
+  }
+
+  setZIndex(zIndex: number | string = 'auto') {
+    if (this.platform != null) {
+      this.platform.style.zIndex = zIndex.toString();
+    }
+  }
+
+  setRoot(root: HTMLElement | null) {
+    if (root !== this._root) {
+      this.platform?.parentNode?.removeChild(this.platform);
+      this._root = root == null ? document.body : root;
+      this.showPlatform();
+    }
+  }
+
+  createPortal() {
+    const portal = new PortalPresenter(this._window);
+    this._portals.push(portal);
+    return portal;
+  }
+
+  mountPortal(portal: PortalPresenter) {
+    portal.hasMounted = true;
+    this.platform.firstElementChild?.appendChild(portal.div);
+    this.showPlatform();
+  }
+
+  unmountPortal(portal: PortalPresenter) {
+    this.removePortal(portal);
+  }
+
+  removePortal(portal: PortalPresenter) {
+    const index = this._portals.indexOf(portal);
+    if (index > -1) {
+      portal.hasMounted = false;
+      this._portals.splice(index, 1);
+      this.platform.firstElementChild?.removeChild(portal.div);
+      this.hidePlatformIfNecessary();
+    }
+  }
+
+  showPlatform() {
+    if (this.platform != null && this.platform.parentElement == null) {
+      this._root.appendChild(this.platform);
+    }
+  }
+
+  hidePlatformIfNecessary() {
+    if (this._portals.length === 0 && this.platform.parentElement != null) {
+      this._root.removeChild(this.platform);
+    }
+  }
+
+  dispose() {
+    if (this.platform != null && this._root.contains(this.platform)) {
+      this._root.removeChild(this.platform);
+    }
+  }
+}

package/src/overlay/portal/portal_platform_context.ts

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import { PortalPlatform } from './portal_platform.js';
+
+const defaultPlatform = new PortalPlatform();
+
+export const PortalPlatformContext = React.createContext(defaultPlatform);
+export const PortalPlatformProvider = PortalPlatformContext.Provider;
+
+export function usePortalPlatform() {
+  return useContext(PortalPlatformContext);
+}

package/src/overlay/tooltip/tooltip.module.css

@@ -0,0 +1,3 @@
+.tooltip {
+  background-color: var(--background-color-primary);
+}

package/src/overlay/tooltip/tooltip.stories.tsx

@@ -0,0 +1,15 @@
+import { Tooltip } from './tooltip.js';
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+};
+
+export const TooltipStory = () => {
+  return (
+    <Tooltip>
+      <>tooltip</>
+    </Tooltip>
+  );
+};

package/src/overlay/tooltip/tooltip.tsx

@@ -0,0 +1,24 @@
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './tooltip.module.css';
+
+export interface TooltipProps extends Omit<VStackProps, 'as' | 'children'> {
+  children?: React.ReactNode;
+}
+
+export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(function VPanel(
+  { children, className, ...props }: TooltipProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as="span"
+      className={classNames(className, styles.tooltip, 'tooltip')}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/stacks/box/bottom_resize_handle.module.css

@@ -0,0 +1,10 @@
+.bottom-resize-handle {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 16px;
+  width: 100%;
+  z-index: 1;
+  cursor: ns-resize;
+  pointer-events: auto;
+}

package/src/stacks/box/bottom_resize_handle.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styles from './bottom_resize_handle.module.css';
+import { createVerticalResizeHandler } from './resize_handlers.js';
+import classNames from 'classnames';
+import type { HandleProps } from './handle_props.js';
+
+export interface BottomResizeHandleProps {
+  targetRef: React.MutableRefObject<HTMLElement | null>;
+  handleProps?: HandleProps;
+  onHeightResize?: (value: number) => void;
+  onHeightResizeEnd?: (value: number) => void;
+}
+
+export function BottomResizeHandle({
+  targetRef,
+  handleProps,
+  onHeightResize,
+  onHeightResizeEnd,
+}: BottomResizeHandleProps) {
+  const resizeHandler = createVerticalResizeHandler(
+    targetRef,
+    onHeightResize,
+    onHeightResizeEnd
+  );
+  const offset = handleProps?.offset ? handleProps.offset : -8;
+
+  const bottomResizeHandleStyle: React.CSSProperties = {
+    ...handleProps?.style,
+    bottom: `${offset}px`,
+    height: handleProps?.size || '16px',
+  };
+
+  return (
+    <div
+      className={classNames(styles['bottom-resize-handle'], 'bottom-resize-handle')}
+      onMouseDown={resizeHandler}
+      style={bottomResizeHandleStyle}
+    >
+      {handleProps?.children}
+    </div>
+  );
+}

package/src/stacks/box/box.tsx

@@ -0,0 +1,220 @@
+import { useForkRef } from '../../utils/index.js';
+import React, { CSSProperties, HTMLAttributes, useRef } from 'react';
+import { LeftResizeHandle } from './left_resize_handle.js';
+import { RightResizeHandle } from './right_resize_handle.js';
+import { BottomResizeHandle } from './bottom_resize_handle.js';
+import { EndResizeHandle } from './end_resize_handle.js';
+import { StartResizeHandle } from './start_resize_handle.js';
+import { TopResizeHandle } from './top_resize_handle.js';
+import classNames from 'classnames';
+import { isCustomSizeProp } from '../utils/isCustomSizeProp.js';
+import { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';
+import styles from '../stack.module.css';
+import { HandleProps } from './handle_props.js';
+
+export interface BoxProps extends HTMLAttributes<HTMLElement> {
+  as?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+  width?: 'default' | 'flex' | 'auto' | string | number;
+  minWidth?: CSSProperties['minWidth'];
+  maxWidth?: CSSProperties['maxWidth'];
+  height?: 'default' | 'flex' | 'auto' | string | number;
+  minHeight?: CSSProperties['minHeight'];
+  maxHeight?: CSSProperties['maxHeight'];
+  zIndex?: number;
+  padding?: CSSProperties['padding'];
+  paddingInline?: CSSProperties['paddingInline'];
+  paddingBlock?: CSSProperties['paddingBlock'];
+  margin?: CSSProperties['margin'];
+  marginBlock?: CSSProperties['marginBlock'];
+  marginInline?: CSSProperties['marginInline'];
+  marginInlineStart?: CSSProperties['marginInlineStart'];
+  marginInlineEnd?: CSSProperties['marginInlineEnd'];
+  marginTop?: CSSProperties['marginTop'];
+  marginBottom?: CSSProperties['marginBottom'];
+  overflow?: React.CSSProperties['overflow'];
+  overflowX?: React.CSSProperties['overflowX'];
+  overflowY?: React.CSSProperties['overflowY'];
+  enableResizeOnTop?: boolean;
+  enableResizeOnEnd?: boolean;
+  enableResizeOnBottom?: boolean;
+  enableResizeOnStart?: boolean;
+  enableResizeOnLeft?: boolean;
+  enableResizeOnRight?: boolean;
+  horizontalHandleProps?: HandleProps;
+  verticalHandleProps?: HandleProps;
+  onWidthResize?: (width: number) => void;
+  onHeightResize?: (width: number) => void;
+  onWidthResizeEnd?: (width: number) => void;
+  onHeightResizeEnd?: (width: number) => void;
+}
+
+export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(
+  {
+    style,
+    className,
+    as = 'div',
+    children,
+    width = 'default',
+    minWidth,
+    maxWidth,
+    height = 'default',
+    minHeight,
+    maxHeight,
+    zIndex,
+    padding,
+    paddingInline,
+    paddingBlock,
+    margin,
+    marginBlock,
+    marginInline,
+    marginInlineStart,
+    marginInlineEnd,
+    marginTop,
+    marginBottom,
+    overflow,
+    overflowX,
+    overflowY,
+    enableResizeOnTop = false,
+    enableResizeOnEnd = false,
+    enableResizeOnBottom = false,
+    enableResizeOnStart = false,
+    enableResizeOnLeft = false,
+    enableResizeOnRight = false,
+    onWidthResize,
+    onHeightResize,
+    onWidthResizeEnd,
+    onHeightResizeEnd,
+    horizontalHandleProps,
+    verticalHandleProps,
+    ...otherProps
+  }: BoxProps,
+  ref
+) {
+  const As = as as React.ElementType;
+  const boxRef = useRef<HTMLElement | null>(null);
+  const forkedRef = useForkRef(ref, boxRef);
+  const hasHorizontalResize =
+    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;
+  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;
+
+  const cannotHorizontalFlex = hasHorizontalResize;
+  const cannotVerticalFlex = hasVerticalResize;
+  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';
+  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';
+  const isFlexing =
+    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');
+
+  if (warnHorizontalFlex) {
+    width = '100%';
+    // biome-ignore lint/suspicious/noConsole: Need to warn the developer
+    console.warn('You cannot have a resizable box and flex simultaneously');
+  }
+
+  if (warnVerticalFlex) {
+    height = 'auto';
+    // biome-ignore lint/suspicious/noConsole: Need to warn the developer
+    console.warn('You cannot have a resizable box and flex simultaneously');
+  }
+
+  const propStyles = {
+    width: !isCustomSizeProp(width) ? width : undefined,
+    minWidth,
+    maxWidth,
+    height: !isCustomSizeProp(height) ? height : undefined,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingInline,
+    paddingBlock,
+    margin,
+    marginBlock,
+    marginInline,
+    marginInlineStart,
+    marginInlineEnd,
+    marginTop,
+    marginBottom,
+    overflow,
+    overflowX,
+    overflowY,
+    zIndex,
+  };
+
+  return (
+    <As
+      data-enabled-resize-on-start={String(enableResizeOnStart)}
+      data-enabled-resize-on-end={String(enableResizeOnEnd)}
+      data-enabled-resize-on-top={String(enableResizeOnTop)}
+      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}
+      data_enabled-resize-on-left={String(enableResizeOnLeft)}
+      data_enabled-resize-on-right={String(enableResizeOnRight)}
+      data-height={height}
+      data-width={width}
+      ref={forkedRef}
+      style={{
+        ...removeUndefinedProperties(propStyles),
+        ...style,
+      }}
+      className={classNames(
+        styles['box'],
+        className,
+        isFlexing && 'stack-flex',
+        isFlexing && styles['stack-flex'],
+        'box'
+      )}
+      {...otherProps}
+    >
+      {children}
+      {enableResizeOnTop && (
+        <TopResizeHandle
+          onHeightResize={onHeightResize}
+          onHeightResizeEnd={onHeightResizeEnd}
+          targetRef={boxRef}
+          handleProps={horizontalHandleProps}
+        />
+      )}
+      {enableResizeOnBottom && (
+        <BottomResizeHandle
+          onHeightResize={onHeightResize}
+          onHeightResizeEnd={onHeightResizeEnd}
+          targetRef={boxRef}
+          handleProps={verticalHandleProps}
+        />
+      )}
+      {enableResizeOnStart && (
+        <StartResizeHandle
+          onWidthResize={onWidthResize}
+          onWidthResizeEnd={onWidthResizeEnd}
+          targetRef={boxRef}
+          handleProps={horizontalHandleProps}
+        />
+      )}
+      {enableResizeOnEnd && (
+        <EndResizeHandle
+          onWidthResize={onWidthResize}
+          onWidthResizeEnd={onWidthResizeEnd}
+          targetRef={boxRef}
+          handleProps={horizontalHandleProps}
+        />
+      )}
+      {enableResizeOnLeft && (
+        <LeftResizeHandle
+          onWidthResize={onWidthResize}
+          onWidthResizeEnd={onWidthResizeEnd}
+          targetRef={boxRef}
+          handleProps={verticalHandleProps}
+        />
+      )}
+      {enableResizeOnRight && (
+        <RightResizeHandle
+          onWidthResize={onWidthResize}
+          onWidthResizeEnd={onWidthResizeEnd}
+          targetRef={boxRef}
+          handleProps={verticalHandleProps}
+        />
+      )}
+    </As>
+  );
+});

package/src/stacks/box/end_resize_handle.module.css

@@ -0,0 +1,17 @@
+.end-resize-handle {
+  position: fixed;
+  bottom: 0;
+  width: 16px;
+  height: 100%;
+  z-index: 1;
+  cursor: ew-resize;
+  pointer-events: auto;
+}
+
+.end-resize-handle:dir(ltr) {
+  right: var(--resize-offset, -8px);
+}
+
+.end-resize-handle:dir(rtl) {
+  left: var(--resize-offset, -8px);
+}

package/src/stacks/box/end_resize_handle.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styles from './end_resize_handle.module.css';
+import { createHorizontalResizeHandler } from './resize_handlers.js';
+import classNames from 'classnames';
+import type { HandleProps } from './handle_props.js';
+
+export interface EndResizeHandleProps {
+  targetRef: React.MutableRefObject<HTMLElement | null>;
+  handleProps?: HandleProps;
+  onWidthResize?: (value: number) => void;
+  onWidthResizeEnd?: (value: number) => void;
+}
+
+export function EndResizeHandle({
+  targetRef,
+  handleProps,
+  onWidthResize,
+  onWidthResizeEnd,
+}: EndResizeHandleProps) {
+  const resizeHandler = createHorizontalResizeHandler(
+    targetRef,
+    onWidthResize,
+    onWidthResizeEnd
+  );
+  const offset = handleProps?.offset ? handleProps.offset : -8;
+
+  const endResizeHandleStyle: any = {
+    ...handleProps?.style,
+    '--resize-offset': `${offset}px`,
+    width: handleProps?.size || '16px',
+  };
+
+  return (
+    <div
+      className={classNames(styles['end-resize-handle'], 'end-resize-handle')}
+      onMouseDown={resizeHandler}
+      style={endResizeHandleStyle}
+    >
+      {handleProps?.children}
+    </div>
+  );
+}

package/src/stacks/box/handle_props.ts

@@ -0,0 +1,6 @@
+export interface HandleProps {
+  size?: number;
+  offset?: number;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}

package/src/stacks/box/left_resize_handle.module.css

@@ -0,0 +1,10 @@
+.left-resize-handle {
+  position: fixed;
+  bottom: 0;
+  left: var(--resize-offset, -8px);
+  height: 100%;
+  width: 16px;
+  z-index: 1;
+  cursor: ew-resize;
+  pointer-events: auto;
+}

package/src/stacks/box/left_resize_handle.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { HandleProps } from './handle_props.js';
+import styles from './left_resize_handle.module.css';
+import { createHorizontalResizeHandler } from './resize_handlers.js';
+import classNames from 'classnames';
+
+export interface LeftResizeHandleProps {
+  targetRef: React.MutableRefObject<HTMLElement | null>;
+  handleProps?: HandleProps;
+  onWidthResize?: (value: number) => void;
+  onWidthResizeEnd?: (value: number) => void;
+}
+export function LeftResizeHandle({
+  targetRef,
+  handleProps,
+  onWidthResize,
+  onWidthResizeEnd,
+}: LeftResizeHandleProps) {
+  const resizeHandler = createHorizontalResizeHandler(
+    targetRef,
+    onWidthResize,
+    onWidthResizeEnd,
+    true,
+    true
+  );
+  const offset = handleProps?.offset ? handleProps.offset : -8;
+
+  const leftResizeHandleStyle: any = {
+    ...handleProps?.style,
+    '--resize-offset': `${offset}px`,
+    width: handleProps?.size || '16px',
+  };
+
+  return (
+    <div
+      className={classNames(styles['left-resize-handle'], 'left-resize-handle')}
+      onMouseDown={resizeHandler}
+      style={leftResizeHandleStyle}
+    >
+      {handleProps?.children}
+    </div>
+  );
+}