@tcn/ui 0.0.1

package/src/form/field/common/status_input/status_input.tsx

@@ -0,0 +1,84 @@
+import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
+import { LockTwoIcon } from '@tcn/icons/lock_two_icon.js';
+import { HStack } from '../../../../stacks/h_stack.js';
+import type { HStackOwnProps } from '../../../../stacks/h_stack.js';
+import type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';
+import React from 'react';
+import { Loading } from '../../../../feedback/index.js';
+import classNames from 'classnames';
+import styles from './status_input.module.css';
+
+/*
+ TODO: I really want to make these themable.
+ The way we do that is simply put a div placeholder with
+ a class that the theme can override. They can use svgs as 
+ backgrounds for icons. This would make it so the component
+ library doesn't dictate the icon set used. 
+*/
+const LockedAdornment: React.FC = () => {
+  return <LockTwoIcon className="field-lock" size="lg" />;
+};
+
+const LoadingAdornment: React.FC = () => {
+  return <Loading size="20px" className="field-loader" />;
+};
+
+const ErroredAdornment: React.FC = () => {
+  return (
+    <AlertTriangleIcon
+      className={classNames(styles['field-error'], 'field-error')}
+      size="lg"
+    />
+  );
+};
+
+export const AdornmentMap: React.FC<{ state: StatusInputState }> = ({ state }) => {
+  switch (state) {
+    case 'locked':
+      return <LockedAdornment />;
+    case 'loading':
+      return <LoadingAdornment />;
+    case 'error':
+      return <ErroredAdornment />;
+    default:
+      return null;
+  }
+};
+
+export type StatusInputState = 'locked' | 'loading' | 'error' | 'default';
+export interface StatusInputOwnProps {
+  children: React.ReactNode;
+  state?: StatusInputState;
+}
+
+export type StatusInputProps = WithDetailedHTMLProps<
+  StatusInputOwnProps & HStackOwnProps,
+  'div'
+>;
+
+export const FieldStatusInput = React.forwardRef(function StatusInput(
+  { children: Control, state = 'default', className, ...props }: StatusInputProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const showControl = state === 'default' || state === 'error';
+
+  return (
+    <HStack
+      ref={ref}
+      data-state={state}
+      className={classNames(
+        'field-status-input',
+        styles['field-status-input'],
+        className,
+        'field-status-input'
+      )}
+      vAlign="center"
+      hAlign="end"
+      gap="4px"
+      {...props}
+    >
+      {showControl && Control}
+      <AdornmentMap state={state} />
+    </HStack>
+  );
+});

package/src/form/field/common/types.ts

@@ -0,0 +1,9 @@
+export interface FieldInput {
+  id?: string;
+  label?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  errorMessage?: string | React.ReactNode;
+  locked?: boolean;
+  loading?: boolean;
+  required?: boolean;
+}

