@tcn/ui 0.8.0 → 0.9.0

package/src/layouts/__stories__/utils.tsx

@@ -0,0 +1,174 @@
+import type { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+import { Scaffold, type ScaffoldProps } from '../scaffold/scaffold.js';
+import { Header } from '../header/header.js';
+import { Body } from '../body/body.js';
+import { Footer } from '../footer/footer.js';
+import { UtilityBar } from '../utility_bar/utility_bar.js';
+
+import { Rail, type RailProps } from '../rail/rail.js';
+import { Side } from '../rail/side/side.js';
+import { Main } from '../rail/main/main.js';
+import { Box, Spacer } from '../../stacks/index.js';
+import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+
+import styles from './composed_stories.module.css';
+
+const FloatingLabel = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className={styles.floatingLabel}>
+      <span className={styles.floatingLabelChip}>{children}</span>
+    </div>
+  );
+};
+
+const VerticalLabel = ({ children }: { children: React.ReactNode }) => {
+  return <span className={styles.verticalLabel}>{children}</span>;
+};
+
+export const SBContent: React.FC<
+  PropsWithChildren<{ className?: string; minHeight?: string; minWidth?: string }>
+> = ({ className, children, minHeight = '200px', minWidth = '200px' }) => {
+  return (
+    <Box
+      minHeight={minHeight}
+      minWidth={minWidth}
+      className={clsx(styles.content, className)}
+    >
+      ↔ {minWidth}
+      <br />↕ {minHeight}
+      {children}
+    </Box>
+  );
+};
+
+const SBActionBox = ({ children }: { children: React.ReactNode }) => {
+  return <span className={styles.actionBox}>{children}</span>;
+};
+
+const SBActions = () => {
+  return (
+    <>
+      <Spacer />
+      <SBActionBox>
+        <SearchIcon />
+      </SBActionBox>
+      <SBActionBox>
+        <SearchIcon />
+      </SBActionBox>
+      <SBActionBox>
+        <SearchIcon />
+      </SBActionBox>
+    </>
+  );
+};
+
+interface SBNestedRailProps extends RailProps {
+  depth?: number;
+  scaffold?: boolean;
+  side?: boolean;
+  main?: boolean;
+  utilityStrip?: boolean;
+  label?: boolean;
+  mainLabel?: boolean;
+}
+
+export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
+  children,
+  className,
+  depth = 1,
+  scaffold = true,
+  side = true,
+  main = true,
+  utilityStrip = true,
+  label = true,
+  mainLabel = true,
+  ...props
+}) => {
+  return (
+    <Rail
+      className={clsx(styles.rail, styles.primary, className)}
+      data-depth={depth}
+      {...props}
+    >
+      {label && <FloatingLabel>Rail</FloatingLabel>}
+      {utilityStrip && (
+        <UtilityStrip className={clsx(styles.utilityStrip, styles.secondary)}>
+          <VerticalLabel>Utility Strip</VerticalLabel>
+          <SBActions />
+        </UtilityStrip>
+      )}
+      {main && (
+        <Main className={clsx(styles.main, styles.secondary)} width="200px">
+          {mainLabel && <>Main</>}
+          {children}
+        </Main>
+      )}
+      {!main && children}
+      {side && (
+        <Side className={clsx(styles.side, styles.secondary)} minWidth="200px">
+          <span>Side/Column/WIP</span>
+        </Side>
+      )}
+      {scaffold && (
+        <SBNestedScaffold
+          depth={depth + 1}
+          utilityBar={false}
+          footer={false}
+          minWidth={'fit-content'}
+        >
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </SBNestedScaffold>
+      )}
+    </Rail>
+  );
+};
+
+interface SBNestedScaffoldProps extends ScaffoldProps {
+  depth?: number;
+  header?: boolean;
+  utilityBar?: boolean;
+  body?: boolean;
+  footer?: boolean;
+}
+
+export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>> = ({
+  children,
+  className,
+  depth = 1,
+  header = true,
+  utilityBar = true,
+  body = true,
+  footer = true,
+  ...props
+}) => {
+  return (
+    <Scaffold
+      className={clsx(styles.scaffold, styles.primary, className)}
+      data-depth={depth}
+      {...props}
+    >
+      <FloatingLabel>Scaffold</FloatingLabel>
+      {header && (
+        <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+      )}
+      {utilityBar && (
+        <UtilityBar className={clsx(styles.utilityBar, styles.secondary)}>
+          Utility Bar
+          <SBActions />
+        </UtilityBar>
+      )}
+      {body && (
+        <Body className={clsx(styles.body, styles.secondary)}>Body {children}</Body>
+      )}
+      {!body && children}
+      {footer && (
+        <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
+      )}
+    </Scaffold>
+  );
+};

