@tcn/ui 0.2.0 → 0.3.1

package/src/overlay/tethered/hooks/calculate_position.ts

@@ -0,0 +1,110 @@
+import type { HorizontalTether, VerticalTether } from '../types.js';
+import type { Rectangle } from '../../../utils/index.js';
+import type { Dimensions } from '../../../utils/index.js';
+
+export interface CalculateTetheredPositionParams {
+  anchor: Rectangle;
+  tether: Rectangle;
+  direction: 'ltr' | 'rtl';
+  verticalAnchor: VerticalTether;
+  verticalOrigin: VerticalTether;
+  horizontalAnchor: HorizontalTether;
+  horizontalOrigin: HorizontalTether;
+  verticalOffset: number;
+  horizontalOffset: number;
+  viewport: Dimensions;
+}
+
+export const calculateTetheredPosition = ({
+  anchor,
+  tether,
+  direction,
+  verticalAnchor,
+  verticalOrigin,
+  horizontalAnchor,
+  horizontalOrigin,
+  verticalOffset,
+  horizontalOffset,
+  viewport,
+}: CalculateTetheredPositionParams) => {
+  const isRtl = direction === 'rtl';
+
+  let top = anchor.position.y;
+  let left = anchor.position.x;
+
+  // Calculate vertical position
+  switch (verticalAnchor) {
+    case 'top':
+      top += verticalOffset;
+      break;
+    case 'center':
+      top += anchor.dimensions.height / 2;
+      break;
+    case 'bottom':
+      top += anchor.dimensions.height - verticalOffset;
+      break;
+  }
+
+  switch (verticalOrigin) {
+    case 'top':
+      break;
+    case 'center':
+      top -= tether.dimensions.height / 2;
+      break;
+    case 'bottom':
+      top -= tether.dimensions.height;
+      break;
+  }
+
+  // Calculate horizontal position with direction sensitivity
+  if (horizontalAnchor === 'start') {
+    left += isRtl ? anchor.dimensions.width + horizontalOffset : horizontalOffset;
+  } else if (horizontalAnchor === 'center') {
+    left += anchor.dimensions.width / 2;
+  } else if (horizontalAnchor === 'end') {
+    left += isRtl ? -horizontalOffset : anchor.dimensions.width + horizontalOffset;
+  }
+
+  // Adjust the origin based on RTL direction
+  let adjustedHorizontalOrigin = horizontalOrigin;
+  if (isRtl) {
+    if (horizontalOrigin === 'start') {
+      adjustedHorizontalOrigin = 'end';
+    } else if (horizontalOrigin === 'end') {
+      adjustedHorizontalOrigin = 'start';
+    }
+  }
+
+  // Apply adjusted origin to the position calculation
+  if (adjustedHorizontalOrigin === 'start') {
+    // No adjustment needed
+  } else if (adjustedHorizontalOrigin === 'center') {
+    left -= tether.dimensions.width / 2;
+  } else if (adjustedHorizontalOrigin === 'end') {
+    left -= tether.dimensions.width;
+  }
+
+  // Ensure the popover stays within the viewport
+  // Prevent overflow to the right
+  if (left + tether.dimensions.width > viewport.width) {
+    left = viewport.width - tether.dimensions.width;
+  }
+
+  // Prevent overflow to the left
+  if (left < 0) {
+    left = 0;
+  }
+
+  // Prevent overflow to the bottom
+  // FIXME: doesn't account for padding.
+  if (top + tether.dimensions.height > viewport.height) {
+    top = viewport.height - tether.dimensions.height;
+  }
+
+  // Prevent overflow to the top
+  if (top < 0) {
+    top = 0;
+  }
+
+  return { top, left };
+};

package/src/overlay/tethered/hooks/useTether.ts

