@tcn/ui 0.12.5 → 0.13.0

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

@@ -16,6 +16,7 @@ export interface PhoneNumberInputProps
   extends Omit<HStackProps, 'onChange' | 'children'> {
   value?: string;
   allowSip?: boolean;
+  sipAutoComplete?: string;
   onChange: (value?: string) => void;
   defaultCountry?: string;
   allowedCountryCodes?: string[];
@@ -48,6 +49,7 @@ export function PhoneNumberInput({
   limitMaxLength,
   ariaSelectLabel,
   ariaPhoneBookButtonLabel,
+  sipAutoComplete,
   children,
   ...props
 }: PhoneNumberInputProps) {
@@ -124,6 +126,7 @@ export function PhoneNumberInput({
           autoFocus={autoFocus}
           placeholder={placeholder}
           countries={countries as CountryCode[]}
+          sipAutoComplete={sipAutoComplete}
         />
       </PhoneBookProvider>
     );
@@ -150,7 +153,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';
@@ -14,6 +14,7 @@ import { SuggestionList } from '../suggestions/suggestion_list.js';
 
 export interface SipInputProps {
   onChange: (value: string) => void;
+  sipAutoComplete?: string;
   countries?: CountryCode[];
   disabled?: boolean;
   name?: string;
@@ -29,6 +30,7 @@ export function SipInput({
   'aria-label': ariaLabel,
   autoFocus,
   placeholder,
+  sipAutoComplete = 'on',
 }: SipInputProps) {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [phoneBookElement, setPhoneBookElement] =
@@ -104,7 +106,7 @@ export function SipInput({
 
   return (
     <>
-      <InputGroup>
+      <ControlSet>
         <PhoneNumberCountrySelectAdapter
           value="SIP"
           onChange={selectCountry}
@@ -120,11 +122,12 @@ export function SipInput({
           aria-label={ariaLabel}
           autoFocus={autoFocus}
           placeholder={placeholder}
+          autoComplete={sipAutoComplete}
         />
         {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 +135,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/layouts/__stories__/composed_stories.module.css

@@ -25,7 +25,7 @@
 }
 
 .secondary {
-  padding: 8px 16px;
+  padding: 8px;
 }
 
 .primary {
@@ -76,7 +76,6 @@
 
 .body {
   background: var(--bg-4);
-  gap: 8px;
 }
 
 /* Horizontal Layouts */
@@ -89,11 +88,6 @@
   background: var(--bg-2);
 }
 
-.main {
-  background: var(--bg-3);
-  gap: 8px;
-}
-
 .content {
   background: rgba(0, 0, 0, 0.25);
   display: flex;

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

@@ -5,10 +5,10 @@ import { SBLayoutContent } from './utils/content.js';
 import { Rail } from '../rail/rail.js';
 import { Side } from '../rail/side/side.js';
 import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
-import { Title } from '../../typography/index.js';
-import { HBody } from '../body/h_body.js';
-import { VBody } from '../body/v_body.js';
+import { BodyText, Title } from '../../typography/index.js';
 import { Body } from '../body/body.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Scaffold } from '../scaffold/scaffold.js';
 
 const meta: Meta<typeof Rail> = {
   title: 'Layouts/Rail',
@@ -48,11 +48,16 @@ export const HorizontalContent: Story = {
         <UtilityStrip>
           <Title>Utility Strip</Title>
         </UtilityStrip>
-        <HBody>
-          <SBLayoutContent />
-          <SBLayoutContent />
-          <SBLayoutContent />
-        </HBody>
+        <Body>
+          <Rail>
+            <VStack minWidth="200px">
+              <BodyText>Body + Rail</BodyText>
+            </VStack>
+            <SBLayoutContent />
+            <SBLayoutContent />
+            <SBLayoutContent />
+          </Rail>
+        </Body>
         <Side width="200px">Side</Side>
       </Rail>
     </LayoutStoryDecorator>
@@ -66,11 +71,13 @@ export const VerticalContent: Story = {
         <UtilityStrip>
           <Title>Utility Strip</Title>
         </UtilityStrip>
-        <VBody>
-          <SBLayoutContent />
-          <SBLayoutContent />
-          <SBLayoutContent />
-        </VBody>
+        <Body>
+          <Scaffold>
+            <SBLayoutContent />
+            <SBLayoutContent />
+            <SBLayoutContent />
+          </Scaffold>
+        </Body>
         <Side width="200px">Side</Side>
       </Rail>
     </LayoutStoryDecorator>

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

@@ -1,15 +1,17 @@
 import { Scaffold } from '../scaffold/scaffold.js';
 import { Header } from '../header/header.js';
 import { UtilityBar } from '../utility_bar/utility_bar.js';
-import { VBody } from '../body/v_body.js';
 import { Footer } from '../footer/footer.js';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
 import { SBLayoutContent } from './utils/content.js';
-import { HBody } from '../body/h_body.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Body } from '../body/body.js';
+import { Rail } from '../rail/rail.js';
+import { Section } from '../section/section.js';
+import { BodyText } from '../../typography/index.js';
+import { Heading } from '../section/heading.js';
 
 const meta: Meta<typeof Scaffold> = {
   title: 'Layouts/Scaffold',
@@ -50,20 +52,30 @@ export const VerticalContent: Story = {
       <Scaffold height="100vh">
         <Header>Header</Header>
         <UtilityBar>Utility Bar</UtilityBar>
-        <VBody>
-          <p>(V)Body</p>
-          <p>Fills available space</p>
-          <p>Scrolls vertically</p>
-          <SBLayoutContent />
-          <SBLayoutContent />
-          <SBLayoutContent />
-        </VBody>
-        <Footer>Footer</Footer>
+        <Body>
+          <Scaffold>
+            <VStack>
+              <BodyText>Body + Scaffold</BodyText>
+            </VStack>
+            <Section>
+              <Heading>Section 1 - A</Heading>
+              <SBLayoutContent />
+              <Section>
+                <Heading>Section 1 - B</Heading>
+                <SBLayoutContent />
+              </Section>
+            </Section>
+            <Section>
+              <Heading>Section 2</Heading>
+              <SBLayoutContent />
+              <SBLayoutContent />
+            </Section>
+          </Scaffold>
+        </Body>
       </Scaffold>
     </LayoutStoryDecorator>
   ),
 };
-
 export const HorizontalContent: Story = {
   args: {
     height: '100vh',
@@ -73,16 +85,16 @@ export const HorizontalContent: Story = {
       <Scaffold height="100vh">
         <Header>Header</Header>
         <UtilityBar>Utility Bar</UtilityBar>
-        <HBody>
-          <VStack minWidth="200px" hAlign="center">
-            <p>(H)Body</p>
-            <p>Fills available space</p>
-            <p>Scrolls horizontally</p>
-          </VStack>
-          <SBLayoutContent />
-          <SBLayoutContent />
-          <SBLayoutContent />
-        </HBody>
+        <Body>
+          <Rail>
+            <VStack minWidth="200px">
+              <BodyText>Body + Rail</BodyText>
+            </VStack>
+            <SBLayoutContent />
+            <SBLayoutContent />
+            <SBLayoutContent />
+          </Rail>
+        </Body>
         <Footer>Footer</Footer>
       </Scaffold>
     </LayoutStoryDecorator>