package/src/form/field/field.stories.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Divider } from '../../layouts/divider/divider.js';
+import { FieldSet } from '../field_set/field_set.js';
+import { Field } from './field.js';
+import { Input } from '../../inputs/index.js';
+import { BodyText } from '../../typography/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
+import { theme } from '../../themes/index.js';
+
+export default {
+  title: 'Field/Field',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A responsive Field component that automatically switches between horizontal (HField) and vertical (VField) layouts based on screen width. Uses HField for screens > 400px and VField for smaller screens.',
+      },
+    },
+  },
+};
+
+export function Baseline() {
+  return (
+    <FieldSet minWidth="200px" padding="8px" gap="8px" maxWidth="600px">
+      <Field label="Default" id="field-1">
+        <Input />
+      </Field>
+      <Divider horizontal />
+      <Field
+        locked
+        label="Locked"
+        description="Put helpful information here so the user knows what to do with the input."
+        id="field-2"
+      >
+        <Input />
+      </Field>
+      <Divider horizontal />
+      <Field loading label="Loading" id="field-3">
+        <Input />
+      </Field>
+      <Divider horizontal />
+      <Field
+        label="Error"
+        errorMessage="There was a problem with your input."
+        id="field-4"
+      >
+        <Input />
+      </Field>
+      <Divider horizontal />
+      <Field
+        label="Description"
+        description="Put helpful information here so the user knows what to do with the input."
+        id="field-5"
+      >
+        <Input />
+      </Field>
+      <Divider horizontal />
+      <Field
+        errorMessage={
+          <BodyText size="sm">
+            Permission not met - please contact your supervisor to set this field.
+          </BodyText>
+        }
+        label="Custom Helper Text"
+        description={
+          <HStack vAlign="center">
+            <AlertTriangleIcon size="sm" color={theme.statusColors.warning} />
+            <Spacer width="4px" />
+            <BodyText size="sm" color={theme.statusColors.warning}>
+              This setting has been set by your manager
+            </BodyText>
+          </HStack>
+        }
+        id="field-6"
+      >
+        <Input />
+      </Field>
+    </FieldSet>
+  );
+}
+
+export function ResponsiveDemo() {
+  return (
+    <div style={{ padding: '20px' }}>
+      <BodyText size="lg" style={{ marginBottom: '20px' }}>
+        Resize your browser window to see the Field component switch between horizontal
+        and vertical layouts.
+        <br />
+        <strong>Horizontal layout (HField):</strong> Screens wider than 800px
+        <br />
+        <strong>Vertical layout (VField):</strong> Screens 800px or narrower
+      </BodyText>
+
+      <FieldSet minWidth="200px" padding="8px" gap="8px" maxWidth="900px">
+        <Field
+          label="Email Address"
+          description="Enter your primary email address"
+          id="email-field"
+          breakpointPixels={800}
+        >
+          <Input placeholder="Enter email" />
+        </Field>
+
+        <Divider horizontal />
+
+        <Field
+          label="Full Name"
+          errorMessage="Please enter your full name"
+          id="name-field"
+          breakpointPixels={800}
+        >
+          <Input placeholder="Enter full name" />
+        </Field>
+
+        <Divider horizontal />
+
+        <Field
+          locked
+          label="Account ID"
+          description="This field is managed by the system"
+          id="account-field"
+          breakpointPixels={800}
+        >
+          <Input value="ACC-12345" />
+        </Field>
+      </FieldSet>
+    </div>
+  );
+}

package/src/form/field/field.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import type { FieldInput } from './common/types.js';
+import { HField } from './h_field/h_field.js';
+import { VField } from './v_field/v_field.js';
+import { useForkRef, useResizeObserver } from '../../utils/index.js';
+import type { StackStyleProps } from '../../stacks/types/styles.js';
+
+export interface FieldProps extends FieldInput, StackStyleProps {
+  children: React.ReactNode;
+  breakpointPixels?: number;
+  labelWidth?: string;
+}
+
+export const Field = React.forwardRef(function Field(
+  { children, breakpointPixels = 500, ...props }: FieldProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const [isWideContainer, setIsWideContainer] = useState(true);
+  const containerRef = useResizeObserver(newWidth => {
+    setIsWideContainer(newWidth >= breakpointPixels);
+  });
+  const forkedRef = useForkRef(ref, containerRef);
+
+  return (
+    <>
+      {isWideContainer ? (
+        <HField {...props} ref={forkedRef} {...props}>
+          {children}
+        </HField>
+      ) : (
+        <VField {...props} ref={forkedRef} {...props}>
+          {children}
+        </VField>
+      )}
+    </>
+  );
+});

package/src/form/field/form_field.tsx

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { useSignalValue } from '@tcn/state';
+import { FieldPresenter, FieldState } from '../field_presenters/field_presenter.js';
+
+export function FormField<T>({
+  field,
+  children,
+}: {
+  field: FieldPresenter<T>;
+  children: (
+    state: FieldState<T>,
+    setValue: (value: T) => void,
+    validate: () => Promise<void>
+  ) => React.ReactElement;
+}) {
+  const state = useSignalValue(field.stateBroadcast);
+  const setValue = useCallback(
+    (value: T) => {
+      field.setValue(value);
+    },
+    [field]
+  );
+
+  const validate = useCallback(() => {
+    return field.validate();
+  }, [field]);
+
+  return children(state, setValue, validate);
+}

package/src/form/field/h_field/h_field.module.css

@@ -0,0 +1,6 @@
+.h-field > *:last-child {
+  width: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0%;
+}