@@ -0,0 +1,85 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import type { HorizontalTether, VerticalTether } from '../types.js';
+import { type Rectangle } from '../../../utils/index.js';
+import { calculateTetheredPosition } from './calculate_position.js';
+
+export interface UseTetherParams {
+  anchor: Rectangle | null;
+  verticalAnchor?: VerticalTether;
+  verticalOrigin?: VerticalTether;
+  horizontalOrigin?: HorizontalTether;
+  horizontalAnchor?: HorizontalTether;
+  verticalOffset?: number;
+  horizontalOffset?: number;
+}
+
+export function useTether({
+  anchor,
+  verticalAnchor = 'bottom',
+  verticalOrigin = 'top',
+  horizontalAnchor = 'start',
+  horizontalOrigin = 'start',
+  verticalOffset = 0,
+  horizontalOffset = 0,
+}: UseTetherParams) {
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const tetherRef = useRef<HTMLDivElement>(null);
+
+  const getPosition = useCallback(() => {
+    if (!anchor || !tetherRef.current) return;
+
+    const tether = tetherRef.current.getBoundingClientRect();
+    const computedStyle = getComputedStyle(tetherRef.current);
+
+    return calculateTetheredPosition({
+      anchor: anchor,
+      tether: {
+        dimensions: {
+          width: tether.width,
+          height: tether.height,
+        },
+        position: {
+          x: tether.left,
+          y: tether.top,
+        },
+      },
+      direction: computedStyle.direction as 'ltr' | 'rtl',
+      verticalAnchor: verticalAnchor,
+      verticalOrigin: verticalOrigin,
+      horizontalAnchor: horizontalAnchor,
+      horizontalOrigin: horizontalOrigin,
+      verticalOffset: verticalOffset,
+      horizontalOffset: horizontalOffset,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      },
+    });
+  }, [
+    anchor,
+    verticalAnchor,
+    verticalOrigin,
+    horizontalAnchor,
+    horizontalOrigin,
+    verticalOffset,
+    horizontalOffset,
+  ]);
+
+  // Update the position when the window is resized
+  useLayoutEffect(() => {
+    const update = () => {
+      const newPosition = getPosition();
+      if (!newPosition) return;
+      if (position.top !== newPosition.top || position.left !== newPosition.left) {
+        setPosition(newPosition);
+      }
+    };
+    update();
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('resize', update);
+    };
+  });
+
+  return { position, tetherRef };
+}

package/src/overlay/tethered/tethered.module.css

@@ -0,0 +1,8 @@
+.tethered {
+  display: inline-block;
+  position: absolute;
+  width: auto;
+  height: auto;
+  left: var(--tethered-left, 0);
+  top: var(--tethered-top, 0);
+}

package/src/overlay/tethered/tethered.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, type PropsWithChildren } from 'react';
+import type { HorizontalTether, VerticalTether } from './types.js';
+import { ZStack, type ZStackProps } from '../../stacks/index.js';
+import { useForkRef, type Rectangle } from '../../utils/index.js';
+import { useTether } from './hooks/useTether.js';
+import { clsx } from 'clsx';
+import { Portal } from '../portal/portal.js';
+
+// Styles
+import styles from './tethered.module.css';
+
+export interface BaseTetheredOwnProps {
+  verticalAnchor?: VerticalTether;
+  verticalOrigin?: VerticalTether;
+  horizontalOrigin?: HorizontalTether;
+  horizontalAnchor?: HorizontalTether;
+  verticalOffset?: number;
+  horizontalOffset?: number;
+}
+
+export interface TetheredOwnProp extends BaseTetheredOwnProps {
+  anchor: Rectangle | null;
+}
+export interface TetheredProps extends TetheredOwnProp, ZStackProps {}
+
+export const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(
+  function Tethered(
+    {
+      anchor,
+      verticalAnchor = 'bottom',
+      verticalOrigin = 'top',
+      horizontalAnchor = 'start',
+      horizontalOrigin = 'start',
+      verticalOffset = 0,
+      horizontalOffset = 0,
+      children,
+      style,
+      className,
+      ...rest
+    },
+    ref
+  ) {
+    const { position, tetherRef } = useTether({
+      anchor,
+      verticalAnchor,
+      verticalOrigin,
+      horizontalAnchor,
+      horizontalOrigin,
+      verticalOffset,
+      horizontalOffset,
+    });
+    const forkedRef = useForkRef(ref, tetherRef);
+
+    const cssVariables = {
+      '--tethered-top': `${position.top}px`,
+      '--tethered-left': `${position.left}px`,
+    };
+
+    return (
+      <Portal>
+        <ZStack
+          ref={forkedRef}
+          className={clsx(styles.tethered, className)}
+          style={{ position: 'absolute', ...cssVariables, ...style }}
+          {...rest}
+        >
+          {children}
+        </ZStack>
+      </Portal>
+    );
+  }
+);

package/src/overlay/tethered/types.ts

@@ -0,0 +1,2 @@
+export type VerticalTether = 'top' | 'center' | 'bottom';
+export type HorizontalTether = 'start' | 'center' | 'end';

package/src/stacks/h_stack.stories.tsx

