@altruist03/ui 0.1.0 → 0.2.1

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,249 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextField } from "./TextField";
+import type { TextFieldProps } from "./TextField.types";
+import PersonIcon from "@mui/icons-material/Person";
+import SearchIcon from "@mui/icons-material/Search";
+
+const meta: Meta<typeof TextField> = {
+  title: "Design System/TextField",
+  component: TextField,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "420px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    label: "First Name",
+    placeholder: "First Name",
+    required: false,
+    error: false,
+    helperText: "",
+    size: "md",
+    fullWidth: true,
+    color: "white",
+  } as TextFieldProps,
+  argTypes: {
+    color: {
+      control: { type: "radio" },
+      options: ["white", "grey"],
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+      description: "Size of the text field",
+    },
+    error: {
+      control: { type: "boolean" },
+      description: "Shows error state and styles",
+    },
+    helperText: {
+      control: { type: "text" },
+      description: "Helper or error text displayed below the field",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables the field",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Marks the field as required",
+    },
+    multiline: {
+      control: { type: "boolean" },
+      description: "Renders a multiline textarea",
+    },
+    startIcon: {
+      control: { type: "select" },
+      options: ["none", "SearchIcon", "PersonIcon"],
+      mapping: {
+        none: undefined,
+        SearchIcon: <SearchIcon fontSize="small" />,
+        PersonIcon: <PersonIcon fontSize="small" />,
+      },
+      description:
+        "Icon at the start (left) of the input. Pass any MUI or firebird-icon-lib SVG component.",
+    },
+    endIcon: {
+      control: { type: "select" },
+      options: ["none", "SearchIcon", "PersonIcon"],
+      mapping: {
+        none: undefined,
+        SearchIcon: <SearchIcon fontSize="small" />,
+        PersonIcon: <PersonIcon fontSize="small" />,
+      },
+      description:
+        "Icon at the end (right) of the input. Pass any MUI or firebird-icon-lib SVG component.",
+    },
+    value: {
+      control: { type: "text" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const Playground: Story = {
+  args: {
+    label: "First Name",
+    placeholder: "Enter first name",
+    required: true,
+    startIcon: <SearchIcon fontSize="small" />,
+  },
+  render: (args) => {
+    // Storybook `render` is not guaranteed to be treated as a React component by eslint,
+    // so keep hooks inside a component to satisfy `rules-of-hooks`.
+    const PlaygroundWithState = (props: typeof args) => {
+      const [value, setValue] = useState<string>(
+        typeof props.value === "string" ? props.value : "",
+      );
+
+      React.useEffect(() => {
+        if (typeof props.value === "string") setValue(props.value);
+      }, [props.value]);
+
+      return (
+        <TextField
+          {...props}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      );
+    };
+
+    return <PlaygroundWithState {...args} />;
+  },
+};
+
+const ShowcaseComponent = () => {
+  const [value1, setValue1] = useState("");
+  const [value2, setValue2] = useState("John Doe");
+  const [value3, setValue3] = useState("");
+  const [value4, setValue4] = useState("");
+  const [value5, setValue5] = useState("Finance");
+  const [value6, setValue6] = useState("John Doe");
+  const [value7, setValue7] = useState("");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      {/* Default — no icon */}
+      <TextField
+        label="First Name"
+        placeholder="Enter first name"
+        required
+        value={value1}
+        onChange={(e) => setValue1(e.target.value)}
+      />
+
+      {/* With start icon */}
+      <TextField
+        label="Search"
+        placeholder="Search..."
+        startIcon={<SearchIcon fontSize="small" />}
+        value={value1}
+        onChange={(e) => setValue1(e.target.value)}
+      />
+
+      {/* With end icon */}
+      <TextField
+        label="First Name"
+        placeholder="Enter first name"
+        required
+        endIcon={<PersonIcon fontSize="small" />}
+        value={value2}
+        onChange={(e) => setValue2(e.target.value)}
+      />
+
+      {/* With both icons */}
+      <TextField
+        label="Search People"
+        placeholder="Search..."
+        startIcon={<SearchIcon fontSize="small" />}
+        endIcon={<PersonIcon fontSize="small" />}
+        value={value1}
+        onChange={(e) => setValue1(e.target.value)}
+      />
+
+      {/* Error state */}
+      <TextField
+        label="Department"
+        placeholder="Enter department"
+        required
+        startIcon={<PersonIcon fontSize="small" />}
+        error
+        helperText="Department name already exists"
+        value={value5}
+        onChange={(e) => setValue5(e.target.value)}
+      />
+
+      {/* Helper text */}
+      <TextField
+        label="Email"
+        placeholder="Enter email"
+        helperText="We'll never share your email"
+        value={value4}
+        onChange={(e) => setValue4(e.target.value)}
+      />
+
+      {/* Disabled with value */}
+      <TextField
+        label="First Name"
+        placeholder="Enter first name"
+        required
+        disabled
+        value={value6}
+        onChange={(e) => setValue6(e.target.value)}
+      />
+
+      {/* Multiline */}
+      <TextField
+        label="Description"
+        placeholder="Enter description"
+        required
+        multiline
+        rows={3}
+        value={value3}
+        onChange={(e) => setValue3(e.target.value)}
+      />
+
+      {/* Small size */}
+      <TextField
+        label="First Name (sm)"
+        placeholder="Enter first name"
+        size="sm"
+        startIcon={<PersonIcon fontSize="small" />}
+        value={value7}
+        onChange={(e) => setValue7(e.target.value)}
+      />
+
+      {/* Large size */}
+      <TextField
+        label="First Name (lg)"
+        placeholder="Enter first name"
+        size="lg"
+        startIcon={<PersonIcon fontSize="small" />}
+        value={value7}
+        onChange={(e) => setValue7(e.target.value)}
+      />
+
+      {/* Color: white */}
+      <TextField
+        label="First Name (white)"
+        placeholder="Enter first name"
+        required
+        color="white"
+        value={value1}
+        onChange={(e) => setValue1(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const Showcase: Story = {
+  render: () => <ShowcaseComponent />,
+};

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,462 @@
+import React, { useState, useEffect, useRef } from 'react';
+import type { TextFieldProps } from './TextField.types';
+import { getTextFieldTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+// import { Icon as FirebirdIcon } from "firebird-icon-lib";
+import { Skeleton } from '../Skeleton/Skeleton';
+
+export const TextField = ({
+  label,
+  value,
+  defaultValue,
+  placeholder,
+  helperText,
+  required = false,
+  error = false,
+  disabled = false,
+  fullWidth = true,
+  type = 'text',
+  name,
+  id,
+  onChange,
+  onBlur,
+  onFocus,
+  multiline = false,
+  rows = 3,
+  maxRows,
+  minRows,
+  autoFocus = false,
+  autoComplete,
+  size = 'md',
+  color = 'white',
+  inputProps,
+  inputRef: inputRefProp,
+  InputProps,
+  skeletonLoading = false,
+  prefix,
+  suffix,
+  startIcon,
+  endIcon,
+}: TextFieldProps) => {
+  const [internalValue, setInternalValue] = useState<string>(
+    value !== undefined ? value : (defaultValue ?? '')
+  );
+  const [isFocused, setIsFocused] = useState(false);
+  const internalInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  const inputId =
+    id ?? name ?? (label ? String(label).replace(/\s+/g, '-').toLowerCase() : undefined);
+  const currentValue = value !== undefined ? value : internalValue;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    if (value === undefined) {
+      setInternalValue(newValue);
+    }
+    onChange?.(e);
+  };
+
+  const handleFocusInternal = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleBlurInternal = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+
+  const resolvedTokens = useTokens();
+  const tokens = getTextFieldTokensFromResolved(resolvedTokens);
+  const inputHeight =
+    size === 'sm' ? parseInt(tokens.heightSm, 10)
+    : size === 'lg' ? parseInt(tokens.heightLg, 10)
+    : parseInt(tokens.heightMd, 10);
+  const inputPaddingRaw =
+    size === 'sm' ? tokens.paddingSm
+    : size === 'md' ? tokens.paddingMd
+    : tokens.paddingLg;
+
+  // Parse a CSS shorthand padding string into explicit sides to avoid
+  // shorthand vs longhand conflicts when adding icon offset later.
+  const parsePadding = (p: string) => {
+    const parts = p.trim().split(/\s+/);
+    if (parts.length === 1)
+      return {
+        top: parts[0],
+        right: parts[0],
+        bottom: parts[0],
+        left: parts[0],
+      };
+    if (parts.length === 2)
+      return {
+        top: parts[0],
+        right: parts[1],
+        bottom: parts[0],
+        left: parts[1],
+      };
+    if (parts.length === 3)
+      return {
+        top: parts[0],
+        right: parts[1],
+        bottom: parts[2],
+        left: parts[1],
+      };
+    return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
+  };
+  const parsedPadding = parsePadding(inputPaddingRaw);
+  const inputFontSize =
+    size === 'sm' ? tokens.fontSizeSm
+    : size === 'lg' ? tokens.fontSizeLg
+    : tokens.fontSizeMd;
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: parseInt(tokens.labelMarginBottom, 10),
+    fontSize: tokens.labelFontSize,
+    fontWeight: tokens.labelFontWeight,
+    color: tokens.labelColor,
+    fontFamily: tokens.fontFamily,
+  };
+
+  const resolvedBackgroundColor =
+    color === 'white' ? tokens.backgroundColorWhite : tokens.backgroundColorWhite;
+  const inputStyle: React.CSSProperties = {
+    width: fullWidth ? '100%' : undefined,
+    // Use explicit sides (no shorthand) so paddingLeft/paddingRight
+    // overrides in adjustedInputStyle work reliably.
+    paddingTop: parsedPadding.top,
+    paddingRight: parsedPadding.right,
+    paddingBottom: parsedPadding.bottom,
+    paddingLeft: parsedPadding.left,
+    fontSize: inputFontSize,
+    color: tokens.inputTextColor,
+    fontFamily: tokens.fontFamily,
+    backgroundColor: resolvedBackgroundColor,
+    border:
+      error ? `1px solid ${tokens.outlineError}`
+      : isFocused ? `1px solid ${tokens.outlineActive}`
+      : `1px solid ${tokens.outlineDefault}`,
+    borderRadius:
+      size === 'sm' ? tokens.borderRadiusSm
+      : size === 'lg' ? tokens.borderRadiusLg
+      : tokens.borderRadiusMd,
+    outline: 'none',
+    boxSizing: 'border-box',
+    minHeight: multiline ? undefined : inputHeight,
+    opacity: disabled ? parseFloat(tokens.disabledOpacity) : 1,
+    cursor: disabled ? 'not-allowed' : undefined,
+    lineHeight: 1,
+  };
+
+  const helperStyle: React.CSSProperties = {
+    marginTop: 4,
+    fontSize: tokens.helperFontSize,
+    color: error ? tokens.errorColor : tokens.labelColor,
+    fontFamily: tokens.fontFamily,
+  };
+
+  const rowsNum = typeof rows === 'string' ? parseInt(rows, 10) : rows;
+  const minRowsNum =
+    minRows != null ?
+      typeof minRows === 'string' ?
+        parseInt(minRows, 10)
+      : minRows
+    : rowsNum;
+  const maxRowsNum =
+    maxRows != null ?
+      typeof maxRows === 'string' ?
+        parseInt(maxRows, 10)
+      : maxRows
+    : undefined;
+  const lineHeight = 20;
+
+  const setInputRef = (el: HTMLInputElement | HTMLTextAreaElement | null) => {
+    (
+      internalInputRef as React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>
+    ).current = el;
+    if (inputRefProp) {
+      if (typeof inputRefProp === 'function') {
+        inputRefProp(el);
+      } else {
+        (
+          inputRefProp as React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>
+        ).current = el;
+      }
+    }
+  };
+
+  const resolvedStartAdornment = prefix ? undefined : (startIcon ?? InputProps?.startAdornment);
+  const resolvedEndAdornment = suffix ? undefined : (endIcon ?? InputProps?.endAdornment);
+  const hasPrefix = prefix != null && prefix !== '';
+  const hasSuffix = suffix != null && suffix !== '';
+  const hasAffix = hasPrefix || hasSuffix;
+  const hasAdornment = resolvedStartAdornment || resolvedEndAdornment;
+
+  const borderRadius =
+    size === 'sm' ? tokens.borderRadiusSm
+    : size === 'lg' ? tokens.borderRadiusLg
+    : tokens.borderRadiusMd;
+
+  const outlineColor =
+    error ? tokens.outlineError
+    : isFocused ? tokens.outlineActive
+    : tokens.outlineDefault;
+
+  const inputWrapperStyle: React.CSSProperties = {
+    position: 'relative',
+    width: fullWidth ? '100%' : undefined,
+    display: 'flex',
+    alignItems: 'center',
+    cursor: disabled ? 'not-allowed' : undefined,
+  };
+
+  const prefixWrapperStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'stretch',
+    width: fullWidth ? '100%' : undefined,
+    minHeight: multiline ? undefined : inputHeight,
+    border: `1px solid ${outlineColor}`,
+    borderRadius,
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    backgroundColor: resolvedBackgroundColor,
+    opacity: disabled ? parseFloat(tokens.disabledOpacity) : 1,
+    cursor: disabled ? 'not-allowed' : undefined,
+  };
+
+  const prefixBoxStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    padding: `0 ${parsedPadding.left}`,
+    backgroundColor: '#F1F5F9',
+    borderRight: `1px solid ${tokens.outlineDefault}`,
+    color: '#64748B',
+    fontSize: inputFontSize,
+    fontWeight: 500,
+    fontFamily: tokens.fontFamily,
+    pointerEvents: 'none',
+  };
+
+  const suffixBoxStyle: React.CSSProperties = {
+    ...prefixBoxStyle,
+    borderRight: 'none',
+    borderLeft: `1px solid ${tokens.outlineDefault}`,
+  };
+
+  const prefixInputStyle: React.CSSProperties = {
+    ...inputStyle,
+    flex: 1,
+    minWidth: 0,
+    border: 'none',
+    borderRadius: 0,
+    minHeight: multiline ? undefined : inputHeight,
+    opacity: 1,
+    ...(resolvedEndAdornment && { paddingRight: tokens.iconPaddingLeft }),
+  };
+
+  const adjustedInputStyle: React.CSSProperties = {
+    ...inputStyle,
+    ...(resolvedEndAdornment && { paddingRight: tokens.iconPaddingLeft }),
+    ...(resolvedStartAdornment && { paddingLeft: tokens.iconPaddingLeft }),
+  };
+
+  const startAdornmentStyle: React.CSSProperties = {
+    position: 'absolute',
+    left: tokens.iconStartLeft,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    display: 'flex',
+    alignItems: 'center',
+    zIndex: 1,
+    pointerEvents: 'none',
+    color: tokens.placeholderColor,
+  };
+
+  const endAdornmentStyle: React.CSSProperties = {
+    position: 'absolute',
+    right: tokens.iconEndRight,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    display: 'flex',
+    alignItems: 'center',
+    zIndex: 1,
+    color: tokens.placeholderColor,
+  };
+
+  return (
+    <div style={{ width: fullWidth ? '100%' : undefined }}>
+      <style>
+        {`.text-field-input::placeholder {
+          color: ${tokens.placeholderColor};
+        }`}
+      </style>
+      {label != null && label !== '' && (
+        <label htmlFor={inputId} style={labelStyle}>
+          {label}
+          {required && <span style={{ color: tokens.errorColor, marginRight: 4 }}>*</span>}
+        </label>
+      )}
+      {skeletonLoading ?
+        <Skeleton height={inputHeight} borderRadius={8} />
+      : hasAffix ?
+        <div style={prefixWrapperStyle}>
+          {hasPrefix && <div style={prefixBoxStyle}>{prefix}</div>}
+          <div style={{ position: 'relative', flex: 1, display: 'flex', alignItems: 'center' }}>
+            {multiline ?
+              <textarea
+                ref={setInputRef as React.Ref<HTMLTextAreaElement>}
+                id={inputId}
+                name={name}
+                required={required}
+                value={currentValue}
+                placeholder={placeholder}
+                onChange={handleChange}
+                onBlur={handleBlurInternal}
+                onFocus={handleFocusInternal}
+                onInvalid={(e) => {
+                  e.preventDefault();
+                }}
+                disabled={disabled}
+                rows={minRowsNum}
+                autoFocus={autoFocus}
+                autoComplete={autoComplete}
+                aria-invalid={error}
+                aria-required={required}
+                aria-describedby={helperText ? `${inputId}-helper` : undefined}
+                className="text-field-input"
+                style={{
+                  ...prefixInputStyle,
+                  resize: 'vertical',
+                  minHeight: minRowsNum * lineHeight,
+                  ...(maxRowsNum != null && {
+                    maxHeight: maxRowsNum * lineHeight,
+                  }),
+                  width: '100%',
+                }}
+                {...(inputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+              />
+            : <input
+                required={required}
+                ref={setInputRef as React.Ref<HTMLInputElement>}
+                id={inputId}
+                name={name}
+                type={type}
+                value={currentValue}
+                placeholder={placeholder}
+                onChange={handleChange}
+                onBlur={handleBlurInternal}
+                onFocus={handleFocusInternal}
+                onInvalid={(e) => {
+                  e.preventDefault();
+                }}
+                disabled={disabled}
+                autoFocus={autoFocus}
+                autoComplete={autoComplete}
+                aria-invalid={error}
+                aria-required={required}
+                aria-describedby={helperText ? `${inputId}-helper` : undefined}
+                className="text-field-input"
+                style={{ ...prefixInputStyle, width: '100%' }}
+                {...(inputProps as React.InputHTMLAttributes<HTMLInputElement>)}
+              />
+            }
+            {resolvedEndAdornment && <div style={endAdornmentStyle}>{resolvedEndAdornment}</div>}
+          </div>
+          {hasSuffix && <div style={suffixBoxStyle}>{suffix}</div>}
+        </div>
+      : <>
+          <div style={hasAdornment ? inputWrapperStyle : undefined}>
+            {resolvedStartAdornment && (
+              <div style={startAdornmentStyle}>{resolvedStartAdornment}</div>
+            )}
+            {multiline ?
+              <textarea
+                ref={setInputRef as React.Ref<HTMLTextAreaElement>}
+                id={inputId}
+                name={name}
+                required={required}
+                value={currentValue}
+                placeholder={placeholder}
+                onChange={handleChange}
+                onBlur={handleBlurInternal}
+                onFocus={handleFocusInternal}
+                onInvalid={(e) => {
+                  // Prevent browser-native validation bubble so apps can show custom helper text.
+                  e.preventDefault();
+                }}
+                disabled={disabled}
+                rows={minRowsNum}
+                autoFocus={autoFocus}
+                autoComplete={autoComplete}
+                aria-invalid={error}
+                aria-required={required}
+                aria-describedby={helperText ? `${inputId}-helper` : undefined}
+                className="text-field-input"
+                style={{
+                  ...adjustedInputStyle,
+                  resize: 'vertical',
+                  minHeight: minRowsNum * lineHeight,
+                  ...(maxRowsNum != null && {
+                    maxHeight: maxRowsNum * lineHeight,
+                  }),
+                  width: hasAdornment ? '100%' : inputStyle.width,
+                }}
+                {...(inputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+              />
+            : <input
+                required={required}
+                ref={setInputRef as React.Ref<HTMLInputElement>}
+                id={inputId}
+                name={name}
+                type={type}
+                value={currentValue}
+                placeholder={placeholder}
+                onChange={handleChange}
+                onBlur={handleBlurInternal}
+                onFocus={handleFocusInternal}
+                onInvalid={(e) => {
+                  // Prevent browser-native validation bubble so apps can show custom helper text.
+                  e.preventDefault();
+                }}
+                disabled={disabled}
+                autoFocus={autoFocus}
+                autoComplete={autoComplete}
+                aria-invalid={error}
+                aria-required={required}
+                aria-describedby={helperText ? `${inputId}-helper` : undefined}
+                className="text-field-input"
+                style={{
+                  ...adjustedInputStyle,
+                  width: hasAdornment ? '100%' : inputStyle.width,
+                }}
+                {...(inputProps as React.InputHTMLAttributes<HTMLInputElement>)}
+              />
+            }
+            {resolvedEndAdornment && <div style={endAdornmentStyle}>{resolvedEndAdornment}</div>}
+          </div>
+        </>
+      }
+
+      {helperText != null && helperText !== '' && (
+        <div
+          id={inputId ? `${inputId}-helper` : undefined}
+          style={helperStyle}
+          className="d-flex gap-1"
+          role={error ? 'alert' : undefined}
+        >
+          {/* <FirebirdIcon name="info_circle" size={16} /> */}
+          <span>{helperText}</span>
+        </div>
+      )}
+    </div>
+  );
+};