@integry/sdk 4.5.2 → 4.5.4

package/src/components/EditableTextArea/index.ts

@@ -0,0 +1,143 @@
+import { html } from 'htm/preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useOnClickOutside } from '@/hooks/useOnClickOutside';
+// import useHover from '@/hooks/useHover';
+import useAutosizeTextArea  from '@/hooks/useAutosizeTextArea';
+import styles from './styles.module.scss';
+
+
+interface EditableTextAreaProps {
+  value: string;
+  handleChange?: (value: string) => void;
+  placeholder?: string;
+  keepEditingOn?: boolean;  
+  isContentEditable?: boolean;
+}
+
+/**
+ * EditableText component
+ *
+ */
+const EditableTextArea = (props: EditableTextAreaProps) => {
+  const { value, handleChange = () => null, placeholder = 'Enter text here...', keepEditingOn = false, isContentEditable = false } = props;
+
+    const [isEditing, setIsEditing] = useState(keepEditingOn || false);
+    const [editValue, setEditValue] = useState('');
+    const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+  const contentEditableRef = useRef<HTMLDivElement | null>(null);
+  const lastSavedValueRef = useRef<string>(value || '');
+
+//   const isHovered = useHover(containerRef, isEditing);
+    
+    useAutosizeTextArea(textAreaRef.current, editValue);
+
+  const determineChangedValue = () => {
+    const latestVal = editValue.trim() || '';
+    if (latestVal !== lastSavedValueRef.current) {
+      handleChange(latestVal);
+      lastSavedValueRef.current = latestVal;
+    }
+  };
+
+  useOnClickOutside(containerRef, () => {
+    if (isEditing || keepEditingOn) {
+      setIsEditing(false);
+      determineChangedValue();
+    }
+  });
+
+  // If released key is our target key then set to false
+  const upHandler = ({ key }: { key: string }): void => {
+    if (key === 'Enter') {
+      // we need to set editable to false
+      setIsEditing(false);
+    //   determineChangedValue();
+    } else if (key === 'Escape') {
+      setIsEditing(false);
+      // revert to original value
+      // determineChangedValue();
+    }
+  };
+
+  useEffect(() => {
+    if (textAreaRef && textAreaRef.current && isEditing === true) {
+      textAreaRef.current.focus();
+        if (textAreaRef && textAreaRef.current) {
+            textAreaRef.current?.addEventListener('keyup', upHandler);
+        }
+      }
+    // Remove event listeners on cleanup
+    return () => {
+      if (textAreaRef && textAreaRef.current) {
+        textAreaRef.current.removeEventListener('keyup', upHandler);
+      }
+    };
+  }, [isEditing, textAreaRef]);
+    
+    useEffect(() => {
+        if (value !== editValue) {
+            setEditValue(value);
+        }
+    }, [value]);
+
+    const handleEditClick = (e: MouseEvent) => {
+        if (e.currentTarget instanceof HTMLButtonElement) {
+        setIsEditing((prev) => !prev);
+        }
+    };
+    
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleTextAreaChange = (evt: any) => {
+        const val = evt.target?.value;
+        console.info('changed', value);
+        setEditValue(val);
+    };
+    
+  return html`
+    <div ref=${containerRef} class=${styles.editableTextWrapper}>
+    ${isContentEditable ? html` 
+        <div class="${styles.editableContentWrap}">
+          <span contentEditable=${true} 
+           dangerouslySetInnerHTML=${{
+            __html: value,
+          }}
+          ref=${contentEditableRef} 
+          onBlur=${(e: any) => { setEditValue(e.currentTarget?.textContent || '') }}
+          class="${styles.editContentSpan}"
+          oninput=${(e: any) => { setEditValue(e.currentTarget?.textContent || '') }}
+          />
+          ${!editValue && html`
+            <span class="${styles.placeholder}" onclick=${(e: any) => { contentEditableRef.current?.focus() }}>${placeholder}</span>
+          `}
+          <button class="${styles.contentEditButton}" onclick=${(e: any) => { contentEditableRef.current?.focus() }}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.838837 15.9777C0.795063 16 0.728973 16 0.662884 16L0.662875 15.9999C0.50922 15.9999 0.333276 15.9339 0.201097 15.8019C0.0251438 15.6262 -0.0409457 15.3631 0.0251438 15.1437L1.36583 10.5588C1.45425 10.3171 1.58556 10.0763 1.76151 9.9006L11.2107 0.444147C11.8037 -0.148049 12.7925 -0.148049 13.3856 0.444147L15.5605 2.61583C15.8464 2.90034 16 3.27402 16 3.69052C16 4.10702 15.8464 4.50211 15.5605 4.78751L6.08987 14.244C5.91392 14.4419 5.67274 14.5731 5.43069 14.639L0.838837 15.9777ZM12.1323 6.36906L9.64921 3.88966L3.12354 10.4055L5.60667 12.8849L12.1323 6.36906ZM12.1762 1.36628C12.2199 1.32257 12.286 1.30029 12.3298 1.30029C12.3959 1.30029 12.4397 1.32257 12.4834 1.36628L14.6584 3.53796C14.7022 3.60395 14.7245 3.66994 14.7245 3.69137C14.7245 3.71365 14.7245 3.80107 14.6584 3.84477L13.0774 5.42511L10.5942 2.94571L12.1762 1.36628ZM4.42044 13.5431L2.4429 11.5685L1.63013 14.3547L4.42044 13.5431Z" fill="#4250F0"/>
+            </svg>
+          </button>
+        </div>
+       ` : html `
+      ${(isEditing || keepEditingOn)
+      ? html`
+          <textarea rows="1" class=${styles.input} 
+          placeholder="${placeholder}" 
+          ref=${textAreaRef} 
+          value=${editValue} 
+          oninput=${handleTextAreaChange}
+          />
+        ` 
+        : html` <div class=${styles.value}>${editValue}</div> `}
+      ${(!isEditing || keepEditingOn) &&
+      html`
+        <button class=${styles.editButton} onclick=${handleEditClick}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M0.838837 15.9777C0.795063 16 0.728973 16 0.662884 16L0.662875 15.9999C0.50922 15.9999 0.333276 15.9339 0.201097 15.8019C0.0251438 15.6262 -0.0409457 15.3631 0.0251438 15.1437L1.36583 10.5588C1.45425 10.3171 1.58556 10.0763 1.76151 9.9006L11.2107 0.444147C11.8037 -0.148049 12.7925 -0.148049 13.3856 0.444147L15.5605 2.61583C15.8464 2.90034 16 3.27402 16 3.69052C16 4.10702 15.8464 4.50211 15.5605 4.78751L6.08987 14.244C5.91392 14.4419 5.67274 14.5731 5.43069 14.639L0.838837 15.9777ZM12.1323 6.36906L9.64921 3.88966L3.12354 10.4055L5.60667 12.8849L12.1323 6.36906ZM12.1762 1.36628C12.2199 1.32257 12.286 1.30029 12.3298 1.30029C12.3959 1.30029 12.4397 1.32257 12.4834 1.36628L14.6584 3.53796C14.7022 3.60395 14.7245 3.66994 14.7245 3.69137C14.7245 3.71365 14.7245 3.80107 14.6584 3.84477L13.0774 5.42511L10.5942 2.94571L12.1762 1.36628ZM4.42044 13.5431L2.4429 11.5685L1.63013 14.3547L4.42044 13.5431Z" fill="#4250F0"/>
+          </svg>
+        </button>
+      `}
+      `}
+    </div>
+  `;
+};
+
+export { EditableTextArea, EditableTextAreaProps };

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

