@tcn/ui 0.0.1

package/src/stacks/utils/extract_style_props.ts

@@ -0,0 +1,323 @@
+import type { CSSProperties } from 'react';
+
+// Comprehensive list of valid CSS properties in camelCase format
+const VALID_CSS_PROPERTIES = new Set([
+  // Layout properties
+  'display',
+  'position',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'zIndex',
+  'float',
+  'clear',
+  'overflow',
+  'overflowX',
+  'overflowY',
+  'clip',
+
+  // Box model properties
+  'width',
+  'minWidth',
+  'maxWidth',
+  'height',
+  'minHeight',
+  'maxHeight',
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'marginInline',
+  'marginInlineStart',
+  'marginInlineEnd',
+  'marginBlock',
+  'marginBlockStart',
+  'marginBlockEnd',
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingInline',
+  'paddingInlineStart',
+  'paddingInlineEnd',
+  'paddingBlock',
+  'paddingBlockStart',
+  'paddingBlockEnd',
+  'border',
+  'borderWidth',
+  'borderStyle',
+  'borderColor',
+  'borderRadius',
+  'borderTop',
+  'borderTopWidth',
+  'borderTopStyle',
+  'borderTopColor',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderRight',
+  'borderRightWidth',
+  'borderRightStyle',
+  'borderRightColor',
+  'borderBottom',
+  'borderBottomWidth',
+  'borderBottomStyle',
+  'borderBottomColor',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderLeft',
+  'borderLeftWidth',
+  'borderLeftStyle',
+  'borderLeftColor',
+  'borderInline',
+  'borderInlineStart',
+  'borderInlineEnd',
+  'borderBlock',
+  'borderBlockStart',
+  'borderBlockEnd',
+  'outline',
+  'outlineWidth',
+  'outlineStyle',
+  'outlineColor',
+  'outlineOffset',
+  'boxShadow',
+  'boxSizing',
+
+  // Flexbox properties
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  'flexBasis',
+  'flexDirection',
+  'flexWrap',
+  'justifyContent',
+  'alignItems',
+  'alignContent',
+  'alignSelf',
+  'order',
+  'gap',
+  'rowGap',
+  'columnGap',
+
+  // Grid properties
+  'grid',
+  'gridTemplate',
+  'gridTemplateAreas',
+  'gridTemplateColumns',
+  'gridTemplateRows',
+  'gridArea',
+  'gridColumn',
+  'gridColumnStart',
+  'gridColumnEnd',
+  'gridRow',
+  'gridRowStart',
+  'gridRowEnd',
+  'gridGap',
+  'gridRowGap',
+  'gridColumnGap',
+  'justifyItems',
+  'justifySelf',
+
+  // Typography properties
+  'color',
+  'font',
+  'fontFamily',
+  'fontSize',
+  'fontSizeAdjust',
+  'fontStretch',
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'lineHeight',
+  'letterSpacing',
+  'textAlign',
+  'textDecoration',
+  'textIndent',
+  'textOverflow',
+  'textShadow',
+  'textTransform',
+  'verticalAlign',
+  'whiteSpace',
+  'wordBreak',
+  'wordSpacing',
+  'wordWrap',
+  'writingMode',
+  'textOrientation',
+
+  // Background properties
+  'background',
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundPosition',
+  'backgroundSize',
+  'backgroundRepeat',
+  'backgroundAttachment',
+  'backgroundClip',
+  'backgroundOrigin',
+
+  // Visual properties
+  'opacity',
+  'visibility',
+  'cursor',
+  'pointerEvents',
+  'userSelect',
+  'resize',
+  'transform',
+  'transformOrigin',
+  'transition',
+  'animation',
+  'animationName',
+  'animationDuration',
+  'animationTimingFunction',
+  'animationDelay',
+  'animationIterationCount',
+  'animationDirection',
+  'animationFillMode',
+  'animationPlayState',
+
+  // Print properties
+  'pageBreakAfter',
+  'pageBreakBefore',
+  'pageBreakInside',
+  'orphans',
+  'widows',
+
+  // Other properties
+  'content',
+  'quotes',
+  'counterReset',
+  'counterIncrement',
+  'listStyle',
+  'listStyleType',
+  'listStylePosition',
+  'listStyleImage',
+  'tableLayout',
+  'emptyCells',
+  'captionSide',
+  'borderCollapse',
+  'borderSpacing',
+  'speak',
+  'speakHeader',
+  'speakNumeral',
+  'speakPunctuation',
+  'speechRate',
+  'voiceFamily',
+  'pitch',
+  'pitchRange',
+  'stress',
+  'richness',
+  'azimuth',
+  'elevation',
+  'playDuring',
+  'volume',
+  'pause',
+  'pauseBefore',
+  'pauseAfter',
+  'cue',
+  'cueBefore',
+  'cueAfter',
+  'markerOffset',
+  'marks',
+  'size',
+  'page',
+  'zoom',
+
+  // Additional modern CSS properties
+  'aspectRatio',
+  'contain',
+  'container',
+  'containerName',
+  'containerType',
+  'containerQuery',
+  'isolation',
+  'mixBlendMode',
+  'backdropFilter',
+  'filter',
+  'mask',
+  'maskImage',
+  'maskMode',
+  'maskPosition',
+  'maskSize',
+  'maskRepeat',
+  'maskOrigin',
+  'maskClip',
+  'maskComposite',
+  'clipPath',
+  'shapeOutside',
+  'shapeImageThreshold',
+  'shapeMargin',
+  'offset',
+  'offsetDistance',
+  'offsetPath',
+  'offsetRotate',
+  'offsetAnchor',
+  'scrollBehavior',
+  'scrollMargin',
+  'scrollMarginTop',
+  'scrollMarginRight',
+  'scrollMarginBottom',
+  'scrollMarginLeft',
+  'scrollMarginBlock',
+  'scrollMarginBlockStart',
+  'scrollMarginBlockEnd',
+  'scrollMarginInline',
+  'scrollMarginInlineStart',
+  'scrollMarginInlineEnd',
+  'scrollPadding',
+  'scrollPaddingTop',
+  'scrollPaddingRight',
+  'scrollPaddingBottom',
+  'scrollPaddingLeft',
+  'scrollPaddingBlock',
+  'scrollPaddingBlockStart',
+  'scrollPaddingBlockEnd',
+  'scrollPaddingInline',
+  'scrollPaddingInlineStart',
+  'scrollPaddingInlineEnd',
+  'scrollSnapType',
+  'scrollSnapStrictness',
+  'scrollSnapAlign',
+  'scrollSnapStop',
+  'overscrollBehavior',
+  'overscrollBehaviorX',
+  'overscrollBehaviorY',
+  'touchAction',
+  'willChange',
+  'containIntrinsicSize',
+  'containIntrinsicWidth',
+  'containIntrinsicHeight',
+  'containIntrinsicBlockSize',
+  'containIntrinsicInlineSize',
+  'logicalWidth',
+  'logicalHeight',
+  'minLogicalWidth',
+  'maxLogicalWidth',
+  'minLogicalHeight',
+  'maxLogicalHeight',
+]);
+
+/**
+ * Extracts CSS properties from an object and returns a CSSProperties object.
+ * This function filters out non-CSS properties and only includes valid CSS properties.
+ *
+ * @param obj - The object containing potential CSS properties
+ * @returns A CSSProperties object with only valid CSS properties
+ */
+export function extractStyleProps(
+  obj: Record<string, any>
+): [CSSProperties, Record<string, any>] {
+  const cssProperties: CSSProperties = {};
+  const remainder: Record<string, any> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    // Check if the key is a valid CSS property or a CSS custom property
+    if (VALID_CSS_PROPERTIES.has(key) || key.startsWith('--')) {
+      (cssProperties as any)[key] = value;
+    } else {
+      remainder[key] = value;
+    }
+  }
+
+  return [cssProperties, remainder];
+}

