@tcn/ui 0.0.1

package/src/stacks/z_stack.tsx

@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import React, { HTMLAttributes } from 'react';
+import { removeUndefinedProperties } from './utils/remove_undefined_properties.js';
+import { CommonProps } from './types/common.js';
+import { StackStyleProps } from './types/styles.js';
+import styles from './stack.module.css';
+import { isCustomSizeProp } from './utils/isCustomSizeProp.js';
+
+export type ZStackOwnProps = CommonProps &
+  StackStyleProps & {
+    overflow?: 'hidden' | 'visible';
+  };
+
+export interface ZStackProps<T extends HTMLElement = HTMLElement>
+  extends ZStackOwnProps,
+    HTMLAttributes<T> {
+  as?: string;
+  children?: React.ReactNode;
+}
+
+export const ZStack = React.forwardRef(function ZStack<T extends HTMLElement>(
+  {
+    as = 'div',
+    children,
+    style,
+    hAlign = 'center',
+    vAlign = 'center',
+    inline,
+    width = 'default',
+    minWidth,
+    maxWidth,
+    height = 'default',
+    minHeight,
+    maxHeight,
+    growWeight: flexGrow,
+    shrinkWeight: flexShrink,
+    padding,
+    paddingBlock,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingTop,
+    paddingBottom,
+    margin,
+    marginBlock,
+    marginInline,
+    marginInlineStart,
+    marginInlineEnd,
+    marginTop,
+    marginBottom,
+    zIndex,
+    className,
+    overflow,
+    ...attr
+  }: ZStackProps<T>,
+  ref: React.Ref<T>
+) {
+  const As = as as React.ElementType;
+  const defaultStyles = {
+    minWidth,
+    width: !isCustomSizeProp(width) ? width : undefined,
+    maxWidth,
+    minHeight,
+    height: !isCustomSizeProp(height) ? height : undefined,
+    maxHeight,
+    flexGrow,
+    flexShrink,
+    zIndex,
+    overflow,
+    padding,
+    paddingBlock,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingTop,
+    paddingBottom,
+    margin,
+    marginBlock,
+    marginInline,
+    marginInlineStart,
+    marginInlineEnd,
+    marginTop,
+    marginBottom,
+  };
+
+  return (
+    <As
+      ref={ref}
+      style={{
+        ...removeUndefinedProperties(defaultStyles),
+        ...style,
+      }}
+      className={classNames(styles['z-stack'], className, 'z-stack', 'stack')}
+      data-inline={Boolean(inline)}
+      data-v-alignment={vAlign}
+      data-h-alignment={hAlign}
+      data-height={height}
+      data-width={width}
+      {...attr}
+    >
+      {typeof children === 'string' ? <span>{children}</span> : children}
+    </As>
+  );
+});

package/src/surfaces/alert/alert.stories.tsx

@@ -0,0 +1,33 @@
+import { ZStack } from '../../stacks/z_stack.js';
+import React, { useState } from 'react';
+import { Alert } from './alert.js';
+import { Button } from '../../actions/index.js';
+import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
+
+export default {
+  title: 'Alert',
+};
+
+export function Baseline() {
+  const [showAlert, setShowAlert] = useState(false);
+
+  function open() {
+    setShowAlert(true);
+  }
+
+  function close() {
+    setShowAlert(false);
+  }
+  return (
+    <ZStack>
+      <Button onClick={open}>Open Alert</Button>
+      <Alert
+        title="STOP"
+        graphic={<AlertTriangleIcon color="#ff6565" width="80px" height="80px" />}
+        description="This is where you should say something helpful to the user."
+        open={showAlert}
+        onAccept={close}
+      />
+    </ZStack>
+  );
+}

package/src/surfaces/alert/alert.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Button } from '../../actions/index.js';
+import { Confirm, ConfirmProps } from '../confirm/confirm.js';
+
+export interface AlertProps extends Omit<ConfirmProps, 'actions'> {
+  open?: boolean;
+  graphic?: React.ReactNode;
+  title?: string;
+  description?: string;
+  onAccept?: () => void;
+}
+
+export const Alert = React.forwardRef(function Alert(
+  { className, onAccept, ...props }: AlertProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  return (
+    <Confirm
+      ref={ref}
+      className={classNames(className, 'alert')}
+      {...props}
+      actions={
+        <Button onClick={onAccept} hierarchy="primary" width="100%">
+          OK
+        </Button>
+      }
+    />
+  );
+});

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

@@ -0,0 +1,5 @@
+.card {
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
+  padding: 16px;
+  gap: 8px;
+}