package/src/layouts/body/body.module.css

@@ -0,0 +1,11 @@
+@layer tcn-system {
+  .body {
+    min-height: 0;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+  }
+  :where(.tcn-main) {
+    height: auto;
+  }
+}

package/src/layouts/body/body.tsx

@@ -0,0 +1,23 @@
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+import React from 'react';
+import { clsx } from 'clsx';
+import styles from './body.module.css';
+
+export interface BodyProps extends Omit<VStackProps, 'as'> {}
+
+export const Body = React.forwardRef<HTMLElement, BodyProps>(function Body(
+  { children, className, overflowY = 'auto', ...props }: BodyProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as="div"
+      overflowY={overflowY}
+      className={clsx(styles['body'], className, 'tcn-body')}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/index.ts

@@ -15,3 +15,15 @@ export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
 export { Row } from './row/row.js';
 export { Section } from './section/section.js';
 export { Heading, type HeadingOwnProps } from './section/heading.js';
+export { Responsive, type ResponsiveProps } from './responsive/responsive.js';
+export { Breakpoint, type BreakpointProps } from './responsive/breakpoint.js';
+
+export { TTable, THead, TBody, TFoot, TR, TH, TD } from './table/table.js';
+
+export { Rail, type RailProps } from './rail/rail.js';
+export { Main, type MainProps } from './rail/main/main.js';
+export { Side, type SideProps } from './rail/side/side.js';
+export {
+  UtilityStrip,
+  type UtilityStripProps,
+} from './rail/utility_strip/utility_strip.js';

package/src/layouts/rail/__stories__/rail.stories.tsx

@@ -0,0 +1,64 @@
+import { Main } from '../main/main.js';
+import { Rail } from '../rail.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Side } from '../side/side.js';
+import { VStack } from '../../../stacks/v_stack.js';
+
+import styles from './rail_stories.module.css';
+
+const meta: Meta<typeof Rail> = {
+  title: 'Layouts/Rail',
+  component: Rail,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A rail component that lays out content in a horizontal hierarchy.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Rail>;
+
+const Content = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <VStack hAlign="start" className={styles.content}>
+      {children}
+    </VStack>
+  );
+};
+
+export const Baseline: Story = {
+  args: {
+    height: '100vh',
+  },
+  render: () => (
+    <Rail height="100vh" className={styles.rail}>
+      <Side className={styles.side}>
+        <p>Side (Start)</p>
+        <p>Fills available space</p>
+        <p>Scrolls horizontally</p>
+      </Side>
+
+      <Main className={styles.main}>
+        <Content>
+          <p>Main</p>
+          <p>Fills available space</p>
+          <p>Scrolls horizontally</p>
+        </Content>
+        <Content />
+        <Content />
+        <Content />
+        <Content />
+      </Main>
+      <Side className={styles.side}>
+        <p>Side (End)</p>
+        <p>Fills available space</p>
+        <p>Scrolls horizontally</p>
+      </Side>
+    </Rail>
+  ),
+};

package/src/layouts/rail/__stories__/rail_stories.module.css

@@ -0,0 +1,25 @@
+.rail {
+  :global(.tcn-rail-stack) {
+    gap: 8px;
+  }
+}
+
+.main {
+  background-color: #f1f5f9;
+  gap: 16px;
+  padding: 16px 0;
+}
+
+.side {
+  width: 200px;
+  background-color: #3b82f6;
+  color: white;
+  padding: 16px 0;
+}
+
+.content {
+  background-color: #e5e7eb;
+  min-width: 200px;
+  height: 100%;
+  padding: 16px;
+}

package/src/layouts/rail/main/main.module.css

@@ -0,0 +1,7 @@
+@layer tcn-system {
+  :where(.main) {
+    min-width: 0;
+    flex-grow: 1;
+    height: 100%;
+  }
+}

package/src/layouts/rail/main/main.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
+
+// Styles
+import styles from './main.module.css';
+
+export interface MainProps extends Omit<HStackProps, 'as'> {}
+
+// WIP: This component is not fully implemented.
+export const Main = React.forwardRef<HTMLElement, MainProps>(function Main(
+  { children, className, overflowX = 'auto', ...props }: MainProps,
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      as="div"
+      overflowX={overflowX}
+      className={clsx(styles['main'], className, 'tcn-main')}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/layouts/rail/rail.module.css

@@ -0,0 +1,10 @@
+@layer tcn-system {
+  :where(.rail-stack) {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    :where(.tcn-body) {
+      height: 100%;
+    }
+  }
+}

package/src/layouts/rail/rail.tsx

@@ -0,0 +1,62 @@
+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 { HStack } from '../../stacks/h_stack.js';
+
+// Styles
+import styles from './rail.module.css';
+
+export interface RailProps extends Omit<BoxProps, 'as'> {
+  vAlign?: Alignment;
+  hAlign?: Alignment;
+}
+
+// WIP: This component is not fully implemented.
+export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
+  {
+    children,
+    width,
+    height = '100%',
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    hAlign = 'start',
+    vAlign = 'start',
+    className,
+    ...props
+  }: RailProps,
+  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={clsx(className, 'tcn-rail')}
+      {...props}
+    >
+      <HStack
+        as="section"
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        hAlign={hAlign}
+        vAlign={vAlign}
+        ref={ref}
+        className={clsx(styles['rail-stack'], 'tcn-rail-stack')}
+        zIndex={0}
+      >
+        {children}
+      </HStack>
+    </Box>
+  );
+});

