@integry/sdk 4.5.2 → 4.5.4

package/src/components/Toggle-v2/index.ts

@@ -0,0 +1,40 @@
+import { html } from 'htm/preact';
+
+import styles from './styles.module.scss';
+
+interface ToggleProps {
+  id: string;
+  value: boolean;
+  disabled: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange: (val: boolean, event?: any) => void;
+  size?: string;
+}
+
+/**
+ * Toggle component
+ *
+ */
+const Toggle = (props: ToggleProps) => {
+  const { id, value: isToggled, onChange, disabled = false, size = 'lg' } = props;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleChange = (e: any) => {
+    onChange(!isToggled, e);
+  };
+
+  return html`
+    <label className=${`${styles.switch} toggle ${size === 'sm' ? styles.smallSwitch : ''}`}>
+      <input
+        type="checkbox"
+        id=${id}
+        onclick=${handleChange}
+        checked=${isToggled}
+        disabled=${disabled}
+      />
+      <span className=${`${styles.slider} ${styles.round}`} />
+    </label>
+  `;
+};
+
+export { Toggle, ToggleProps };

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

@@ -0,0 +1,86 @@
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 14px;
+  margin: 0;
+  top: 0px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  display: none;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgb(213, 213, 213);
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 15px;
+  width: 15px;
+  bottom: -0.5px;
+  background-color: #9b9b9b;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #9ddab3;
+}
+
+input:checked + .slider:before {
+  background-color: #3bb568;
+  left: 2.5px;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
+}
+
+input:checked + .slider:before {
+  transform: translateX(16px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 14px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.disabled-input:checked + .slider {
+  background-color: #c6c5c5;
+}
+
+.disabled-input:checked + .slider:before {
+  background-color: #9b9b9b;
+}
+
+.smallSwitch {
+  width: 26px;
+  height: 10px;
+
+  .slider:before {
+    height: 15px;
+    width: 15px;
+    left: -1px;
+    bottom: -2.5px;
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(13px);
+  }
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1,271 @@
+/**
+ * Modified version of https://github.com/rschristian/preact-hint
+ * for Preact with htm with added support for:
+ * 1. bottom position
+ * 2. dismissing popup on click of target element
+ * 3. Delta Y to configure spacing
+ * 4. Offset from center rendering
+ */
+
+import { html } from 'htm/preact';
+import type { ComponentChild, VNode } from 'preact';
+import { useCallback, useRef, useState } from 'preact/hooks';
+import { ViewStyles } from '@/types';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  children: ComponentChild | ComponentChild[];
+  dismissOnClick?: boolean;
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'bottom-right'
+    | 'fixed'
+    | 'top-right'
+    | 'top-right-compact';
+  attribute?: string;
+  deltaY?: number;
+  hideArrow?: boolean;
+  template?: (content: string) => VNode;
+  style?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+interface HintProps {
+  content: string;
+  position:
+    | 'top'
+    | 'bottom'
+    | 'bottom-right'
+    | 'fixed'
+    | 'fixed-right'
+    | 'top-right'
+    | 'top-right-compact';
+  deltaY: number;
+  template?: (content: string) => VNode;
+  hideArrow?: boolean;
+  rootBoundingRect: ClientRect;
+  targetBoundingRect: ClientRect;
+}
+
+export function HintWrap(props: HintProps): VNode {
+  const hint = useRef<HTMLSpanElement | null>(null);
+
+  const { position, deltaY = 0, hideArrow, targetBoundingRect } = props;
+
+  if (['fixed', 'fixed-right'].includes(position)) {
+    return html`
+      <div
+        class="${`${styles['preact-hint']} ${
+          styles[`preact-hint__${position}`]
+        }`}
+      ${hideArrow ? styles['preact-hint_hide-arrow'] : ''}"
+        style="${position === 'fixed-right' ? 'right' : 'left'}: ${(position ===
+        'fixed-right'
+          ? 60 + 38 + targetBoundingRect.right - targetBoundingRect.left
+          : targetBoundingRect.left) -
+        deltaY}px; top: ${targetBoundingRect.bottom + 5}px;"
+      >
+        <pre class=${styles['preact-hint__content']} ref=${hint}>
+        ${props.template ? props.template(props.content) : props.content}
+      </pre
+        >
+      </div>
+    `;
+  }
+
+  let className = '';
+  if (
+    position === 'top' ||
+    position === 'top-right' ||
+    position === 'top-right-compact'
+  ) {
+    className = styles['preact-hint__top'];
+  } else if (position === 'bottom') {
+    className = styles['preact-hint__bottom'];
+  } else if (position === 'bottom-right') {
+    className = styles['preact-hint__bottom-right'];
+  }
+  return html`
+    <div
+      class="${`${styles['preact-hint']} ${className} ${
+        position === 'top-right' ? styles['preact-hint__top-right'] : ''
+      }}`}
+      ${hideArrow ? styles['preact-hint_hide-arrow'] : ''}"
+      style=${{
+        ...(position === 'bottom-right'
+          ? {
+              right:
+                props.rootBoundingRect.right -
+                props.targetBoundingRect.right -
+                12,
+            }
+          : {
+              left: props.targetBoundingRect.left - props.rootBoundingRect.left,
+            }),
+        ...(position === 'top'
+          ? {
+              bottom:
+                props.rootBoundingRect.height -
+                props.targetBoundingRect.top +
+                props.rootBoundingRect.top +
+                2 +
+                deltaY,
+            }
+          : {
+              top:
+                props.rootBoundingRect.height -
+                props.targetBoundingRect.top +
+                props.rootBoundingRect.top +
+                2 +
+                deltaY,
+            }),
+        ...(position === 'top-right'
+          ? {
+              right: 0,
+              left: 'auto',
+              top: 0 - props.targetBoundingRect.height - 10,
+            }
+          : {}),
+        ...(position === 'top-right-compact'
+          ? {
+              left: 0,
+              top: 0 - props.targetBoundingRect.height - 5,
+            }
+          : {}),
+      }}
+    >
+      <pre class=${styles['preact-hint__content']} ref=${hint}>
+        ${props.template ? props.template(props.content) : props.content}
+      </pre
+      >
+    </div>
+  `;
+}
+
+export const Hint = (props: Props): VNode => {
+  const {
+    position = 'bottom',
+    attribute = 'data-hint',
+    deltaY = 0,
+    hideArrow,
+    style = '',
+    disabled = false,
+    className = '',
+  } = props;
+  const [content, setContent] = useState<string>('');
+  const [
+    containerElement,
+    setContainerElement,
+  ] = useState<HTMLDivElement | null>(null);
+  const [
+    targetBoundingRect,
+    setTargetBoundingRect,
+  ] = useState<ClientRect | null>(null);
+
+  const handleMouseOver = (e: Event) => {
+    if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
+      setContent(e.target.getAttribute(attribute) || '');
+      setTargetBoundingRect(e.target.getBoundingClientRect());
+    }
+  };
+
+  const handleMouseOut = (e: Event) => {
+    // if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
+    setContent('');
+    setTargetBoundingRect(null);
+    // }
+  };
+  const handleMouseClick = () => {
+    setContent('');
+    setTargetBoundingRect(null);
+  };
+
+  const onRefChange = useCallback(
+    (node: HTMLDivElement | null) => {
+      // Remove existing event listeners before adding new ones
+      if (containerElement) {
+        containerElement.removeEventListener('mouseover', handleMouseOver);
+        containerElement.removeEventListener('mouseout', handleMouseOut);
+        if (props.dismissOnClick)
+          containerElement.removeEventListener('click', handleMouseClick);
+      }
+
+      setContainerElement(node);
+
+      if (containerElement) {
+        containerElement.addEventListener('mouseover', handleMouseOver);
+        containerElement.addEventListener('mouseout', handleMouseOut);
+        containerElement.addEventListener('mouseleave', handleMouseOut);
+        document.addEventListener('wheel', handleMouseOut);
+        if (props.dismissOnClick)
+          containerElement.addEventListener('click', handleMouseClick);
+      }
+    },
+    [containerElement, props.dismissOnClick],
+  );
+
+  const onRefChangeOld = useCallback(
+    (node: HTMLDivElement | null) => {
+      setContainerElement(node);
+      if (containerElement) {
+        containerElement.addEventListener('mouseover', (e) => {
+          if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
+            setContent(e.target.getAttribute(attribute) || '');
+            setTargetBoundingRect(e.target.getBoundingClientRect());
+          }
+        });
+        containerElement.addEventListener('mouseout', (e) => {
+          if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
+            setContent('');
+            setTargetBoundingRect(null);
+          }
+        });
+        containerElement.addEventListener('mouseleave', (e) => {
+          if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
+            setContent('');
+            setTargetBoundingRect(null);
+          }
+        });
+        document.addEventListener('wheel', (e) => {
+          if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
+            setContent('');
+            setTargetBoundingRect(null);
+          }
+        });
+        if (props.dismissOnClick)
+          containerElement.addEventListener('click', () => {
+            setContent('');
+            setTargetBoundingRect(null);
+          });
+      }
+    },
+    [containerElement],
+  );
+
+  return disabled
+    ? html` ${props.children}`
+    : html`
+        <div
+          ref=${onRefChange}
+          style="position: relative;${style}"
+          class=${className}
+        >
+          ${content &&
+          containerElement &&
+          targetBoundingRect &&
+          html` <${HintWrap}
+            content=${content}
+            position=${position}
+            deltaY=${deltaY}
+            template=${props.template}
+            rootBoundingRect=${containerElement?.getBoundingClientRect()}
+            targetBoundingRect=${targetBoundingRect}
+            hideArrow=${hideArrow}
+          />`}
+          ${props.children}
+        </div>
+      `;
+};

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