package/src/surfaces/card/card.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 './card.module.css';
+
+export interface CardProps extends Omit<VStackProps, 'as' | 'children'> {
+  children?: React.ReactNode;
+}
+
+export const Card = React.forwardRef<HTMLElement, CardProps>(function VPanel(
+  { children, className, ...props }: CardProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as="section"
+      className={classNames(className, styles.card, 'card')}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/surfaces/confirm/confirm.module.css

@@ -0,0 +1,40 @@
+.confirm {
+  border-radius: 16px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
+  background-color: var(--body-color);
+  text-align: center;
+  padding: 16px;
+  width: 250px;
+  height: auto;
+}
+
+.confirm[data-shake="true"] {
+  animation: shake 0.3s ease-in-out;
+  animation-iteration-count: 1;
+}
+
+.actions > button {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-10px);
+  }
+  40% {
+    transform: translateX(10px);
+  }
+  60% {
+    transform: translateX(-10px);
+  }
+  80% {
+    transform: translateX(10px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/src/surfaces/confirm/confirm.stories.tsx

@@ -0,0 +1,43 @@
+import { ZStack } from '../../stacks/z_stack.js';
+import React, { useState } from 'react';
+import { Button } from '../../actions/index.js';
+import { Confirm } from './confirm.js';
+import { BulbIcon } from '@tcn/icons/bulb_icon.js';
+
+export default {
+  title: 'Confirm',
+};
+
+export function Baseline() {
+  const [showAlert, setShowAlert] = useState(false);
+
+  function open() {
+    setShowAlert(true);
+  }
+
+  function close() {
+    setShowAlert(false);
+  }
+
+  return (
+    <ZStack>
+      <Button onClick={open}>Show Tip</Button>
+      <Confirm
+        title="Tip"
+        description="This is where you should say something helpful to the user."
+        graphic={<BulbIcon color="#e48139" width="100px" height="100px" />}
+        open={showAlert}
+        actions={
+          <>
+            <Button hierarchy="primary" width="100%" onClick={close}>
+              OK
+            </Button>
+            <Button width="100%" onClick={close}>
+              Cancel
+            </Button>
+          </>
+        }
+      />
+    </ZStack>
+  );
+}

package/src/surfaces/confirm/confirm.tsx

@@ -0,0 +1,91 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { Portal } from '../../overlay/portal/portal.js';
+import { BodyText, Title } from '../../typography/index.js';
+import styles from './confirm.module.css';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+
+export interface ConfirmProps extends React.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  graphic?: React.ReactNode;
+  title?: string;
+  description?: string;
+  actions?: React.ReactNode;
+  veilProps?: BoxProps;
+}
+
+export const Confirm = React.forwardRef(function Confirm(
+  {
+    open,
+    graphic,
+    title,
+    description,
+    actions,
+    veilProps,
+    className,
+    ...props
+  }: ConfirmProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const isMounted = useRef(false);
+  const [shake, setShake] = useState(false);
+
+  useLayoutEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (shake && isMounted.current) {
+      const id = window.setTimeout(() => {
+        setShake(false);
+      }, 600);
+
+      return () => window.clearTimeout(id);
+    }
+  }, [shake]);
+
+  function shakeConfirm() {
+    setShake(true);
+  }
+
+  return (
+    <>
+      {open && (
+        <Portal>
+          <ZStack height="100%" style={{ position: 'fixed' }}>
+            <Box onClick={shakeConfirm} {...veilProps} height="100%"></Box>
+            <div
+              ref={ref}
+              className={classNames(styles.confirm, className, 'confirm')}
+              data-shake={shake}
+              {...props}
+            >
+              <VStack hAlign="center">
+                {graphic}
+                <Title className="confirm-title" emphasis="strong" size="sm">
+                  {title}
+                </Title>
+                <BodyText className="confirm-description" hierarchy="tertiary">
+                  {description}
+                </BodyText>
+                <Spacer height="16px" />
+                <Box
+                  className={classNames(styles.actions, 'confirm-actions')}
+                  height="auto"
+                >
+                  {actions}
+                </Box>
+              </VStack>
+            </div>
+          </ZStack>
+        </Portal>
+      )}
+    </>
+  );
+});

package/src/surfaces/index.ts

@@ -0,0 +1,10 @@
+export * from './alert/alert.js';
+export * from './card/card.js';
+export * from './confirm/confirm.js';
+export * from './modal/modal.js';
+export * from './page/h_page.js';
+export * from './page/v_page.js';
+export * from './panel/h_panel.js';
+export * from './panel/v_panel.js';
+export * from './popover/popover.js';
+export * from './window/window.js';

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

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

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

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