package/src/layouts/rail/side/side.module.css

@@ -0,0 +1,8 @@
+@layer tcn-system {
+  :where(.side) {
+    min-width: 0;
+    height: 100%;
+    flex-grow: 0;
+    width: auto;
+  }
+}

package/src/layouts/rail/side/side.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+
+import styles from './side.module.css';
+
+// UtilityBar
+export interface SideProps extends Omit<VStackProps, 'as'> {}
+
+export const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(
+  { children, className, width = 'auto', ...props }: SideProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      className={clsx(styles['side'], 'tcn-side', className)}
+      as="section"
+      width={width}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/rail/utility_strip/utility_strip.module.css

@@ -0,0 +1,6 @@
+@layer tcn-system {
+  :where(.utility-strip) {
+    height: 100%;
+    min-width: 0;
+  }
+}

package/src/layouts/rail/utility_strip/utility_strip.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import type { Hierarchy, Size } from '../../../utils/index.js';
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+
+import styles from './utility_strip.module.css';
+
+// UtilityBar
+export interface UtilityStripProps extends Omit<VStackProps, 'as'> {
+  hierarchy?: Hierarchy;
+  size?: Size;
+}
+
+export const UtilityStrip = React.forwardRef<HTMLElement, UtilityStripProps>(
+  function UtilityStrip(
+    {
+      children,
+      className,
+      width = 'auto',
+      hierarchy = 'secondary',
+      size = 'md',
+      ...props
+    }: UtilityStripProps,
+    ref
+  ) {
+    return (
+      <VStack
+        ref={ref}
+        as="header"
+        className={clsx(styles['utility-strip'], 'tcn-utility-strip', className)}
+        data-hierarchy={hierarchy}
+        data-size={size}
+        width={width}
+        {...props}
+      >
+        {children}
+      </VStack>
+    );
+  }
+);

package/src/layouts/responsive/breakpoint.tsx

@@ -0,0 +1,29 @@
+export interface BreakpointProps {
+  from?: number | string;
+  to?: number | string;
+  children: React.ReactNode;
+}
+
+export interface InternalBreakpointProps extends BreakpointProps {
+  width: number;
+}
+
+function toNumber(value: number | string) {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  return parseFloat(value);
+}
+
+export function Breakpoint(_: BreakpointProps) {
+  return null;
+}
+
+export function InternalBreakpoint(props: InternalBreakpointProps) {
+  const from = toNumber(props.from ?? 0);
+  const to = toNumber(props.to ?? Infinity);
+  const isWithinRange = props.width >= from && props.width < to;
+
+  return isWithinRange ? props.children : null;
+}

package/src/layouts/responsive/responsive.stories.tsx

@@ -0,0 +1,37 @@
+import { HStack } from '../../stacks/h_stack.js';
+import { Breakpoint } from './breakpoint.js';
+import { Responsive } from './responsive.js';
+
+export default {
+  title: 'Layouts/Responsive',
+  component: Responsive,
+  tags: ['autodocs'],
+};
+
+export function Container() {
+  return (
+    <HStack width="100%" hAlign="center">
+      <Responsive>
+        <Breakpoint to={200}>Small</Breakpoint>
+        <Breakpoint from={200} to={800}>
+          Medium
+        </Breakpoint>
+        <Breakpoint from={800}>Large</Breakpoint>
+      </Responsive>
+    </HStack>
+  );
+}
+
+export function Viewport() {
+  return (
+    <HStack width="100%" hAlign="center">
+      <Responsive on="viewport">
+        <Breakpoint to={200}>Small</Breakpoint>
+        <Breakpoint from={200} to={800}>
+          Medium
+        </Breakpoint>
+        <Breakpoint from={800}>Large</Breakpoint>
+      </Responsive>
+    </HStack>
+  );
+}

package/src/layouts/responsive/responsive.tsx

@@ -0,0 +1,18 @@
+import type { BreakpointProps } from './breakpoint.js';
+import { ResponsiveContainer } from './responsive_container.js';
+import { ResponsiveViewport } from './responsive_viewport.js';
+
+export interface ResponsiveProps {
+  on?: 'viewport' | 'container';
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function Responsive(props: ResponsiveProps) {
+  const { on = 'container', children } = props;
+
+  if (on === 'viewport') {
+    return <ResponsiveViewport>{children}</ResponsiveViewport>;
+  }
+
+  return <ResponsiveContainer>{children}</ResponsiveContainer>;
+}

package/src/layouts/responsive/responsive_container.tsx

@@ -0,0 +1,51 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { useForkRef } from '../../utils/hooks/use_fork_ref.js';
+import { useResizeObserver } from '../../utils/hooks/use_resize_observer.js';
+import { InternalBreakpoint, BreakpointProps } from './breakpoint.js';
+
+export interface ResponsiveContainerProps {
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function ResponsiveContainer(props: ResponsiveContainerProps) {
+  const [parent, setParent] = useState<Element | null>(null);
+  const [width, setWidth] = useState(0);
+
+  const resizeRef = useResizeObserver(width => {
+    setWidth(width);
+  });
+
+  const forkedRef = useForkRef((element: any) => {
+    if (element == null || element.parentElement == null) {
+      return;
+    }
+    resizeRef(element.parentElement);
+    setParent(element.parentElement);
+  });
+
+  const hiddenChild = (
+    <div
+      ref={forkedRef}
+      style={{
+        display: 'none',
+      }}
+    ></div>
+  );
+
+  const internalBreakpoints = React.Children.toArray(props.children).map((child: any) => {
+    return <InternalBreakpoint key={child.key} {...child.props} width={width} />;
+  });
+
+  useLayoutEffect(() => {
+    return () => {
+      setParent(null);
+    };
+  }, []);
+
+  return (
+    <>
+      {parent == null ? hiddenChild : null}
+      {internalBreakpoints}
+    </>
+  );
+}

package/src/layouts/responsive/responsive_viewport.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InternalBreakpoint, BreakpointProps } from './breakpoint.js';
+import { useMediaQuery } from '../../utils/hooks/use_media_query.js';
+
+export interface ResponsiveViewportProps {
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function ResponsiveViewport(props: ResponsiveViewportProps) {
+  const { width } = useMediaQuery();
+
+  const internalBreakpoints = React.Children.toArray(props.children).map((child: any) => {
+    return <InternalBreakpoint key={child.key} {...child.props} width={width} />;
+  });
+
+  return <>{internalBreakpoints}</>;
+}