@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/DatePicker.tsx

@@ -0,0 +1,247 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Dayjs } from "dayjs";
+import dayjs from "dayjs";
+import Calendar from '../assets/img/calendar.svg';
+
+export interface DatePickerProps {
+  id: string;
+  label: string;
+  value?: string;
+  onChange: (date: string) => void | null;
+}
+
+export const DatePicker = ({ id, label, value,
+    onChange }: DatePickerProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value);
+  const [isValidDateFormat, setIsValidDateFormat] = useState(true);
+  const [valueEntered, setValueEntered] = useState<boolean>(!!value);
+  const [focusedDate, setFocusedDate] = useState<Dayjs | null>(
+  dayjs(value, "MM-DD-YYYY", true).isValid()
+    ? dayjs(value, "MM-DD-YYYY", true)
+    : null
+  );
+
+  // const currentDate =
+  // console.log(currentDate); // Output: e.g., 10-27-2023
+  const containerRef = useRef<HTMLDivElement | null>(null); // reference the entire DatePicker container
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+
+  const daysInMonth = focusedDate?.daysInMonth() || 30;
+  const startOfMonth = focusedDate?.startOf("month").day() || 0;
+
+  useEffect(() => {
+    if (!inputValue) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      value = dayjs().format('MM-DD-YYYY');
+      setValueEntered(false)
+    }
+
+    setInputValue(value);
+    const maybeDate = dayjs(value, "MM-DD-YYYY", true);
+    setFocusedDate(maybeDate.isValid() ? maybeDate : null);
+    setIsValidDateFormat(maybeDate.isValid() && value !== "");
+
+  }, [value]);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      // If no containerRef or the user clicks inside the container, do nothing
+      if (!containerRef.current) return;
+      // e.target can be typed as Node
+      if (!containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    if (isOpen && dialogRef.current) {
+      const firstFocusable = dialogRef.current.querySelector(
+        '[role="button"]:not([disabled])'
+      ) as HTMLElement;
+      firstFocusable?.focus();
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleDateSelect = (date: Dayjs) => {
+    const formatted = date.format("MM-DD-YYYY");
+    setValueEntered(true);
+    setFocusedDate(date);
+    setInputValue(formatted);
+    setIsValidDateFormat(true);
+    onChange(formatted);
+    setIsOpen(false);
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent, date: Dayjs) => {
+    if (event.key === "Enter") {
+      handleDateSelect(date);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setValueEntered(true);
+
+    // Regex to ensure the string is strictly MM-DD-YYYY (2 digits - 2 digits - 4 digits)
+    // const dateRegex = /^\d{2}-\d{2}-\d{4}$/;
+    const dateRegex = /^\d{1,2}-\d{2}-\d{4}$/;
+
+    // 1) Check if the string matches the pattern exactly.
+    if (!dateRegex.test(newValue)) {
+      setIsValidDateFormat(false);
+      onChange(newValue); // Still let the parent know about the change
+      return;
+    }
+
+    // 2) If it matches the pattern, check if it's a valid date via Day.js strict parse
+    const maybeDate = dayjs(newValue, "MM-DD-YYYY", true);
+    if (maybeDate.isValid()) {
+      console.log("MAYBEDATE IS VALID");
+      setFocusedDate(maybeDate);
+      setIsValidDateFormat(true);
+      onChange(newValue);
+    } else {
+      console.log("MAYBEDATE IS --NOT-- VALID");
+      setIsValidDateFormat(false);
+      onChange(newValue);
+    }
+  };
+
+  const toggleCalendar = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const goToPreviousMonth = () => {
+    if (focusedDate) {
+      setFocusedDate(focusedDate.subtract(1, "month"));
+    }
+  };
+
+  const goToNextMonth = () => {
+    if (focusedDate) {
+      setFocusedDate(focusedDate.add(1, "month"));
+    }
+  };
+
+  const renderDays = () => {
+    if (!focusedDate) return null;
+
+    const dates = [];
+    for (let i = 0; i < startOfMonth; i++) {
+      dates.push(<div key={`empty-${i}`} className="w-8 h-8"></div>);
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      const date = focusedDate.date(i);
+      dates.push(
+        <button
+          key={i}
+          tabIndex={0}
+          onClick={() => handleDateSelect(date)}
+          onKeyDown={(e) => handleKeyDown(e, date)}
+          className={`w-8 h-8 ${
+            date.isSame(focusedDate, "date") ? "bg-blue-600 text-white" : ""
+          } hover:bg-blue-100 focus:ring`}
+          aria-label={date.format("MMMM D, YYYY")}
+        >
+          {i}
+        </button>
+      );
+    }
+
+    return dates;
+  };
+
+
+  return (
+    <div className="relative" ref={containerRef} >
+      <label htmlFor={id} id='date-picker-input' className="block text-sm font-medium text-gray-700">
+        {label}
+      </label>
+      <div className="flex items-center mt-1">
+        <input
+          id={id}
+          type="text"
+          aria-labelledby="date-picker-input"
+          ref={inputRef}
+          value={valueEntered ? inputValue : ''}
+          onChange={handleInputChange}
+          placeholder="MM-DD-YYYY"
+          className="block w-full border-gray-300 border-2 rounded-l-md rounded-r-none py-2
+            focus:border-blue-500 pl-1 focus:outline-hidden"
+        />
+        <button
+          type="button"
+          onClick={toggleCalendar}
+          className="px-3 py-2 bg-gray-100 border-2 border-gray-300 rounded-r-md rounded-l-none hover:bg-gray-200
+            focus:outline-hidden focus:border-blue-500"
+          aria-label="Open calendar"
+          aria-haspopup="dialog"
+          aria-expanded={isOpen}
+          aria-controls={`${id}-dialog`}
+        >
+          <img
+            src={Calendar}
+            alt="calendar icon"
+            className="size-6"
+          />
+
+        </button>
+      </div>
+      {isOpen && (
+        <div
+          ref={dialogRef}
+          id={`${id}-dialog`}
+          role="dialog"
+          aria-label="Calendar"
+          className="absolute z-10 bg-white shadow-lg rounded-md p-1"
+        >
+          {/* Calendar Header */}
+          <div className="flex items-center justify-between mb-4">
+            <button
+              onClick={goToPreviousMonth}
+              className="px-3 py-2 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 focus:outline-hidden focus:ring"
+              aria-label="Previous month"
+            >
+              &lt;
+            </button>
+            <div className="text-lg font-semibold">
+              {/* Display Month name of entered value, or name of current month if no 'value' passed in */}
+              {focusedDate?.format("MMMM YYYY")}
+            </div>
+            <button
+              onClick={goToNextMonth}
+              className="px-3 py-2 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 focus:outline-hidden focus:ring"
+              aria-label="Next month"
+            >
+              &gt;
+            </button>
+          </div>
+          {/* Calendar Days */}
+          <div className="grid grid-cols-7 gap-1 p-1">
+            <p className="pl-1">Su</p>
+            <p className="pl-1">Mo</p>
+            <p className="pl-1">Tu</p>
+            <p className="pl-1">We</p>
+            <p className="pl-1">Th</p>
+            <p className="pl-2">Fr</p>
+            <p className="pl-1">Sa</p>
+            {renderDays()}
+          </div>
+        </div>
+      )}
+      {!isValidDateFormat && (
+        <p className="text-red-600">
+          Please enter a valid date 'MM-DD-YYYY'
+        </p>
+      )}
+    </div>
+  );
+};

package/src/lib/Input--Input.stories.tsx

@@ -0,0 +1,449 @@
+import { Meta, StoryContext } from '@storybook/react';
+import { Input, InputProps } from './Input';
+import { userEvent, within, waitFor } from 'storybook/test';
+import { expect } from 'storybook/test';
+import { Component, FC, ReactNode, useRef, useState } from 'react';
+
+
+export default {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'white',
+      values: [
+        { name: 'white', value: '#ffffff' },
+        { name: 'light', value: '#f0f0f0' },
+      ],
+    },
+  },
+  argTypes: {
+    className: { control: 'text' },
+    classNameLabel: { control: 'text' },
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+  },
+  args: {
+    label: 'Default Input',
+    placeholder: 'placeholder text here'
+  },
+} as Meta<typeof Input>;
+
+// ERROR
+// Default Variant Input Test
+export const DefaultVariantTest = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter your username',
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    // await new Promise((resolve) => setTimeout(resolve, 2000));
+    const canvas = within(canvasElement);
+    const label = canvas.getByText('Username');
+    expect(label).toBeInTheDocument();
+
+    // await new Promise((resolve) => setTimeout(resolve, 2500));
+    const input = canvas.getByPlaceholderText('Enter your username');
+    await userEvent.click(input);
+    await userEvent.type(input, 'testuser');
+    // await new Promise((resolve) => setTimeout(resolve, 5000));
+    expect(input).toHaveValue('testuser');
+  },
+};
+
+export const DefaultWithInsetLabel = {
+  args: {
+    label: 'Username',
+    insetLabel: true,
+    placeholder: 'Enter your username',
+  },
+}
+
+
+export const PhoneMask = {
+  args: {
+    label: "Phone",
+    placeholder: "(###) ###-####",
+    mask: "(###) ###-####"
+  },
+  play:async (
+    {
+      canvasElement
+    }: StoryContext
+  ) => {
+    const canvas = within(canvasElement);
+
+    // capture input
+    const input = canvas.getByPlaceholderText("(###) ###-####");
+    // focus on input
+    await userEvent.click(input);
+    // type value
+    await userEvent.type(input, "a4b2b5b1b2b3b4b5n6n7");
+    expect(input).toHaveValue("(425) 123-4567");
+  }
+};
+
+export const ModelNumberMask = {
+  args: {
+    label: "Enter Model #",
+    placeholder: "@@##",
+    mask: "@@##"
+  },
+  play:async (
+    {
+      canvasElement
+    }: StoryContext
+  ) => {
+    const canvas = within(canvasElement);
+
+    // capture input
+    const input = canvas.getByPlaceholderText("@@##");
+    // focus on input
+    await userEvent.click(input);
+    // type value
+    await userEvent.type(input, "12Abav12d");
+    expect(input).toHaveValue("Ab12");
+  }
+};
+
+export const MaskTestSSN = (props: InputProps) => {
+
+  return (
+    <>
+      <p className='mb-5 mx-2'>This tests the <strong>mask</strong> prop to correct for social 
+      security number input. If the user types a character other than a number
+      or a minus sign, it is ignored.  If the user types numbers only, it is 
+      formatted as required to match a ssn.</p>
+      <Input
+        label="SSN"
+        mask='###-##-####'
+        placeholder='###-##-###'
+      />
+    </>
+  );
+};
+
+export const MaskTestPhone = (props: InputProps) => {
+
+  return (
+    <>
+      <p className='mb-5 mx-2'>This tests the <strong>mask</strong> prop to correct for 
+      phone number input. If the user types an invalid character it is ignored unless a 
+      non-numeric or non-letter character has been specified, in which case that is 
+      automatically applied.  If the user types numbers only, it is 
+      formatted as required to match the example phone number mask.</p>
+      <Input
+        label="Phone Number"
+        mask='(###) ###-####'
+        placeholder='(###) ###-####'
+      />
+    </>
+  );
+};
+
+// ERROR
+export const DefaultVariantTextShadow = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter your username',
+    textShadow: true,
+  },
+}
+
+// Error Variant Test
+// export const ErrorVariant = {
+//   args: {
+//     variant: 'bogus',
+//     label: 'Username',
+//     placeholder: 'Enter your username',
+//   },
+// };
+
+
+
+export const ErrorVariant = (props: InputProps) => {
+
+  return (
+    <ErrorBoundary>
+      <Input
+        {...props}
+        variant='bogus'
+        label="Incorrect Variant Attempt"
+        data-testid="input"
+      />
+    </ErrorBoundary>
+  );
+};
+
+
+// Outline Variant Test
+export const OutlineVariantTest = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter your email',
+    variant: 'outline',
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByPlaceholderText('Enter your email');
+    await userEvent.click(input);
+    await userEvent.type(input, 'user@example.com');
+    expect(input).toHaveValue('user@example.com');
+  },
+};
+
+// ERROR
+// NonHover Variant Test
+export const NonHoverVariantTest = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    variant: 'nonHover',
+    type: 'password',
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByPlaceholderText('Enter your password');
+    await userEvent.click(input);
+    await userEvent.type(input, 'mysecretpassword');
+    expect(input).toHaveValue('mysecretpassword');
+  },
+};
+
+// ERROR
+// Required Field Test
+export const RequiredFieldTest = {
+  args: {
+    label: 'First Name',
+    placeholder: 'Enter your first name',
+    required: true,
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const requiredSymbol = canvas.getByText('*');
+    expect(requiredSymbol).toBeInTheDocument();
+
+    const input = canvas.getByPlaceholderText('Enter your first name');
+    await userEvent.click(input);
+    await userEvent.type(input, 'John');
+    expect(input).toHaveValue('John');
+  },
+};
+
+
+const RefCallbackComponent = (props: InputProps) => {
+  const [refCalled, setRefCalled] = useState(false);
+
+  return (
+    <>
+      <Input
+        {...props}
+        label="Ref Callback Input"
+        data-testid="input"
+        // Pass a function ref to trigger the branch on line 138 in Input
+        ref={(node) => {
+          if (node) {
+            setRefCalled(true);
+          }
+        }}
+      />
+      {refCalled && (
+        <span data-testid="ref-called">
+          Ref callback executed
+        </span>
+      )}
+    </>
+  );
+};
+
+// ERROR
+export const RefCallback = {
+  render: () => <RefCallbackComponent  />,
+  args: {
+    variant: 'default',
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    // Wait for the ref-called element to appear, confirming that the function ref was invoked.
+    await waitFor(() =>
+      expect(canvas.getByTestId('ref-called')).toBeInTheDocument()
+    );
+  },
+};
+
+// ERROR
+//Invalid variant test
+// export const InvalidVariantTest = {
+//   args: {
+//     label: 'Invalid Variant',
+//     placeholder: 'Enter your email address',
+//     variant:'red',
+//   },
+// };
+
+// ERROR
+// Disabled Input Test
+export const DisabledInputTest = {
+  args: {
+    label: 'Disabled Input',
+    placeholder: 'Cannot type here',
+    disabled: true,
+  },
+  play: async ({ canvasElement }: StoryContext ) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByPlaceholderText('Cannot type here');
+    expect(input).toBeDisabled();
+  },
+};
+
+// Large Input Size Test
+export const LargeInputTest = {
+  args: {
+    label: 'Large Input',
+    placeholder: 'Large input',
+    inputSize: 'lg',
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByPlaceholderText('Large input');
+    expect(input).toBeInTheDocument();
+  },
+};
+
+export const Default = {
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    canvas.getByRole('textbox').innerText = 'You\'ve clicked me';
+    // const input = canvas.getByRole('textbox');
+    // await userEvent.click(input);
+    expect(canvas.getByRole('textbox').innerText).toBe(
+      ""
+    );
+    // await userEvent.click(input);
+    // expect(canvas.getByRole('textbox').innerText).toBe(
+    //   "You've clicked me 2 times"
+    // );
+  },
+};
+
+export const AlternateClasses = {
+  args: {
+    className: "bg-blue-100",
+    labelInputColor: "#dbeafe"
+  },
+  argTypes:{
+    className: { control: 'text' },
+    classNameLabel: { control: 'text' },
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    labelInputColor: { control: 'text' },
+  }
+};
+
+export const Required = {
+  args: {
+    required: true,
+  }
+};
+
+export const DifferingBackgrounds = {
+  args: {
+    className: "rounded-lg border-[#0256ab] bg-[#caecf5] placeholder-gray-500",
+    labelBaseColor: '#ffffff',
+    labelInputColor: '#caecf5',
+    classNameLabel: 'text-[#0256ab]',
+    required: true,
+    textShadow: true
+  }
+}
+
+export const Username = {
+  args: {
+    label: "Username",
+    placeholder: "Enter your username",
+  },
+  play:async (
+    {
+      canvasElement
+    }: StoryContext
+  ) => {
+    const canvas = within(canvasElement);
+    const label = canvas.getByText("Username");
+    expect(label).toBeInTheDocument();
+
+    const input = canvas.getByPlaceholderText("Enter your username");
+    await userEvent.click(input);
+    await userEvent.type(input, "testuser");
+    expect(input).toHaveValue("testuser");
+  }
+};
+
+// --------------
+// Test w/ ref
+const WithRefComponent: FC = () => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div>
+      <Input
+        ref={inputRef}
+        label="Test Input with Ref"
+        variant="default"
+        onFocus={() => console.log('Focused!')}
+        onBlur={() => console.log('Blurred!')}
+      />
+      <button
+        className="border bg-slate-200 rounded-md mt-4 ms-2 p-2 border-black hover:bg-slate-300"
+        onClick={() => {
+          if (inputRef.current) {
+            inputRef.current.focus();
+          }
+        }}
+      >
+        Focus Input
+      </button>
+    </div>
+  );
+  };
+
+export const WithRef: Meta<InputProps> = {
+  render: () => <WithRefComponent />,
+};
+
+
+// Error Boundary definition for Error Checking
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    // Update state so the next render shows the fallback UI.
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    // You can log the error to an error reporting service here.
+    console.error("Error caught in ErrorBoundary:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div>Error: {this.state.error?.message}</div>;
+    }
+
+    return this.props.children;
+  }
+}