package/src/stacks/utils/isCustomSizeProp.ts

@@ -0,0 +1,3 @@
+export function isCustomSizeProp(prop: string | number) {
+  return prop === 'flex' || prop === 'default';
+}

package/src/stacks/utils/remove_undefined_properties.ts

@@ -0,0 +1,11 @@
+export function removeUndefinedProperties<T extends object>(obj: T) {
+  const result: any = {};
+
+  Object.keys(obj).forEach(k => {
+    if (typeof (obj as any)[k] !== 'undefined') {
+      result[k] = (obj as any)[k];
+    }
+  });
+
+  return result;
+}

package/src/stacks/utils/use_is_collapsed.ts

@@ -0,0 +1,33 @@
+import React, { useLayoutEffect } from 'react';
+
+export function useIsCollapsed(
+  open: boolean,
+  collapsibleRef: React.RefObject<HTMLElement | null>
+): boolean {
+  const [isCollapsed, setIsCollapsed] = React.useState(!open);
+
+  useLayoutEffect(() => {
+    const collapseEl = collapsibleRef.current;
+    if (!collapseEl) return;
+    const onTransitionStart = () => {
+      const { isCollapsed } = collapseEl.dataset;
+      if (isCollapsed === 'false') {
+        setIsCollapsed(false);
+      }
+    };
+    const onTransitionEnd = () => {
+      const { isCollapsed } = collapseEl.dataset;
+      if (isCollapsed === 'true') {
+        setIsCollapsed(true);
+      }
+    };
+    collapseEl.addEventListener('transitionstart', onTransitionStart);
+    collapseEl.addEventListener('transitionend', onTransitionEnd);
+    return () => {
+      collapseEl.removeEventListener('transitionstart', onTransitionStart);
+      collapseEl.removeEventListener('transitionend', onTransitionEnd);
+    };
+  }, [collapsibleRef]);
+
+  return isCollapsed;
+}

