@tcn/ui 0.12.4 → 0.12.6

package/src/overlay/slide/slide.stories.tsx

@@ -0,0 +1,58 @@
+import { Header, Scaffold, VBody } from '../../layouts/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { BodyText } from '../../typography/index.js';
+import { Title } from '../../typography/title/title.js';
+import { Slide, type SlideProps } from './slide.js';
+import { DragHandle } from '../../utils/dnd/handle.js';
+
+export default {
+  title: 'Overlays/Floating/Slide',
+  component: Slide,
+  tags: ['autodocs'],
+
+  args: {
+    isOpen: true,
+    veil: false,
+    resizable: true,
+    side: 'top',
+  },
+  argTypes: {
+    side: {
+      control: 'select',
+      options: ['top', 'bottom', 'start', 'end'],
+    },
+  },
+};
+
+export const SlideStory = (args: Omit<SlideProps, 'children'>) => {
+  const isVertical = args.side === 'top' || args.side === 'bottom';
+  return (
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <Slide
+        height={isVertical ? '300px' : undefined}
+        width={!isVertical ? '300px' : undefined}
+        minHeight={isVertical ? '100px' : undefined}
+        minWidth={!isVertical ? '100px' : undefined}
+        maxHeight={isVertical ? '90%' : undefined}
+        maxWidth={!isVertical ? '90%' : undefined}
+        style={{
+          background: 'white',
+        }}
+        {...args}
+      >
+        <Scaffold>
+          <DragHandle>
+            <Header>
+              <Title> This is a Slide</Title>
+            </Header>
+          </DragHandle>
+          <VBody>
+            <BodyText>
+              This component is fixed to a side of a container (top, bottom, start, end).
+            </BodyText>
+          </VBody>
+        </Scaffold>
+      </Slide>
+    </ZStack>
+  );
+};

package/src/overlay/slide/slide.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Frame, type FrameProps } from '../frame/frame.js';
+import { clsx } from 'clsx';
+
+// Styles
+import styles from './slide.module.css';
+
+export type SlideSide = 'top' | 'bottom' | 'start' | 'end';
+
+export interface SlideOwnProps {
+  side: SlideSide;
+}
+
+export type SlideProps = Omit<
+  FrameProps,
+  | 'draggable'
+  | 'enableResizeOnLeft'
+  | 'enableResizeOnRight'
+  | 'enableResizeOnTop'
+  | 'enableResizeOnBottom'
+  | 'enableResizeOnStart'
+  | 'enableResizeOnEnd'
+> &
+  SlideOwnProps;
+
+// A Frame fixed to a side of a container (top, bottom, start, end) - disables dragging - and limits resizing to one side
+export const Slide = React.forwardRef<HTMLElement, SlideProps>(function Slide(
+  { children, side, resizable = false, className, ...rest },
+  ref
+) {
+  const isVertical = side === 'top' || side === 'bottom';
+
+  return (
+    <Frame
+      data-side={side}
+      className={clsx(styles['slide'], className)}
+      draggable={false}
+      ref={ref}
+      data-is-vertical={isVertical}
+      data-is-horizontal={!isVertical}
+      resizable={resizable}
+      enableResizeOnTop={side === 'bottom'}
+      enableResizeOnBottom={side === 'top'}
+      enableResizeOnStart={side === 'end'}
+      enableResizeOnEnd={side === 'start'}
+      {...rest}
+    >
+      {children}
+    </Frame>
+  );
+});

package/src/stacks/box/box.tsx

@@ -11,6 +11,12 @@ import { LeftResizeHandle } from './left_resize_handle.js';
 import { RightResizeHandle } from './right_resize_handle.js';
 import { StartResizeHandle } from './start_resize_handle.js';
 import { TopResizeHandle } from './top_resize_handle.js';