package/src/surfaces/modal/modal.tsx

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

package/src/surfaces/page/h_page.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import React from 'react';
+import styles from './page.module.css';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+
+export interface HPageProps extends Omit<HStackProps, 'as'> {}
+
+export const HPage = React.forwardRef<HTMLElement, HPageProps>(function HPage(
+  { children, className, ...props }: HPageProps,
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      as="main"
+      className={classNames(styles.page, className, 'page')}
+      vAlign="start"
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/surfaces/page/page.module.css

@@ -0,0 +1,12 @@
+.page {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  z-index: 1;
+  gap: var(--gap);
+  padding: var(--padding);
+}
+
+.page > :global(.stack) {
+  gap: var(--gap);
+}

package/src/surfaces/page/v_page.tsx

@@ -0,0 +1,22 @@
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './page.module.css';
+
+export interface VPageProps extends Omit<VStackProps, 'as'> {}
+
+export const VPage = React.forwardRef<HTMLElement, VPageProps>(function VPage(
+  { children, className, ...props }: VPageProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as="main"
+      className={classNames(styles.page, className, 'page')}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/surfaces/panel/h_panel.tsx

@@ -0,0 +1,59 @@
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+import { Alignment } from '../../stacks/types/alignment.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './panel.module.css';
+import { HStack } from '../../stacks/h_stack.js';
+
+export interface HPanelProps extends Omit<BoxProps, 'as'> {
+  vAlign?: Alignment;
+  hAlign?: Alignment;
+}
+
+export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel(
+  {
+    children,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    hAlign,
+    vAlign = 'start',
+    className,
+    ...props
+  }: HPanelProps,
+  ref
+) {
+  return (
+    <Box
+      ref={ref}
+      width={width}
+      height={height}
+      minWidth={minWidth}
+      maxWidth={maxWidth}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      data-h-alignment={hAlign}
+      data-v-alignment={vAlign}
+      className={classNames(className, styles['panel'], 'panel')}
+      {...props}
+    >
+      <HStack
+        as="section"
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        hAlign={hAlign}
+        vAlign={vAlign}
+        ref={ref}
+        className={classNames(styles['panel-stack'], className, 'panel-stack')}
+        zIndex={0}
+      >
+        {children}
+      </HStack>
+    </Box>
+  );
+});

package/src/surfaces/panel/panel.module.css

@@ -0,0 +1,14 @@
+.panel {
+  background-color: #ffffff;
+  border-radius: 4px;
+}
+
+.panel-stack {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.page-stack > :global(.stack) {
+  gap: var(--gap);
+}

package/src/surfaces/panel/v_panel.tsx

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

package/src/surfaces/popover/popover.tsx

@@ -0,0 +1,53 @@
+import classnames from 'classnames';
+import { VStack } from '../../stacks/v_stack.js';
+import { Popper, type PopperProps } from '../../overlay/popper/popper.js';
+import { VStackProps } from '../../stacks/v_stack.js';
+
+export interface PopoverProps extends Omit<PopperProps, 'children'>, VStackProps {}
+
+export function Popover({
+  anchorElement,
+  verticalAnchor,
+  verticalOrigin,
+  verticalOffset,
+  horizontalAnchor,
+  horizontalOrigin,
+  horizontalOffset,
+  open,
+  onClose,
+  restoreFocus,
+  veil,
+  onVeilClick,
+  clickAwayRefs,
+  isClickAwayException,
+  isScrollAwayException,
+  disableClickAway,
+  children,
+  className,
+  ...props
+}: PopoverProps) {
+  return (
+    <Popper
+      anchorElement={anchorElement}
+      verticalAnchor={verticalAnchor}
+      verticalOrigin={verticalOrigin}
+      verticalOffset={verticalOffset}
+      horizontalAnchor={horizontalAnchor}
+      horizontalOrigin={horizontalOrigin}
+      horizontalOffset={horizontalOffset}
+      restoreFocus={restoreFocus}
+      veil={veil}
+      onVeilClick={onVeilClick}
+      clickAwayRefs={clickAwayRefs}
+      isClickAwayException={isClickAwayException}
+      isScrollAwayException={isScrollAwayException}
+      disableClickAway={disableClickAway}
+      open={open}
+      onClose={onClose}
+    >
+      <VStack inline width="auto" className={classnames(className, 'popover')} {...props}>
+        {children}
+      </VStack>
+    </Popper>
+  );
+}

package/src/surfaces/window/window.module.css

@@ -0,0 +1,5 @@
+.window {
+  /* Base window styles */
+  position: relative;
+  box-sizing: border-box;
+}