package/src/stacks/v_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 VCollapsibleBoxProps extends BoxProps {
+  open?: boolean;
+  defaultHeight?: string;
+}
+
+export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
+  { open = false, defaultHeight = '400px', ...props }: VCollapsibleBoxProps,
+  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', defaultHeight);
+  }, [defaultHeight]);
+
+  const isCollapsed = useIsCollapsed(open, collapsibleRef);
+  const children = isCollapsed && !open ? null : props.children;
+
+  return (
+    <Box
+      ref={forkRef}
+      {...props}
+      data-is-collapsed={!open}
+      data-collapse-orientation="vertical"
+      data-is-resizing={resizing}
+      onHeightResize={height => {
+        setIsResizing(true);
+        props.onHeightResize?.(height);
+      }}
+      onHeightResizeEnd={height => {
+        setIsResizing(false);
+        collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);
+        props.onHeightResizeEnd?.(height);
+      }}
+      className={classNames(props.className, styles['collapsible-box'])}
+      children={children}
+    />
+  );
+});

package/src/stacks/v_stack.stories.tsx

@@ -0,0 +1,40 @@
+import { Circle } from './story_components/circle.js';
+import { StyleBox } from './story_components/style_box.js';
+import { VStack } from './v_stack.js';
+import { Rect } from './story_components/rect.js';
+import { PicturePlaceholder } from './story_components/picture_placeholder.js';
+
+export default {
+  title: 'VStack',
+};
+
+export function Basic({ transform }: { transform?: string }) {
+  return (
+    <StyleBox
+      borderLeft="1px dashed #ccc"
+      width="150px"
+      height="auto"
+      borderRight="1px dashed #ccc"
+      transform={transform}
+    >
+      <VStack vAlign="center" gap="25px">
+        <Rect width="150px" height="150px" color="#acdef0">
+          Content
+        </Rect>
+        <Circle width="150px" height="150px" color="#90d9c7">
+          Content
+        </Circle>
+        <PicturePlaceholder size="150px" />
+      </VStack>
+    </StyleBox>
+  );
+}
+
+export function Padding() {
+  return (
+    <VStack width="auto" style={{ border: '1px dashed #ccc' }} padding="30px">
+      <Circle></Circle>
+      <Circle></Circle>
+    </VStack>
+  );
+}

package/src/stacks/v_stack.tsx