@@ -0,0 +1,91 @@
+.editableTextWrapper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  .input,
+  .value {
+    display: block;
+    display: flex;
+    align-items: center;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+  }
+  .input {
+    flex: 1;
+    overflow: visible;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    &:focus {
+      outline-offset: 0;
+    }
+  }
+  .input,
+  .editButton {
+    border: 0;
+    outline: 0;
+    background: none;
+    box-shadow: none;
+    text-shadow: none;
+  }
+  .editButton {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    margin-left: 4px;
+  }
+  textarea {
+    resize: none;
+    transition: border-color 150ms ease;
+    &::placeholder {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 30px;
+        color: #E2E0DB;
+    }
+    ::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .editableContentWrap {
+    .editContentSpan {
+      align-items: center;
+      font-size: inherit;
+      line-height: inherit;
+      margin: 0;
+      padding: 0;
+      font-family: inherit;
+      color: inherit;
+      &:focus {
+        outline-offset: 0;
+      }
+      border: 0;
+      outline: 0;
+      background: none;
+      box-shadow: none;
+      text-shadow: none;
+    }
+    .placeholder {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 30px;
+        color: #E2E0DB;
+    }
+    .contentEditButton {
+      border: 0;
+      outline: 0;
+      background: none;
+      box-shadow: none;
+      text-shadow: none;
+      cursor: pointer;
+      margin-left: 10px;
+    }
+  }
+}

