@tcn/ui 0.12.5 → 0.12.7

package/src/inputs/color_input/color_input.tsx

@@ -11,7 +11,7 @@ import { Input } from '../input/input.js';
 import styles from './color_input.module.css';
 
 import { Popper } from '../../overlay/popper/legacy/popper.js';
-import { InputGroup } from '../input_group/input_group.js';
+import { ControlSet } from '../control_set/control_set.js';
 
 export interface ColorInputProps
   extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {
@@ -77,7 +77,7 @@ export function ColorInput({
 
   return (
     <>
-      <InputGroup
+      <ControlSet
         height="auto"
         width={width}
         minWidth={minWidth}
@@ -133,7 +133,7 @@ export function ColorInput({
           </HStack>
           <Spacer width="4px" />
         </Button>
-      </InputGroup>
+      </ControlSet>
       <Popper
         anchorElement={anchorElement}
         onClose={closePicker}

package/src/inputs/control/control.stories.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { Control, ControlRow } from './control.js';
+import { Input } from '../input/input.js';
+import { Button } from '../../actions/button/button/button.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { Textarea } from '../textarea/textarea.js';
+import { BugIcon } from '@tcn/icons/bug_icon.js';
+import { BodyText } from '../../typography/index.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { CopyIcon } from '@tcn/icons/copy_icon.js';
+import { SendOneIcon } from '@tcn/icons/send_one_icon.js';
+import { FilterOneIcon } from '@tcn/icons/filter_one_icon.js';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import styles from './control_stories.module.css';
+import { RefreshCcwAlertIcon } from '@tcn/icons/refresh_ccw_alert_icon.js';
+import { PlayIcon } from '@tcn/icons/play_icon.js';
+import { DatePickerInput } from '../date_picker/date_picker_input.js';
+import { Divider } from '../../layouts/index.js';
+import { CalendarDatesIcon } from '@tcn/icons/calendar_dates_icon.js';
+
+export default {
+  title: 'Inputs/Control',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Control and ControlRow layout components for grouping inputs with optional leading/trailing slots (icons, actions).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+function BaseInput(props: React.ComponentProps<typeof Input>) {
+  const [value, setValue] = React.useState(props.value ?? '');
+  return <Input {...props} value={value} onChange={setValue} />;
+}
+
+export function Baseline() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <BaseInput placeholder="Enter text..." />
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function Icons() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <BugIcon />
+        <BaseInput placeholder="Search..." />
+        <FilterOneIcon />
+        <SearchIcon />
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function Actions() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <PlusIcon />
+        </Button>
+        <BaseInput placeholder="Type to clear..." value="Hello" />
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <CrossIcon />
+        </Button>
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function DatePickerControl() {
+  const [value, setValue] = React.useState<Date | null>(null);
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <DatePickerInput value={value} onChange={setValue} width="fill" />
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <CrossIcon />
+        </Button>
+        <Divider vertical length="sm" />
+        <CalendarDatesIcon />
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function StartRow() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <BugIcon />
+        <BodyText>script.js</BodyText>
+        <Spacer />
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <CopyIcon />
+        </Button>
+      </ControlRow>
+      <ControlRow growWeight={1}>
+        <Textarea placeholder="console.log('Hello, world!');" />
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function EndRow() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow growWeight={1}>
+        <Textarea rows={6} placeholder="What's on your mind?" />
+      </ControlRow>
+      <Spacer />
+      <ControlRow growWeight={1}>
+        <BodyText>{`<n> characters remaining`}</BodyText>
+        <Spacer />
+        <Button onClick={() => {}} hierarchy="tertiary">
+          Post <SendOneIcon />
+        </Button>
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function CustomStyles() {
+  return (
+    <Control className={styles.customStyles} maxWidth={400}>
+      <ControlRow growWeight={1}>
+        <BugIcon />
+        <BodyText>script.js</BodyText>
+        <Spacer />
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <RefreshCcwAlertIcon />
+        </Button>
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <CopyIcon />
+        </Button>
+      </ControlRow>
+      <ControlRow growWeight={1}>
+        <Textarea rows={6} placeholder="Enter your code..." />
+      </ControlRow>
+      <Spacer />
+      <ControlRow growWeight={1}>
+        <BodyText>{`Line <i> Column <j>`}</BodyText>
+        <Spacer />
+        <Button onClick={() => {}} hierarchy="tertiary">
+          Run <PlayIcon />
+        </Button>
+      </ControlRow>
+    </Control>
+  );
+}

package/src/inputs/control/control.tsx

@@ -0,0 +1,32 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+
+export interface ControlProps extends VStackProps {}
+
+export const Control = React.forwardRef<HTMLDivElement, ControlProps>(function Control(
+  { as = 'div', className, children, ...props }: ControlProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  return (
+    <VStack ref={ref} as={as} className={clsx(className, 'tcn-control')} {...props}>
+      {children}
+    </VStack>
+  );
+});
+
+export interface ControlRowProps extends HStackProps {}
+
+export const ControlRow = React.forwardRef<HTMLDivElement, ControlRowProps>(
+  function ControlRow(
+    { as = 'div', className, children, ...props }: ControlRowProps,
+    ref: React.Ref<HTMLDivElement>
+  ) {
+    return (
+      <HStack ref={ref} as={as} className={clsx(className, 'tcn-control-row')} {...props}>
+        {children}
+      </HStack>
+    );
+  }
+);

package/src/inputs/control/control_stories.module.css

@@ -0,0 +1,7 @@
+.custom-styles > *:not(:last-child) {
+  border-bottom: 1px solid var(--ergo-grey);
+}
+
+.custom-styles > :global(.tcn-control-row) {
+  min-height: 40px;
+}

package/src/inputs/control_set/control_set.stories.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { ControlSet } from './control_set.js';
+import { Input } from '../input/input.js';
+import { Select } from '../select/select.js';
+import { Option } from '../options/option.js';
+
+export default {
+  title: 'Inputs/Control Set',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Control Sets are used to group controls and/or inputs that manage multiple values that are closely related and must be entered together. Usually a tuple like (value, unit) or (start, end). For example a value + unit input/selection.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export function Baseline() {
+  const [value, setValue] = useState('42');
+  const [unit, setUnit] = useState('kg');
+
+  return (
+    <ControlSet maxWidth="200px">
+      <Input type="number" value={value} onChange={setValue} placeholder="Value" />
+      <Select
+        width="auto"
+        minWidth="24px"
+        value={unit}
+        onChange={setUnit}
+        placeholder="Unit"
+      >
+        <Option value="kg" label="kg">
+          kg
+        </Option>
+        <Option value="lb" label="lb">
+          lb
+        </Option>
+        <Option value="g" label="g">
+          g
+        </Option>
+      </Select>
+    </ControlSet>
+  );
+}

package/src/inputs/{input_group/input_group.tsx → control_set/control_set.tsx}

@@ -2,23 +2,23 @@ import React from 'react';
 import { clsx } from 'clsx';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 
-export type InputGroupProps = HStackProps;
+export type ControlSetProps = HStackProps;
 
-export const InputGroup = React.forwardRef<HTMLElement, InputGroupProps>(
+export const ControlSet = React.forwardRef<HTMLElement, ControlSetProps>(
   function InputGroup(
-    { children, as = 'div', className, ...props }: InputGroupProps,
+    { children, as = 'div', className, ...props }: ControlSetProps,
     ref
   ) {
     const clonedChildren = React.Children.map(children, child =>
       React.isValidElement(child)
         ? React.cloneElement(child, {
             ...child.props,
-            className: clsx(child.props.className, 'tcn-input-group-slot'),
+            className: clsx(child.props.className, 'tcn-control-set-item'),
           })
         : child
     );
     return (
-      <HStack ref={ref} as={as} className={clsx(className, 'tcn-input-group')} {...props}>
+      <HStack ref={ref} as={as} className={clsx(className, 'tcn-control-set')} {...props}>
         {clonedChildren}
       </HStack>
     );

package/src/inputs/date_picker/date_picker_input.stories.tsx

@@ -61,7 +61,7 @@ function DatePickerActions({ presenter }: { presenter: DatePickerPresenter }) {
   );
 }
 
-export function DatePickerInput() {
+export function Baseline() {
   const [value, setValue] = useState<Date | null>(null);
 
   return <DatePickerInputComponent value={value} onChange={setValue} width="300px" />;

package/src/inputs/date_picker/date_picker_input.tsx

@@ -125,7 +125,7 @@ export const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInp
       <>
         <Button
           ref={ref}
-          className={clsx(styles.button, 'tcn-select')}
+          className={clsx(styles.button, 'tcn-entry', 'tcn-date-picker-input')}
           hAlign="start"
           disabled={disabled}
           hierarchy={hierarchy}

package/src/inputs/index.ts

@@ -55,7 +55,8 @@ export * from './textarea/textarea.js';
 
 export * from './unit_input/unit_input.js';
 
-export * from './input_group/input_group.js';
+export * from './control_set/control_set.js';
+export * from './control/control.js';
 
 export {
   SelectGroup,

package/src/inputs/input/input.tsx

@@ -22,7 +22,7 @@ export const Input = React.forwardRef(function Input(
 ) {
   return (
     <input
-      className={clsx(styles.input, className, 'tcn-input', 'tcn-control')}
+      className={clsx(styles.input, className, 'tcn-input', 'tcn-entry')}
       type={type}
       ref={ref}
       data-is-disabled={props.disabled || false}

package/src/inputs/phone_number_input/phone_number_country_select_adapter.tsx

@@ -117,7 +117,7 @@ export function PhoneNumberCountrySelectAdapter({
       onChange={handleChange}
       disabled={disabled}
       aria-label={ariaLabel ?? 'Country'}
-      className={clsx(className, 'tcn-input-group-slot')}
+      className={clsx(className, 'tcn-control-set-item')}
       width="auto"
     >
       {items}

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -150,7 +150,7 @@ export function PhoneNumberInput({
           className={clsx(
             styles['phone-number-input'],
             'tcn-phone-number-input',
-            'tcn-input-group'
+            'tcn-control-set'
           )}
           displayInitialValueAsLocalNumber
           addInternationalOption={false}

package/src/inputs/phone_number_input/phone_number_input_adapter.tsx

@@ -95,13 +95,13 @@ export const PhoneNumberInputAdapter = forwardRef<
         ref={forkedRef}
         value={value}
         {...(rest as any)}
-        className={clsx(className, 'tcn-input-group-slot')}
+        className={clsx(className, 'tcn-control-set-item')}
         onChange={handleChange}
       />
       {showPhoneBook && (
         <Button
           disabled={disabled}
-          className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}
+          className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}
           aria-label={ariaPhoneBookButtonLabel}
           onClick={togglePhoneBook}
           size="md"

package/src/inputs/phone_number_input/sip_input.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect } from 'react';
 import { NotebookIcon } from '@tcn/icons/notebook_icon.js';
 import { Input } from '../input/input.js';
 import { Button } from '../../actions/index.js';
-import { InputGroup } from '../input_group/input_group.js';
+import { ControlSet } from '../control_set/control_set.js';
 import clsx from 'clsx';
 import { usePhoneContext } from './phone_number_context.js';
 import type { CountryCode } from 'libphonenumber-js';
@@ -104,7 +104,7 @@ export function SipInput({
 
   return (
     <>
-      <InputGroup>
+      <ControlSet>
         <PhoneNumberCountrySelectAdapter
           value="SIP"
           onChange={selectCountry}
@@ -124,7 +124,7 @@ export function SipInput({
         {showPhoneBook && (
           <Button
             disabled={disabled}
-            className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}
+            className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}
             aria-label={ariaPhoneBookButtonLabel}
             onClick={togglePhoneBook}
             size="md"
@@ -132,7 +132,7 @@ export function SipInput({
             <NotebookIcon size="md" />
           </Button>
         )}
-      </InputGroup>
+      </ControlSet>
       <SuggestionList
         open={isPhoneBookOpen}
         anchorElement={phoneBookElement}

package/src/inputs/select/select.tsx

@@ -130,7 +130,7 @@ export const Select = React.forwardRef(function Select(
     <>
       <Button
         ref={forkedRef}
-        className={clsx(className, 'tcn-select', 'tcn-control', styles.select)}
+        className={clsx(className, 'tcn-select', 'tcn-entry', styles.select)}
         width="100%"
         {...props}
         hAlign="start"

package/src/inputs/textarea/textarea.stories.tsx

@@ -20,7 +20,7 @@ export default {
   tags: ['autodocs'],
 };
 
-export function Textarea() {
+export function Baseline(props: TextareaProps) {
   return (
     <table className={styles.story}>
       <colgroup>

package/src/inputs/textarea/textarea.tsx

@@ -20,7 +20,7 @@ export const Textarea = React.forwardRef(function Textarea(
   return (
     <textarea
       style={{ width, height, ...style }}
-      className={clsx(className, styles.textarea, 'tcn-textarea', 'tcn-control')}
+      className={clsx(className, styles.textarea, 'tcn-textarea', 'tcn-entry')}
       data-is-disabled={props.disabled || false}
       ref={ref}
       onChange={e => {

package/src/inputs/unit_input/unit_input.tsx

@@ -7,7 +7,7 @@ import { Select } from '../select/select.js';
 import { OptionProps } from '../options/option.js';
 import styles from './unit_input.module.css';
 
-import { InputGroup } from '../input_group/input_group.js';
+import { ControlSet } from '../control_set/control_set.js';
 
 function getDisplayValue(value: string) {
   return value
@@ -80,7 +80,7 @@ export const UnitInput = React.forwardRef(function UnitInput(
   }
 
   return (
-    <InputGroup
+    <ControlSet
       ref={ref}
       className={clsx(styles['unit-input'], 'tcn-unit-input')}
       height="auto"
@@ -110,6 +110,6 @@ export const UnitInput = React.forwardRef(function UnitInput(
       >
         {children}
       </Select>
-    </InputGroup>
+    </ControlSet>
   );
 });

package/src/overlay/frame/frame.tsx

@@ -21,14 +21,7 @@ export interface FrameOwnProps {
   resizable?: boolean;
 }
 
-export type FrameProps = Omit<
-  BoxProps,
-  | 'enableResizeOnLeft'
-  | 'enableResizeOnRight'
-  | 'enableResizeOnTop'
-  | 'enableResizeOnBottom'
-> &
-  FrameOwnProps;
+export type FrameProps = BoxProps & FrameOwnProps;
 
 export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
   {
@@ -38,6 +31,12 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
     veil = false,
     resizable = true,
     className,
+    enableResizeOnTop = true,
+    enableResizeOnBottom = true,
+    enableResizeOnStart = true,
+    enableResizeOnEnd = true,
+    enableResizeOnLeft = false,
+    enableResizeOnRight = false,
     ...rest
   }: FrameProps,
   ref
@@ -50,14 +49,12 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
           <FrameDialog
             className={className}
             ref={ref}
-            enableResizeOnLeft={resizable}
-            enableResizeOnRight={resizable}
-            enableResizeOnTop={resizable}
-            enableResizeOnBottom={resizable}
-            // TODO: check to see if these should be enabled, and if so - if left/right should be disabled.
-            // Could add a "directional" prop and use that in conjunction with enableResizeOnStart/End and deprecate enableResizeOnLeft/Right.
-            // enableResizeOnStart={resizable}
-            // enableResizeOnEnd={resizable}
+            enableResizeOnStart={resizable && enableResizeOnStart}
+            enableResizeOnEnd={resizable && enableResizeOnEnd}
+            enableResizeOnTop={resizable && enableResizeOnTop}
+            enableResizeOnBottom={resizable && enableResizeOnBottom}
+            enableResizeOnRight={resizable && enableResizeOnRight}
+            enableResizeOnLeft={resizable && enableResizeOnLeft}
             draggable={draggable}
             {...rest}
           >

package/src/overlay/slide/slide.module.css

@@ -0,0 +1,30 @@
+@layer tcn-system {
+  :where(.slide) {
+    position: absolute;
+
+    &[data-side="top"],
+    &[data-side="bottom"] {
+      width: 100%;
+    }
+    &[data-side="start"],
+    &[data-side="end"] {
+      height: 100%;
+    }
+    &[data-side="top"] {
+      top: 0;
+    }
+
+    &[data-side="bottom"] {
+      bottom: 0;
+    }
+
+    /* TODO: support LTR directionality */
+    &[data-side="start"] {
+      left: 0;
+    }
+
+    &[data-side="end"] {
+      right: 0;
+    }
+  }
+}

package/src/overlay/slide/slide.stories.tsx

@@ -0,0 +1,58 @@
+import { Header, Scaffold, VBody } from '../../layouts/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { BodyText } from '../../typography/index.js';
+import { Title } from '../../typography/title/title.js';
+import { Slide, type SlideProps } from './slide.js';
+import { DragHandle } from '../../utils/dnd/handle.js';
+
+export default {
+  title: 'Overlays/Floating/Slide',
+  component: Slide,
+  tags: ['autodocs'],
+
+  args: {
+    isOpen: true,
+    veil: false,
+    resizable: true,
+    side: 'top',
+  },
+  argTypes: {
+    side: {
+      control: 'select',
+      options: ['top', 'bottom', 'start', 'end'],
+    },
+  },
+};
+
+export const SlideStory = (args: Omit<SlideProps, 'children'>) => {
+  const isVertical = args.side === 'top' || args.side === 'bottom';
+  return (
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <Slide
+        height={isVertical ? '300px' : undefined}
+        width={!isVertical ? '300px' : undefined}
+        minHeight={isVertical ? '100px' : undefined}
+        minWidth={!isVertical ? '100px' : undefined}
+        maxHeight={isVertical ? '90%' : undefined}
+        maxWidth={!isVertical ? '90%' : undefined}
+        style={{
+          background: 'white',
+        }}
+        {...args}
+      >
+        <Scaffold>
+          <DragHandle>
+            <Header>
+              <Title> This is a Slide</Title>
+            </Header>
+          </DragHandle>
+          <VBody>
+            <BodyText>
+              This component is fixed to a side of a container (top, bottom, start, end).
+            </BodyText>
+          </VBody>
+        </Scaffold>
+      </Slide>
+    </ZStack>
+  );
+};

package/src/overlay/slide/slide.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Frame, type FrameProps } from '../frame/frame.js';
+import { clsx } from 'clsx';
+
+// Styles
+import styles from './slide.module.css';
+
+export type SlideSide = 'top' | 'bottom' | 'start' | 'end';
+
+export interface SlideOwnProps {
+  side: SlideSide;
+}
+
+export type SlideProps = Omit<
+  FrameProps,
+  | 'draggable'
+  | 'enableResizeOnLeft'
+  | 'enableResizeOnRight'
+  | 'enableResizeOnTop'
+  | 'enableResizeOnBottom'
+  | 'enableResizeOnStart'
+  | 'enableResizeOnEnd'
+> &
+  SlideOwnProps;
+
+// A Frame fixed to a side of a container (top, bottom, start, end) - disables dragging - and limits resizing to one side
+export const Slide = React.forwardRef<HTMLElement, SlideProps>(function Slide(
+  { children, side, resizable = false, className, ...rest },
+  ref
+) {
+  const isVertical = side === 'top' || side === 'bottom';
+
+  return (
+    <Frame
+      data-side={side}
+      className={clsx(styles['slide'], className)}
+      draggable={false}
+      ref={ref}
+      data-is-vertical={isVertical}
+      data-is-horizontal={!isVertical}
+      resizable={resizable}
+      enableResizeOnTop={side === 'bottom'}
+      enableResizeOnBottom={side === 'top'}
+      enableResizeOnStart={side === 'end'}
+      enableResizeOnEnd={side === 'start'}
+      {...rest}
+    >
+      {children}
+    </Frame>
+  );
+});

package/src/surfaces/aside/aside.module.css

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  .aside {
+    height: 100%;
+  }
+}