@tcn/ui 0.2.0 → 0.3.1

package/src/actions/__docs__/actions.stories.tsx

@@ -0,0 +1,309 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { HStack } from '../../stacks/h_stack.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { Button } from '../button/button/button.js';
+import { SlimButton } from '../button/slim_button/slim_button.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import type { ActionSeverity } from '../types.js';
+
+/**
+ * These stories are used exclusively by the MDX documentation.
+ * They are hidden from the Storybook sidebar using tags.
+ */
+const meta: Meta<typeof Button> = {
+  title: 'Catalog/Actions',
+  component: Button,
+  parameters: {
+    docs: {
+      story: { exclude: ['style'] },
+    },
+  },
+
+  // Hide these stories from the sidebar - they're only for MDX docs
+  tags: ['!autodocs', '!dev'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// ============================================================================
+// Utility Code
+// ============================================================================
+
+const tcnBrandedColors = [
+  {
+    name: 'Integrated Infrastructure',
+    action: '27, 15%, 43%',
+  },
+  {
+    name: 'Omnichannel Communications',
+    action: '197, 34%, 40%',
+  },
+  {
+    name: 'Workforce Engagement',
+    action: '23, 65%, 42%',
+  },
+  {
+    name: 'Integration and Automation',
+    action: '139, 21%, 39%',
+  },
+  {
+    name: 'Compliance and Data Management',
+    action: '49, 50%, 34%',
+  },
+  {
+    name: 'Intelligence, Reporting, and Analytics',
+    action: '214, 14%, 45%',
+  },
+];
+
+const severityOptions: { name: string; severity: ActionSeverity }[] = [
+  {
+    name: 'Dangerous',
+    severity: 'dangerous',
+  },
+  {
+    name: 'Cautious',
+    severity: 'cautious',
+  },
+  {
+    name: 'Neutral',
+    severity: 'neutral',
+  },
+  {
+    name: 'Suggested',
+    severity: 'suggested',
+  },
+  {
+    name: 'Encouraged',
+    severity: 'encouraged',
+  },
+];
+
+// ============================================================================
+// HIERARCHY EXAMPLES
+// ============================================================================
+
+export const HierarchyShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <Button hierarchy="tertiary">Tertiary</Button>
+      <Button hierarchy="secondary">Secondary</Button>
+      <Button hierarchy="primary">Primary</Button>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// SIZE EXAMPLES
+// ============================================================================
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// DISABLED EXAMPLES
+// ============================================================================
+
+export const DisabledShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <VStack gap="12px" vAlign="center" width="200px">
+        <Button hierarchy="tertiary" disabled width="100%">
+          Tertiary Disabled
+        </Button>
+        <Button hierarchy="secondary" disabled width="100%">
+          Secondary Disabled
+        </Button>
+        <Button hierarchy="primary" disabled width="100%">
+          Primary Disabled
+        </Button>
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// WITH ICONS
+// ============================================================================
+
+export const IconShowcase: Story = {
+  render: () => (
+    <VStack gap="12px" vAlign="center">
+      <HStack gap="12px" vAlign="center">
+        <Button hierarchy="tertiary">
+          Cancel
+          <Spacer width="6px" />
+          <CrossIcon size="sm" />
+        </Button>
+        <Button hierarchy="secondary">
+          Search
+          <Spacer width="6px" />
+          <SearchIcon size="sm" />
+        </Button>
+        <Button hierarchy="primary">
+          Add
+          <Spacer width="6px" />
+          <PlusIcon size="sm" />
+        </Button>
+      </HStack>
+      <HStack gap="12px" vAlign="center">
+        <Button hierarchy="tertiary">
+          <CrossIcon size="sm" />
+          <Spacer width="6px" />
+          Cancel
+        </Button>
+        <Button hierarchy="secondary">
+          <SearchIcon size="sm" />
+          <Spacer width="6px" />
+          Search
+        </Button>
+        <Button hierarchy="primary">
+          <PlusIcon size="sm" />
+          <Spacer width="6px" />
+          Add
+        </Button>
+      </HStack>
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// CUSTOM COLORS
+// ============================================================================
+
+export const ColorShowcase: Story = {
+  render: () => (
+    <HStack vAlign="center" gap="12px">
+      <VStack gap="12px" vAlign="center" width="200px">
+        {tcnBrandedColors.map(({ name, action }) => (
+          <Button key={name} hierarchy="primary" color={action} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// FULL WIDTH
+// ============================================================================
+
+export const FullWidth: Story = {
+  render: () => (
+    <HStack vAlign="center">
+      <VStack gap="12px" vAlign="center" width="200px">
+        <Button hierarchy="tertiary" width="100%">
+          Full Width Tertiary
+        </Button>
+        <Button hierarchy="secondary" width="100%">
+          Full Width Secondary
+        </Button>
+        <Button hierarchy="primary" width="100%">
+          Full Width Primary
+        </Button>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const SeverityShowcase: Story = {
+  render: () => (
+    <HStack vAlign="center">
+      <VStack gap="12px" vAlign="center" width="200px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="primary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// SLIM BUTTON EXAMPLES
+// ============================================================================
+
+export const SlimButtonHierarchy: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton hierarchy="tertiary">
+        <CrossIcon />
+      </SlimButton>
+      <SlimButton hierarchy="secondary">
+        <SearchIcon />
+      </SlimButton>
+      <SlimButton hierarchy="primary">
+        <PlusIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
+export const SlimButtonSizes: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton size="sm" hierarchy="primary">
+        <PlusIcon />
+      </SlimButton>
+      <SlimButton size="md" hierarchy="primary">
+        <PlusIcon />
+      </SlimButton>
+      <SlimButton size="lg" hierarchy="primary">
+        <PlusIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
+export const SlimButtonDisabled: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton hierarchy="tertiary" disabled>
+        <CrossIcon />
+      </SlimButton>
+      <SlimButton hierarchy="secondary" disabled>
+        <SearchIcon />
+      </SlimButton>
+      <SlimButton hierarchy="primary" disabled>
+        <PlusIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
+export const SlimButtonColors: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      {tcnBrandedColors.map(({ name, action }) => (
+        <SlimButton key={name} hierarchy="primary" color={action}>
+          <SearchIcon />
+        </SlimButton>
+      ))}
+    </HStack>
+  ),
+};
+
+export const SlimButtonSeverity: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      {severityOptions.map(({ name, severity }) => (
+        <SlimButton key={name} hierarchy="primary" severity={severity}>
+          <CrossIcon />
+        </SlimButton>
+      ))}
+    </HStack>
+  ),
+};

package/src/actions/__docs__/components/gallery.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
+  gap: 20px;
+  max-width: var(--max-gallery-width);
+}

package/src/actions/__docs__/components/gallery.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './gallery.module.css';
+
+export interface GalleryProps {
+  children: React.ReactNode;
+  minColumnWidth?: string;
+  maxGalleryWidth?: string;
+}
+
+export const Gallery: React.FC<GalleryProps> = ({
+  children,
+  minColumnWidth = '300px',
+  maxGalleryWidth = '1200px',
+}) => {
+  return (
+    <section
+      className={styles.container}
+      style={
+        {
+          '--min-column-width': minColumnWidth,
+          '--max-gallery-width': maxGalleryWidth,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </section>
+  );
+};

package/src/actions/__docs__/components/showcase.module.css

@@ -0,0 +1,55 @@
+.showcase {
+  border: 1px solid var(--docs-border-color, #e5e7eb);
+  background-color: var(--docs-card-bg, #fff);
+  border-radius: 8px;
+  overflow: hidden;
+  height: fit-content;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+}
+
+.header {
+  min-height: 48px;
+  background-color: var(--docs-header-bg, #fafafa);
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--docs-text-color, #1f2937);
+  margin: 0px !important;
+}
+
+.subtitle {
+  background-color: var(--docs-header-bg, #fafafa);
+  flex-grow: 1;
+}
+
+.documentation {
+  color: var(--docs-text-muted, #6b7280);
+  padding: 0px 16px;
+}
+
+.description {
+  font-size: 12px;
+  color: var(--docs-text-muted, #6b7280);
+}
+
+.content {
+  min-height: 200px;
+  background-color: red;
+  width: 100%;
+  border: none !important;
+  box-shadow: none !important;
+  margin: 0px !important;
+  border-radius: 0px !important;
+
+  :global(.docs-story) {
+    min-height: 200px !important;
+  }
+}

package/src/actions/__docs__/components/showcase.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Canvas } from '@storybook/addon-docs/blocks';
+import { HStack } from '../../../stacks/index.js';
+import styles from './showcase.module.css';
+import clsx from 'clsx';
+
+export interface ShowcaseProps {
+  /** Title displayed at the top of the card */
+  title?: string;
+  // A concise description of the showcase
+  description?: React.ReactNode;
+  /** The story to render */
+  of: any;
+  /** Width of the card */
+  minWidth?: string;
+  maxWidth?: string;
+  // Addition documentation for the showcase
+  children?: React.ReactNode;
+}
+
+/**
+ * Example card component for MDX documentation.
+ * Displays as a cohesive card with header, content, and footer.
+ */
+export const Showcase: React.FC<ShowcaseProps> = ({
+  title,
+  description,
+  of,
+  minWidth = '300px',
+  maxWidth = '600px',
+  children,
+}: ShowcaseProps) => (
+  <div
+    style={{
+      minWidth,
+      maxWidth,
+      height: 'fit-content',
+    }}
+    className={styles.showcase}
+  >
+    <HStack className={clsx(styles.header, styles.toolbar)}>
+      <h4 className={styles.title}>{title}</h4>
+    </HStack>
+    <HStack className={clsx(styles.subtitle, styles.toolbar)} vAlign="start">
+      <div className={styles.description}>{description}</div>
+    </HStack>
+    <HStack className={clsx(styles.subtitle, styles.toolbar)} vAlign="start">
+      <div className={styles.documentation}>{children}</div>
+    </HStack>
+    <Canvas
+      className={styles.content}
+      layout="centered"
+      of={of}
+      sourceState={'hidden'}
+      story={{
+        inline: true,
+      }}
+    />
+  </div>
+);
+
+/**
+ * Section component - displays examples in a flex row that wraps.
+ */
+export const Section = ({
+  title,
+  description,
+  children,
+  maxWidth = '100%',
+}: {
+  title: string;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  maxWidth?: string;
+}) => {
+  return (
+    <section
+      style={{
+        maxWidth,
+        marginBottom: '48px',
+      }}
+    >
+      {/* Section Header */}
+      <div style={{ marginBottom: '24px' }}>
+        <h2
+          style={{
+            margin: '0 0 8px 0',
+            fontSize: '20px',
+            fontWeight: 600,
+            color: 'var(--docs-text-color, #1f2937)',
+          }}
+        >
+          {title}
+        </h2>
+        {description && (
+          <p
+            style={{
+              margin: 0,
+              fontSize: '14px',
+              color: 'var(--docs-text-muted, #6b7280)',
+              lineHeight: 1.6,
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+
+      {/* Cards Grid - Flex row with wrap */}
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '20px',
+        }}
+      >
+        {children}
+      </div>
+    </section>
+  );
+};

package/src/actions/button/base_button/base_button.tsx

@@ -5,11 +5,13 @@ import { HStack } from '../../../stacks/h_stack.js';
 import type { HStackOwnProps } from '../../../stacks/h_stack.js';
 import styles from './base_button.module.css';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+import type { ActionSeverity } from '../../types.js';
 
 export interface BaseButtonOwnProps {
   hierarchy?: Hierarchy;
   size?: Size;
   color?: string;
+  severity?: ActionSeverity;
 }
 
 export type BaseButtonWithStackProps = BaseButtonOwnProps &
@@ -27,6 +29,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
       style,
       color,
       hierarchy = 'secondary',
+      severity = 'neutral',
       size = 'md',
       onTouchStart,
       onContextMenu,
@@ -55,7 +58,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
     };
 
     if (color) {
-      finalStyle['--button-color'] = color;
+      finalStyle['--interactive-color'] = color;
     }
 
     return (
@@ -65,6 +68,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
         inline
         vAlign="center"
         hAlign="center"
+        data-severity={severity}
         data-hierarchy={hierarchy}
         data-size={size}
         data-is-disabled={Boolean(props.disabled)}

package/src/actions/types.ts

@@ -0,0 +1,6 @@
+export type ActionSeverity =
+  | 'dangerous'
+  | 'cautious'
+  | 'neutral'
+  | 'suggested'
+  | 'encouraged';

package/src/inputs/color_input/color_input.tsx

@@ -11,7 +11,7 @@ import { ColorPicker } from './color_picker.js';
 import { Input } from '../input/input.js';
 import styles from './color_input.module.css';
 
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 
 export interface ColorInputProps
   extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {

package/src/inputs/date_picker/date_picker_input.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Hierarchy } from '../../utils/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 import { clsx } from 'clsx';
 import { HTMLAttributes } from 'react';
 import { Button } from '../../actions/index.js';

package/src/inputs/date_picker/date_picker_year_input.tsx

@@ -2,7 +2,7 @@ import { Button } from '../../actions/index.js';
 import { clsx } from 'clsx';
 import styles from './date_picker_year_input.module.css';
 import { useState } from 'react';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 import { DatePickerPresenter } from './date_picker_presenter.js';
 import { DatePickerYearSelector } from './date_picker_year_selector.js';
 import { useSignalValue } from '@tcn/state';

package/src/inputs/suggestions/suggestion_list.tsx

@@ -10,7 +10,7 @@ import { OptionProps, Option } from '../options/option.js';
 import styles from './suggestion_list.module.css';
 
 import { Button } from '../../actions/index.js';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 
 const MAX_RESULTS = 50;
 const BATCH_SIZE = 50;

package/src/layouts/index.ts

@@ -1,13 +1,15 @@
-export * from './body/h_body.js';
-export * from './body/v_body.js';
 export * from './column/column.js';
 export * from './divider/divider.js';
-export * from './footer/footer.js';
 export * from './grid/grid.js';
-export * from './header/header.js';
 export * from './list/item.js';
 export * from './list/list.js';
 export * from './list/section_header.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
-export * from './utility_bar/utility_bar.js';
+// Scaffold
+export { Scaffold, type ScaffoldProps } from './scaffold/scaffold.js';
+export { HBody, type HBodyProps } from './body/h_body.js';
+export { VBody, type VBodyProps } from './body/v_body.js';
+export { Footer, type FooterProps } from './footer/footer.js';
+export { Header, type HeaderProps } from './header/header.js';
+export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';

package/src/layouts/scaffold/scaffold.module.css

@@ -0,0 +1,5 @@
+.scaffold-stack {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}

package/src/layouts/scaffold/scaffold.tsx

@@ -0,0 +1,60 @@
+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 { VStack } from '../../stacks/v_stack.js';
+// Styles
+import styles from './scaffold.module.css';
+
+export interface ScaffoldProps extends Omit<BoxProps, 'as'> {
+  vAlign?: Alignment;
+  hAlign?: Alignment;
+}
+
+export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(
+  {
+    children,
+    width,
+    height = '100%',
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    hAlign,
+    vAlign = 'start',
+    className,
+    ...props
+  }: ScaffoldProps,
+  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-scaffold')}
+      {...props}
+    >
+      <VStack
+        as="section"
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        hAlign={hAlign}
+        vAlign={vAlign}
+        ref={ref}
+        className={clsx(styles['scaffold-stack'], 'tcn-scaffold-stack')}
+        zIndex={0}
+      >
+        {children}
+      </VStack>
+    </Box>
+  );
+});