@integry/sdk 4.7.39 → 4.7.41

package/src/components/Input/BaseInput/index.ts

@@ -1,170 +0,0 @@
-import { html, Component } from 'htm/preact';
-import { forwardRef } from 'preact/compat';
-import { TagButton } from '@/components/AddTagButton';
-import HTMLContent from '@/components/HTMLContent';
-import { useState } from 'preact/hooks';
-
-import styles from './styles.module.scss';
-
-interface BaseInputProps extends Partial<HTMLInputElement> {
-  placeholder: string;
-  value: string;
-  control?: Component;
-  handleChange?: (id: string) => void;
-  handleBlur?: () => void;
-  handleFocus?: () => void;
-  isReadOnly?: boolean;
-  className?: string;
-  onAddTag?: () => void;
-  fieldId?: string;
-  showDeleteIcon?: boolean;
-  handleDeleteIconClick?: () => void;
-  isButtonEnabled?: boolean;
-  buttonText?: string;
-  onButtonClickScript?: string;
-  buttonScriptRequiresAuthToken?: boolean;
-  apiHandler?: any;
-}
-
-/**
- * BaseInput component
- *
- */
-const BaseInput = forwardRef((props: BaseInputProps, ref) => {
-  const {
-    placeholder,
-    value,
-    type = 'text',
-    control,
-    handleChange = () => null,
-    handleBlur = () => null,
-    handleFocus = () => null,
-    isReadOnly = false,
-    className = '',
-    onAddTag,
-    fieldId = '',
-    id = '',
-    showDeleteIcon = false,
-    handleDeleteIconClick,
-    isButtonEnabled = false,
-    buttonText = '',
-    onButtonClickScript = '',
-    buttonScriptRequiresAuthToken = false,
-    apiHandler,
-  } = props;
-
-  const [isActionClicked, setIsActionClicked] = useState(false);
-
-  const handleInputChange = (e: MouseEvent) => {
-    if (!isReadOnly && e.currentTarget instanceof HTMLInputElement) {
-      const { value: newValue } = e.currentTarget;
-      handleChange(newValue);
-    }
-  };
-
-  const handleDateChange = (e: InputEvent) => {
-    if (
-      !isReadOnly &&
-      e.currentTarget instanceof HTMLInputElement &&
-      e.currentTarget.type === 'date'
-    ) {
-      const { value: newValue } = e.currentTarget;
-      handleChange(newValue);
-    }
-  };
-
-  const handleActionReturned = (val: string) => {
-    if (handleChange) {
-      handleChange(val);
-    }
-    setIsActionClicked(false);
-  };
-
-  const handleActionCancelled = () => {
-    setIsActionClicked(false);
-  };
-
-  return html`
-    <div
-      class=${`${styles.inputWrapper} ${className ? styles[className] : ''} ${
-        showDeleteIcon ? styles.withDeleteIcon : ''
-      }`}
-      id=${fieldId}
-      style="position: relative;"
-    >
-      <input
-        type=${type}
-        placeholder=${placeholder}
-        value=${value}
-        onkeyup=${handleInputChange}
-        onchange=${handleDateChange}
-        onblur=${handleBlur}
-        onfocus=${handleFocus}
-        readonly=${isReadOnly}
-        ref=${ref}
-        id=${id}
-        class=${`${isReadOnly ? styles.readonly : ''} ${
-          styles[className || '']
-        }`}
-      />
-      ${isButtonEnabled &&
-      html`
-        <a
-          href="#"
-          class=${styles.inputButtonLink}
-          onClick=${(e: MouseEvent) => {
-            e.preventDefault();
-            setIsActionClicked(true);
-          }}
-        >
-          ${buttonText}
-        </a>
-      `}
-      ${showDeleteIcon &&
-      html`
-        <button
-          class="${styles.removeButton}"
-          onClick=${() => {
-            if (handleDeleteIconClick) {
-              handleDeleteIconClick();
-            }
-          }}
-          tabindex="-1"
-        >
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 15 15"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M1.5 4.1999H13.65" stroke="#999999" />
-            <path
-              d="M11.6254 5.5498V6.2248L10.9504 13.6498H4.20039L3.52539 6.2248V5.5498"
-              stroke="#999999"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M5.55078 3.525V2.175C5.55078 1.80221 5.85299 1.5 6.22578 1.5H8.92578C9.29857 1.5 9.60078 1.80221 9.60078 2.175V3.525"
-              stroke="#999999"
-            />
-          </svg>
-        </button>
-      `}
-      ${onAddTag && html` <${TagButton} onClick=${onAddTag} /> `}
-      ${control && html`<${control} //>`}
-    </div>
-    ${isButtonEnabled &&
-    isActionClicked &&
-    html`<${HTMLContent}
-      htmlContent=${onButtonClickScript}
-      isAction=${true}
-      handleChange=${handleActionReturned}
-      handleCancel=${handleActionCancelled}
-      requiresAuthToken=${buttonScriptRequiresAuthToken}
-      apiHandler=${apiHandler}
-    />`}
-  `;
-});
-
-export { BaseInput, BaseInputProps };

package/src/components/Input/BaseInput/styles.module.scss

@@ -1,95 +0,0 @@
-.inputWrapper {
-  position: relative;
-  width: 100%;
-  margin-top: 8px;
-  input {
-    width: 100%;
-    color: #333;
-    display: block;
-    box-sizing: border-box;
-    appearance: none;
-    padding: 12px 12px;
-    border-radius: 4px;
-    border: 1px solid #e2e0db;
-    font-size: 14px;
-    outline: none;
-    height: 40px;
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 166.667% */
-
-    &:focus {
-      outline: none;
-    }
-    &::placeholder {
-      color: var(--black-and-grey-draft-and-tooltip-desc, #999);
-      font-family: Inter;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px; /* 166.667% */
-    }
-    &.readonly {
-      cursor: auto !important;
-    }
-  }
-  &.request-app-form-field {
-    margin-top: 6px;
-    input {
-      border: 1px solid #ada9bb;
-      border-radius: 5px;
-      height: 37px;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      color: #333333;
-      font-family: inherit;
-      &::placeholder {
-        line-height: 17px;
-        color: #8c8c8c;
-      }
-    }
-  }
-  .removeButton {
-    background: none;
-    border: none;
-    color: #999999; /* Red color */
-    cursor: pointer;
-    font-size: 18px; /* Size of the delete icon */
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-  }
-
-  .removeButton:hover {
-    color: #999999; /* Darker red on hover */
-  }
-  .inputButtonLink {
-    position: absolute;
-    right: 15px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    text-decoration: none;
-    color: #007bff; /* Adjust to match your theme */
-    cursor: pointer;
-  }
-}
-.withDeleteIcon {
-  border: 1px solid #e2e0db;
-  border-radius: 4px;
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  input {
-    border: none;
-  }
-  tags {
-    border: none;
-  }
-}

package/src/components/Input/DateInput/index.ts

@@ -1,103 +0,0 @@
-import { html } from 'htm/preact';
-import { ErrorMessage } from '@/components/ErrorMessage';
-import { Label } from '@/components/Label';
-import { Hint } from '@/components/Tooltip';
-import { BaseInput } from '../BaseInput';
-
-import styles from './styles.module.scss';
-
-interface DateInputProps {
-  title: string;
-  description: string;
-  placeholder: string;
-  showStepValidation?: boolean;
-  isRequired?: boolean;
-  value?: string;
-  onChange?: (val: string) => void;
-  isReadOnly?: boolean;
-  isChanged?: boolean;
-}
-
-/**
- * DateInput component
- *
- */
-const DateInput = (props: DateInputProps) => {
-  const {
-    title,
-    description,
-    placeholder,
-    value,
-    showStepValidation = false,
-    isRequired = false,
-    onChange = () => null,
-    isReadOnly = false,
-    isChanged = false,
-  } = props;
-
-  return html`
-  <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-    <div class="${styles.dateGroupWrapper}">
-      <fieldset>
-        <${Label} title=${title} description=${description}
-        isRequired=${isRequired} labelTag=${isReadOnly && isChanged ? 'Changed' : ''} //>
-        ${isReadOnly && html `<span class=${styles.readonlyHint} data-hint=${isReadOnly ? `Cannot modify user selection` : ''}></span>`}
-        <${BaseInput}
-          type="date"
-          placeholder=${placeholder}
-          handleChange=${onChange}
-          value=${value}
-          control=${() => html` <div
-            role="button"
-            class=${`${styles.visibilityToggle} ${isReadOnly ? styles.readonly : ''}`}
-            onclick=${() => {
-              if (!isReadOnly && value) onChange('');
-            }}
-          >
-            ${!value || isReadOnly
-              ? html`
-                  <svg
-                    width="25"
-                    height="26"
-                    viewBox="0 0 25 26"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M16.9543 5.5464H19.335L19.3349 5.54639C20.6491 5.54639 21.7156 6.61204 21.7156 7.92812L21.7147 19.8323C21.7147 21.1466 20.6482 22.2131 19.334 22.2131H5.04866C3.73449 22.2131 2.66797 21.1466 2.66797 19.8323V7.92719C2.66797 6.61296 3.73444 5.54639 5.04866 5.54639L7.42936 5.5473V4.35641C7.42936 3.69791 7.96262 3.16553 8.62019 3.16553C9.27777 3.16553 9.81102 3.69791 9.81102 4.35641V5.5464L14.5717 5.5473V4.35641C14.5717 3.69791 15.105 3.16553 15.7626 3.16553C16.4201 3.16553 16.9534 3.69791 16.9534 4.35641L16.9543 5.5464ZM4.04688 20.8324H20.3369L20.3358 8.7124H4.04688V20.8324Z"
-                      fill="#999999"
-                    />
-                  </svg>
-                `
-              : html`
-                  <svg
-                    width="18"
-                    height="18"
-                    viewBox="0 0 18 18"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M9 0C13.9673 0 18 4.03275 18 9C18 13.9673 13.9673 18 9 18C4.03275 18 0 13.9673 0 9C0 4.03275 4.03275 0 9 0ZM9 0.75C13.5533 0.75 17.25 4.44675 17.25 9C17.25 13.5533 13.5533 17.25 9 17.25C4.44675 17.25 0.75 13.5533 0.75 9C0.75 4.44675 4.44675 0.75 9 0.75ZM9 8.46975L12.9697 4.5L13.5 5.03025L9.53025 9L13.5 12.9697L12.9697 13.5L9 9.53025L5.03025 13.5L4.5 12.9697L8.46975 9L4.5 5.03025L5.03025 4.5L9 8.46975Z"
-                      fill="black"
-                    />
-                  </svg>
-                `}
-          </div>`}
-          isReadOnly=${isReadOnly}
-        ><//>
-      </fieldset>
-      ${showStepValidation &&
-      isRequired &&
-      !value &&
-      html`<${ErrorMessage}>Please enter a date<//>`}
-    </div>
-    <//>
-  `;
-};
-
-export { DateInput, DateInputProps };

package/src/components/Input/DateInput/styles.module.scss

@@ -1,50 +0,0 @@
-.dateGroupWrapper {
-  fieldset {
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  input[type='date'] {
-    position: relative;
-    cursor: pointer;
-  }
-
-  input[type='date']::-webkit-calendar-picker-indicator {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    color: transparent;
-    background: transparent;
-  }
-  .visibilityToggle {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    bottom: 0;
-    margin: 0 auto;
-    svg {
-      cursor: pointer;
-      width: 20px;
-      &:hover {
-        opacity: 0.5;
-      }
-    }
-    &.readonly {
-      svg {
-      cursor: auto;
-      }
-    }
-  }
-  .readonlyHint {
-    width: 100%;
-    height: -webkit-fill-available;
-    z-index: 99;
-    position: absolute;
-  }
-}

package/src/components/Input/Input/index.ts

@@ -1,225 +0,0 @@
-import { html } from 'htm/preact';
-import { useEffect, useState } from 'preact/hooks';
-import { forwardRef } from 'preact/compat';
-import { ErrorMessage } from '@/components/ErrorMessage';
-import { Label } from '@/components/Label';
-import { Hint } from '@/components/Tooltip';
-
-import { BaseInput } from '../BaseInput';
-import styles from './styles.module.scss';
-
-interface InputProps {
-  id: string;
-  title: string;
-  description: string;
-  placeholder: string;
-  value?: string;
-  regex: string | null;
-  regexErrorMessage: string | null;
-  isRequired?: boolean;
-  showStepValidation?: boolean;
-  onChange?: (
-    val: string | string[],
-    passesRegexTest?: boolean,
-    index?: number,
-  ) => void;
-  isReadOnly?: boolean;
-  isChanged?: boolean;
-  className?: string;
-  handleFocus?: () => void;
-  handleBlur?: () => void;
-  ref?: any;
-  fieldId: string;
-  hideError?: boolean;
-  isArray?: boolean; // New prop to check if the input is an array
-  isButtonEnabled?: boolean;
-  buttonText?: string;
-  onButtonClickScript?: string;
-  buttonScriptRequiresAuthToken?: boolean;
-  apiHandler?: any;
-  showLabel?: boolean;
-  forceShowDeleteIcon?: boolean;
-  handleRemoveInputFromParent?: (index: number) => void;
-}
-
-/**
- * Input component for handling both single and array inputs
- */
-const Input = forwardRef((props: InputProps, ref) => {
-  const {
-    id,
-    title,
-    description,
-    placeholder,
-    value,
-    regex,
-    regexErrorMessage,
-    showStepValidation = false,
-    isRequired = false,
-    onChange = () => null,
-    handleFocus = () => null,
-    handleBlur = () => null,
-    isReadOnly = false,
-    isChanged = false,
-    className = '',
-    fieldId = `input-field`,
-    hideError = false,
-    isArray = false, // Default to false
-    isButtonEnabled = false,
-    buttonText = 'Add',
-    onButtonClickScript = '',
-    buttonScriptRequiresAuthToken = false,
-    apiHandler,
-    showLabel = true,
-    forceShowDeleteIcon = false,
-    handleRemoveInputFromParent,
-  } = props;
-
-  let parsedValue = [''];
-  if (value) {
-    if (typeof value === 'string' || typeof value === 'number') {
-      if (isArray) {
-        try {
-          parsedValue = JSON.parse(value);
-          if (Array.isArray(parsedValue) && parsedValue.length === 0) {
-            parsedValue = [''];
-          }
-        } catch (e) {
-          parsedValue = [value];
-        }
-      } else {
-        parsedValue = [value];
-      }
-    } else {
-      parsedValue = value;
-    }
-  }
-  const [values, setValues] = useState(parsedValue); // Track array of values
-  const [invalidInput, setInvalidInput] = useState(false);
-  const [showErrorOnFocusLoss, setShowErrorOnFocusLoss] = useState(true);
-
-  // validate on first render
-  useEffect(() => {
-    if (regex && values[values.length - 1] !== '') {
-      const invalid = !new RegExp(regex.replace(/^\/|\/$/g, '')).test(
-        `${values[values.length - 1]}`,
-      );
-      setInvalidInput(invalid);
-    }
-  }, [regex, values]);
-
-  const handleAddInput = () => {
-    setValues((prevValues) => {
-      const newValues = [...prevValues, ''];
-      onChange(newValues);
-      return newValues;
-    });
-  };
-
-  const handleChange = (inputValue: string, index: number) => {
-    let isValidInput = true;
-    if (
-      regex &&
-      inputValue !== '' &&
-      !new RegExp(regex.replace(/^\/|\/$/g, '')).test(inputValue)
-    ) {
-      isValidInput = false;
-      setInvalidInput(true);
-    } else {
-      setInvalidInput(false);
-      const newValues = [...values];
-      newValues[index] = inputValue;
-      setValues(newValues);
-      if (isArray) {
-        onChange(newValues, false, index);
-      } else {
-        onChange(newValues[0]);
-      }
-    }
-
-    if (
-      isArray &&
-      index === values.length - 1 &&
-      inputValue !== '' &&
-      isValidInput
-    ) {
-      handleAddInput();
-    }
-  };
-
-  const handleRemoveInput = (index: number) => {
-    if (forceShowDeleteIcon && handleRemoveInputFromParent) {
-      handleRemoveInputFromParent(index);
-      return;
-    }
-    setValues((prevValues) => {
-      const newValues = prevValues.filter((_, i) => i !== index);
-      onChange(newValues);
-      return newValues;
-    });
-  };
-
-  const validate = () => {
-    if (handleBlur) handleBlur();
-    setShowErrorOnFocusLoss(true);
-  };
-
-  return html`
-    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-      <div
-        class="${styles.inputGroupWrapper} ${styles[
-          className || ''
-        ]} integry-container__input"
-      >
-        <fieldset>
-          ${showLabel
-            ? html`<${Label} title=${title} description=${description}
-              isRequired=${isRequired}
-              labelTag=${isReadOnly && isChanged ? 'Changed' : ''} //>`
-            : html``}
-          ${isReadOnly &&
-          html`<span
-            class=${styles.readonlyHint}
-            data-hint=${isReadOnly ? `` : ''}
-          ></span>`}
-          ${values.map((inputValue, index) => {
-            const inputId = isArray ? `${id}-${index}` : id;
-            return html`
-              <div key=${index} class="${styles.inputWrapper}">
-                <${BaseInput}
-                  type="text"
-                  placeholder=${placeholder}
-                  handleChange=${(valueReceived: string) =>
-                    handleChange(valueReceived, index)}
-                  handleBlur=${validate}
-                  handleFocus=${handleFocus}
-                  value=${isArray ? inputValue : value}
-                  isReadOnly=${isReadOnly}
-                  className="${className}"
-                  ref=${ref}
-                  fieldId=${fieldId}
-                  id="${inputId}"
-                  showDeleteIcon=${forceShowDeleteIcon ||
-                  (values.length > 1 && index !== values.length - 1)}
-                  handleDeleteIconClick=${() => handleRemoveInput(index)}
-                  isButtonEnabled=${isButtonEnabled}
-                  buttonText=${buttonText}
-                  onButtonClickScript=${onButtonClickScript}
-                  buttonScriptRequiresAuthToken=${buttonScriptRequiresAuthToken}
-                  apiHandler=${apiHandler}
-                />
-              </div>
-            `;
-          })}
-          ${!hideError &&
-          (showStepValidation || showErrorOnFocusLoss || value) &&
-          invalidInput &&
-          value &&
-          html`<${ErrorMessage}>${regexErrorMessage || 'Invalid input'}<//>`}
-        </fieldset>
-      </div>
-    <//>
-  `;
-});
-
-export { Input, InputProps };

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

@@ -1,16 +0,0 @@
-.inputGroupWrapper {
-  fieldset {
-    padding: 0;
-    margin: 0;
-    border: none;
-    margin-bottom: 24px;
-  }
-  .readonlyHint {
-    width: 100%;
-    height: -webkit-fill-available;
-    z-index: 99;
-    position: absolute;
-    background-color: #eee;
-    opacity: 0.5;
-  }
-}