@integry/sdk 4.7.39 → 4.7.41

package/src/components/TextArea/index.ts

@@ -1,172 +0,0 @@
-import { html } from 'htm/preact';
-import { useEffect, useState } from 'preact/hooks';
-import { forwardRef } from 'preact/compat';
-import { copyStringToClipboard } from '@/utils/copyToClipboard';
-import { Hint } from '@/components/Tooltip';
-import { ErrorMessage } from '../ErrorMessage';
-import { Label } from '../Label';
-
-import styles from './styles.module.scss';
-
-interface TextAreaProps {
-  title: string;
-  description: string;
-  placeholder: string;
-  value?: string;
-  showStepValidation?: boolean;
-  isRequired?: boolean;
-  regex: string | null;
-  regexErrorMessage: string | null;
-  showCopyButton?: boolean;
-  onChange?: (val: string, passesRegexTest?: boolean) => void;
-  onFocus?: () => void;
-  ref?: any;
-  isReadOnly?: boolean;
-  isChanged?: boolean;
-  className?: string;
-  id?: string;
-  fieldId?: string;
-}
-
-/**
- * TextArea component
- *
- */
-const TextArea = forwardRef((props: TextAreaProps, ref) => {
-  const {
-    title,
-    description,
-    value,
-    placeholder,
-    onChange = () => null,
-    onFocus = () => null,
-    showStepValidation = false,
-    regex,
-    regexErrorMessage,
-    showCopyButton = false,
-    isRequired = false,
-    isReadOnly = false,
-    isChanged = false,
-    className = '',
-    id = '',
-    fieldId = '',
-  } = props;
-
-  const [initialValue] = useState(value);
-  const [invalidInput, setInvalidInput] = useState(false);
-  const [showErrorOnFocusLoss, setShowErrorOnFocusLoss] = useState(false);
-
-  // validate on first render
-  useEffect(() => {
-    if (regex) {
-      const invalid = !new RegExp(regex.replace(/^\/|\/$/g, '')).test(
-        `${initialValue}`,
-      );
-      setInvalidInput(invalid);
-    }
-  }, [regex]);
-
-  const handleInputChange = (e: InputEvent) => {
-    if (!isReadOnly) {
-      if (e.currentTarget instanceof HTMLTextAreaElement) {
-        const { value: newValue } = e.currentTarget;
-        if (regex) {
-          if (!new RegExp(regex.replace(/^\/|\/$/g, '')).test(newValue)) {
-            onChange(newValue, false);
-            setInvalidInput(true);
-          } else {
-            onChange(newValue, true);
-            setInvalidInput(false);
-          }
-        } else {
-          onChange(newValue);
-        }
-      }
-    }
-  };
-
-  const validate = () => {
-    setShowErrorOnFocusLoss(true);
-  };
-
-  const onCopy = () => {
-    copyStringToClipboard(value || '');
-  };
-
-  return html`
-    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-      <div
-        class="${`${styles.textareaInputWrapper} ${styles[className || '']}`}"
-      >
-        <fieldset>
-          <${Label} title=${title} description=${description}
-          isRequired=${isRequired}
-          labelTag=${isReadOnly && isChanged ? 'Changed' : ''} //>
-          ${isReadOnly &&
-          html`<span
-            class=${styles.readonlyHint}
-            data-hint=${isReadOnly ? `` : ''}
-          ></span>`}
-          <div
-            class=${`${styles.textareaInputWrapper} ${styles[className || '']}`}
-            id=${fieldId}
-          >
-            <textarea
-              placeholder=${placeholder}
-              value=${value}
-              oninput=${handleInputChange}
-              onblur=${validate}
-              readonly=${isReadOnly}
-              class="${styles[className || '']}"
-              onFocus=${onFocus}
-              ref=${ref}
-              id=${id}
-            />
-          </div>
-          ${showCopyButton &&
-          html`
-            <div onclick=${onCopy} class=${styles.copyButton}>
-              <svg
-                width="12"
-                height="15"
-                viewBox="0 0 12 15"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  x="0.75"
-                  y="1"
-                  width="7.5"
-                  height="9.5"
-                  rx="0.75"
-                  stroke="#999999"
-                  stroke-width="1.5"
-                />
-                <rect
-                  x="3.75"
-                  y="4.5"
-                  width="7.5"
-                  height="9.5"
-                  rx="0.75"
-                  fill="#E4E4E4"
-                  stroke="#999999"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-          `}
-        </fieldset>
-        ${showStepValidation &&
-        isRequired &&
-        !value &&
-        html`<${ErrorMessage}>Please enter a value<//>`}
-        ${(showStepValidation || showErrorOnFocusLoss || initialValue) &&
-        invalidInput &&
-        value &&
-        html`<${ErrorMessage}>${regexErrorMessage || 'Invalid input'}<//>`}
-      </div>
-    <//>
-  `;
-});
-
-export { TextArea, TextAreaProps };

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

@@ -1,72 +0,0 @@
-.textareaInputWrapper {
-  position: relative;
-  fieldset {
-    padding: 0;
-    margin: 0;
-    border: none;
-  }
-  tags {
-    height: 150px !important;
-    [class^='tagify__input'] {
-      white-space: normal !important;
-      line-height: 1.75rem;
-    }
-  }
-  textarea {
-    margin-top: 10px;
-    font-family: inherit;
-    box-sizing: border-box;
-    display: block;
-    height: 6rem;
-    width: 100%;
-    resize: none;
-    color: #333;
-    appearance: none;
-    border-radius: 0.25rem;
-    border-width: 1px;
-    border-style: solid;
-    border: 1px solid #e2e0db;
-    padding: 8.5px 14px;
-    &:focus {
-      outline: none;
-    }
-    &::placeholder {
-      color: #999;
-    }
-    &.request-app-form-field {
-      margin-top: 6px;
-      border: 1px solid rgb(173, 169, 187);
-      border-radius: 5px;
-      resize: vertical;
-      height: 85px;
-      min-height: 85px;
-      max-height: 170px;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 17px;
-      color: #333333;
-      &::placeholder {
-        color: #8c8c8c;
-      }
-    }
-  }
-  .copyButton {
-    position: absolute;
-    cursor: pointer;
-    right: 0px;
-    top: 16px;
-    padding: 8px;
-    &:hover {
-      opacity: 0.75;
-    }
-  }
-  .readonlyHint {
-    width: 100%;
-    height: -webkit-fill-available;
-    z-index: 99;
-    position: absolute;
-    background-color: #eee;
-    opacity: 0.5;
-  }
-}

package/src/components/TextContent/index.tsx

@@ -1,128 +0,0 @@
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { useEffect, useState } from 'preact/hooks';
-import { StoreType } from '@/types/store';
-
-import styles from './styles.module.scss';
-
-interface TextContentFieldProps {
-  textContent: string;
-  xIntegryConfig?: any;
-  stepDataMapping?: any;
-  stepState?: any;
-  genericData?: any;
-}
-
-const TextContent = (props: TextContentFieldProps) => {
-  const { textContent, xIntegryConfig = {} } = props;
-  const [htmlContentState, setHtmlContentState] = useState(textContent);
-
-  const replaceValuesWithJSON = (inputString: string, jsonData: any) => {
-    // Regular expression to match values inside double curly braces
-    const regex = /{(.*?)}/g;
-
-    // Use the replace method to replace matched values
-    const replacedString = inputString.replace(
-      regex,
-      (match: any, group: string) => {
-        // Trim the group to remove leading and trailing whitespaces
-        const key = group.trim();
-
-        // Access the nested values using a loop
-        const keys = key.split('.');
-        let value = jsonData;
-
-        // eslint-disable-next-line no-restricted-syntax
-        for (const k of keys) {
-          // eslint-disable-next-line no-prototype-builtins
-          if (value.hasOwnProperty(k)) {
-            value = value[k];
-          } else {
-            // If a key is not found, return an empty string
-            return '';
-
-            // If a key is not found, return the key as is
-            // return `{${key}}`;
-          }
-        }
-
-        // Return the replacement value
-        return value;
-      },
-    );
-
-    return replacedString;
-  };
-
-  const generateInJsonData = () => {
-    let generatedJSON = {
-      steps: {},
-      storage: {},
-    };
-    const { stepDataMapping, stepState } = props;
-    const { steps = [] } = stepState;
-    if (steps.length > 0) {
-      let tempSteps = {};
-      steps.forEach(
-        (step: { title: string; type: string; stepId: number | string }) => {
-          const { title, type, stepId } = step;
-          if (type === 'CONFIGURATION') {
-            const objectTitle = `form_${title
-              .toLowerCase()
-              .replace(/ /g, '_')}`;
-            if (stepDataMapping[stepId]) {
-              let tempObject = {};
-              Object.keys(stepDataMapping[stepId]).forEach((fieldId) => {
-                const { value, machineName } = stepDataMapping[stepId][fieldId];
-                tempObject = {
-                  ...tempObject,
-                  [machineName]: value,
-                };
-              });
-              tempSteps = {
-                ...tempSteps,
-                [objectTitle]: {
-                  in: {
-                    ...tempObject,
-                  },
-                },
-              };
-            }
-          }
-        },
-      );
-      generatedJSON = {
-        ...generatedJSON,
-        steps: {
-          ...tempSteps,
-        },
-        storage: {
-          ...props.genericData.storage,
-        },
-      };
-    }
-    return generatedJSON;
-  };
-
-  useEffect(() => {
-    const result = replaceValuesWithJSON(textContent, {
-      xIntegryConfig: { ...(xIntegryConfig || {}) },
-      ...generateInJsonData(),
-    });
-    setHtmlContentState(result);
-  }, [textContent]);
-
-  return html`
-    <pre class="${styles.textContentField}">
-    ${htmlContentState}
-  </pre
-    >
-  `;
-};
-
-export default connect<TextContentFieldProps, unknown, StoreType, unknown>([
-  'xIntegryConfig',
-  'stepDataMapping',
-  'stepState',
-  'genericData',
-])(TextContent);

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

@@ -1,6 +0,0 @@
-.textContentField {
-  white-space: pre-wrap;
-  overflow-y: hidden;
-  font-size: 12px;
-  color: #333333;
-}

package/src/components/ThreeDotLoader/index.ts

@@ -1,39 +0,0 @@
-import { html } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-interface ThreeDotLoaderProps {
-  size?: number;
-  color?: string;
-  className?: string;
-}
-const LoaderDot = (props: { color: string; size: number }) => html`
-  <svg
-    width=${props.size}
-    height=${props.size}
-    viewBox="0 0 ${props.size} ${props.size}"
-    fill=${props.color}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="${props.size / 2}"
-      cy=${props.size / 2}
-      r=${props.size / 2}
-      fill=${props.color}
-    />
-  </svg>
-`;
-
-const ThreeDotLoader = (props: ThreeDotLoaderProps) => {
-  const { size = 6, color = '#fff', className = '' } = props;
-
-  return html`
-    <div class=${`${styles.loader} ${styles.centered} ${styles[className]}`}>
-      <${LoaderDot} size=${size} color=${color} />
-      <${LoaderDot} size=${size} color=${color} />
-      <${LoaderDot} size=${size} color=${color} />
-    </div>
-  `;
-};
-
-export { ThreeDotLoader };

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

@@ -1,41 +0,0 @@
-.loader {
-  display: flex;
-  svg {
-    animation-name: fadeInOut;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    animation-delay: 0;
-    margin: 0px 2px;
-    &:nth-child(2) {
-      animation-delay: 0.3s;
-    }
-    &:nth-child(3) {
-      animation-delay: 0.6s;
-    }
-  }
-  &.integry-primary-btn {
-    justify-content: center;
-  }
-}
-
-@keyframes fadeInOut {
-  0% {
-    opacity: 0.3;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.3;
-  }
-}
-
-.centered {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}

package/src/components/TimeInput/index.ts

@@ -1,129 +0,0 @@
-import { html } from 'htm/preact';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { ErrorMessage } from '@/components/ErrorMessage';
-import { Label } from '@/components/Label';
-import { Select } from '@/components/BasicSelect';
-import { generateDoubleDigitStringArr } from '@/utils/datetime';
-
-import styles from './styles.module.scss';
-
-interface TimeInputProps {
-  title: string;
-  description: string;
-  placeholder: string;
-  value?: string;
-  showStepValidation?: boolean;
-  isRequired?: boolean;
-  onChange?: (data: string) => void;
-  isReadOnly?: boolean;
-  isChanged?: boolean;
-}
-
-/**
- * TimeInput component
- *
- */
-const TimeInput = (props: TimeInputProps) => {
-  const {
-    title,
-    description,
-    value = null,
-    onChange = () => null,
-    showStepValidation = false,
-    isRequired = false,
-    isReadOnly = false,
-    isChanged = false,
-  } = props;
-
-  const [mins, setMins] = useState('');
-  const [hours, setHours] = useState('');
-  const [amOrPm, setAmOrPm] = useState<'AM' | 'PM'>('AM');
-
-  const firstMount = useRef(true);
-
-  useEffect(() => {
-    const parsedVal = value?.split(':');
-    if (parsedVal && parsedVal.length > 0) {
-      const parsedHours = Number(parsedVal[0]);
-      const parsedMins = Number(parsedVal[1]);
-      if (parsedHours > 12) {
-        setAmOrPm('PM');
-        setHours(`${parsedHours - 12}`);
-      } else {
-        setHours(`${parsedHours}`);
-      }
-      setMins(`${parsedMins}`);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!firstMount.current) {
-      onChange(
-        `${amOrPm === 'PM' ? `${Number(hours) + 12}` : `${hours}`}:${mins}`,
-      );
-    }
-    firstMount.current = false;
-  }, [amOrPm, mins, hours]);
-
-  const hourOptionsArr = useMemo(
-    () => generateDoubleDigitStringArr(12).slice(1, 12),
-    [],
-  );
-  const minuteOptionsArr = useMemo(() => generateDoubleDigitStringArr(59), []);
-
-  return html`
-    <div class="${styles.timeInputWrapper}">
-      <fieldset>
-        <${Label} title=${title} description=${description}
-        isRequired=${isRequired} labelTag=${isReadOnly && isChanged ? 'Changed': ''} //>
-        <div class=${styles.selectWrap}>
-          <${Select}
-            ariaLabel="Select hours"
-            placeholder="00"
-            options=${hourOptionsArr.map((el) => ({
-              key: Number(el),
-              label: el,
-            }))}
-            value=${Number(hours)}
-            onChange=${(val: number) => setHours(hourOptionsArr[val])}
-            isReadOnly=${isReadOnly}
-          ><//>
-          <${Select}
-            ariaLabel="Select minutes"
-            placeholder="00"
-            options=${minuteOptionsArr.map((el) => ({
-              key: Number(el),
-              label: el,
-            }))}
-            value=${Number(mins)}
-            onChange=${(val: number) => setMins(minuteOptionsArr[val])}
-            isReadOnly=${isReadOnly}
-          ><//>
-          <${Select}
-            ariaLabel="Select AM or PM"
-            placeholder="AM"
-            options=${[
-              {
-                label: 'AM',
-                key: 'AM',
-              },
-              {
-                label: 'PM',
-                key: 'PM',
-              },
-            ]}
-            value=${amOrPm}
-            onChange=${(index: number) => setAmOrPm(index === 0 ? 'AM' : 'PM')}
-            isReadOnly=${isReadOnly}
-          ><//>
-        </div>
-      </fieldset>
-      ${showStepValidation &&
-      isRequired &&
-      !(hours || !mins || !amOrPm) &&
-      html`<${ErrorMessage}>Please select a time<//>`}
-    </div>
-  `;
-};
-
-export { TimeInput, TimeInputProps };

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

@@ -1,16 +0,0 @@
-.timeInputWrapper {
-  fieldset {
-    padding: 0;
-    margin: 0;
-    border: none;
-  }
-  .selectWrap {
-    display: flex;
-    padding-top: 10px;
-    & > :not([hidden]) ~ :not([hidden]) {
-      --tw-space-x-reverse: 0;
-      margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-      margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-}

package/src/components/Toggle/index.ts

@@ -1,34 +0,0 @@
-import { html } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-interface ToggleProps {
-  id: string;
-  value: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onChange: (val: boolean, event?: any) => void;
-}
-
-/**
- * Toggle component
- *
- */
-const Toggle = (props: ToggleProps) => {
-  const { id, value: isToggled, onChange } = props;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleChange = (e: any) => {
-    onChange(!isToggled, e);
-  };
-
-  return html`
-    <div class=${styles.toggle}>
-      <div class=${`${styles.inner} ${isToggled ? styles.toggled : ''} `}>
-        <label for=${id} class=${`${isToggled ? styles.toggled : ''} `}></label>
-        <input type="checkbox" id=${id} onclick=${handleChange} />
-      </div>
-    </div>
-  `;
-};
-
-export { Toggle, ToggleProps };

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

@@ -1,56 +0,0 @@
-.toggle {
-  position: relative;
-  .inner {
-    position: relative;
-    border-radius: 9999px;
-    background-color: #ababab;
-    transition-property: background-color, border-color, color, fill, stroke,
-      opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    transition-timing-function: linear;
-    position: relative;
-    height: 20px;
-    width: 40px;
-    &.toggled {
-      background: #3bb568;
-    }
-    label {
-      position: absolute;
-      left: 0px;
-      transform: translateX(0px);
-      cursor: pointer;
-      border-radius: 9999px;
-      border-width: 2px;
-      border-style: solid;
-      border-color: #ababab;
-      box-sizing: border-box;
-      background-color: rgb(255, 255, 255);
-      transition-property: background-color, border-color, color, fill, stroke,
-        opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-      transition-duration: 300ms;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      height: 20px;
-      width: 20px;
-      &.toggled {
-        border-color: #3bb568;
-        transform: translateX(100%);
-      }
-    }
-    input {
-      appearance: none;
-      width: 100%;
-      height: 100%;
-      background: none;
-      border: none;
-      &:active {
-        outline: none;
-      }
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-}