@@ -0,0 +1,118 @@
+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, VerticalProps } from './types/styles.js';
+import styles from './stack.module.css';
+import { isCustomSizeProp } from './utils/isCustomSizeProp.js';
+
+export type VStackOwnProps = CommonProps & StackStyleProps & VerticalProps;
+
+export interface VStackProps<T extends HTMLElement = HTMLElement>
+  extends VStackOwnProps,
+    HTMLAttributes<T> {
+  as?: string;
+  children?: React.ReactNode;
+}
+
+export const VStack = React.forwardRef(function VStack<
+  T extends HTMLElement = HTMLElement,
+>(
+  {
+    as = 'div',
+    children,
+    style,
+    className,
+    hAlign = 'center',
+    vAlign = 'start',
+    inline,
+    allowFlow,
+    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,
+    overflowY,
+    overflowX,
+    gap,
+    rowGap,
+    columnGap,
+    ...attr
+  }: VStackProps<T>,
+  ref: React.Ref<T>
+) {
+  const As = as as React.ElementType;
+  const defaultStyles: any = {
+    display: inline == null ? undefined : inline ? 'inline-flex' : 'flex',
+    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: React.CSSProperties = {
+    ...removeUndefinedProperties(defaultStyles),
+    ...style,
+  };
+
+  return (
+    <As
+      ref={ref}
+      className={classNames(styles['v-stack'], className, 'v-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-y={overflowY}
+      data-overflow-x={overflowX}
+      {...attr}
+    >
+      {children}
+    </As>
+  );
+});

package/src/stacks/z_stack.stories.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Circle } from './story_components/circle.js';
+import { StyleBox } from './story_components/style_box.js';
+import { ZStack } from './z_stack.js';
+
+export default {
+  title: 'ZStack',
+  component: ZStack,
+};
+
+function forEachNumber(startIndex: number, endIndex: number) {
+  return Array.from({ length: endIndex }, (_, index) => startIndex + index);
+}
+
+const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+
+export function Basic({ transform }: { transform?: string }) {
+  return (
+    <StyleBox
+      borderTop="1px dashed #ccc"
+      height="150px"
+      width="400px"
+      borderBottom="1px dashed #ccc"
+      transform={transform}
+    >
+      <ZStack vAlign="center">
+        <StyleBox
+          width="150px"
+          height="150px"
+          border="1px solid #0b75cb"
+          backgroundColor="#acdef0"
+        >
+          <ZStack>View</ZStack>
+        </StyleBox>
+        <StyleBox
+          width="150px"
+          height="150px"
+          border="1px solid #1a8b82"
+          borderRadius="50%"
+          backgroundColor="#90d9c7"
+        >
+          <ZStack width="100%" height="100%">
+            View
+          </ZStack>
+        </StyleBox>
+      </ZStack>
+    </StyleBox>
+  );
+}
+
+export function StackWithChildrenOffset() {
+  return (
+    <ZStack>
+      <ZStack
+        height="300px"
+        width="300px"
+        style={{ backgroundColor: 'white', border: '2px solid #5ee582' }}
+      >
+        {forEachNumber(-3, colors.length).map((n, index) => (
+          <StyleBox
+            key={index}
+            width="100px"
+            height="100px"
+            backgroundColor={colors[n + 3]}
+            left={`${n * 10}px`}
+            top={`${n * 10}px`}
+          />
+        ))}
+      </ZStack>
+    </ZStack>
+  );
+}
+
+export function Inline() {
+  return (
+    <ZStack>
+      <ZStack
+        inline
+        style={{ backgroundColor: 'white', border: '2px solid #5ee582' }}
+        height="auto"
+        width="auto"
+      >
+        <StyleBox width="200px" height="200px" backgroundColor="red" />
+        <StyleBox width="150px" height="150px" backgroundColor="orange" />
+        <StyleBox width="100px" height="100px" backgroundColor="yellow" />
+      </ZStack>
+    </ZStack>
+  );
+}
+
+export function Alignment() {
+  return (
+    <ZStack>
+      <ZStack
+        style={{ backgroundColor: 'white', border: '2px solid #5ee582' }}
+        vAlign="end"
+        hAlign="start"
+        height="100px"
+        width="100px"
+      >
+        <StyleBox width="100%" height="50%" backgroundColor="red" />
+        <StyleBox width="50%" height="100%" backgroundColor="blue" />
+      </ZStack>
+    </ZStack>
+  );
+}
+
+export function Padding() {
+  return (
+    <ZStack
+      width="auto"
+      height="auto"
+      style={{ border: '1px dashed #ccc' }}
+      padding="30px"
+    >
+      <Circle></Circle>
+    </ZStack>
+  );
+}