@@ -80,7 +80,7 @@ const meta: Meta<HStackProps> = {
 
 export default meta;
 
-export function HStack(props: HStackProps) {
+export function SB_HStack(props: HStackProps) {
   return (
     <StyleBox border="1px dashed #ccc" backgroundColor="white">
       <HStackComponent {...props}>
@@ -99,7 +99,7 @@ export function HStack(props: HStackProps) {
   );
 }
 
-HStack.storyName = 'HStack';
+SB_HStack.storyName = 'HStack';
 
 export function ManyChildren(props: HStackProps) {
   return (

package/src/stacks/v_stack.stories.tsx

@@ -80,7 +80,7 @@ const meta: Meta<VStackProps> = {
 
 export default meta;
 
-export function VStack(props: VStackProps) {
+export function SBVStack(props: VStackProps) {
   return (
     <StyleBox
       borderLeft="1px dashed #ccc"
@@ -102,7 +102,7 @@ export function VStack(props: VStackProps) {
   );
 }
 
-VStack.storyName = 'VStack';
+SBVStack.storyName = 'VStack';
 
 export function Padding() {
   return (

package/src/surfaces/card/card.stories.tsx

@@ -0,0 +1,64 @@
+import { BugIcon } from '@tcn/icons/bug_icon.js';
+import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
+import { Header } from '../../layouts/header/header.js';
+import { VBody } from '../../layouts/body/v_body.js';
+import { UtilityBar } from '../../layouts/utility_bar/utility_bar.js';
+import { Box, Spacer } from '../../stacks/index.js';
+import { Title } from '../../typography/title/title.js';
+import { SlimButton } from '../../actions/index.js';
+import { Card } from './card.js';
+
+// Styles
+import styles from './card_stories.module.css';
+
+export default {
+  title: 'Surfaces/Card',
+  component: Card,
+  tags: ['autodocs'],
+};
+
+export const Default = () => {
+  return (
+    <div className={styles['stories-container']}>
+      <Card maxHeight="400px">
+        <Header>
+          <Title>Card Header</Title>
+          <Spacer />
+          <SlimButton hierarchy="tertiary">
+            <GridOneIcon />
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
+            <GridOneIcon />
+          </SlimButton>
+        </Header>
+        <UtilityBar>
+          <Title>Utility Bar</Title>
+          <Spacer />
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+          <SlimButton size="md" hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+        </UtilityBar>
+
+        <VBody>
+          <Box className={styles['content-box']} />
+        </VBody>
+        {/* Cards typically do not have a footer */}
+        {/* <Footer>
+          <Title>Footer</Title>
+          <Spacer />
+          <Button hierarchy="secondary">Secondary</Button>
+          <Button hierarchy="primary">Primary</Button>
+        </Footer> */}
+      </Card>
+    </div>
+  );
+};

package/src/surfaces/card/card.tsx

@@ -1,8 +1,8 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import React from 'react';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
 
-export interface CardProps extends Omit<VStackProps, 'as' | 'children'> {
+export interface CardProps extends Omit<ScaffoldProps, 'as' | 'children'> {
   children?: React.ReactNode;
 }
 
@@ -11,8 +11,8 @@ export const Card = React.forwardRef<HTMLElement, CardProps>(function Card(
   ref
 ) {
   return (
-    <VStack ref={ref} as="section" className={clsx(className, 'tcn-card')} {...props}>
+    <Scaffold ref={ref} className={clsx(className, 'tcn-surface', 'tcn-card')} {...props}>
       {children}
-    </VStack>
+    </Scaffold>
   );
 });

package/src/surfaces/card/card_stories.module.css

@@ -0,0 +1,13 @@
+.content-box {
+  background: rgba(0, 128, 0, 0.5);
+  min-height: 200px;
+  width: 100%;
+}
+
+.stories-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background-color: #ccc;
+  overflow: auto;
+}

package/src/surfaces/index.ts

@@ -12,3 +12,5 @@ export * from './drawers/drawer_start/drawer_start.js';
 export * from './drawers/drawer_end/drawer_end.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';
+export { PopConfirm, type PopConfirmProps } from './pop_confirm/pop_confirm.js';

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

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import { Button, SlimButton } from '../../../actions/index.js';
-import { Footer, Header, VBody } from '../../../layouts/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 { 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/Modal',
@@ -32,6 +33,16 @@ export const ModalStory = () => {
             <CrossIcon />
           </SlimButton>
         </Header>
+        <UtilityBar>
+          <Title>Utility Bar</Title>
+          <Spacer />
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+        </UtilityBar>
         <VBody>
           <BodyText>This is a modal</BodyText>
         </VBody>

package/src/surfaces/modal/modal.module.css

@@ -1,4 +1,4 @@
 .modal {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }

package/src/surfaces/modal/modal.tsx

@@ -1,25 +1,27 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import React from 'react';
-import styles from './modal.module.css';
 import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+
+// Styles
+import styles from './modal.module.css';
 
-export type ModalProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;
+export type ModalProps = FrameOwnProps & ScaffoldProps;
 
-export const Modal = React.forwardRef<HTMLDialogElement, ModalProps>(function Modal(
+export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
   { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
   ref
 ) {
   return (
-    <Frame isOpen={isOpen} draggable={draggable} veil={veil}>
-      <VStack
-        ref={ref}
-        className={clsx(styles['modal'], 'tcn-modal', className)}
-        as="dialog"
-        {...props}
-      >
+    <Frame
+      isOpen={isOpen}
+      draggable={draggable}
+      veil={veil}
+      className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}
+    >
+      <Scaffold ref={ref} {...props}>
         {children}
-      </VStack>
+      </Scaffold>
     </Frame>
   );
 });

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

@@ -24,7 +24,7 @@ export const Default = () => {
     <div className={styles['stories-container']}>
       <VPanel maxHeight="600px">
         <Header>
-          <Title>Panel Primary Header</Title>
+          <Title emphasis="strong">Panel Primary Header</Title>
           <Spacer />
           <SlimButton hierarchy="tertiary">
             <GridOneIcon />

package/src/surfaces/panel/v_panel.tsx

@@ -1,65 +1,20 @@
 import React from 'react';
-import { clsx } from 'clsx';
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import type { Alignment } from '../../stacks/types/alignment.js';
-import { VStack } from '../../stacks/v_stack.js';
-// Styles
-import styles from './panel.module.css';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import clsx from 'clsx';
 
-export interface VPanelProps extends Omit<BoxProps, 'as'> {
-  vAlign?: Alignment;
-  hAlign?: Alignment;
-}
+export type VPanelProps = ScaffoldProps;
 
 export const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel(
-  {
-    children,
-    width,
-    height = '100%',
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    hAlign,
-    vAlign = 'start',
-    className,
-    ...props
-  }: VPanelProps,
+  { children, className, ...props }: VPanelProps,
   ref
 ) {
   return (
-    <Box
+    <Scaffold
       ref={ref}
-      width={width}
-      height={height}
-      minWidth={minWidth}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      maxHeight={maxHeight}
-      data-h-alignment={hAlign}
-      data-v-alignment={vAlign}
-      className={clsx(className, 'panel', 'tcn-panel', 'tcn-v-panel')}
+      className={clsx('tcn-surface', 'tcn-panel', 'tcn-v-panel', className)}
       {...props}
     >
-      <VStack
-        as="section"
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        hAlign={hAlign}
-        vAlign={vAlign}
-        ref={ref}
-        className={clsx(
-          styles['panel-stack'],
-          className,
-          'panel-stack',
-          'tcn-panel-stack'
-        )}
-        zIndex={0}
-      >
-        {children}
-      </VStack>
-    </Box>
+      {children}
+    </Scaffold>
   );
 });

package/src/surfaces/pop_confirm/pop_confirm.stories.tsx

@@ -0,0 +1,70 @@
+import { useRef, useState } from 'react';
+import { Button } from '../../actions/index.js';
+import { Footer, Header, VBody } from '../../layouts/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { PopConfirm as PopConfirmComponent } from './pop_confirm.js';
+import { BodyText, Title } from '../../typography/index.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+
+export default {
+  title: 'Surfaces/Pop Confirm',
+  component: PopConfirmComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A tooltip component that displays a tooltip when hovered.',
+      },
+    },
+  },
+};
+
+export const DefaultPopConfirm = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const cancel = () => {
+    setOpen(false);
+  };
+
+  const confirm = () => {
+    setOpen(false);
+  };
+
+  const prompt = () => {
+    setOpen(true);
+  };
+
+  return (
+    <VStack hAlign="center" vAlign="center" height="100%" width="100%">
+      <HStack hAlign="center" vAlign="center">
+        <Button ref={anchorRef} onClick={prompt}>
+          Click to Confirm
+        </Button>
+        <PopConfirmComponent
+          height={'200px'}
+          open={open}
+          onDismissal={cancel}
+          anchorElement={anchorRef}
+        >
+          <Header>
+            <Title>Confirmation Title</Title>
+          </Header>
+          <VBody>
+            <BodyText>Are you sure you want to confirm this action?</BodyText>
+          </VBody>
+          <Footer>
+            <Spacer />
+            <Button hierarchy="secondary" onClick={cancel}>
+              Cancel
+            </Button>
+            <Button hierarchy="primary" onClick={confirm}>
+              Confirm
+            </Button>
+          </Footer>
+        </PopConfirmComponent>
+      </HStack>
+    </VStack>
+  );
+};