package/src/components/ErrorMessage/index.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'preact';
+import { html } from 'htm/preact';
+
+import styles from './styles.module.scss';
+
+/**
+ * ErrorMessage component
+ *
+ */
+const ErrorMessage: FunctionComponent = (props) => {
+  const { children } = props;
+
+  return html` <div class=${styles.errorMessage}>${children}</div> `;
+};
+
+export { ErrorMessage };

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

@@ -0,0 +1,19 @@
+.errorMessage {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #f05c42;
+  font-family: inherit;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 15px;
+  padding-left: 3px;
+  padding-top: 3px;
+  p {
+    font-size: 12px;
+    color: #f05c42;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 15px;
+  }
+}

package/src/components/ErrorPage/index.ts

@@ -0,0 +1,42 @@
+import { html } from 'htm/preact';
+import { StructError } from 'superstruct';
+import { Button } from '../Button';
+
+import styles from './styles.module.scss';
+
+interface ErrorPageProps {
+  title: string;
+  description: string;
+  errorPayload: Error | StructError | null;
+  onDismiss?: () => void;
+}
+
+/**
+ * ErrorPage component
+ *
+ */
+const ErrorPage = (props: ErrorPageProps) => {
+  const { title, description, errorPayload, onDismiss = null } = props;
+
+  return html`
+    <div class="${styles.errorPageWrapper}">
+      <div class=${styles.errorTitle}>${title}</div>
+      <div class=${styles.errorDescription}>${description}</div>
+      ${errorPayload &&
+      html`
+        <div class=${styles.errorContainer}>
+          <pre class=${styles.errorPayload}>${errorPayload.message}</pre>
+          <pre class=${styles.errorPayload}>${errorPayload.stack}</pre>
+        </div>
+      `}
+      ${onDismiss &&
+      html`
+        <div>
+          <${Button} label="Dismiss" onClick=${onDismiss} />
+        </div>
+      `}
+    </div>
+  `;
+};
+
+export { ErrorPage, ErrorPageProps };

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

@@ -0,0 +1,26 @@
+.errorPageWrapper {
+  font-family: monospace;
+  border: 1px solid red;
+  padding: 30px;
+  .errorTitle {
+    color: rgb(182, 23, 23);
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 20px;
+    margin-bottom: 8px;
+  }
+  .errorDescription {
+    font-size: 14px;
+    margin-bottom: 18px;
+  }
+  .errorContainer {
+    overflow: hidden;
+    background: #ffebeb;
+    padding: 4px;
+    margin-bottom: 20px;
+  }
+  .errorPayload {
+    margin: 0;
+    padding: 8px 12px;
+  }
+}

package/src/components/Footer/index.ts

