@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Input.spec.tsx

@@ -0,0 +1,281 @@
+import React, { createRef } from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";  // userEvent.type functionality
+import { describe, it, expect, vi } from 'vitest';
+import { axe } from "vitest-axe";
+import { Input } from "./Input";
+
+describe("Input Component", () => {
+  it("renders the input with default styles", () => {
+    render(<Input label="Default Input" />);
+    const input = screen.getByLabelText("Default Input");
+    // console.log('input.className: ', input.className);
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveClass("px-4 py-3 arial rounded-lg border border-[#B3B3B3] mx-2 bg-white");
+  });
+
+  it("applies custom classes and merges with default classes", () => {
+    render(<Input label="Custom Input" className="custom-class" />);
+    const input = screen.getByLabelText("Custom Input");
+
+    expect(input).toHaveClass("custom-class");
+    expect(input).toHaveClass("px-4 py-3 arial rounded-lg border border-[#B3B3B3] mx-2 bg-white");
+  });
+
+  it("applies variant-specific styles", () => {
+    render(<Input label="Outline Input" variant="outline" />);
+    const input = screen.getByLabelText("Outline Input");
+
+    expect(input).toHaveClass("border-dha-mc-true-blue bg-white border text-dha-mc-true-blue");
+  });
+
+  it("renders a required indicator in the label", () => {
+    render(<Input label="Required Input" required />);
+    const label = screen.getByText("*");
+
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveClass("text-red-500");
+  });
+
+  it("applies label styles with gradient background", () => {
+    render(
+      <Input
+        label="Styled Label"
+        labelBaseColor="#ffffff"
+        textShadow={true}
+      />
+    );
+    const label = screen.getByText("Styled Label");
+
+    expect(label).toHaveStyle("background: linear-gradient");
+  });
+
+  it("sets the correct type for the input", () => {
+    render(<Input label="Password Input" type="password" />);
+    const input = screen.getByLabelText("Password Input");
+
+    expect(input).toHaveAttribute("type", "password");
+  });
+
+  it("should forward the ref to the input element", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<Input label="Input with Ref" ref={ref} />);
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(ref.current?.getAttribute("aria-label")).toBe("Input with Ref");
+  });
+
+  it("renders a disabled input with appropriate styles", () => {
+    render(
+      <Input label="Disabled Input" disabled variant="nonHover" />
+    );
+    const input = screen.getByLabelText("Disabled Input");
+
+    expect(input).toBeDisabled();
+    expect(input).toHaveClass("disabled:border-[#F2F2F2]");
+  });
+
+
+  it("throws an error for an invalid variant", () => {
+    // Temporarily silence the console.error output
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    expect(() => {
+      render(<Input label="Default Input" variant="incorrect" />);
+    }).toThrowError(
+      'Invalid variant: "incorrect". Valid variants are: "default", "outline", and "nonHover"'
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('returns early if inputRef is null', () => {
+    // Mock the useRef hook to return null
+    vitest.spyOn(React, 'useRef').mockReturnValueOnce({ current: null });
+
+    // Render the component
+    const { container } = render(<Input label="Test Label" />);
+
+    // Assert that the component renders without throwing any errors
+    expect(container).toBeDefined();
+
+    // Clean up the mock
+    vitest.restoreAllMocks();
+  });
+
+
+  it('covers the early return scenario (null ref)', () => {
+    // 1) Spy on React's useRef
+    const useRefSpy = vitest.spyOn(React, 'useRef');
+    // 2) Mock once to return null
+    useRefSpy.mockReturnValueOnce({ current: null });
+
+    // 3) Render -> triggers early return in useEffect
+    render(<Input label="Some label" />);
+
+    // Cleanup
+    useRefSpy.mockRestore();
+    // No assertion needed, just ensure no crash
+  });
+
+  it('covers the scenario where inputRef is not null', () => {
+    // Normal render: React will attach an actual input element to ref
+    const { getByLabelText } = render(
+      <Input label="Another label" data-testid="inputEl" />
+    );
+
+    // Assert that the element is found (and hence not null)
+    const input = getByLabelText('Another label');
+    expect(input).toBeInTheDocument();
+    // This ensures code *after* the `if(!inputEl) return;` runs
+  });
+
+  it('calls the ref function if ref is a function', () => {
+    // Mock a ref function
+    const mockRefFunction = vitest.fn();
+
+    // Render the Input component with the mock ref
+    const { getByRole } = render(<Input label="Test Label" ref={mockRefFunction} />);
+
+    // Get the input element
+    const inputElement = getByRole('textbox');
+
+    // Assert that the ref function was called with the input element
+    expect(mockRefFunction).toHaveBeenCalledWith(inputElement);
+  });
+
+  it("applies phone mask correctly", async () => {
+    render(<Input label="Phone Input" mask="(###) ###-####" />);
+    const input = screen.getByLabelText("Phone Input") as HTMLInputElement;
+    await userEvent.type(input, "a1b2c3d4e5f6g7h8i9j0k");
+    expect(input.value).toBe("(123) 456-7890");
+  });
+
+
+  it("applies letter mask correctly", () => {
+    render(<Input label="Name Code" mask="@@@-@@" />);
+    const input = screen.getByLabelText("Name Code") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "abcDE" } });
+    // Expected output: "abc-de"
+    expect(input.value).toBe("abc-DE");
+  });
+
+
+  it("ignores invalid characters for a numeric mask", () => {
+    render(<Input label="Number Mask" mask="###" />);
+    const input = screen.getByLabelText("Number Mask") as HTMLInputElement;
+    // Providing letters when numbers are expected should result in an empty string.
+    fireEvent.change(input, { target: { value: "abc" } });
+    expect(input.value).toBe("");
+  });
+
+  it("ignores extra characters beyond the mask length", () => {
+    render(<Input label="Extra Characters" mask="###-###" />);
+    const input = screen.getByLabelText("Extra Characters") as HTMLInputElement;
+    // Input has more digits than required. Only the first 6 digits should be applied.
+    fireEvent.change(input, { target: { value: "1234567" } });
+    expect(input.value).toBe("123-456");
+  });
+
+  it("takes input without mask", () => {
+    render(<Input label="Extra Characters" />);
+    const input = screen.getByLabelText("Extra Characters") as HTMLInputElement;
+    // Input has more digits than required. Only the first 6 digits should be applied.
+    fireEvent.change(input, { target: { value: "1234567abc" } });
+    expect(input.value).toBe("1234567abc");
+  });
+
+
+  it("applies a complex mask with mixed literals correctly", () => {
+    render(<Input label="Complex Mask" mask="(@@) ###-####" />);
+    const input = screen.getByLabelText("Complex Mask") as HTMLInputElement;
+    // With input "ab1234567890", the mask should yield "(ab) 123-4567"
+    fireEvent.change(input, { target: { value: "ab1234567890" } });
+    expect(input.value).toBe("(ab) 123-4567");
+  });
+
+  it("applies a complex mask with mixed literals and mask input correctly", () => {
+    render(<Input label="Complex Mask" mask="(@@) ###-####" />);
+    const input = screen.getByLabelText("Complex Mask") as HTMLInputElement;
+    // With input "(ab)1234567890", the mask should yield "(ab) 123-4567"
+    fireEvent.change(input, { target: { value: "(ab)1234567890" } });
+    expect(input.value).toBe("(ab) 123-4567");
+  });
+});
+
+
+describe('Input Component Accessibility', () => {
+  it('should have no accessibility violations with default props', async () => {
+    const { container } = render(<Input label="Accessible Input" />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations when required', async () => {
+    const { container } = render(<Input label="Required Input" required />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations for each variant', async () => {
+    const variants = ['default', 'outline', 'nonHover'];
+    for (const variant of variants) {
+      const { container } = render(<Input label={`Input ${variant}`} variant={variant} />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  });
+
+  it('should associate the input with its label', () => {
+    render(<Input label="Accessible Label" id="input-id" />);
+    const input = screen.getByLabelText('Accessible Label');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('id', 'input-id');
+  });
+
+  it('should render required indicator for required inputs', () => {
+    render(<Input label="Required Input" required />);
+    const label = screen.getByText('Required Input');
+    const requiredIndicator = screen.getByText('*');
+    expect(label).toBeInTheDocument();
+    expect(requiredIndicator).toBeInTheDocument();
+    expect(requiredIndicator).toHaveClass('text-red-500');
+  });
+
+  it('should apply custom classes without accessibility violations', async () => {
+    const { container } = render(
+      <Input label="Custom Class Input" className="custom-class" classNameLabel="custom-label-class" />
+    );
+    const input = screen.getByLabelText('Custom Class Input');
+    expect(input).toHaveClass('custom-class');
+    const label = screen.getByText('Custom Class Input');
+    expect(label).toHaveClass('custom-label-class');
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should handle text shadow without accessibility violations', async () => {
+    const { container } = render(<Input label="Text Shadow Input" textShadow={true} />);
+    const label = screen.getByText('Text Shadow Input');
+    const computedStyle = window.getComputedStyle(label);
+    expect(computedStyle.textShadow).toContain('1px 1px 2px');
+    // expect(label).toHaveStyle({
+    //   textShadow: expect.stringContaining('1px 1px 2px'),
+    // });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should handle text shadow + insetLabel without accessibility violations', async () => {
+    const { container } = render(<Input label="Text Shadow Input" insetLabel={true} textShadow={true} />);
+    const label = screen.getByText('Text Shadow Input');
+    const computedStyle = window.getComputedStyle(label);
+    expect(computedStyle.textShadow).toContain('1px 1px 2px');
+    // expect(label).toHaveStyle({
+    //   textShadow: expect.stringContaining('1px 1px 2px'),
+    // });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/lib/Input.tsx

@@ -0,0 +1,309 @@
+import { ChangeEvent, forwardRef, InputHTMLAttributes, useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+// return true if a number, false otherwise
+function isNumber(c: string): boolean {
+  if ('0123456789'.includes(c))
+    return true;
+  else
+    return false;
+}
+
+// return true if a letter, i.e. a...z or A...Z, false otherwise
+function isLetter(char: string): boolean {
+  // if (char.length !== 1) {
+  //   return false; // Not a single character
+  // }
+
+  const charCode = char.charCodeAt(0);
+
+  // Check if it's an uppercase letter (A-Z)
+  if (charCode >= 65 && charCode <= 90) {
+    return true;
+  }
+
+  // Check if it's a lowercase letter (a-z)
+  if (charCode >= 97 && charCode <= 122) {
+    return true;
+  }
+
+  return false; // Not a letter
+}
+
+// given an input string & number, return the next type that is a letter or number
+function nextMaskCharType(input: string, startIndex: number): string {
+  for (let i = startIndex; i < input.length; i++) {
+    if (input[i] === '@')
+      return '@';
+    else if (input[i] === '#')
+      return '#';
+  }
+
+  // return default empty string if there is no following letter or number
+  return '';
+}
+
+
+// NOTE: If updated, please update error message below as well re invalid VariantType
+type LegalVariantTypes = "default" | "outline" | "nonHover";
+
+interface VariantType {
+  variant: LegalVariantTypes;
+  classes: string;
+  labelClasses: string;
+  insetLabelClasses: string;
+}
+
+const baseClasses = 'px-4 py-3 arial rounded-lg border border-[#B3B3B3] mx-2 bg-white ' +
+  'hover:outline-[#c6c6c6] active:outline-[#0256ab] focus:outline-4 focus:outline-[#fa89f1] text-base md:text-lg';
+
+const variants: VariantType[]  = [
+  {
+    variant: 'default',
+    classes: 'hover:bg-dha-mc-pale-blue text-black hover:dha-mc-primary-text ' +
+      'hover:border-dha-mc-secondary-border disabled:bg-dha-mc-bottom-nav-background ' +
+      'disabled:text-dha-mc-checkbox-inactive disabled:border-[#F2F2F2] ' +
+      'disabled:border w-[90vw] lg:max-w-[25em]',
+    labelClasses: 'ms-2.5 text-base',
+    insetLabelClasses: 'absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto',
+  },
+  {
+    variant: 'outline',
+    classes: 'border-dha-mc-true-blue bg-white border text-dha-mc-true-blue ' +
+      'disabled:border-[#F2F2F2] disabled:text-dha-mc-checkbox-inactive w-[35vw] ' +
+      'min-w-min sm:max-w-[15em]',
+    labelClasses: 'ms-2.5 text-base',
+    insetLabelClasses: 'absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto',
+  },
+  {
+    variant: 'nonHover',
+    classes: 'text-black disabled:bg-dha-mc-bottom-nav-background ' +
+    'disabled:text-dha-mc-checkbox-inactive disabled:border-[#F2F2F2] ' +
+    'disabled:border w-[90vw] lg:max-w-[25em]',
+    labelClasses: 'ms-2.5 text-base',
+    insetLabelClasses: 'absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto',
+  }
+]
+
+export interface InputProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+    classNameLabel?: string;
+    classNameRequired?: string
+    variant?: string;
+    label?: string;
+    insetLabel?: boolean;
+    labelBaseColor?: string;
+    // labelInputColor?: string;
+    textShadow?: boolean;
+    error?: boolean;
+    mask?: string;
+    disabled?: boolean;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      variant = 'default',
+      label,
+      insetLabel = false,
+      classNameLabel = '',
+      classNameRequired = '',
+      labelBaseColor = '#fff',
+      error = false,
+      // labelInputColor = '#fff',
+      textShadow = false,
+      mask,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [labelBackground, setLabelBackground] = useState<string | undefined>();
+    const [inputClasses, setInputClasses] = useState(baseClasses);
+    const [labelClasses, setLabelClasses] = useState('');
+    const [hover, setHover] = useState<boolean>(false);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const [value, setValue] = useState('');
+
+    const errorClasses = 'border-[#D54309] border';
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.target.value;
+      if (mask) {
+        setValue(applyMask(newValue));
+      } else {
+        setValue(newValue);
+      }
+    };
+
+    /**
+     * Takes the input string and validates it against the mask prop. If validation
+     * is good, it returns a string built from the input formatted to match the mask.
+     *
+     * @param input
+     */
+    function applyMask(input: string): string {
+
+      let output = "";
+      let maskPosition = 0;
+
+      if (mask) {
+        while (input.length > 0 && maskPosition < mask.length) {
+
+          // let logString = '';
+
+          if (mask[maskPosition] !== '#' && mask[maskPosition] !== '@') {
+            // logString += 'mask is not letter or number, ';
+            // if char at mask & input match
+            if (mask[maskPosition] === input[0]) {
+              // logString += 'mask === input, assigning input[0] to output';
+              output += input[0];
+              input = input.slice(1);
+              maskPosition++;
+            // add mask char to output if input[0] chartype matches mask
+            // char for maskPosition + 1
+            } else
+            if (
+                ( (isLetter(input[0]) && nextMaskCharType(mask, maskPosition) === '@') ||
+                  (isNumber(input[0]) && nextMaskCharType(mask, maskPosition) === '#') )
+              )
+              {
+              // logString += 'mask !== input && following charType is correct, ' +
+              // 'assigning mask char to output - ' + mask[maskPosition];
+              output += mask[maskPosition];
+              maskPosition++;
+            }
+            else {
+              // logString += ' incrementing maskPosition'
+              maskPosition++;
+            }
+          // we have a num/alpha character
+          } else {
+            // logString += 'mask is letter/number, '
+            // if mask & input are both numbers
+            if (mask[maskPosition] === '#' && isNumber(input[0])) {
+              // logString += 'is number, assigning input[0] to output';
+              output += input[0];
+              input = input.slice(1);
+              maskPosition++;
+            // if mask & input are both letters
+            } else if (mask[maskPosition] === '@' && isLetter(input[0])) {
+              // logString += 'is letter, assigning input[0] to output';
+              output += input[0];
+              input = input.slice(1);
+              maskPosition++;
+            } else {
+              // throw away this character - incorrect char type per mask
+              // logString += 'does not match mask type, ignoring'
+              input = input.slice(1);
+            }
+          }
+
+          // console.log(logString);
+          // console.log('output:       ' + output);
+          // console.log('maskPosition: ' + (maskPosition - 1));
+          // console.log('input.length: ' + input.length);
+          // console.log('input: ' + input);
+          // console.log('------------------------------');
+          // console.log('\n\n');
+        }
+
+        }
+
+        return output;
+
+      }
+
+
+    useEffect(() => {
+      if (variant) {
+        setInputClasses(twMerge(baseClasses, variants.find((v) => v.variant === variant)?.classes,
+            error && errorClasses, className)); // display error state if error state boolean value true
+        if (insetLabel)
+          setLabelClasses(twMerge(variants.find((v) => v.variant === variant)?.insetLabelClasses, classNameLabel));
+        else
+          setLabelClasses(twMerge(variants.find((v) => v.variant === variant)?.labelClasses, classNameLabel));
+      }
+    }, [className, classNameLabel, variant, hover, insetLabel, error]);
+
+    // Update label background to match input's default and hover state
+    useEffect(() => {
+      if (insetLabel) {
+        const inputEl = inputRef.current;
+
+        if (!inputEl) return;
+
+        // (boolean) --> setHover(bool-value)
+        const updateLabelBackground = (isHover: boolean) => {
+          const computedStyle = getComputedStyle(inputEl);
+          setLabelBackground(computedStyle.backgroundColor);
+          setHover(isHover);
+        };
+
+        // Update label background initially and on hover
+        updateLabelBackground(true);
+
+        // event listeners
+        inputEl.addEventListener('mouseover', () => updateLabelBackground(true));
+        inputEl.addEventListener('mouseout', () => updateLabelBackground(false));
+
+        return () => {
+          inputEl.removeEventListener('mouseover', () => updateLabelBackground);
+          inputEl.removeEventListener('mouseout', () => updateLabelBackground);
+        };
+
+      }
+    }, [labelBaseColor, insetLabel, hover, disabled]);
+
+    // Ensure the variant is valid
+    if (!["default", "outline", "nonHover"].includes(variant)) {
+      // return (<div>invalid variant on Input</div>)
+      throw new Error(
+        `Invalid variant: "${variant}". Valid variants are: "default", "outline", and "nonHover".`
+      );
+    }
+
+    return (
+      <span className="group relative">
+        {/* Label */}
+
+        <div
+          className={twMerge(`${!insetLabel && 'pb-2'}`, labelClasses)}
+          style={insetLabel ? {
+            background: `linear-gradient(to bottom, ${labelBaseColor} 0%, ${labelBaseColor} 50%, ${labelBackground} 60%, ${labelBackground} 100%)`,
+            textShadow: textShadow ?
+            `1px 1px 2px ${labelBaseColor}, 0 0 1em ${labelBaseColor}, 0 0 0.2em ${labelBaseColor}`
+              : '',
+          } : {textShadow: textShadow ?
+          `1px 1px 2px ${labelBaseColor}, 0 0 1em ${labelBaseColor}, 0 0 0.2em ${labelBaseColor}`
+            : '' }}
+        >
+          {label}
+          {props.required && <span className={twMerge("absolute text-red-500 ms-0.5 -mt-1", classNameRequired)}>*</span>}
+        </div>
+
+        {/* Input */}
+        <input
+          className={inputClasses}
+          aria-label={label}
+          value={value}
+          onChange={handleInputChange}
+          disabled={disabled}
+          // className={cn(inputVariants({variant, inputSize, className}))}
+          ref={(node) => {
+            if (typeof ref === 'function') ref(node);
+            else if (ref) ref.current = node;
+            inputRef.current = node; // Maintain local reference
+          }}
+          {...props}
+        />
+      </span>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export { Input };