@@ -0,0 +1,105 @@
+.preact-hint {
+  position: absolute;
+  z-index: 9999;
+  cursor: default;
+  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    margin: auto;
+    display: block;
+    position: absolute;
+    border: 4px solid transparent;
+  }
+
+  &.preact-hint__top {
+    padding-bottom: 4px;
+    &::after {
+      top: auto;
+      left: 50%;
+      bottom: 0;
+      border-bottom: none;
+      border-top-color: #fff;
+    }
+  }
+
+  &.preact-hint__bottom {
+    padding-top: 4px;
+    &::after {
+      top: 0;
+      left: 16px;
+      bottom: auto;
+      border-top: none;
+      border-bottom-color: #fff;
+    }
+  }
+  &.preact-hint__bottom-right {
+    padding-top: 4px;
+    &::after {
+      top: 0;
+      right: 16px;
+      bottom: auto;
+      border-top: none;
+      border-bottom-color: #fff;
+    }
+  }
+  &.preact-hint__fixed {
+    position: fixed;
+
+    &::after {
+      top: -4px;
+      left: 16px;
+      bottom: auto;
+      border-top: none;
+      border-bottom-color: #fff;
+    }
+  }
+
+  &.preact-hint__fixed-right {
+    position: fixed;
+
+    &::after {
+      top: -4px;
+      right: 16px;
+      bottom: auto;
+      border-top: none;
+      border-bottom-color: #fff;
+    }
+  }
+  &.preact-hint__top-right {
+    padding-top: 4px;
+    &::after {
+      top: auto;
+      left: 86%;
+      bottom: 0;
+      border-top: none;
+      border-bottom-color: #fff;
+    }
+  }
+  &.preact-hint_hide-arrow {
+    &::after {
+      display: none !important;
+    }
+  }
+}
+
+.preact-hint__content {
+  font-family: inherit;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  background: #ffffff;
+  border-radius: 5px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.062132);
+  padding: 8px;
+  margin: 0;
+  color: #000000;
+  display: block;
+}
+[class*='preact-hint__top-right'] {
+  &::after {
+    left: 86% !important;
+  }
+}