@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/Form/DateField/DateField.tsx

@@ -0,0 +1,61 @@
+import cx from "classnames";
+import InputProps from "../InputProps";
+import styles from "../inputs.module.scss";
+import CalendarBank from "../../Icons/Time/CalendarBank/CalendarBank";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const DateField = (props: InputProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    loading,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return (
+    <div className={`${styles.date} ${styles.field}`}>
+      {loading && <LoadingInput />}
+      <input
+        className={cx(classes)}
+        id={id}
+        name={name}
+        type="date"
+        value={value}
+        placeholder="YYYY-MM-DD"
+        disabled={disabled}
+        readOnly={readonly}
+        required={required}
+        autoComplete={autoComplete ? "on" : "off"}
+        aria-label={ariaLabel ? ariaLabel : name}
+        aria-required={required ? "true" : "false"}
+        aria-invalid={error ? "true" : "false"}
+        aria-disabled={disabled ? "true" : "false"}
+        aria-readonly={readonly ? "true" : "false"}
+        aria-autocomplete={autoComplete ? "list" : "none"}
+        {...args}
+      />
+      <div className={styles.calendarIcon}>
+        <CalendarBank type="light" />
+      </div>
+    </div>
+  );
+};
+
+export default DateField;

package/src/Components/Form/DropdownBadge/DropdownBadge.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import DropdownField from "./DropdownBadge";
+import { BadgeNameValueInterface } from "./DropdownBadgeProps";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / Dropdown Badge",
+  component: DropdownField,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DropdownField>;
+
+export default meta;
+type Story = StoryObj<typeof DropdownField>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+
+export const Default: Story = {
+  args: {
+    name: "dropdown-badge",
+    options: [
+      {
+        label: "Pending",
+        value: '1',
+        status: "pending",
+      },
+      {
+        label: "Draft",
+        value: '2',
+        status: "draft",
+      },
+      {
+        label: "Complete",
+        value: '4',
+        status: "complete",
+      },
+      {
+        label: "Custom",
+        value: '5',
+        status: "custom",
+      },
+    ] as BadgeNameValueInterface[],
+  },
+};
+
+export const Withoutstatus: Story = {
+  args: {
+    name: "dropdown-badge",
+    options: ["Valid", "Exclude", "Complete"],
+  },
+};

package/src/Components/Form/DropdownBadge/DropdownBadge.tsx

