@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

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;

package/src/Components/Form/DropdownBadge/dropdownBadge.module.scss

@@ -0,0 +1,195 @@
+.dropdown {
+  position: relative;
+
+  &.lock {
+    .control {
+     pointer-events: none;
+    }
+  }
+
+  .control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 24px;
+    padding: 0 var(--spacing-1\/2);
+    border: 1px solid var(--color-gray-300);
+    border-radius: 6px;
+    font-family: var(--font);
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-body-sm);
+    font-weight: var(--font-weight-body-sm);
+    cursor: pointer;
+    background: white;
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  &.loading {
+    .labelWrapper {
+      opacity: 0;
+    }
+
+    .control {
+      pointer-events: none;
+    }
+  }
+
+  .customLoader {
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    position: relative;
+    border: 2px solid transparent;
+    border-top-color: var(--color-gray-400);
+    border-bottom-color: var(--color-gray-400);
+    border-left-color: var(--color-gray-400);
+    animation: rotate-ring 1s infinite linear;
+  }
+
+  @keyframes rotate-ring {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .labelWrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .label {
+    flex-grow: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-right: calc(var(--space-unit) * 2);
+  }
+
+  .chevron {
+    width: 12px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: calc(var(--space-unit) * 2);
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+[dir="rtl"] {
+  .dropdown {
+    .chevron {
+      margin-left: 0px;
+      margin-right: calc(var(--space-unit) * 2);
+    }
+  }
+}
+
+.dropdownSelector {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  padding: calc(var(--space-unit) * 2) 0;
+  border-radius: 4px;
+  background-color: var(--color-white);
+  box-shadow: var(--drop-shadow-default);
+  margin-top: var(--space-unit);
+  z-index: 10;
+  overflow: auto;
+  max-height: 108px;
+  //min-width: 130px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.15);
+  }
+
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--space-unit) * 1.5);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: var(--line-height-body-sm);
+  font-weight: var(--font-weight-body-sm);
+
+  &.active,
+  &:hover {
+    background-color: var(--color-gray-50);
+  }
+}
+
+.circle {
+  width: 12px;
+  height: 12px;
+  border-radius: 100%;
+  flex-shrink: 0;
+  margin-right: 6px;
+
+  &.dropdowncircleItem{
+    width: 10px;
+    height: 10px;
+  }
+
+  &Draft {
+    background: var(--color-draft);
+  }
+
+  &Custom {
+    background: var(--color-custom);
+  }
+
+  &Pending {
+    background: var(--color-pending);
+  }
+
+  &InProgress {
+    background: var(--color-inprogress);
+  }
+
+  &Complete {
+    background: var(--color-success);
+  }
+}
+
+[dir="rtl"] {
+  .circle {
+    margin-left: 6px;
+    margin-right: 0px;
+  }
+}
+
+.divider {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+  width: 1px;
+  background: var(--color-gray-300);
+}

package/src/Components/Form/DropdownField/CountryDropdownField/CountryDropdownField.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CountryDropdownField from "./CountryDropdownField";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Form / CountryDropdownField',
+  component: CountryDropdownField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CountryDropdownField>;
+
+export default meta;
+type Story = StoryObj<typeof CountryDropdownField>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+
+const CountryDropdownFieldTemplate: Story = {
+  render: () => {
+    return (
+      <CountryDropdownField
+        placeholder={''}
+        onChange={(_e :any, value)=>{
+          console.log(value)
+        }}
+      />
+    );
+  },
+};
+
+export const Example = {
+  ...CountryDropdownFieldTemplate,
+};
+