@integry/sdk 4.7.39 → 4.7.41

package/src/components/BasicSelect/index.ts

@@ -1,123 +0,0 @@
-import { html } from 'htm/preact';
-import { useEffect } from 'preact/hooks';
-import { Hint } from '@/components/Tooltip';
-import { createNewSortInstance } from 'fast-sort';
-import { ErrorMessage } from '../ErrorMessage';
-
-import styles from './styles.module.scss';
-
-interface SelectProps {
-  ariaLabel: string;
-  options: { label: string; key: string }[];
-  placeholder: string;
-  value?: string;
-  showUnselectedValue?: boolean;
-  unselectedText?: string;
-  loading?: boolean;
-  isRequired?: boolean;
-  showStepValidation?: boolean;
-  onChange?: (index: number) => void;
-  isReadOnly?: boolean;
-}
-
-/**
- * Input component
- *
- */
-const Select = (props: SelectProps) => {
-  const {
-    placeholder,
-    ariaLabel,
-    value,
-    options = [],
-    showUnselectedValue = false,
-    unselectedText = 'Select a value',
-    isRequired = false,
-    showStepValidation = false,
-    onChange = () => null,
-    isReadOnly = false,
-  } = props;
-
-  const handleInputChange = (e: MouseEvent) => {
-    if (!isReadOnly && e.currentTarget instanceof HTMLSelectElement) {
-      const { value: newValue } = e.currentTarget;
-      const val = options.findIndex((el) => `${el.key}` === `${newValue}`);
-      onChange(val);
-    }
-  };
-
-  // if value cannot be found in options, unset the value
-  useEffect(() => {
-    if (options.findIndex((el) => el.key === value) === -1) {
-      onChange(-1);
-    }
-  }, []);
-
-  const getSortedOptions = (): { label: string; key: string }[] => {
-    if (options.length > 0) {
-      const naturalSort = createNewSortInstance({
-        comparer: new Intl.Collator(undefined, {
-          numeric: true,
-          sensitivity: 'base',
-        }).compare,
-      });
-      const sorted = naturalSort(options).asc((option) => option.label);
-      return sorted;
-    }
-    return [];
-  };
-
-  return html`
-    <div class=${styles.selectWrapper}>
-      <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-        ${isReadOnly &&
-        html`<span
-          class=${styles.readonlyHint}
-          data-hint=${isReadOnly ? `` : ''}
-        ></span>`}
-        <select
-          aria-label=${ariaLabel}
-          onchange=${handleInputChange}
-          class=${`${value && styles.selectedVal} ${
-            isReadOnly ? styles.readonly : ''
-          }`}
-          disabled=${isReadOnly}
-        >
-          ${showUnselectedValue &&
-          html` <option value="">${unselectedText}</option> `}
-          ${value === undefined &&
-          html`
-            <option value="" disabled selected hidden>${placeholder}</option>
-          `}
-          ${getSortedOptions().map(
-            (el) => html`
-              <option value=${el.key} selected=${value === el.key}>
-                ${el.label}
-              </option>
-            `,
-          )}
-        </select>
-        <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>
-    ${isRequired &&
-    !value &&
-    showStepValidation &&
-    html`<${ErrorMessage}>Please map this required field<//>`}
-  `;
-};
-
-export { Select, SelectProps };

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

@@ -1,44 +0,0 @@
-.selectWrapper {
-  position: relative;
-  width: 100%;
-  fieldset {
-    padding: 0;
-    margin: 0;
-    border: none;
-  }
-  select {
-    width: 100%;
-    color: #999999;
-    position: relative;
-    font-size: 14px;
-    appearance: none;
-    padding: 8.5px 14px;
-    padding-right: 28px;
-    border-radius: 4px;
-    border: 1px solid #e2e0db;
-    outline: none;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    &:focus {
-      outline: none;
-    }
-    &.selectedVal {
-      color: #333;
-    }
-    &.readonly {
-      opacity: 1;
-    }
-  }
-  svg {
-    position: absolute;
-    right: 10px;
-    top: 13px;
-  }
-  .readonlyHint {
-    width: 100%;
-    height: 100%;
-    z-index: 99;
-    position: absolute;
-  }
-}

package/src/components/Button/index.ts

@@ -1,97 +0,0 @@
-import { html } from 'htm/preact';
-import cx from 'classnames';
-
-import { Hint } from '@/components/Tooltip';
-import { ThreeDotLoader } from '@/components/ThreeDotLoader';
-
-import styles from './styles.module.scss';
-
-export enum ButtonTypes {
-  PRIMARY = 'primary',
-  SECONDARY = 'secondary',
-  LINK = 'link',
-}
-
-export interface ButtonProps {
-  label: string;
-  type?: ButtonTypes;
-  color?: string;
-  width?: string;
-  height?: string;
-  dismissOnClick?: boolean;
-  position?: 'top' | 'bottom';
-  tooltip?: string;
-  isLoading?: boolean;
-  disabled?: boolean;
-  hasError?: boolean;
-  backgroundColor: string;
-  onClick: (e: MouseEvent) => void;
-  className?: string;
-  id?: string;
-}
-
-/**
- * Button component
- *
- */
-export const Button = (props: ButtonProps) => {
-  const {
-    label,
-    type = ButtonTypes.PRIMARY,
-    color = null,
-    backgroundColor = null,
-    disabled = false,
-    hasError = false,
-    tooltip,
-    width,
-    height,
-    dismissOnClick = true,
-    isLoading = false,
-    position = 'bottom',
-    onClick = undefined,
-    className = '',
-    id = '',
-    ...restOfProps
-  } = props;
-
-  return html`
-    <${Hint} dismissOnClick=${dismissOnClick} position=${position}>
-      <button
-        type="button"
-        onclick=${onClick}
-        data-hint=${tooltip || null}
-        ...${id ? { id } : {}}
-        class=${`${cx(
-          styles.button,
-          {
-            [styles.btnPrimary]: type === ButtonTypes.PRIMARY,
-            [styles.btnSecondary]: type === ButtonTypes.SECONDARY,
-            [styles.buttonLink]: type === ButtonTypes.LINK,
-            [styles.disabled]: disabled || hasError,
-          },
-          {
-            'integry-container__button--primary': type === ButtonTypes.PRIMARY,
-            'integry-container__button--secondary':
-              type === ButtonTypes.SECONDARY,
-            'integry-container__button--link': type === ButtonTypes.LINK,
-            'integry-container__button--disabled': hasError || disabled,
-          },
-        )} ${styles[className || '']}`}
-        disabled=${disabled}
-        style=${{
-          backgroundColor:
-            type === ButtonTypes.PRIMARY ? backgroundColor : null,
-          borderColor: type === ButtonTypes.PRIMARY ? backgroundColor : color,
-          color,
-          width,
-          height,
-        }}
-        ${{ ...restOfProps }}
-      >
-        ${isLoading
-          ? html`<${ThreeDotLoader} className="${className}" />`
-          : label}
-      </button>
-    <//>
-  `;
-};

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

@@ -1,152 +0,0 @@
-.button {
-  outline: none;
-  cursor: pointer;
-  appearance: none;
-  font-size: 12px;
-  padding: 0px 15px;
-  height: 30px;
-  &.btnPrimary {
-    border: 1px solid #4250f0;
-    background: #4250f0;
-    border-radius: 4px;
-    font-size: 12px;
-    color: #ffffff;
-    &:not(.disabled):hover {
-      background: var(--theme-accent-blue-2, #3a46d5);
-      border: 1px solid var(--theme-accent-blue-2, #3a46d5);
-    }
-  }
-  &.btnSecondary {
-    border: 1px solid #4250f0;
-    background: transparent;
-    text-align: center;
-    font-size: 12px;
-    color: #4250f0;
-    border-radius: 4px;
-    &:not(.disabled):hover {
-      background: #4250f0;
-      color: white;
-    }
-  }
-  &.buttonLink {
-    border: none;
-    color: #4250f0;
-    font-weight: 500;
-    font-size: 12px;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    &:not(.disabled):hover {
-      color: #473a64;
-    }
-  }
-
-  &.tell-us-more-btn {
-    width: 113px;
-    height: 36px;
-    background: #ffffff;
-    border: 1px solid #4250f0;
-    // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    color: #4250f0;
-    &:not(.disabled):hover {
-      background: #ffffff;
-      color: #4250f0;
-    }
-    padding: 0px;
-  }
-
-  &.integry-primary-btn {
-    width: auto;
-    height: auto;
-    background: #4250f0;
-    border: 1px solid #4250f0;
-    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08),
-      inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    text-align: center;
-    color: #ffffff;
-    &:not(.disabled):hover {
-      background: #2c36ad;
-      color: #ffffff;
-    }
-    padding: 0px;
-  }
-
-  &.integry-btn-grey {
-    width: auto;
-    height: auto;
-    background: #f3f3f3;
-    border: 1px solid #f3f3f3;
-    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08),
-      inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    text-align: center;
-    color: #333333;
-    &:not(.disabled):hover {
-      background: #e6e6e6;
-      color: #333333;
-    }
-    padding: 0px;
-  }
-
-  &.integry-secondary-btn {
-    width: auto;
-    height: auto;
-    background: #ffffff;
-    border: 1px solid #4250f0;
-    // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    color: #4250f0;
-    &:not(.disabled):hover {
-      background: #4250f0;
-      color: #ffffff;
-    }
-    padding: 0px;
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.flowWrapButton {
-    border-radius: 5px;
-    border: 1px solid var(--theme-accent-blue-1, #4250f0);
-    background: var(--theme-accent-blue-1, #4250f0);
-    color: #fff;
-    font-family: Inter;
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    padding: 4.5px 10px;
-    cursor: pointer;
-    height: auto;
-
-    &:hover {
-      background: var(--theme-accent-blue-2, #3a46d5) !important;
-      border: 1px solid var(--theme-accent-blue-2, #3a46d5) !important;
-    }
-  }
-}

package/src/components/CheckboxGroup/Checkbox.ts

@@ -1,104 +0,0 @@
-import { html } from 'htm/preact';
-import { Hint } from '@/components/Tooltip';
-
-import styles from './styles.module.scss';
-
-export interface CheckboxProps extends Partial<HTMLInputElement> {
-  fieldId: string;
-  id: string;
-  value: string;
-  description?: string;
-  isChecked?: boolean;
-  handleChange?: (id: string, value: boolean) => void;
-  isReadOnly?: boolean;
-  title?: string;
-}
-
-/**
- * Checkbox component
- *
- */
-export const Checkbox = (props: CheckboxProps) => {
-  const {
-    fieldId,
-    id,
-    description = null,
-    value,
-    isChecked = false,
-    handleChange = () => null,
-    isReadOnly = false,
-    title = '',
-  } = props;
-
-  const handleCheckboxChange = (e: MouseEvent) => {
-    if (!isReadOnly && e.target instanceof HTMLInputElement) {
-      const { name, checked } = e.target;
-      handleChange(name, checked);
-    }
-  };
-
-  return html`
-    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-      <div class=${styles.checkboxWrap}>
-        ${isReadOnly &&
-        html`<span
-          class=${styles.readonlyHint}
-          data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
-        ></span>`}
-        <div class=${styles.checkbox}>
-          <label for=${fieldId + id}>
-            <input
-              id=${fieldId + id}
-              type="checkbox"
-              name=${id}
-              value=${value}
-              checked=${isChecked}
-              onclick=${handleCheckboxChange}
-              readonly=${isReadOnly}
-            />
-            <div class=${styles.button}>
-              ${isChecked
-                ? html`
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7.86364 15.5L10 13.4923L17.5 6.49357L15.3485 4.5L7.86364 11.4987L4.63636 8.50129L2.5 10.4949L5.71212 13.4923L7.86364 15.5Z"
-                        fill="#4250f0"
-                      />
-                      <path
-                        d="M0 0V-2H-2V0H0ZM20 0H22V-2H20V0ZM20 20V22H22V20H20ZM0 20H-2V22H0V20ZM0 2H20V-2H0V2ZM18 0V20H22V0H18ZM20 18H0V22H20V18ZM2 20V0H-2V20H2Z"
-                        fill="#4250f0"
-                      />
-                    </svg>
-                  `
-                : html`
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M0 0V-2H-2V0H0ZM20 0H22V-2H20V0ZM20 20V22H22V20H20ZM0 20H-2V22H0V20ZM0 2H20V-2H0V2ZM18 0V20H22V0H18ZM20 18H0V22H20V18ZM2 20V0H-2V20H2Z"
-                        fill="#4250f0"
-                      />
-                    </svg>
-                  `}
-            </div>
-            <div>
-              <div class=${styles.text}>${title || value}</div>
-              ${description &&
-              html`<div class=${styles.description}>${description}</div>`}
-            </div>
-          </label>
-        </div>
-      </div>
-    <//>
-  `;
-};

package/src/components/CheckboxGroup/index.ts

@@ -1,190 +0,0 @@
-import { html } from 'htm/preact';
-import { useContext, useEffect, useRef, useState } from 'preact/hooks';
-
-import AppContext from '@/contexts/AppContext';
-import { Checkbox } from './Checkbox';
-import { Label } from '../Label';
-
-import styles from './styles.module.scss';
-import { ErrorMessage } from '../ErrorMessage';
-import { ThreeDotLoader } from '../ThreeDotLoader';
-
-interface CheckboxItem {
-  id: string;
-  value: string;
-}
-
-export interface CheckboxGroupProps {
-  fieldId: string;
-  title: string;
-  description: string;
-  isDynamic: boolean;
-  dataSrcEndpoint?: string;
-  ariaLabel: string;
-  value: string;
-  initialOptions?: CheckboxItem[];
-  selectedItems?: string[];
-  endpointData: string;
-  isRequired?: boolean;
-  showStepValidation?: boolean;
-  onChange?: (data: string) => void;
-  isReadOnly?: boolean;
-  isChanged?: boolean;
-}
-
-/**
- * RadioGroup component
- *
- */
-export const CheckboxGroup = (props: CheckboxGroupProps) => {
-  const {
-    fieldId,
-    title,
-    description,
-    value,
-    ariaLabel,
-    selectedItems = [],
-    isDynamic,
-    endpointData,
-    initialOptions = [],
-    dataSrcEndpoint,
-    isRequired = false,
-    showStepValidation = false,
-    onChange = () => null,
-    isReadOnly = false,
-    isChanged = false,
-  } = props;
-
-  const indicesRef = useRef(selectedItems);
-
-  const [loading, setLoading] = useState(isDynamic);
-  const [selectedItemIds, setSelectedItemIds] = useState<string[]>(
-    selectedItems,
-  );
-
-  const [error, setError] = useState<string | null>(null);
-
-  const [parsedOptions, setParsedOptions] = useState<CheckboxItem[]>(
-    Array.isArray(initialOptions) ? initialOptions : [],
-  );
-
-  const context = useContext(AppContext);
-
-  useEffect(() => {
-    if (value) {
-      if (value === '0' && parsedOptions.length === 1) return;
-      if (value === '1' && parsedOptions.length === 1) {
-        setSelectedItemIds([parsedOptions[0].id]);
-      } else {
-        setSelectedItemIds(value.split(',').map((el) => el.trim()));
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    if (indicesRef.current !== selectedItemIds) {
-      if (parsedOptions.length < 2) {
-        onChange(selectedItemIds.length === 1 ? '1' : '0');
-      } else {
-        onChange(selectedItemIds.join(','));
-      }
-    }
-  }, [selectedItemIds, parsedOptions]);
-
-  useEffect(() => {
-    if (isDynamic) {
-      if (dataSrcEndpoint) {
-        // eslint-disable-next-line no-use-before-define
-        fetchDynamicData();
-      } else {
-        setParsedOptions(initialOptions);
-        setLoading(false);
-      }
-    } else {
-      setParsedOptions(initialOptions);
-    }
-  }, []);
-
-  const handleChange = (itemId: string) => {
-    if (selectedItemIds.indexOf(itemId) > -1) {
-      setSelectedItemIds((prev) => prev.filter((el) => el !== itemId));
-    } else {
-      setSelectedItemIds([...selectedItemIds, itemId]);
-    }
-  };
-
-  const fetchDynamicData = (): void => {
-    if (dataSrcEndpoint) {
-      setLoading(true);
-      let data;
-      try {
-        data = JSON.parse(endpointData);
-      } catch (parseErr) {
-        data = '';
-      }
-      // call dynamic endpoint
-      context?.apiHandler
-        .callDynamicDataEndpoint<CheckboxItem[]>(new URL(dataSrcEndpoint), data)
-        .then((res) => {
-          if (res) setParsedOptions(res);
-          else setError(`Error loading options`);
-        })
-        .catch((err) => {
-          console.error(err);
-          setError('Error loading options');
-        })
-        .finally(() => setLoading(false));
-    }
-  };
-
-  const handleRefreshClick = (): void => {
-    fetchDynamicData();
-    setSelectedItemIds([]);
-  };
-
-  return html`
-    <div class="${styles.checkboxGroup}">
-      <fieldset>
-        <${Label} isRequired=${isRequired}
-        labelTag=${isReadOnly && isChanged ? 'Changed' : ''}
-        allowRefresh=${isDynamic && dataSrcEndpoint}
-        handleRefreshClick=${handleRefreshClick} //>
-        <div
-          class=${styles.checkboxGroupWrap}
-          role="group"
-          aria-labelledby=${ariaLabel}
-        >
-          ${loading
-            ? html`<div style="margin: 20px 0;">
-                <${ThreeDotLoader} color="#999" />
-              </div>`
-            : html`
-                ${error
-                  ? html`<div style="margin: 20px 0;">
-                      <${ErrorMessage}>${error}<//>
-                    </div>`
-                  : html`
-                      ${parsedOptions?.map(
-                        (el) => html`
-                          <${Checkbox}
-                            fieldId=${fieldId}
-                            id=${el.id}
-                            value=${el.value}
-                            isChecked=${selectedItemIds.indexOf(el.id) > -1}
-                            handleChange=${handleChange}
-                            isReadOnly=${isReadOnly}
-                            title=${title}
-                          ><//>
-                        `,
-                      )}
-                    `}
-              `}
-        </div>
-      </fieldset>
-      ${showStepValidation &&
-      selectedItemIds.length < 1 &&
-      isRequired &&
-      html` <${ErrorMessage}>Please select an option</${ErrorMessage}>`}
-    </div>
-  `;
-};