@tcn/ui 0.0.1

package/src/stacks/box/resize_handlers.ts

@@ -0,0 +1,129 @@
+function createVeil() {
+  const veil = window.document.createElement('div');
+  veil.style.position = 'absolute';
+  veil.style.inset = '-500px';
+  veil.style.backgroundColor = 'transparent';
+  veil.style.pointerEvents = 'auto';
+  return veil;
+}
+
+export function createHorizontalResizeHandler(
+  targetRef: React.MutableRefObject<HTMLElement | null>,
+  onWidthResize?: (value: number) => void,
+  onWidthResizeEnd?: (value: number) => void,
+  invert = false,
+  disableDirection = false
+) {
+  return function startHorizontalResize(event: React.MouseEvent) {
+    const box = targetRef.current;
+
+    if (box == null) {
+      return;
+    }
+
+    const veil = createVeil();
+    box.appendChild(veil);
+
+    const languageDirection = window.getComputedStyle(box).direction;
+    const finalInvert =
+      languageDirection === 'rtl' && !disableDirection ? !invert : invert;
+    const direction = finalInvert ? -1 : 1;
+
+    const startX = event.clientX;
+    const startRect = box.getBoundingClientRect();
+    let width = startRect.width;
+
+    const drag = (event: MouseEvent) => {
+      const deltaX = direction * (event.clientX - startX);
+      const newWidth = startRect.width + deltaX;
+
+      width = newWidth;
+
+      box.style.width = `${newWidth}px`;
+      onWidthResize && onWidthResize(newWidth);
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    const mouseEnter = (event: MouseEvent) => {
+      if (event.buttons === 0) {
+        endDrag();
+      }
+    };
+
+    const endDrag = () => {
+      box.removeChild(veil);
+
+      document.body.removeEventListener('mousemove', drag);
+      document.body.removeEventListener('mouseup', endDrag);
+      document.body.removeEventListener('mouseenter', mouseEnter);
+      event.stopPropagation();
+      event.preventDefault();
+
+      onWidthResizeEnd && onWidthResizeEnd(width);
+    };
+
+    document.body.addEventListener('mousemove', drag);
+    document.body.addEventListener('mouseup', endDrag);
+    document.body.addEventListener('mouseenter', mouseEnter);
+    event.stopPropagation();
+    event.preventDefault();
+  };
+}
+
+export function createVerticalResizeHandler(
+  targetRef: React.MutableRefObject<HTMLElement | null>,
+  onHeightResize?: (value: number) => void,
+  onHeightResizeEnd?: (value: number) => void,
+  invert = false
+) {
+  const direction = invert ? -1 : 1;
+  return function startVerticalResize(event: React.MouseEvent) {
+    const box = targetRef.current;
+
+    if (box == null) {
+      return;
+    }
+
+    const veil = createVeil();
+    box.appendChild(veil);
+
+    const startY = event.clientY;
+    const startRect = box.getBoundingClientRect();
+    let height = startRect.height;
+
+    const drag = (event: MouseEvent) => {
+      const deltaY = direction * (event.clientY - startY);
+      const newHeight = startRect.height + deltaY;
+      height = newHeight;
+      box.style.height = `${newHeight}px`;
+      onHeightResize && onHeightResize(newHeight);
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    const mouseEnter = (event: MouseEvent) => {
+      if (event.buttons === 0) {
+        endDrag();
+      }
+    };
+
+    const endDrag = () => {
+      box.removeChild(veil);
+
+      document.body.removeEventListener('mousemove', drag);
+      document.body.removeEventListener('mouseup', endDrag);
+      document.body.removeEventListener('mouseenter', mouseEnter);
+      event.stopPropagation();
+      event.preventDefault();
+
+      onHeightResizeEnd && onHeightResizeEnd(height);
+    };
+
+    document.body.addEventListener('mousemove', drag);
+    document.body.addEventListener('mouseup', endDrag);
+    document.body.addEventListener('mouseenter', mouseEnter);
+    event.stopPropagation();
+    event.preventDefault();
+  };
+}

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

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

package/src/stacks/box/right_resize_handle.tsx

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

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

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

package/src/stacks/box/start_resize_handle.tsx

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

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

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

package/src/stacks/box/top_resize_handle.tsx

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

package/src/stacks/collapsible_box.module.css

@@ -0,0 +1,37 @@
+.collapsible-box {
+  transition:
+    max-height 0.5s ease,
+    max-width 0.5s ease;
+  height: 100%;
+  overflow: hidden;
+}
+
+/*** Horizontal Collapsible Box Styles ************************************************************************/
+.collapsible-box[data-collapse-orientation="horizontal"][data-is-collapsed="true"] {
+  max-width: 0;
+}
+
+.collapsible-box[data-collapse-orientation="horizontal"][data-is-resizing="true"] {
+  max-width: unset;
+}
+
+.collapsible-box[data-collapse-orientation="horizontal"][data-is-resizing="false"][data-is-collapsed="false"] {
+  max-width: var(--collapsible-size);
+}
+
+/*** Vertical Collapsible Box Styles ************************************************************************/
+.collapsible-box[data-collapse-orientation="vertical"][data-is-collapsed="true"] {
+  max-height: 0;
+}
+
+.collapsible-box[data-collapse-orientation="vertical"][data-is-collapsed="false"] {
+  max-height: var(--collapsible-size, 100%);
+}
+
+.collapsible-box[data-collapse-orientation="vertical"][data-is-resizing="true"] {
+  max-height: unset;
+}
+
+.collapsible-box[data-collapse-orientation="vertical"][data-is-resizing="false"][data-is-collapsed="false"] {
+  max-height: var(--collapsible-size);
+}

package/src/stacks/collapsible_box.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Button, SlimButton } from '../actions/index.js';
+import { HCollapsibleBox as HComponent } from './h_collapsible_box.js';
+import { VCollapsibleBox as VComponent } from './v_collapsible_box.js';
+import { Title } from '../typography/index.js';
+import { Spacer } from './spacer.js';
+import { HStack } from './h_stack.js';
+import { VStack } from './v_stack.js';
+import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js';
+import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
+
+export default {
+  title: 'CollapsibleBox',
+};
+
+function MyPanel() {
+  return (
+    <VStack height="100%" vAlign="start" style={{ backgroundColor: 'white' }}>
+      <HStack padding="8px">
+        <SlimButton hierarchy="tertiary">
+          <ChevronLeft size="lg" />
+        </SlimButton>
+        <Title emphasis="strong">Foo</Title>
+        <Spacer />
+        <SlimButton size="md" hierarchy="primary">
+          <Plus />
+        </SlimButton>
+      </HStack>
+    </VStack>
+  );
+}
+
+export function CollapsibleBox() {
+  const [hOpen, setHOpen] = React.useState(true);
+  const [vOpen, setVHopen] = React.useState(false);
+  return (
+    <HStack height="800px" minHeight="600px" width="100%" gap="8px">
+      <VStack height="100%" width="flex">
+        <VStack vAlign="center" height="flex" width="flex" gap="8px">
+          <Button onClick={() => setVHopen(c => !c)}>toggle vertical collapse</Button>
+          <Button onClick={() => setHOpen(c => !c)}>toggle horizontal collapse</Button>
+        </VStack>
+        <VComponent open={vOpen} enableResizeOnTop>
+          <MyPanel />
+        </VComponent>
+      </VStack>
+      <HComponent open={hOpen} enableResizeOnStart>
+        <MyPanel />
+      </HComponent>
+    </HStack>
+  );
+}
+
+export function VerticalCollapsibleBox() {
+  const [open, setOpen] = React.useState(true);
+  return (
+    <VStack height="800px" minHeight="600px">
+      <HStack height="flex" hAlign="end" gap="16px">
+        <Button onClick={() => setOpen(c => !c)}>toggle collapse</Button>
+      </HStack>
+      <VComponent open={open} enableResizeOnTop defaultHeight="300px">
+        <MyPanel />
+      </VComponent>
+    </VStack>
+  );
+}

package/src/stacks/demo.module.css

@@ -0,0 +1,4 @@
+.playlist > :nth-child(2n) {
+  background-color: #e7e7e7;
+  border-radius: 4px;
+}

package/src/stacks/demo.stories.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { HStack } from './h_stack.js';
+import { Rect } from './story_components/rect.js';
+import { VStack } from './v_stack.js';
+import { BodyText, Headline, Subheadline, Title } from '../typography/index.js';
+import { MoreHorizontalIcon } from '@tcn/icons/more_horizontal_icon.js';
+import { PlayFilledIcon } from '@tcn/icons/play_filled_icon.js';
+import { ShuffleIcon } from '@tcn/icons/shuffle_icon.js';
+import { Button, SlimButton } from '../actions/index.js';
+import { CloudDownloadIcon } from '@tcn/icons/cloud_download_icon.js';
+import { Spacer } from './spacer.js';
+import styles from './demo.module.css';
+
+export default {
+  title: 'Stacks/Demo',
+};
+
+export function Track() {
+  return (
+    <HStack paddingBlock="4px" paddingInline="10px" gap="8px">
+      <Rect width="40px" height="40px" color="#d8d8d8"></Rect>
+      <VStack width="flex" hAlign="start">
+        <Headline>Cornfield</Headline>
+        <Subheadline hierarchy="tertiary">Intersteller (2014)</Subheadline>
+      </VStack>
+      <HStack width="flex" growWeight={2}>
+        <BodyText hierarchy="tertiary">Hans Zimmer</BodyText>
+      </HStack>
+      <HStack width="auto" gap="8px">
+        <BodyText>2:00</BodyText>
+        <SlimButton hierarchy="tertiary" gap="4px">
+          <MoreHorizontalIcon size="lg" />
+        </SlimButton>
+      </HStack>
+    </HStack>
+  );
+}
+
+export function Playing() {
+  return (
+    <VStack height="200px">
+      <HStack height="100%" minWidth="700px" maxWidth="850px" hAlign="start" gap="16px">
+        <Rect
+          width="200px"
+          height="200px"
+          color="#d9d9d9"
+          style={{ borderRadius: '8px', boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)' }}
+        ></Rect>
+        <VStack width="flex" height="100%" hAlign="start">
+          <Title style={{ fontSize: '24px' }}>The Score</Title>
+          <Title hierarchy="tertiary" style={{ fontSize: '24px' }}>
+            Hans Zimmer
+          </Title>
+          <BodyText size="sm" hierarchy="tertiary">
+            Updated 5 days ago
+          </BodyText>
+          <HStack
+            maxHeight="68px"
+            vAlign="start"
+            overflowY="hidden"
+            height="flex"
+            width="auto"
+            gap="8px"
+          >
+            <BodyText size="md" hierarchy="tertiary">
+              The film composer Hans Zimmer once said that he didn’t write music to tell
+              you what to feel, only that it was time to feel. And as the culture
+              continues to move away from the...
+            </BodyText>
+            <VStack height="100%" width="auto" vAlign="end">
+              <Button hierarchy="tertiary">more</Button>
+            </VStack>
+          </HStack>
+          <Spacer />
+          <HStack gap="8px">
+            <Button minWidth="100px" hierarchy="primary" gap="4px">
+              <PlayFilledIcon flipOnRtl size="lg" />
+              Play
+            </Button>
+            <Button minWidth="100px" hierarchy="primary" gap="4px">
+              <ShuffleIcon flipOnRtl size="lg" />
+              Shuffle
+            </Button>
+            <Spacer />
+            <HStack width="auto" gap="8px">
+              <SlimButton hierarchy="secondary" gap="4px">
+                <CloudDownloadIcon size="lg" />
+              </SlimButton>
+              <SlimButton hierarchy="secondary" gap="4px">
+                <MoreHorizontalIcon size="lg" />
+              </SlimButton>
+            </HStack>
+          </HStack>
+        </VStack>
+      </HStack>
+    </VStack>
+  );
+}
+
+export function Playlist() {
+  return (
+    <VStack height="100%" minWidth="700px" maxWidth="850px">
+      <Playing />
+      <Spacer height="40px" />
+      <VStack height="flex" className={styles.playlist} width="100%" overflowY="auto">
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+        <Track />
+      </VStack>
+    </VStack>
+  );
+}

package/src/stacks/h_collapsible_box.tsx

@@ -0,0 +1,48 @@
+import React, { useLayoutEffect } from 'react';
+import { useForkRef } from '../utils/index.js';
+import classNames from 'classnames';
+import { Box, BoxProps } from './box/box.js';
+import styles from './collapsible_box.module.css';
+import { useIsCollapsed } from './utils/use_is_collapsed.js';
+
+export interface HCollapsibleBoxProps extends BoxProps {
+  open?: boolean;
+  defaultWidth?: string;
+}
+
+export const HCollapsibleBox = React.forwardRef(function CollapsibleBox(
+  { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);
+  const forkRef = useForkRef(ref, collapsibleRef);
+  const [resizing, setIsResizing] = React.useState(false);
+
+  useLayoutEffect(() => {
+    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);
+  }, [defaultWidth]);
+
+  const isCollapsed = useIsCollapsed(open, collapsibleRef);
+  const children = isCollapsed && !open ? null : props.children;
+
+  return (
+    <Box
+      ref={forkRef}
+      {...props}
+      data-is-collapsed={!open}
+      data-collapse-orientation="horizontal"
+      data-is-resizing={resizing}
+      onWidthResize={width => {
+        setIsResizing(true);
+        props.onWidthResize?.(width);
+      }}
+      onWidthResizeEnd={width => {
+        setIsResizing(false);
+        props.onWidthResizeEnd?.(width);
+        collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);
+      }}
+      className={classNames(props.className, styles['collapsible-box'])}
+      children={children}
+    />
+  );
+});