@tcn/ui 0.0.1

package/src/stacks/h_stack.stories.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Meta } from '@storybook/react-vite';
+import { Circle } from './story_components/circle.js';
+import { HStack, HStackProps } from './h_stack.js';
+import { HorizontalBorder } from './story_components/horizontal_border.js';
+import { Spacer } from './spacer.js';
+import { Rect } from './story_components/rect.js';
+import { ZStack } from './z_stack.js';
+
+const meta: Meta<HStackProps> = {
+  title: 'HStack',
+  component: HStack,
+  args: {
+    minWidth: '400px',
+    width: '400px',
+    maxWidth: '400px',
+    minHeight: '150px',
+    height: '150px',
+    maxHeight: '150px',
+  },
+  argTypes: {
+    as: { table: { disable: true } },
+    children: { table: { disable: true } },
+    zIndex: { table: { disable: true } },
+    className: { table: { disable: true } },
+    inline: { table: { disable: true } },
+    style: { table: { disable: true } },
+    overflowX: {
+      options: ['auto', 'hidden', 'visible'],
+      control: { type: 'radio' },
+    },
+    overflowY: {
+      options: ['auto', 'hidden', 'visible'],
+      control: { type: 'radio' },
+    },
+    vAlign: {
+      options: ['start', 'center', 'end'],
+      control: { type: 'radio' },
+    },
+    hAlign: {
+      options: ['start', 'center', 'end'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+
+export function Default(props: HStackProps) {
+  return (
+    <ZStack>
+      <HorizontalBorder>
+        <HStack {...props}>
+          <Rect
+            width="75px"
+            height="75px"
+            onClick={() => {
+              // biome-ignore lint/suspicious/noConsole: Storybook
+              console.log('hello');
+            }}
+          />
+          <Spacer width="25px" />
+          <Circle size="75px" />
+        </HStack>
+      </HorizontalBorder>
+    </ZStack>
+  );
+}
+
+export function ManyChildren(props: HStackProps) {
+  return (
+    <ZStack>
+      <HorizontalBorder>
+        <HStack {...props} height="auto">
+          <Rect width="75px" height="75px" />
+          <Spacer width="25px" />
+          <Circle size="75px" />
+          <Spacer width="25px" />
+          <Rect width="75px" height="75px" />
+          <Spacer width="25px" />
+          <Circle size="75px" />
+          <Spacer width="25px" />
+          <Rect width="75px" height="75px" />
+          <Spacer width="25px" />
+          <Circle size="75px" />
+          <Spacer width="25px" />
+          <Rect width="75px" height="75px" />
+          <Spacer width="25px" />
+          <Circle size="75px" />
+          <Spacer width="25px" />
+          <Rect width="75px" height="75px" />
+          <Spacer width="25px" />
+          <Circle size="75px" />
+        </HStack>
+      </HorizontalBorder>
+    </ZStack>
+  );
+}
+
+export function Padding() {
+  return (
+    <HStack height="auto" style={{ border: '1px dashed #ccc' }} padding="30px">
+      <Circle></Circle>
+      <Circle></Circle>
+    </HStack>
+  );
+}

package/src/stacks/h_stack.tsx

@@ -0,0 +1,114 @@
+import classNames from 'classnames';
+import React, { HTMLAttributes } from 'react';
+import { removeUndefinedProperties } from './utils/remove_undefined_properties.js';
+import { CommonProps } from './types/common.js';
+import { HorizontalProps, StackStyleProps } from './types/styles.js';
+import styles from './stack.module.css';
+import { isCustomSizeProp } from './utils/isCustomSizeProp.js';
+
+export type HStackOwnProps = CommonProps & StackStyleProps & HorizontalProps;
+export interface HStackProps<T extends HTMLElement = HTMLElement>
+  extends HStackOwnProps,
+    HTMLAttributes<T> {
+  as?: string;
+  children?: React.ReactNode;
+}
+
+export const HStack = React.forwardRef(function HStack<T extends HTMLElement>(
+  {
+    as = 'div',
+    children,
+    style,
+    className,
+    hAlign = 'start',
+    vAlign = 'center',
+    inline,
+    allowFlow,
+    width = 'default',
+    minWidth,
+    maxWidth,
+    height = 'default',
+    growWeight: flexGrow,
+    shrinkWeight: flexShrink,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingBlock,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingTop,
+    paddingBottom,
+    margin,
+    marginBlock,
+    marginInline,
+    marginInlineStart,
+    marginInlineEnd,
+    marginTop,
+    marginBottom,
+    zIndex,
+    overflowX,
+    overflowY,
+    gap,
+    rowGap,
+    columnGap,
+    ...attr
+  }: HStackProps<T>,
+  ref: React.Ref<T>
+) {
+  const As = as as React.ElementType;
+  const defaultStyles: any = {
+    minWidth,
+    width: !isCustomSizeProp(width) ? width : undefined,
+    maxWidth,
+    minHeight,
+    height: !isCustomSizeProp(height) ? height : undefined,
+    maxHeight,
+    flexGrow,
+    flexShrink,
+    zIndex,
+    overflowX,
+    overflowY,
+    padding,
+    paddingBlock,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingTop,
+    paddingBottom,
+    margin,
+    marginBlock,
+    marginInline,
+    marginInlineStart,
+    marginInlineEnd,
+    marginTop,
+    marginBottom,
+    gap,
+    rowGap,
+    columnGap,
+  };
+
+  const finalStyles: any = {
+    ...removeUndefinedProperties(defaultStyles),
+    ...style,
+  };
+
+  return (
+    <As
+      ref={ref}
+      className={classNames(styles['h-stack'], className, 'h-stack', 'stack')}
+      style={finalStyles}
+      data-inline={Boolean(inline)}
+      data-allow-flow={Boolean(allowFlow)}
+      data-v-alignment={vAlign}
+      data-h-alignment={hAlign}
+      data-height={height}
+      data-width={width}
+      data-overflow-x={overflowX}
+      data-overflow-y={overflowY}
+      {...attr}
+    >
+      {children}
+    </As>
+  );
+});

package/src/stacks/index.ts

@@ -0,0 +1,11 @@
+export * from './box/box.js';
+export * from './types/alignment.js';
+export * from './types/as.js';
+export * from './types/common.js';
+export * from './types/styles.js';
+export * from './h_collapsible_box.js';
+export * from './h_stack.js';
+export * from './spacer.js';
+export * from './v_collapsible_box.js';
+export * from './v_stack.js';
+export * from './z_stack.js';

package/src/stacks/spacer.tsx

@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export interface SpacerProps {
+  width?: React.CSSProperties['width'];
+  height?: React.CSSProperties['height'];
+  fullHeight?: boolean;
+  fullWidth?: boolean;
+  fillSpaceWeight?: number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spacer(
+  {
+    width = 'auto',
+    height = 'auto',
+    fullHeight = false,
+    fullWidth = false,
+    fillSpaceWeight = 1,
+    style,
+    className,
+  }: SpacerProps,
+  ref
+) {
+  const flex = width === 'auto' && height === 'auto' ? fillSpaceWeight : undefined;
+  const finalWidth = fullWidth ? '100%' : width;
+  const finalHeight = fullHeight ? '100%' : height;
+  return (
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        position: 'relative',
+        width: finalWidth,
+        minWidth: finalWidth,
+        height: finalHeight,
+        minHeight: finalHeight,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        zIndex: 1,
+        flex,
+      }}
+      className={classNames('spacer', className)}
+    ></div>
+  );
+});

package/src/stacks/stack.module.css

@@ -0,0 +1,357 @@
+/*
+HStack CSS
+*/
+
+.h-stack,
+.v-stack {
+  display: flex;
+}
+
+.h-stack[data-inline="true"],
+.v-stack[data-inline="true"] {
+  display: inline-flex;
+}
+
+.z-stack {
+  display: grid;
+}
+
+.z-stack[data-inline="true"] {
+  display: inline-grid;
+}
+
+.box[data-height="flex"] {
+  height: auto;
+}
+
+:where(.h-stack) {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: auto;
+  overflow-x: visible;
+  overflow-y: visible;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+:where(.v-stack) {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: auto;
+  overflow-x: visible;
+  overflow-y: visible;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  flex-grow: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+:where(.z-stack) {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  box-sizing: border-box;
+}
+
+:where(.box) {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  height: auto;
+  max-height: 100%;
+  z-index: 0;
+  position: relative;
+  box-sizing: border-box;
+  transform: none;
+}
+
+:where(.h-stack[data-inline="true"]) {
+  display: inline-flex;
+}
+
+:where(.h-stack[data-allow-flow="true"]) {
+  flex-wrap: wrap;
+}
+
+:where(.h-stack[data-v-alignment="start"]) {
+  align-items: flex-start;
+}
+
+:where(.h-stack[data-v-alignment="center"]) {
+  align-items: center;
+}
+
+:where(.h-stack[data-v-alignment="end"]) {
+  align-items: flex-end;
+}
+
+:where(.h-stack[data-h-alignment="start"]) {
+  justify-content: flex-start;
+}
+
+:where(.h-stack[data-h-alignment="center"]) {
+  justify-content: center;
+}
+
+:where(.h-stack[data-h-alignment="end"]) {
+  justify-content: flex-end;
+}
+
+:where(.h-stack > *) {
+  position: relative;
+}
+
+:where(.h-stack > .h-stack[data-width="flex"]),
+:where(.h-stack > .z-stack[data-width="flex"]),
+:where(.h-stack > .v-stack[data-width="flex"]),
+:where(.h-stack > .stack-flex[data-width="flex"]) {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0%;
+  width: auto;
+}
+
+:where(.reveal-layout .h-stack:after),
+:where(.reveal-h-stack .h-stack:after) {
+  content: "";
+  position: absolute;
+  inset: 0;
+  outline: 1px dashed rgb(0, 123, 160);
+  pointer-events: none;
+  z-index: 1;
+}
+
+:where(.v-stack[data-inline="true"]) {
+  display: inline-flex;
+}
+
+:where(.v-stack[data-allow-flow="true"]) {
+  flex-wrap: wrap;
+}
+
+:where(.v-stack[data-h-alignment="start"]) {
+  align-items: flex-start;
+}
+
+:where(.v-stack[data-h-alignment="center"]) {
+  align-items: center;
+}
+
+:where(.v-stack[data-h-alignment="end"]) {
+  align-items: flex-end;
+}
+
+:where(.v-stack[data-v-alignment="start"]) {
+  justify-content: flex-start;
+}
+
+:where(.v-stack[data-v-alignment="center"]) {
+  justify-content: center;
+}
+
+:where(.v-stack[data-v-alignment="end"]) {
+  justify-content: flex-end;
+}
+
+:where(.v-stack > *) {
+  position: relative;
+}
+
+:where(.v-stack[data-height="auto"]) {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+
+:where(.v-stack > .h-stack[data-height="flex"]),
+:where(.v-stack > .z-stack[data-height="flex"]),
+:where(.v-stack > .v-stack[data-height="flex"]),
+:where(.v-stack > .stack-flex[data-height="flex"]) {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0%;
+  height: auto;
+}
+
+:where(.v-stack[data-height="auto"] > .h-stack[data-height="flex"]),
+:where(.v-stack[data-height="auto"] > .z-stack[data-height="flex"]),
+:where(.v-stack[data-height="auto"] > .v-stack[data-height="flex"]),
+:where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]) {
+  flex-basis: auto;
+}
+
+:where(.v-stack[data-height="auto"] .h-stack[data-height="default"]),
+:where(.v-stack[data-height="auto"] .z-stack[data-height="default"]),
+:where(.v-stack[data-height="auto"] .v-stack[data-height="default"]),
+:where(.v-stack[data-height="auto"] .stack-flex[data-height="default"]) {
+  height: auto;
+  flex-basis: auto;
+}
+
+:where(.reveal-layout .v-stack:after),
+:where(.reveal-v-stack .v-stack:after) {
+  content: "";
+  position: absolute;
+  inset: 0;
+  outline: 1px dashed rgb(0, 165, 152);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/*
+ZStack CSS
+*/
+
+:where(.z-stack > *) {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  grid-area: 1 / 1 / 2 / 2;
+  box-sizing: border-box;
+}
+
+:where(.z-stack[data-h-alignment="start"] > *) {
+  justify-self: start;
+}
+
+:where(.z-stack[data-h-alignment="center"] > *) {
+  justify-self: center;
+}
+
+:where(.z-stack[data-h-alignment="end"] > *) {
+  justify-self: end;
+}
+
+:where(.z-stack[data-v-alignment="start"] > *) {
+  align-self: start;
+}
+
+:where(.z-stack[data-v-alignment="center"] > *) {
+  align-self: center;
+}
+
+:where(.z-stack[data-v-alignment="end"] > *) {
+  align-self: end;
+}
+
+:where(.z-stack > .h-stack[data-height="flex"]),
+:where(.z-stack > .v-stack[data-height="flex"]),
+:where(.z-stack > .stack-flex[data-height="default"]) {
+  height: 100%;
+}
+
+:where(.z-stack > .h-stack[data-width="flex"]),
+:where(.z-stack > .v-stack[data-width="flex"]),
+:where(.z-stack > .stack-flex[data-width="default"]) {
+  width: 100%;
+}
+
+:where(.reveal-layout .z-stack:after),
+:where(.reveal-z-stack .z-stack:after) {
+  content: "";
+  position: absolute;
+  inset: 0;
+  outline: 1px dashed rgb(119, 0, 255);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/*
+Defaults CSS
+*/
+
+:where(.h-stack > .h-stack[data-width="default"]),
+:where(.h-stack > .z-stack[data-width="default"]),
+:where(.h-stack > .v-stack[data-width="default"]),
+:where(.h-stack > .stack-flex[data-width="default"]),
+:where(.h-stack > .box[data-width="default"]) {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0%;
+  width: auto;
+}
+
+:where(.h-stack[data-height="auto"] .h-stack[data-height="default"]),
+:where(.h-stack[data-height="auto"] .z-stack[data-height="default"]),
+:where(.h-stack[data-height="auto"] .v-stack[data-height="default"]),
+:where(.h-stack[data-height="auto"] .stack-flex[data-height="default"]) {
+  height: auto;
+}
+
+:where(.h-stack[data-width="auto"]) {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: auto;
+  flex-basis: auto;
+}
+
+:where(.h-stack[data-width="auto"] > .h-stack[data-width="flex"]),
+:where(.h-stack[data-width="auto"] > .z-stack[data-width="flex"]),
+:where(.h-stack[data-width="auto"] > .v-stack[data-width="flex"]),
+:where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]) {
+  flex-basis: auto;
+}
+
+:where(.v-stack > .h-stack[data-height="default"]),
+:where(.v-stack > .z-stack[data-height="default"]),
+:where(.v-stack > .v-stack[data-height="default"]),
+:where(.v-stack > .stack-flex[data-height="default"]) {
+  flex-basis: auto;
+  height: auto;
+}
+
+:where(.v-stack[data-overflow-y="auto"]:not([data-height="auto"])),
+:where(.v-stack[data-overflow-y="scroll"]:not([data-height="auto"])),
+:where(.h-stack[data-overflow-y="auto"]:not([data-width="auto"])),
+:where(.h-stack[data-overflow-y="scroll"]:not([data-width="auto"])) {
+  flex-shrink: 1;
+}
+
+/* Firefox has a bug with backdrop filter and translateZ.
+So we only want to turn this on if somebody wants to enable resizing.
+Otherwise other ui components break when composed within a box. */
+:where(.box[data-enabled-resize-on-start="true"]),
+:where(.box[data-enabled-resize-on-end="true"]),
+:where(.box[data-enabled-resize-on-top="true"]),
+:where(.box[data-enabled-resize-on-bottom="true"]),
+:where(.box[data-enabled-resize-on-left="true"]),
+:where(.box[data-enabled-resize-on-right="true"]) {
+  transform: translateZ(0);
+}
+
+:where(.box[data-width="flex"]) {
+  width: auto;
+}
+
+:where(:global(.reveal-layout) .box:after),
+:where(:global(.reveal-box) .box:after) {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px dashed rgb(138, 138, 138);
+  pointer-events: none;
+  z-index: 1;
+}