@@ -0,0 +1,41 @@
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { StoreType } from '@/types/store';
+import { actionFunctions } from '@/store/actionFunctions';
+
+import styles from './styles.module.scss';
+
+
+type SelectProps = {
+  style: string;
+} & StoreType;
+
+const Footer = (props: SelectProps) => {
+  const {
+    style = '',
+  } = props;
+
+  return html`
+    <div id="embed--footer" class=${styles.embedPreviewFooter} style=${style}>
+      <span class=${styles.embedPreviewFooterDesc}>
+      Powered by <a class=${styles.embedPreviewFooterCTA} target="_blank" href="https://integry.ai/?utm_source=${props.genericData?.customerAppName}&utm_medium=sdk" rel="noreferrer"><svg style="margin-left: 4px; margin-right: 2px;" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.9833 11.961V11.961C5.39389 11.961 4.91162 11.479 4.91162 10.8899V1.07111C4.91162 0.481989 5.39389 0 5.9833 0C6.5727 0 7.05492 0.481989 7.05492 1.07111V10.8899C7.05492 11.479 6.5727 11.961 5.9833 11.961" fill="#F05C42"/>
+      <path d="M11.9668 5.98046V5.98046C11.9668 6.56958 11.4846 7.05162 10.8951 7.05162H1.07167C0.482268 7.05162 0 6.56958 0 5.98046C0 5.39134 0.482268 4.9093 1.07167 4.9093H10.8951C11.4846 4.9093 11.9668 5.39134 11.9668 5.98046" fill="#FCC700"/>
+      <path d="M10.2143 1.75164V1.75164C10.6311 2.16822 10.6311 2.84988 10.2143 3.26646L3.26807 10.2094C2.85129 10.626 2.1693 10.626 1.75252 10.2094C1.33575 9.79278 1.33575 9.11116 1.75252 8.69459L8.69876 1.75164C9.11554 1.33506 9.79753 1.33506 10.2143 1.75164" fill="#3BB568"/>
+      <path d="M1.75252 1.75164V1.75164C2.1693 1.33506 2.85129 1.33506 3.26807 1.75164L10.2143 8.69459C10.6311 9.11116 10.6311 9.79278 10.2143 10.2094C9.79753 10.626 9.11554 10.626 8.69876 10.2094L1.75252 3.26646C1.33575 2.84988 1.33575 2.16827 1.75252 1.75164" fill="#509CF6"/>
+      </svg>Integry</a>. </span>
+      <a class=${styles.embedPreviewFooterCTA} target="_blank" href="https://www.integry.ai/security-policy" rel="noreferrer">
+        Privacy Policy
+        <!--<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M12.0007 4.99975V11.5001C12.0007 12.6006 11.1038 13 10.5008 13H1.49993C0.399356 13 0 12.1032 0 11.5001V2.49924C0 1.39867 0.896835 0.999311 1.49993 0.999311H7.50027C7.77651 0.999311 8.00024 1.22304 8.00024 1.49929C8.00024 1.77553 7.77651 1.99926 7.50027 1.99926H1.49993C1.27494 2.00551 0.99995 2.09676 0.99995 2.49924V11.5001C1.0062 11.7251 1.09745 12 1.49993 12H10.5008C10.7257 11.9938 11.0007 11.9032 11.0007 11.5001V4.99975C11.0007 4.72351 11.2245 4.49978 11.5007 4.49978C11.777 4.49978 12.0007 4.72351 12.0007 4.99975ZM12.5 0H9.50018C9.22394 0 9.00021 0.223733 9.00021 0.499975C9.00021 0.776218 9.22394 0.999951 9.50018 0.999951H11.2263L5.15912 6.63407C4.95726 6.82219 4.94539 7.13842 5.13287 7.34092C5.23162 7.44716 5.36536 7.50029 5.49911 7.50029C5.62098 7.50029 5.74284 7.45654 5.83972 7.36654L12 1.64682V3.49985C12 3.77609 12.2238 3.99983 12.5 3.99983C12.7763 3.99983 13 3.77609 13 3.49985V0.499999C13 0.223757 12.7763 2.40314e-05 12.5 2.40314e-05L12.5 0Z" fill="#4250F0"></path>
+        </svg>-->
+      </a>
+    </div>  
+  `;
+};
+export default connect<SelectProps, null, StoreType, unknown>(
+  [
+    'genericData',
+  ],
+  actionFunctions,
+)(Footer);
+

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

@@ -0,0 +1,40 @@
+.embedPreviewFooter {
+  padding-bottom: 12px;
+  padding-top: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  box-shadow: 0px -6px 10px 0px rgba(255, 255, 255, 0.8);
+
+  .embedPreviewFooterDesc {
+    color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    // gap: 2px;
+  }
+
+  .embedPreviewFooterCTA {
+    // color: var(--theme-accent-blue-1, #4250f0);
+    color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    text-decoration: none;
+  }
+}