@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

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,36 @@
+import React from "react";
+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,
+};
+

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

@@ -0,0 +1,426 @@
+import cx from "classnames";
+import styles from "../dropdown.module.scss";
+import { MouseEvent, useEffect, useRef, useState } from "react";
+import CaretDown from "../../../Icons/Arrows/CaretDown/CaretDown.tsx";
+import CaretUp from "../../../Icons/Arrows/CaretUp/CaretUp.tsx";
+import DropdownFieldSelector from "../DropdownFieldSelector.tsx";
+import DropdownFieldItem from "../DropdownFieldItem.tsx";
+import LoadingInput from "../../LoadingInput/LoadingInput.tsx";
+import CountryDropdownFieldProps from "./CountryDropdownFieldProps.tsx";
+
+const CountryDropdownField = (props: CountryDropdownFieldProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled = false,
+    readonly = false,
+    error,
+    ariaLabel,
+    required,
+    emptyString,
+    commentInDropdown,
+    loading,
+    onChange,
+    allows,
+    denys
+  } = props;
+
+  const [opened, setOpened] = useState(false);
+  const [selected, setSelected] = useState<string | number | undefined | null | boolean>();
+  const [label, setLabel] = useState("");
+  const [dropdownStyles, setDropdownStyles] = useState<React.CSSProperties>({});
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownSelectorRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+
+  const [allowCountries, setAllowCountries] = useState<Record<string, string>>({});
+  const [denyCountries, setDenyCountries] = useState<Record<string, string>>({});
+
+  const countryCodes: any = {
+    AF: "Afghanistan",
+    AL: "Albania",
+    DZ: "Algeria",
+    AD: "Andorra",
+    AO: "Angola",
+    AG: "Antigua and Barbuda",
+    AR: "Argentina",
+    AM: "Armenia",
+    AU: "Australia",
+    AT: "Austria",
+    AZ: "Azerbaijan",
+    BS: "Bahamas",
+    BH: "Bahrain",
+    BD: "Bangladesh",
+    BB: "Barbados",
+    BY: "Belarus",
+    BE: "Belgium",
+    BZ: "Belize",
+    BJ: "Benin",
+    BT: "Bhutan",
+    BO: "Bolivia",
+    BA: "Bosnia and Herzegovina",
+    BW: "Botswana",
+    BR: "Brazil",
+    BN: "Brunei",
+    BG: "Bulgaria",
+    BF: "Burkina Faso",
+    BI: "Burundi",
+    KH: "Cambodia",
+    CM: "Cameroon",
+    CA: "Canada",
+    CV: "Cape Verde",
+    CF: "Central African Republic",
+    TD: "Chad",
+    CL: "Chile",
+    CN: "China",
+    CO: "Colombia",
+    KM: "Comoros",
+    CG: "Congo (Brazzaville)",
+    CD: "Congo (Kinshasa)",
+    CR: "Costa Rica",
+    CI: "Cote d'Ivoire",
+    HR: "Croatia",
+    CU: "Cuba",
+    CY: "Cyprus",
+    CZ: "Czech Republic",
+    DK: "Denmark",
+    DJ: "Djibouti",
+    DM: "Dominica",
+    DO: "Dominican Republic",
+    TL: "East Timor",
+    EC: "Ecuador",
+    EG: "Egypt",
+    SV: "El Salvador",
+    GQ: "Equatorial Guinea",
+    ER: "Eritrea",
+    EE: "Estonia",
+    ET: "Ethiopia",
+    FJ: "Fiji",
+    FI: "Finland",
+    FR: "France",
+    GA: "Gabon",
+    GM: "Gambia, The",
+    GE: "Georgia",
+    DE: "Germany",
+    GH: "Ghana",
+    GR: "Greece",
+    GD: "Grenada",
+    GT: "Guatemala",
+    GN: "Guinea",
+    GW: "Guinea-Bissau",
+    GY: "Guyana",
+    HT: "Haiti",
+    HN: "Honduras",
+    HU: "Hungary",
+    IS: "Iceland",
+    IN: "India",
+    ID: "Indonesia",
+    IR: "Iran",
+    IQ: "Iraq",
+    IE: "Ireland",
+    IL: "Israel",
+    IT: "Italy",
+    JM: "Jamaica",
+    JP: "Japan",
+    JO: "Jordan",
+    KZ: "Kazakhstan",
+    KE: "Kenya",
+    KI: "Kiribati",
+    KP: "Korea, North",
+    KR: "Korea, South",
+    KW: "Kuwait",
+    KG: "Kyrgyzstan",
+    LA: "Laos",
+    LV: "Latvia",
+    LB: "Lebanon",
+    LS: "Lesotho",
+    LR: "Liberia",
+    LY: "Libya",
+    LI: "Liechtenstein",
+    LT: "Lithuania",
+    LU: "Luxembourg",
+    MK: "Macedonia",
+    MG: "Madagascar",
+    MW: "Malawi",
+    MY: "Malaysia",
+    MV: "Maldives",
+    ML: "Mali",
+    MT: "Malta",
+    MH: "Marshall Islands",
+    MR: "Mauritania",
+    MU: "Mauritius",
+    MX: "Mexico",
+    FM: "Micronesia",
+    MD: "Moldova",
+    MC: "Monaco",
+    MN: "Mongolia",
+    ME: "Montenegro",
+    MA: "Morocco",
+    MZ: "Mozambique",
+    MM: "Myanmar (Burma)",
+    NA: "Namibia",
+    NR: "Nauru",
+    NP: "Nepal",
+    NL: "Netherlands",
+    NZ: "New Zealand",
+    NI: "Nicaragua",
+    NE: "Niger",
+    NG: "Nigeria",
+    NO: "Norway",
+    OM: "Oman",
+    PK: "Pakistan",
+    PW: "Palau",
+    PA: "Panama",
+    PG: "Papua New Guinea",
+    PY: "Paraguay",
+    PE: "Peru",
+    PH: "Philippines",
+    PL: "Poland",
+    PT: "Portugal",
+    QA: "Qatar",
+    RO: "Romania",
+    RU: "Russia",
+    RW: "Rwanda",
+    KN: "Saint Kitts and Nevis",
+    LC: "Saint Lucia",
+    VC: "Saint Vincent and the Grenadines",
+    WS: "Samoa",
+    SM: "San Marino",
+    ST: "Sao Tome and Principe",
+    SA: "Saudi Arabia",
+    SN: "Senegal",
+    RS: "Serbia",
+    SC: "Seychelles",
+    SL: "Sierra Leone",
+    SG: "Singapore",
+    SK: "Slovakia",
+    SI: "Slovenia",
+    SB: "Solomon Islands",
+    SO: "Somalia",
+    ZA: "South Africa",
+    SS: "South Sudan",
+    ES: "Spain",
+    LK: "Sri Lanka",
+    SD: "Sudan",
+    SR: "Suriname",
+    SZ: "Swaziland",
+    SE: "Sweden",
+    CH: "Switzerland",
+    SY: "Syria",
+    TW: "Taiwan",
+    TJ: "Tajikistan",
+    TZ: "Tanzania",
+    TH: "Thailand",
+    TG: "Togo",
+    TO: "Tonga",
+    TT: "Trinidad and Tobago",
+    TN: "Tunisia",
+    TR: "Turkey",
+    TM: "Turkmenistan",
+    TV: "Tuvalu",
+    UG: "Uganda",
+    UA: "Ukraine",
+    AE: "United Arab Emirates",
+    GB: "United Kingdom",
+    US: "United States",
+    UY: "Uruguay",
+    UZ: "Uzbekistan",
+    VU: "Vanuatu",
+    VA: "Vatican City",
+    VE: "Venezuela",
+    VN: "Vietnam",
+    YE: "Yemen",
+    ZM: "Zambia",
+    ZW: "Zimbabwe"
+  };
+
+  const manageAllowCountries = (allows: string[]) => {
+    const upperCaseAllows = allows.map((code) => code.toUpperCase());
+    const filteredCountryCodes = Object.fromEntries(
+      Object.entries(countryCodes).filter(([code]) =>
+        upperCaseAllows.includes(code)
+      )
+    );
+    // @ts-ignore
+    setAllowCountries(filteredCountryCodes);
+  };
+
+  const manageDenyCountries = (denys: string[]) => {
+    const upperCaseDenys = denys.map((code) => code.toUpperCase());
+    const filteredCountryCodes = Object.fromEntries(
+      Object.entries(countryCodes).filter(([code]) =>
+        !upperCaseDenys.includes(code)
+      )
+    );
+    // @ts-ignore
+    setDenyCountries(filteredCountryCodes);
+  };
+
+  useEffect(() => {
+    if (allows) {
+      manageAllowCountries(allows);
+    } else if (denys) {
+      manageDenyCountries(denys);
+    }
+  }, [allows, denys]);
+
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
+  useEffect(() => {
+    if (selected) {
+      setLabel(countryCodes[selected as keyof typeof countryCodes] || "");
+    } else {
+      setLabel(placeholder || "");
+    }
+  }, [selected, placeholder]);
+
+  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 handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setOpened(false);
+      }
+    };
+
+    // @ts-ignore
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      // @ts-ignore
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleOpenClose = () => {
+    if (disabled || readonly) return;
+    setOpened(!opened);
+  };
+
+  const handleSelect = (e: MouseEvent, value: string | number | undefined | null | boolean) => {
+    setSelected(value);
+    setOpened(false);
+    if (onChange) {
+      onChange(e, value);
+    }
+  };
+
+  const classNames = [styles.dropdown];
+
+  if (error) {
+    classNames.push(styles.error);
+  }
+
+  if (extraClass) {
+    classNames.push(extraClass);
+  }
+
+  if (disabled) {
+    classNames.push(styles.disabled);
+  }
+
+  return (
+    <div ref={dropdownRef} className={cx(classNames)}>
+      {loading && <LoadingInput />}
+      <div ref={controlRef} className={styles.control} onClick={handleOpenClose}>
+        {!selected && placeholder && (
+          <div className={styles.placeholder} aria-label={ariaLabel}>
+            {placeholder}
+          </div>
+        )}
+        {(selected || !placeholder) && (
+          <div className={styles.label} aria-label={ariaLabel}>
+            {label}
+            {!!selected && <div className={styles.reset}></div>}
+          </div>
+        )}
+        <div className={styles.chevron}>
+          {!opened && <CaretDown />}
+          {!!opened && <CaretUp />}
+        </div>
+      </div>
+
+      {opened && !readonly && !disabled && (
+        <DropdownFieldSelector ref={dropdownSelectorRef} style={dropdownStyles}>
+          {commentInDropdown && <div className={styles.message}>{commentInDropdown}</div>}
+          {emptyString && <DropdownFieldItem label={emptyString} value="" handleSelect={handleSelect} />}
+          {allows && Object.keys(allowCountries).map((code) => (
+            <DropdownFieldItem key={code} label={allowCountries[code]} value={code} handleSelect={handleSelect} />
+          ))}
+          {denys && Object.keys(denyCountries).map((code) => (
+            <DropdownFieldItem key={code} label={denyCountries[code]} value={code} handleSelect={handleSelect} />
+          ))}
+          {!allows && !denys && Object.keys(countryCodes)?.map((code: string) => (
+            <DropdownFieldItem key={code} label={countryCodes[code]} value={code} handleSelect={handleSelect} />
+          ))}
+        </DropdownFieldSelector>
+      )}
+
+      <input
+        name={name}
+        value={selected ? selected.toString() : ""}
+        id={id} type="hidden"
+        required={required}
+        disabled={disabled}
+        readOnly={readonly} />
+    </div>
+  );
+};
+
+export default CountryDropdownField;

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

@@ -0,0 +1,30 @@
+import { FocusEvent, MouseEvent } from "react";
+
+interface CountryDropdownFieldProps  {
+  name?: string;
+  id?: string;
+  value?: string;
+  extraClass?: string;
+  placeholder?: string;
+  emptyString?: string;
+  commentInDropdown?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: React.MouseEvent, value: string |number|undefined|null|boolean) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  loading?: boolean;
+  allows?: string[];
+  denys?: string[];
+}
+
+export default CountryDropdownFieldProps