+import type {
+  OnHeightResize,
+  OnHeightResizeEnd,
+  OnWidthResize,
+  OnWidthResizeEnd,
+} from './types.js';
 
 export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {
   as?: string;
@@ -45,22 +51,10 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
   enableResizeOnRight?: boolean;
   horizontalHandleProps?: HandleProps;
   verticalHandleProps?: HandleProps;
-  onWidthResize?: (
-    width: number,
-    origin: 'left' | 'right',
-    totalDelta: number,
-    currentDelta: number,
-    atLimit: boolean
-  ) => void;
-  onHeightResize?: (
-    height: number,
-    origin: 'top' | 'bottom',
-    totalDelta: number,
-    currentDelta: number,
-    atLimit: boolean
-  ) => void;
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
+  onWidthResize?: OnWidthResize;
+  onHeightResize?: OnHeightResize;
+  onWidthResizeEnd?: OnWidthResizeEnd;
+  onHeightResizeEnd?: OnHeightResizeEnd;
 }
 
 export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(

package/src/stacks/box/detect_resize_bounds.ts

@@ -0,0 +1,84 @@
+type ConstraintAxis = 'width' | 'height';
+
+export type DetectResizeBoundsParams = {
+  element: HTMLElement;
+  axis: ConstraintAxis;
+  nextSize: number;
+  epsilon?: number; // Tolerance for the constraint hit detection.
+};
+
+export type DetectResizeBoundsResult = {
+  hitMin: boolean;
+  hitMax: boolean;
+  clamped: boolean;
+};
+
+const styleKeys = {
+  width: {
+    size: 'width',
+    min: 'minWidth',
+    max: 'maxWidth',
+  },
+  height: {
+    size: 'height',
+    min: 'minHeight',
+    max: 'maxHeight',
+  },
+} as const;
+
+function parsePx(value: string): number | null {
+  const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
+  return match ? Number(match[1]) : null;
+}
+
+function detectByPixelValue(nextSize: number, min: string, max: string) {
+  const minPx = parsePx(min);
+  const maxPx = parsePx(max);
+  const hitMin = minPx !== null && nextSize < minPx;
+  const hitMax = maxPx !== null && nextSize > maxPx;
+  return {
+    hitMin,
+    hitMax,
+    clamped: hitMin || hitMax,
+  };
+}
+
+export function detectResizeBounds({
+  element,
+  axis,
+  nextSize,
+  epsilon = 0.5,
+}: DetectResizeBoundsParams): DetectResizeBoundsResult {
+  const keys = styleKeys[axis];
+
+  const computed = getComputedStyle(element);
+  const fastPath = detectByPixelValue(nextSize, computed[keys.min], computed[keys.max]);
+  if (fastPath.clamped) return fastPath;
+
+  const style = element.style;
+  const prevInlineSize = style[keys.size]; // Save the previous size to revert later.
+
+  try {
+    // Temporarily apply the new size to the element to offload bound test to browser.
+    style[keys.size] = `${nextSize}px`;
+
+    // Force layout so browser resolves min/max/intrinsic constraints.
+    const rect = element.getBoundingClientRect();
+    const renderedSize = rect[keys.size];
+
+    const delta = renderedSize - nextSize;
+
+    const hitMin = delta > epsilon;
+    const hitMax = delta < -epsilon;
+    const clamped = hitMin || hitMax;
+
+    return {
+      hitMin,
+      hitMax,
+      clamped,
+    };
+  } finally {
+    // revert the style change
+    style[keys.size] = prevInlineSize;
+  }
+}

package/src/stacks/box/resize_handlers.ts

@@ -4,6 +4,7 @@ import {
   type OnHeightResize,
   type WidthResizeOrigin,
 } from './types';
+import { detectResizeBounds } from './detect_resize_bounds.js';
 
 function createVeil() {
   const veil = window.document.createElement('div');
@@ -25,9 +26,7 @@ export function createHorizontalResizeHandler(
   return function startHorizontalResize(event: React.MouseEvent) {
     const box = targetRef.current;
 
-    if (box == null) {
-      return;
-    }
+    if (box == null) return;
 
     const veil = createVeil();
     box.appendChild(veil);
@@ -42,18 +41,24 @@ export function createHorizontalResizeHandler(
     let width = startRect.width;
 
     const drag = (event: MouseEvent) => {
-      const beforeWidth = box.getBoundingClientRect().width;
       const totalDelta = direction * (event.clientX - startX);
       const newWidth = startRect.width + totalDelta;
+
+      const result = detectResizeBounds({
+        element: box,
+        axis: 'width',
+        nextSize: newWidth,
+      });
+
+      if (result.clamped) return;
+
       const currentDelta = newWidth - width;
 
+      // apply the new width
       width = newWidth;
-
       box.style.width = `${newWidth}px`;
 
-      const afterWidth = box.getBoundingClientRect().width;
-      const atLimit = afterWidth === beforeWidth;
-      onWidthResize?.(newWidth, origin, totalDelta, currentDelta, atLimit);
+      onWidthResize?.({ width: newWidth, origin, totalDelta, currentDelta });
       event.stopPropagation();
       event.preventDefault();
     };
@@ -95,9 +100,7 @@ export function createVerticalResizeHandler(
   return function startVerticalResize(event: React.MouseEvent) {
     const box = targetRef.current;
 
-    if (box == null) {
-      return;
-    }
+    if (box == null) return;
 
     const veil = createVeil();
     box.appendChild(veil);
@@ -107,15 +110,24 @@ export function createVerticalResizeHandler(
     let height = startRect.height;
 
     const drag = (event: MouseEvent) => {
-      const beforeHeight = box.getBoundingClientRect().height;
       const totalDelta = direction * (event.clientY - startY);
       const newHeight = startRect.height + totalDelta;
+
+      const result = detectResizeBounds({
+        element: box,
+        axis: 'height',
+        nextSize: newHeight,
+      });
+
+      if (result.clamped) return;
+
       const currentDelta = newHeight - height;
+
+      // apply the new height
       height = newHeight;
       box.style.height = `${newHeight}px`;
-      const afterHeight = box.getBoundingClientRect().height;
-      const atLimit = afterHeight === beforeHeight;
-      onHeightResize?.(newHeight, origin, totalDelta, currentDelta, atLimit);
+
+      onHeightResize?.({ height: newHeight, origin, totalDelta, currentDelta });
       event.stopPropagation();
       event.preventDefault();
     };

package/src/stacks/box/start_resize_handle.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './start_resize_handle.module.css';
 import type { HorizontalResizeHandleProps } from './types.js';
+import { CSSProperties } from 'react';
 
 export type StartResizeHandleProps = HorizontalResizeHandleProps;
 
@@ -15,15 +16,17 @@ export function StartResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
-    'left'
+    'left',
+    true
   );
+
   const offset = handleProps?.offset ? handleProps.offset : -8;
 
-  const startResizeHandleStyle: any = {
+  const startResizeHandleStyle = {
     ...handleProps?.style,
     '--resize-offset': `${offset}px`,
     width: handleProps?.size || '16px',
-  };
+  } as CSSProperties;
 
   return (
     <div

package/src/stacks/box/types.ts

@@ -3,42 +3,40 @@ import type { HandleProps } from './handle_props.js';
 export type WidthResizeOrigin = 'left' | 'right';
 export type HeightResizeOrigin = 'top' | 'bottom';
 
-export type OnWidthResize = (
-  // Newly calculated width
-  width: number,
-  // Origin of the resize - left or right of the box
-  origin: WidthResizeOrigin,
+export interface BaseOnResizePayload<
+  Origin extends WidthResizeOrigin | HeightResizeOrigin,
+> {
+  origin: Origin;
   // Total delta of the resize (the sum of all deltas before end event)
-  totalDelta: number,
+  totalDelta: number;
   // Current delta of the resize (the delta of the current event)
-  currentDelta: number,
-  // Whether the resize is at the limit of the box, this includes min-content, max-content, and min-width/height
-  atLimit: boolean
-) => void;
-
-export type OnHeightResize = (
-  // Newly calculated height
-  height: number,
-  // Origin of the resize - top or bottom of the box
-  origin: HeightResizeOrigin,
-  // Total delta of the resize (the sum of all deltas before end event)
-  totalDelta: number,
-  // Current delta of the resize (the delta of the current event)
-  currentDelta: number,
-  // Whether the resize is at the limit of the box, this includes min-content, max-content, and min-width/height
-  atLimit: boolean
-) => void;
+  currentDelta: number;
+}
+
+export interface OnWidthResizePayload extends BaseOnResizePayload<WidthResizeOrigin> {
+  width: number;
+}
+
+export interface OnHeightResizePayload extends BaseOnResizePayload<HeightResizeOrigin> {
+  height: number;
+}
+
+export type OnWidthResizeEnd = (width: number, origin: WidthResizeOrigin) => void;
+export type OnHeightResizeEnd = (height: number, origin: HeightResizeOrigin) => void;
+
+export type OnWidthResize = (payload: OnWidthResizePayload) => void;
+export type OnHeightResize = (payload: OnHeightResizePayload) => void;
 
 export interface HorizontalResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
   onWidthResize?: OnWidthResize;
-  onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void;
+  onWidthResizeEnd?: OnWidthResizeEnd;
 }
 
 export interface VerticalResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
   onHeightResize?: OnHeightResize;
-  onHeightResizeEnd?: (height: number, origin: HeightResizeOrigin) => void;
+  onHeightResizeEnd?: OnHeightResizeEnd;
 }

package/src/surfaces/drawers/drawer.stories.tsx

@@ -0,0 +1,130 @@
+import { useState } from 'react';
+import { Button } from '../../actions/index.js';
+import { Footer, Header, UtilityBar, VBody } from '../../layouts/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { BodyText, Title } from '../../typography/index.js';
+import { Drawer, type DrawerProps } from './drawer.js';
+import { Spacer } from '../../stacks/index.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { BugIcon } from '@tcn/icons/bug_icon.js';
+
+export default {
+  title: 'Surfaces/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  argTypes: {
+    side: {
+      control: 'select',
+      options: ['start', 'end', 'top', 'bottom'],
+    },
+    veil: {
+      control: 'boolean',
+    },
+    resizable: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'text',
+      description: 'Arg to swap between setting width and height',
+    },
+    minSize: {
+      control: 'text',
+      description: 'Arg to set the minimum size of the drawer',
+    },
+    maxSize: {
+      control: 'text',
+      description: 'Arg to set the maximum size of the drawer',
+    },
+  },
+  args: {
+    resizable: true,
+    veil: false,
+    side: 'start',
+    size: '400px',
+    minSize: '240px',
+    maxSize: '90%',
+  },
+};
+
+type DrawerStoryProps = Pick<DrawerProps, 'resizable' | 'veil' | 'side'> & {
+  size?: string;
+  minSize?: string;
+  maxSize?: string;
+};
+
+export const Baseline = ({
+  veil,
+  resizable,
+  side,
+  size,
+  minSize,
+  maxSize,
+}: DrawerStoryProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggle() {
+    setIsOpen(!isOpen);
+  }
+
+  const useWidth = side === 'start' || side === 'end';
+
+  return (
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <Button hierarchy="secondary" onClick={toggle}>
+        {isOpen ? 'Close' : 'Open'}
+      </Button>
+
+      <Drawer
+        side={side}
+        isOpen={isOpen}
+        veil={veil}
+        resizable={resizable}
+        width={useWidth ? size : undefined}
+        minWidth={useWidth ? minSize : undefined}
+        maxWidth={useWidth ? maxSize : undefined}
+        height={useWidth ? undefined : size}
+        minHeight={useWidth ? undefined : minSize}
+        maxHeight={useWidth ? undefined : maxSize}
+      >
+        {/* Add a drag handle around the areas of the modal you want to be draggable (usually the header) */}
+        {/* <DragHandle> */}
+        <Header>
+          <Title>Drawer Title</Title>
+          <Spacer />
+          <Button utility hierarchy="tertiary" onClick={toggle}>
+            <CrossIcon />
+          </Button>
+          <Button utility hierarchy="secondary" onClick={toggle}>
+            <CrossIcon />
+          </Button>
+          <Button utility hierarchy="primary" onClick={toggle}>
+            <CrossIcon />
+          </Button>
+        </Header>
+        {/* </DragHandle> */}
+
+        <UtilityBar>
+          <Title>Utility Bar</Title>
+          <Spacer />
+          <Button utility hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button utility hierarchy="secondary">
+            <BugIcon />
+          </Button>
+          <Button utility hierarchy="primary">
+            <BugIcon />
+          </Button>
+        </UtilityBar>
+        <VBody>
+          <BodyText>This is a drawer</BodyText>
+        </VBody>
+        <Footer>
+          <Spacer />
+          <Button hierarchy="secondary">Cancel</Button>
+          <Button hierarchy="primary">Save</Button>
+        </Footer>
+      </Drawer>
+    </ZStack>
+  );
+};

package/src/surfaces/drawers/drawer.tsx

@@ -0,0 +1,26 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Scaffold } from '../../layouts/scaffold/scaffold.js';
+import { Slide, type SlideProps } from '../../overlay/slide/slide.js';
+
+export type DrawerProps = SlideProps;
+
+export const Drawer = React.forwardRef<HTMLElement, DrawerProps>(function Drawer(
+  { children, className, isOpen, veil = false, resizable = false, ...props }: DrawerProps,
+  ref
+) {
+  return (
+    <Slide
+      ref={ref}
+      isOpen={isOpen}
+      veil={veil}
+      resizable={resizable}
+      className={clsx('tcn-surface', 'tcn-drawer', className)}
+      {...props}
+    >
+      <Scaffold className={'tcn-drawer-scaffold'} width="100%" height="100%">
+        {children}
+      </Scaffold>
+    </Slide>
+  );
+});

package/src/surfaces/index.ts

@@ -5,10 +5,7 @@ export * from './page/h_page.js';
 export * from './page/v_page.js';
 export * from './panel/panel.js';
 export * from './popover/popover.js';
-export * from './drawers/drawer_bottom/drawer_bottom.js';
-export * from './drawers/drawer_top/drawer_top.js';
-export * from './drawers/drawer_start/drawer_start.js';
-export * from './drawers/drawer_end/drawer_end.js';
+export { Drawer, type DrawerProps } from './drawers/drawer.js';
 export { Window, type WindowProps } from './window/window.js';
 export { Modal, type ModalProps } from './modal/modal.js';
 export { Tooltip, type TooltipProps } from './tooltip/tooltip.js';

package/src/surfaces/modal/__stories__/modal.stories.tsx

@@ -3,7 +3,7 @@ import { Button } from '../../../actions/index.js';
 import { Footer, Header, UtilityBar, VBody } from '../../../layouts/index.js';
 import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText, Title } from '../../../typography/index.js';
-import { Modal } from '../modal.js';
+import { Modal, type ModalProps } from '../modal.js';
 import { Spacer } from '../../../stacks/index.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { BugIcon } from '@tcn/icons/bug_icon.js';
@@ -12,9 +12,61 @@ export default {
   title: 'Surfaces/Modal',
   component: Modal,
   tags: ['autodocs'],
+  argTypes: {
+    draggable: {
+      control: 'boolean',
+    },
+    veil: {
+      control: 'boolean',
+    },
+    resizable: {
+      control: 'boolean',
+    },
+    width: {
+      control: 'text',
+    },
+    height: {
+      control: 'text',
+    },
+    minWidth: {
+      control: 'text',
+    },
+    minHeight: {
+      control: 'text',
+    },
+    maxWidth: {
+      control: 'text',
+    },
+    maxHeight: {
+      control: 'text',
+    },
+  },
 };
 
-export const ModalStory = () => {
+type ModalStoryProps = Pick<
+  ModalProps,
+  | 'resizable'
+  | 'draggable'
+  | 'veil'
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+>;
+
+export const Baseline = ({
+  resizable,
+  draggable,
+  veil,
+  width = '400px',
+  height = '500px',
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+}: ModalStoryProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   function toggle() {
@@ -27,7 +79,20 @@ export const ModalStory = () => {
         {isOpen ? 'Close' : 'Open'}
       </Button>
 
-      <Modal isOpen={isOpen} width="400px" height="500px">
+      <Modal
+        isOpen={isOpen}
+        width={width}
+        height={height}
+        draggable={draggable}
+        veil={veil}
+        resizable={resizable}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
+      >
+        {/* Add a drag handle around the areas of the modal you want to be draggable (usually the header) */}
+        {/* <DragHandle> */}
         <Header>
           <Title>Modal Title</Title>
           <Spacer />
@@ -41,6 +106,8 @@ export const ModalStory = () => {
             <CrossIcon />
           </Button>
         </Header>
+        {/* </DragHandle> */}
+
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />