@integry/sdk 4.5.2 → 4.5.4

package/src/components/LargeLoader/index.ts

@@ -0,0 +1,25 @@
+import { html } from 'htm/preact';
+
+import styles from './styles.module.scss';
+
+const LargeLoader = () => html`
+  <svg
+    class=${styles.loader}
+    width="26"
+    height="25"
+    viewBox="0 0 26 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.7173 0.29892C13.1175 -0.280085 10.4006 -0.0135017 7.96294 1.0598C5.52524 2.13311 3.49412 3.95702 2.16568 6.26562C0.837246 8.57421 0.280965 11.2468 0.57794 13.8937C0.874915 16.5406 2.00962 19.0235 3.81662 20.9803C5.62362 22.9371 8.00843 24.2656 10.6234 24.772C13.2383 25.2784 15.9466 24.9363 18.3535 23.7956C20.7604 22.6548 22.74 20.7751 24.0036 18.4304C25.2673 16.0857 25.749 13.3987 25.3785 10.7611L24.1406 10.935C24.4741 13.3088 24.0406 15.7272 22.9033 17.8374C21.766 19.9476 19.9844 21.6393 17.8182 22.666C15.652 23.6927 13.2145 24.0006 10.861 23.5448C8.50758 23.089 6.36125 21.8934 4.73495 20.1323C3.10866 18.3711 2.08742 16.1366 1.82015 13.7543C1.55287 11.3721 2.05352 8.96679 3.24911 6.88905C4.44471 4.81132 6.27272 3.1698 8.46665 2.20382C10.6606 1.23785 13.1057 0.997923 15.4456 1.51903L15.7173 0.29892Z"
+      fill="#EFEFEF"
+    />
+    <path
+      d="M25.3833 10.7959C25.0346 8.26181 23.9168 5.8957 22.1808 4.01695C20.4449 2.13819 18.1743 0.83725 15.6756 0.289715L15.4081 1.51074C17.6569 2.00353 19.7004 3.17437 21.2628 4.86525C22.8251 6.55613 23.8311 8.68563 24.145 10.9663L25.3833 10.7959Z"
+      fill="#C4C4C4"
+    />
+  </svg>
+`;
+
+export { LargeLoader };

package/src/components/LargeLoader/styles.module.scss

@@ -0,0 +1,16 @@
+.loader {
+  animation-name: ckw;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  transform-origin: 50% 50%;
+}
+
+@keyframes ckw {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Listbox/ListBoxItem.ts

@@ -0,0 +1,57 @@
+import { html } from 'htm/preact';
+import { useRef } from 'preact/hooks';
+
+import styles from './styles.module.scss';
+
+interface ListBoxItemProps {
+  value: string;
+  id: string;
+  isSelected?: boolean;
+  isHighlighted?: boolean;
+  onClick(): void;
+}
+
+const ListBoxItem = (props: ListBoxItemProps) => {
+  const { id, value, isSelected, isHighlighted = false, onClick } = props;
+  const listItemRef = useRef<HTMLSpanElement>();
+
+  const isContentOverflowing = (): boolean => {
+    if (listItemRef.current) {
+      return (listItemRef.current.clientWidth < listItemRef.current.scrollWidth);
+    }
+    return false;
+  };
+
+  return html`
+    <span
+      class=${`${styles.listboxItem} ${isSelected ? styles.selected : ''} ${
+        isHighlighted ? styles.highlighted : ''
+      }`}
+      data-value=${id}
+      onclick=${onClick}
+      ref=${listItemRef}
+      data-hint=${`${isContentOverflowing() ? value : ''}`}
+    >
+      ${false && isSelected &&
+      html`
+        <svg
+          width="7"
+          height="7"
+          viewBox="0 0 7 7"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="#333"
+        >
+          <path
+            d="M6.33333 1.5L2.83522 5.5L1 3.40148"
+            stroke-width="1.2"
+            stroke-linecap="round"
+          />
+        </svg>
+      `}
+      ${value}
+    </span>
+  `;
+};
+
+export { ListBoxItem, ListBoxItemProps };

package/src/components/Listbox/index.ts

@@ -0,0 +1,479 @@
+/* eslint-disable no-use-before-define */
+import { html } from 'htm/preact';
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import fuzzysort from 'fuzzysort';
+import { createNewSortInstance } from 'fast-sort';
+import { Label } from '@/components/Label';
+import { Hint } from '@/components/Tooltip';
+import { useOnClickOutside } from '@/hooks/useOnClickOutside';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
+import { IntegryAPI } from '@/modules/api';
+import { ErrorMessage } from '@/components/ErrorMessage';
+import useCustomRef from '@/hooks/useCustomRef';
+import { ListBoxItem, ListBoxItemProps } from './ListBoxItem';
+
+import styles from './styles.module.scss';
+
+interface ListBoxProps {
+  title: string;
+  description: string;
+  items: Omit<ListBoxItemProps, 'onClick'>[];
+  value?: string;
+  onChange(val: string): void;
+  isOpen?: boolean;
+  isDynamic?: boolean;
+  endpointUrl?: string;
+  isSearchable?: boolean;
+  placeholder: string | null;
+  isRequired?: boolean;
+  showStepValidation?: boolean;
+  responseMapper?(input: unknown): Omit<ListBoxItemProps, 'onClick'>[];
+  apiHandler: IntegryAPI;
+  endpointData: string;
+  isReadOnly?: boolean;
+  isChanged?: boolean;
+  isEditable?: boolean;
+}
+
+const ListBox = (props: ListBoxProps) => {
+  const {
+    title,
+    description,
+    items: passedItems = [],
+    value = null,
+    isOpen = false,
+    isDynamic = false,
+    endpointData,
+    isSearchable = false,
+    isRequired = false,
+    placeholder,
+    onChange = () => null,
+    showStepValidation = false,
+    responseMapper = (input: { id: string; value: string }[]) => input,
+    isReadOnly = false,
+    isChanged = false,
+    endpointUrl,
+    isEditable = false,
+  } = props;
+
+  const [query, setQuery] = useState<string>('');
+  const [editableTextValue, setEditableTextValue] = useState<string>('');
+
+  const [items, setItems] = useState<Omit<ListBoxItemProps, 'onClick'>[]>(
+    passedItems,
+  );
+
+  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
+
+  const [filteredItems, setFilteredItems] = useState<
+    Omit<ListBoxItemProps, 'onClick'>[]
+  >(passedItems);
+
+  const [loading, setLoading] = useState(
+    isDynamic && !passedItems.length && !value,
+  );
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(isOpen);
+
+  const [dropdownRef] = useCustomRef<HTMLDivElement>();
+  const [inputRef] = useCustomRef<HTMLInputElement>();
+
+  useOnClickOutside(dropdownRef, () => {
+    if (isDropdownOpen) {
+      setIsDropdownOpen(false);
+      setHighlightedIndex(-1);
+    }
+  });
+
+  useEffect(() => {
+    if (highlightedIndex > -1 && isDropdownOpen) {
+      const item = filteredItems[highlightedIndex];
+      if (item) {
+        const domEl = document.querySelector(`[data-value="${item.value}"]`);
+        domEl?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
+    }
+  }, [highlightedIndex, isDropdownOpen]);
+
+  useEffect(() => {
+    if (dropdownRef && dropdownRef.current && isDropdownOpen === true) {
+      if (dropdownRef && dropdownRef.current) {
+        dropdownRef.current?.addEventListener('keyup', upHandler);
+      }
+    }
+    // Remove event listeners on cleanup
+    return () => {
+      if (dropdownRef && dropdownRef.current) {
+        dropdownRef.current.removeEventListener('keyup', upHandler);
+      }
+    };
+  }, [isDropdownOpen, dropdownRef, highlightedIndex]);
+
+  useEffect(() => {
+    let timer: null | ReturnType<typeof setTimeout> = null;
+    const item = items.find((a) => a.id === value);
+
+    if (!isDropdownOpen && query && !value) {
+      setQuery('');
+      timer = setTimeout(() => {
+        setSortedFilteredItems(items);
+      }, 250);
+    } else if (!isDropdownOpen && value && item) {
+      setQuery(item.value);
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [isDropdownOpen]);
+
+  useEffect(() => {
+    if (query && isSearchable) {
+      const filtered = fuzzysort
+        .go(query, items, {
+          keys: ['value'],
+          scoreFn: (keysResult) => {
+            const nameResult = keysResult[0];
+            const tagsResult = keysResult[1];
+            // assign higher score to name result
+            const score = Math.max(
+              nameResult ? nameResult.score + 100 : -Infinity,
+              tagsResult ? tagsResult.score : -Infinity,
+            );
+            return score;
+          },
+        })
+        .map((el) => el.obj);
+      setHighlightedIndex(-1);
+      setSortedFilteredItems(filtered);
+      if (filtered.length === 1) setHighlightedIndex(0);
+    } else if (isDropdownOpen) {
+      setHighlightedIndex(-1);
+      setSortedFilteredItems(items);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const { isDynamic, endpointUrl } = props;
+    if (isDynamic && endpointUrl) {
+      fetchDynamicData();
+    } else if (!isDynamic && endpointUrl) {
+      // if isDynamic is false, endpointUrl will have JSON data instead of URL
+      try {
+        const data = JSON.parse(endpointUrl);
+        setItems(responseMapper(data));
+        setFilteredItems(responseMapper(data));
+        setLoading(false);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }, [endpointData]);
+
+  const fetchDynamicData = (): void => {
+    const { apiHandler } = props;
+    if (endpointUrl) {
+      setLoading(true);
+      let data;
+      try {
+        data = JSON.parse(endpointData);
+      } catch (error) {
+        data = '';
+      }
+      apiHandler
+        .callDynamicDataEndpoint<
+          {
+            id: string;
+            value: string;
+          }[]
+        >(new URL(endpointUrl), data)
+        .then((res) => {
+          if (res) {
+            setItems(responseMapper(res));
+            setSortedFilteredItems(responseMapper(res));
+            // if value was selected before items were loaded, select it again
+            if (value && isSearchable) {
+              const item = responseMapper(res).find((a) => a.id === value);
+              if (item) {
+                setQuery(item.value);
+              } else {
+                setQuery('');
+              }
+              setLoading(false);
+            } else {
+              setQuery('');
+              setLoading(false);
+            }
+          }
+        });
+    }
+  };
+
+  const setSortedFilteredItems = (data: { id: string, value: string }[]): void => {
+    const naturalSort = createNewSortInstance({
+      comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare,
+    });
+    const sorted = naturalSort(data).asc(item => item.value);
+    setFilteredItems(sorted);
+  };
+
+  // If released key is our target key then set to false
+  const upHandler = useCallback(
+    ({ key }: { key: string }): void => {
+      switch (key) {
+        case 'Enter': // item selected
+          onDropdownItemClicked(filteredItems[highlightedIndex]);
+          break;
+        case 'Escape': // cancel selection
+          setIsDropdownOpen(false);
+          inputRef.current?.blur();
+          break;
+        case 'ArrowDown': {
+          if (highlightedIndex < 0) {
+            setHighlightedIndex(0); // first item
+          } else if (highlightedIndex < filteredItems.length - 1) {
+            setHighlightedIndex((idx) => idx + 1); // next item
+          } else {
+            setHighlightedIndex(0); // wrap around
+          }
+          break;
+        }
+        case 'ArrowUp': {
+          if (highlightedIndex < 0) {
+            setHighlightedIndex(filteredItems.length - 1); // last item
+          } else if (
+            highlightedIndex < filteredItems.length &&
+            highlightedIndex > 0
+          ) {
+            setHighlightedIndex((idx) => idx - 1); // previous item
+          } else {
+            setHighlightedIndex(filteredItems.length - 1); // wrap around
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [highlightedIndex, filteredItems],
+  );
+
+  const toggleDropdown = () => {
+    if (!isReadOnly) {
+      if (!isDropdownOpen) {
+        setQuery('');
+        inputRef.current?.focus();
+      }
+      setIsDropdownOpen((prev) => !prev);
+    }
+  };
+
+  const onDropdownItemClicked = (el: Omit<ListBoxItemProps, 'onClick'>) => {
+    onChange(el.id);
+    setIsDropdownOpen(false);
+    if (isEditable) {
+      setEditableTextValue(el.value);
+      setQuery('');
+      inputRef.current?.blur();
+    }
+    if (isSearchable) {
+      setQuery(el.value);
+      inputRef.current?.blur();
+    }
+  };
+
+  const onInputClicked = (e: InputEvent) => {
+    e.stopPropagation();
+    if (!isDropdownOpen && !isReadOnly) {
+      setQuery('');
+      setIsDropdownOpen(true);
+    }
+  };
+
+  const getSelectedItem = useMemo(() => {
+    const index = items.findIndex((el) => el.id === value);
+    return index > -1 ? items[index].value : 'Please Select...';
+  }, [items, value]);
+
+  const getItemFromText = (textValue: string): ({
+    id: string;
+    value: string;
+  }) => {
+    let tempItem = {
+      id: textValue,
+      value: textValue,
+    };
+    let itemFound = false;
+    items.forEach((item) => {
+      if (item.id === textValue && !itemFound) {
+        tempItem = item;
+        itemFound = true;
+      }
+    });
+    if (!itemFound) {
+      items.forEach((item) => {
+        if (item.value === textValue && !itemFound) {
+          tempItem = item;
+          itemFound = true;
+        }
+      });
+    }
+    return tempItem;
+  }
+
+  const updateValue = (e: InputEvent) => {
+    if (e.currentTarget instanceof HTMLInputElement) {
+      const { value: newValue } = e.currentTarget;
+
+      if (isEditable) {
+        const tempItem = getItemFromText(newValue);
+        onChange(tempItem.id);
+        setEditableTextValue(tempItem.value);
+        setQuery(tempItem.value.trim());
+      } else if(newValue !== '') {
+          setQuery(newValue.trim());
+        }
+    }
+  };
+
+  const handleRefreshClick = (): void => {
+    fetchDynamicData();
+    onChange('');
+    setIsDropdownOpen(false);
+    if (isSearchable) {
+      setQuery('');
+      inputRef.current?.blur();
+    }
+  }
+
+  return html`
+    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+      <div ref=${dropdownRef} class="${styles.listboxGroupWrapper}">
+        <fieldset>
+          ${title &&
+          html`
+            <${Label}
+              title=${title}
+              description=${description}
+              isRequired=${isRequired}
+              labelTag=${isReadOnly && isChanged ? 'Changed' : ''}
+              allowRefresh=${isDynamic && endpointUrl}
+              handleRefreshClick=${handleRefreshClick}
+            />
+          `}
+          <div class=${styles.listbox}>
+            <div
+              class=${`${styles.customSelect} ${
+                isDropdownOpen ? styles.open : ''
+              }`}
+            >
+              ${isReadOnly &&
+              html`<span
+                class=${styles.readonlyHint}
+                data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+              ></span>`}
+              <div
+                class=${`${styles.customSelectTrigger} ${
+                  showStepValidation &&
+                  !value &&
+                  isRequired &&
+                  !isDropdownOpen &&
+                  styles.error
+                } ${isSearchable && styles.searchable} ${
+                  isReadOnly ? styles.readonly : ''
+                }`}
+                role="button"
+                tabindex=${0}
+                onclick=${toggleDropdown}
+              >
+                <span class=${value && styles.selected}>
+                  ${loading
+                    ? html`Loading`
+                    : html` ${isSearchable || isEditable
+                        ? html`
+                            <input
+                              ref=${inputRef}
+                              class=${styles.searchInput}
+                              placeholder=${placeholder ||
+                              (isEditable ? 'Please select or enter value...' : 'Please Select or Search...')}
+                              value=${isEditable ? editableTextValue : query}
+                              oninput=${updateValue}
+                              onclick=${onInputClicked}
+                              readonly=${isReadOnly}
+                            />
+                          `
+                        : html`
+                            ${items.length > 0
+                              ? html`
+                                  ${value
+                                    ? html`${getSelectedItem}`
+                                    : html`${placeholder || 'Please Select...'}`}
+                                `
+                              : html`No options`}
+                          `}`}
+                </span>
+
+                <div ref=${dropdownRef} style="display: flex;">
+                  ${loading
+                    ? html`<${ThreeDotLoader} color="#ababab"><//>`
+                    : html`
+                        <div
+                          class=${`${styles.arrow} ${
+                            isDropdownOpen ? styles.close : ''
+                          } ${isReadOnly ? styles.readonly : ''}`}
+                        >
+                          <svg
+                            width="12"
+                            height="8"
+                            viewBox="0 0 12 8"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M11 1.5L6 6.5L1 1.5"
+                              stroke="#999999"
+                              stroke-width="2"
+                              stroke-linecap="round"
+                            />
+                          </svg>
+                        </div>
+                      `}
+                </div>
+              </div>
+              <div class=${styles.customOptions}>
+                ${items.length > 0 &&
+                !loading &&
+                html`
+                  ${filteredItems.map(
+                    (el, idx) => html`
+                      <${ListBoxItem}
+                        key=${el.id}
+                        id=${el.id}
+                        value=${el.value}
+                        isHighlighted=${highlightedIndex === idx}
+                        isSelected=${value === el.id}
+                        onClick=${() => onDropdownItemClicked(el)}
+                      ><//>
+                    `,
+                  )}
+                `}
+                ${isSearchable &&
+                query &&
+                !filteredItems.length &&
+                !loading &&
+                html`<div class=${styles.noResults}>No results found</div>`}
+              </div>
+            </div>
+            ${showStepValidation &&
+            !value &&
+            !isDropdownOpen &&
+            isRequired &&
+            html` <${ErrorMessage}>Please select an option</${ErrorMessage}>`}
+          </div>
+        </fieldset>
+      </div>
+    <//>
+  `;
+};
+
+export { ListBox, ListBoxProps };