@integry/sdk 4.5.2 → 4.5.4

package/src/components/TextArea/index.ts

@@ -0,0 +1,172 @@
+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 ? `Cannot modify user selection` : ''}
+          ></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

@@ -0,0 +1,70 @@
+.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;
+  }
+}

package/src/components/TextContent/index.tsx

@@ -0,0 +1,128 @@
+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

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

package/src/components/ThreeDotLoader/index.ts

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,41 @@
+.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

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,16 @@
+.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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,56 @@
+.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;
+      }
+    }
+  }
+}