package/src/form/field/h_field/h_field.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { HField } from './h_field.js';
+import { FieldSet } from '../../field_set/field_set.js';
+import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
+import { Input } from '../../../inputs/index.js';
+import { Divider } from '../../../layouts/divider/divider.js';
+import { BodyText, Title } from '../../../typography/index.js';
+import { HStack } from '../../../stacks/h_stack.js';
+import { Spacer } from '../../../stacks/spacer.js';
+
+export default {
+  title: 'Field/HField',
+};
+
+export function Baseline() {
+  return (
+    <FieldSet maxWidth="600px" minWidth="300px" padding="8px" gap="8px">
+      <HField label="Default" id="field-1">
+        <Input />
+      </HField>
+      <Divider horizontal />
+      <HField
+        locked
+        label="Locked"
+        description="Put helpful information here so the user knows what to do with the input."
+        id="field-2"
+      >
+        <Input />
+      </HField>
+      <Divider horizontal />
+      <HField loading label="Loading" id="field-3">
+        <Input />
+      </HField>
+      <Divider horizontal />
+      <HField
+        label="Error"
+        errorMessage="There was a problem with your input."
+        id="field-4"
+      >
+        <Input />
+      </HField>
+      <Divider horizontal />
+      <HField
+        label="Description"
+        description="Put helpful information here so the user knows what to do with the input."
+        id="field-5"
+      >
+        <Input />
+      </HField>
+      <Divider horizontal />
+      <HField
+        label="Required Field"
+        description="This field is required and will show a visual indicator."
+        required
+        id="field-required"
+      >
+        <Input />
+      </HField>
+      <Divider horizontal />
+      <HField
+        errorMessage={
+          <BodyText size="sm" color="#e0383e" style={{ fontWeight: 'bold' }}>
+            Permission not met - please contact your supervisor to set this field.
+          </BodyText>
+        }
+        label={<Title size="sm">Custom Helper Text</Title>}
+        description={
+          <HStack vAlign="center">
+            <AlertTriangleIcon size="sm" color="#b8860b" />
+            <Spacer width="4px" />
+            <BodyText size="md" color="#b8860b">
+              This setting has been set by your manager
+            </BodyText>
+          </HStack>
+        }
+        id="field-6"
+      >
+        <Input />
+      </HField>
+      <Divider horizontal />
+      <HField
+        label="Disabled"
+        description="This field is disabled and cannot be interacted with."
+        id="field-7"
+      >
+        <Input disabled defaultValue="Disabled value" />
+      </HField>
+    </FieldSet>
+  );
+}

package/src/form/field/h_field/h_field.tsx

@@ -0,0 +1,70 @@
+import { HStack } from '../../../stacks/h_stack.js';
+import type { HStackOwnProps } from '../../../stacks/h_stack.js';
+import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import styles from './h_field.module.css';
+import { FieldInput } from '../common/types.js';
+import { FieldHeader } from '../common/field_header.js';
+import { FieldControl } from '../common/field_control/field_control.js';
+import { FieldStatusInput } from '../common/status_input/status_input.js';
+
+export interface HFieldOwnProps extends FieldInput {
+  labelWidth?: string;
+  children: React.ReactNode;
+}
+export type HFieldProps = WithDetailedHTMLProps<HFieldOwnProps, 'div'> & HStackOwnProps;
+
+let idIndex = 0;
+export const HField = React.forwardRef(function HField(
+  {
+    label,
+    description,
+    errorMessage,
+    children: Control,
+    labelWidth = '40%',
+    locked = false,
+    loading = false,
+    className,
+    id,
+    required,
+    ...props
+  }: HFieldProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const [finalId] = useState(() => id || `h-field-${idIndex++}`);
+  const labelId = `${finalId}-label`;
+  const descriptionId = `${finalId}-description`;
+  const hasError = errorMessage ? true : false;
+  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';
+
+  return (
+    <HStack
+      ref={ref}
+      as="div"
+      aria-labelledby={labelId}
+      aria-describedby={descriptionId}
+      data-locked={locked}
+      data-error={hasError}
+      data-loading={loading}
+      className={classNames('base-field', styles['h-field'], 'h-field', className)}
+      vAlign="start"
+      hAlign="start"
+      height="auto"
+      gap="4px"
+      {...props}
+    >
+      <FieldHeader
+        minWidth={labelWidth}
+        width={labelWidth}
+        id={finalId}
+        label={label}
+        description={description}
+        required={required}
+      />
+      <FieldControl errorMessage={errorMessage} loading={loading} locked={locked}>
+        <FieldStatusInput state={state}>{Control}</FieldStatusInput>
+      </FieldControl>
+    </HStack>
+  );
+});