@@ -0,0 +1,303 @@
+import cx from "classnames";
+import { useEffect, useState, MouseEvent, useRef } from "react";
+import DropdownBadgeProps, { BadgeNameValueInterface } from "./DropdownBadgeProps";
+import styles from "./dropdownBadge.module.scss";
+import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
+import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
+import DropdownBadgeSelector from "./DropdownBadgeSelector";
+import DropdownBadgeItem from "./DropdownBadgeItem";
+import LockSimple from "../../Icons/SecurityAndWarnings/LockSimple/LockSimple.tsx";
+
+const DropdownBadge = (props: DropdownBadgeProps) => {
+  const {
+    name,
+    id,
+    value,
+    options,
+    extraClass,
+    extraClassDropdown,
+    ariaLabel,
+    required,
+    status,
+    lock,
+    loading = false,
+    onChange
+  } = props;
+
+  const [opened, setOpened] = useState(false);
+  const [selected, setSelected] = useState<string | number>();
+  const [label, setLabel] = useState("");
+  const [statusClass, setStatusClass] = useState("");
+
+  const [dropdownStyles, setDropdownStyles] = useState<React.CSSProperties>({});
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownSelectorRef = useRef<HTMLDivElement>(null);
+  const  controlRef = useRef<HTMLDivElement>(null);
+
+
+  useEffect(() => {
+    const defaultOption = options[0];
+
+    if (defaultOption) {
+      if (value !== undefined && options.some(option => option === value || (typeof option === "object" && option.value === value))) {
+        setSelected(value);
+      } else {
+        setSelected(
+          typeof defaultOption === "object" ? defaultOption.value : defaultOption
+        );
+      }
+
+      if (typeof defaultOption === "object") {
+        setLabel(defaultOption.label || "");
+        setStatusClass(
+          defaultOption.status ? getStatusClass(defaultOption.status) : ""
+        );
+      }
+    }
+  }, [value, options]);
+
+  useEffect(() => {
+    for (const option of options) {
+      let matched = null;
+      if (typeof option === "string") {
+        matched = option === selected ? option : null;
+      } else {
+        matched = option.value === selected ? option.label : null;
+      }
+      if (matched) {
+        setLabel(matched);
+
+        if (typeof option === "object" && option.status) {
+          setStatusClass(getStatusClass(option.status));
+        } else {
+          setStatusClass("");
+        }
+        break;
+      }
+    }
+  }, [selected, options, status]);
+
+
+  useEffect(() => {
+    const handleClickOutside = (event: any) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setOpened(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    window.addEventListener("scroll", handleClickOutside as EventListener);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", handleClickOutside as EventListener);
+    };
+  }, []);
+
+  const updateDropdownPosition = () => {
+    if (opened && controlRef.current && dropdownSelectorRef.current) {
+      const rect = controlRef.current.getBoundingClientRect();
+      const dropdownHeight = dropdownSelectorRef.current.offsetHeight;
+      const spaceBelow = window.innerHeight - rect.bottom;
+
+      const dropdownTop = spaceBelow < dropdownHeight ? rect.top - dropdownHeight : rect.bottom;
+
+      setDropdownStyles({
+        top: `${dropdownTop}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        position: 'fixed',
+        zIndex: 100,
+      });
+    }
+  };
+
+
+  useEffect(() => {
+    if (!controlRef.current) return;
+
+    let initialPosition = controlRef.current.getBoundingClientRect();
+
+    const handleResizeOrScroll = () => {
+      updateDropdownPosition();
+
+      if (!controlRef.current) return;
+
+      const currentPosition = controlRef.current.getBoundingClientRect();
+
+      if (
+        initialPosition.top !== currentPosition.top ||
+        initialPosition.left !== currentPosition.left
+      ) {
+        setOpened(false);
+      }
+    };
+
+    if (opened) {
+      window.addEventListener('resize', handleResizeOrScroll);
+      window.addEventListener('scroll', handleResizeOrScroll, true);
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResizeOrScroll);
+      window.removeEventListener('scroll', handleResizeOrScroll, true);
+    };
+  }, [opened]);
+
+  useEffect(() => {
+    updateDropdownPosition();
+  }, [opened]);
+
+  useEffect(() => {
+    const handleResizeOrScroll = () => {
+      updateDropdownPosition();
+    };
+
+    window.addEventListener('resize', handleResizeOrScroll);
+    window.addEventListener('scroll', handleResizeOrScroll, true);
+
+    return () => {
+      window.removeEventListener('resize', handleResizeOrScroll);
+      window.removeEventListener('scroll', handleResizeOrScroll, true);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!controlRef.current) return;
+
+    let lastPosition = controlRef.current.getBoundingClientRect();
+
+    const observer = new ResizeObserver(() => {
+      const currentPosition = controlRef.current!.getBoundingClientRect();
+
+      if (
+        lastPosition.y !== currentPosition.y ||
+        lastPosition.x !== currentPosition.x ||
+        lastPosition.top !== currentPosition.top ||
+        lastPosition.left !== currentPosition.left
+      ) {
+        setOpened(false);
+      }
+      lastPosition = currentPosition;
+    });
+
+    observer.observe(controlRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [controlRef, opened]);
+
+  const getStatusClass = (
+    status: "draft" | "pending" | "inProgress" | "complete" | "custom" | undefined
+  ) => {
+    switch (status) {
+      case "draft":
+        return styles.circleDraft;
+      case "pending":
+        return styles.circlePending;
+      case "inProgress":
+        return styles.circleInProgress;
+      case "complete":
+        return styles.circleComplete;
+      case "custom":
+        return styles.circleCustom;
+      default:
+        return "";
+    }
+  };
+
+  const classNames = [styles.dropdown];
+  if (extraClass) {
+    classNames.push(extraClass);
+  }
+
+  if (lock) {
+    classNames.push(styles.lock);
+  }
+
+  if (loading) {
+    classNames.push(styles.loading);
+  }
+
+  const handleOpenClose = () => {
+    setOpened(!opened);
+  };
+
+  const handleSelect = (e: MouseEvent, value: string | number) => {
+    setSelected(value);
+    setOpened(false);
+    if (onChange) {
+      onChange(e, value);
+    }
+  };
+
+  return (
+    <div ref={dropdownRef} className={cx(classNames)}>
+      <div ref={controlRef}  className={styles.control} onClick={handleOpenClose}>
+        {selected && (
+          <div className={styles.labelWrapper}>
+            {label && statusClass && (
+              <div className={cx(styles.circle, statusClass,label.toLowerCase().replace(/\s+/g, '-'))}></div>
+            )}
+            <div className={styles.label} aria-label={ariaLabel}>
+              {label}
+              {!!selected && <div className={styles.reset}></div>}
+            </div>
+          </div>
+        )}
+        <div className={styles.divider}></div>
+        <div className={styles.chevron}>
+          {loading ? (
+            <div className={styles.customLoader}></div>
+          ) : lock ? (
+            <LockSimple />
+          ) : (
+            <>
+              {!opened && <CaretDown />}
+              {opened && <CaretUp />}
+            </>
+          )}
+
+        </div>
+      </div>
+
+      {!!opened && (
+        <DropdownBadgeSelector ref={dropdownSelectorRef} style={{ ...dropdownStyles}} extraClassDropdown={extraClassDropdown}>
+          {options.map((option: string | BadgeNameValueInterface, index: number) => (
+            <DropdownBadgeItem
+              key={index}
+              handleSelect={handleSelect}
+              status={
+                typeof option === "object"
+                  ? (option.status as
+                    | "draft"
+                    | "pending"
+                    | "inProgress"
+                    | "complete"
+                    | "custom"
+                    | undefined)
+                  : undefined
+              }
+              label={typeof option === "object" ? option.label : option}
+              value={typeof option === "object" ? option.value : option}
+            />
+          ))}
+        </DropdownBadgeSelector>
+      )}
+
+      <input
+        name={name}
+        value={selected}
+        id={id}
+        type={"hidden"}
+        required={required}
+      />
+    </div>
+  );
+};
+
+export default DropdownBadge;

package/src/Components/Form/DropdownBadge/DropdownBadgeItem.tsx

@@ -0,0 +1,54 @@
+import cx from "classnames";
+import DropdownBadgeItemProps from "./DropdownBadgeItemProps";
+import styles from "./dropdownBadge.module.scss";
+import { MouseEvent } from "react";
+
+const DropdownBadgeItem = (props: DropdownBadgeItemProps) => {
+  const { label, value, status, handleSelect } = props;
+
+  let statusClass;
+  if (status === "draft") {
+    statusClass = styles.circleDraft;
+  }
+
+  if (status === "custom") {
+    statusClass = styles.circleCustom;
+  }
+
+  if (status === "pending") {
+    statusClass = styles.circlePending;
+  }
+
+  if (status === "inProgress") {
+    statusClass = styles.circleInProgress;
+  }
+  if (status === "complete") {
+    statusClass = styles.circleComplete;
+  }
+
+  return (
+    <div
+      className={styles.dropdownItem}
+      data-value={value}
+      aria-label={label}
+      onClick={(e: MouseEvent) => {
+        if (handleSelect) {
+          handleSelect(e, value);
+        }
+      }}
+    >
+      {label && statusClass && (
+        <div
+          className={cx(
+            styles.circle,
+            styles.dropdowncircleItem,
+            statusClass,
+            label.toLowerCase().replace(/\s+/g, '-')
+          )}></div>
+      )}
+      {label}
+    </div>
+  );
+};
+
+export default DropdownBadgeItem;

package/src/Components/Form/DropdownBadge/DropdownBadgeItemProps.tsx

@@ -0,0 +1,11 @@
+import { MouseEvent } from "react";
+
+interface DropdownBadgeItemProps {
+  label: string;
+  value: string | number;
+  status?: "draft" | "pending" | "inProgress" | "complete" | "custom" ;
+  extraClass?: string;
+  handleSelect: (e: MouseEvent, value: string | number) => void;
+}
+
+export default DropdownBadgeItemProps;

package/src/Components/Form/DropdownBadge/DropdownBadgeProps.tsx

@@ -0,0 +1,34 @@
+import { MouseEvent, FocusEvent } from "react";
+
+interface BadgeNameValueInterface {
+  label: string;
+  status?: "draft" | "pending" | "inProgress" | "complete" | "custom" | undefined;
+  value: string | number;
+}
+
+interface DropdownBadgeProps {
+  name?: string;
+  id?: string;
+  value?: string;
+  options: (BadgeNameValueInterface | string)[];
+  status?: "draft" | "pending" | "inProgress" | "complete" | "custom" | undefined;
+  lock?: boolean;
+  loading?:boolean;
+  extraClass?: string;
+  extraClassDropdown?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: React.MouseEvent, value: string | number) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+}
+
+export type { BadgeNameValueInterface };
+
+export default DropdownBadgeProps;

package/src/Components/Form/DropdownBadge/DropdownBadgeSelector.tsx

@@ -0,0 +1,17 @@
+import cx from "classnames";
+import styles from "./dropdownBadge.module.scss";
+import DropdownBadgeSelectorProps from "./DropdownBadgeSelectorProps";
+import React from "react";
+
+
+const DropdownBadgeSelector  = React.forwardRef<HTMLDivElement, DropdownBadgeSelectorProps>((props, ref) => {
+
+  const { children,style, extraClassDropdown } = props;
+
+
+  const classes = cx(styles.dropdownSelector, extraClassDropdown);
+
+  return <div ref={ref} className={cx(classes)} style={style}>{children}</div>;
+});
+
+export default DropdownBadgeSelector;

package/src/Components/Form/DropdownBadge/DropdownBadgeSelectorProps.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+interface DropdownBadgeSelectorProps {
+  children: ReactNode;
+  extraClassDropdown?: string;
+  style?:any;
+  ref?: React.Ref<any>;
+}
+
+export default DropdownBadgeSelectorProps;