package/src/form/field/v_field/v_field.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { VField } from './v_field.js';
+import { Input } from '../../../inputs/index.js';
+import { BodyText } from '../../../typography/index.js';
+import { HStack } from '../../../stacks/h_stack.js';
+import { Spacer } from '../../../stacks/spacer.js';
+import { Divider } from '../../../layouts/divider/divider.js';
+import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
+import { FieldSet } from '../../field_set/field_set.js';
+
+export default {
+  title: 'Field/VField',
+};
+
+export function Baseline() {
+  return (
+    <FieldSet maxWidth="350px" minWidth="150px" padding="8px" gap="8px">
+      <VField label="Default" id="field-1">
+        <Input />
+      </VField>
+      <Divider horizontal />
+      <VField
+        locked
+        label="Locked"
+        description="Put helpful information here so the user knows what to do with the input."
+        id="field-2"
+      >
+        <Input />
+      </VField>
+      <Divider horizontal />
+      <VField loading label="Loading" id="field-3">
+        <Input />
+      </VField>
+      <Divider horizontal />
+      <VField
+        label="Error"
+        errorMessage="There was a problem with your input."
+        id="field-4"
+      >
+        <Input />
+      </VField>
+      <Divider horizontal />
+      <VField
+        label="Description"
+        description="Put helpful information here so the user knows what to do with the input."
+        id="field-5"
+      >
+        <Input />
+      </VField>
+      <Divider horizontal />
+      <VField
+        label="Required Field"
+        description="This field is required and will show a visual indicator."
+        required
+        id="field-required"
+      >
+        <Input />
+      </VField>
+      <Divider horizontal />
+      <VField
+        errorMessage={
+          <BodyText size="sm" color="#e0383e" style={{ fontWeight: 'bold' }}>
+            Permission not met - please contact your supervisor to set this field.
+          </BodyText>
+        }
+        label="Custom Helper Text"
+        description={
+          <HStack vAlign="center">
+            <AlertTriangleIcon size="sm" color="#b8860b" />
+            <Spacer width="4px" />
+            <BodyText size="sm" color="#b8860b">
+              This setting has been set by your manager
+            </BodyText>
+          </HStack>
+        }
+        id="field-6"
+      >
+        <Input />
+      </VField>
+      <Divider horizontal />
+      <VField
+        label="Disabled"
+        description="This field is disabled and cannot be interacted with."
+        id="field-7"
+      >
+        <Input defaultValue="Disabled value" />
+      </VField>
+    </FieldSet>
+  );
+}

package/src/form/field/v_field/v_field.tsx

@@ -0,0 +1,74 @@
+import { VStack } from '../../../stacks/v_stack.js';
+import type { VStackOwnProps } from '../../../stacks/v_stack.js';
+import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import styles from './v_field.module.css';
+import { FieldControl } from '../common/field_control/field_control.js';
+import { FieldHeader } from '../common/field_header.js';
+import { FieldStatusInput } from '../common/status_input/status_input.js';
+import { FieldInput } from '../common/types.js';
+
+export interface VFieldOwnProps extends FieldInput {
+  children: React.ReactNode;
+}
+
+export type VFieldProps = WithDetailedHTMLProps<VFieldOwnProps, 'div'> & VStackOwnProps;
+let idIndex = 0;
+export const VField = React.forwardRef(function VField(
+  {
+    label,
+    description,
+    errorMessage,
+    children: Control,
+    locked = false,
+    loading = false,
+    maxWidth,
+    minWidth,
+    className,
+    id,
+    required,
+    ...props
+  }: VFieldProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const [finalId] = useState(() => id || `v-field-${idIndex++}`);
+  const hasError = errorMessage ? true : false;
+  const labelId = `${finalId}-label`;
+  const descriptionId = `${finalId}-description`;
+  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';
+  return (
+    <VStack
+      ref={ref}
+      as="div"
+      aria-labelledby={labelId}
+      aria-describedby={descriptionId}
+      data-locked={locked}
+      data-error={hasError}
+      data-loading={loading}
+      className={classNames('base-field', styles['v-field'], 'v-field', className)}
+      vAlign="start"
+      hAlign="start"
+      height="auto"
+      gap="4px"
+      {...props}
+    >
+      <FieldHeader
+        id={finalId}
+        label={label}
+        description={description}
+        required={required}
+      />
+      <FieldControl
+        errorMessage={errorMessage}
+        loading={loading}
+        locked={locked}
+        hAlign="start"
+      >
+        <FieldStatusInput state={state} hAlign="start">
+          {Control}
+        </FieldStatusInput>
+      </FieldControl>
+    </VStack>
+  );
+});