@integry/sdk 4.5.2 → 4.5.4

package/jest.config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['examples'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|scss|less)$': 'identity-obj-proxy',
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.2",
+  "version": "4.5.4",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",
@@ -13,7 +13,9 @@
     "build:dev": "rollup -c",
     "prepublishOnly": "yarn lint && yarn build:prod",
     "size": "yarn build:prod && size-limit",
-    "test": "jest",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "publish-beta": "npm publish --tag beta"
@@ -32,6 +34,8 @@
   "browserslist": "> 0.5%, not dead, not op_mini all",
   "devDependencies": {
     "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-react": "^7.26.3",
     "@jsdevtools/version-bump-prompt": "^6.1.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-json": "^4.1.0",
@@ -46,11 +50,13 @@
     "@storybook/preact": "^6.5.12",
     "@storybook/preset-scss": "^1.0.3",
     "@testing-library/preact": "^2.0.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^26.0.23",
     "@types/yaireo__tagify": "^4.18.0",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "autoprefixer": "^10.2.5",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.2",
     "chalk": "^4.1.0",
     "core-js": "^3.15.1",
@@ -63,7 +69,6 @@
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.22.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
     "postcss": "^8.2.10",
     "postcss-loader": "^4.0.0",
     "postcss-nested": "^5.0.5",
@@ -83,7 +88,8 @@
     "style-loader": "2.0.0",
     "ts-jest": "^27.0.3",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "vitest": "^3.0.4"
   },
   "dependencies": {
     "@yaireo/tagify": "^4.21.1",

package/src/components/AddTagButton/index.ts

@@ -0,0 +1,23 @@
+import { html } from 'htm/preact';
+
+export interface TagButtonProps {
+  onClick: () => void;
+}
+
+export const TagButton = (props: TagButtonProps) => {
+  const { onClick } = props;
+  return html` <button onClick=${onClick}>
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.74219 6.74268V7.24268H7.24219V6.74268H6.74219ZM6.74219 7.74268H7.24219V7.24268H6.74219V7.74268ZM7.74219 7.74268V7.24268H7.24219V7.74268H7.74219ZM7.74219 6.74268H7.24219V7.24268H7.74219V6.74268ZM7.24219 1.24268H8.24219C8.24219 0.690391 7.79447 0.242676 7.24219 0.242676V1.24268ZM7.24219 1.24268V0.242676C6.6899 0.242676 6.24219 0.690391 6.24219 1.24268H7.24219ZM7.24219 6.74268V1.24268H6.24219V6.74268H7.24219ZM1.24219 7.24268H6.74219V6.24268H1.24219V7.24268ZM1.24219 7.24268V6.24268C0.689903 6.24268 0.242188 6.69039 0.242188 7.24268H1.24219ZM1.24219 7.24268H0.242188C0.242188 7.79496 0.689903 8.24268 1.24219 8.24268V7.24268ZM6.74219 7.24268H1.24219V8.24268H6.74219V7.24268ZM7.24219 13.2427V7.74268H6.24219V13.2427H7.24219ZM7.24219 13.2427H6.24219C6.24219 13.795 6.6899 14.2427 7.24219 14.2427V13.2427ZM7.24219 13.2427V14.2427C7.79447 14.2427 8.24219 13.795 8.24219 13.2427H7.24219ZM7.24219 7.74268V13.2427H8.24219V7.74268H7.24219ZM13.2422 7.24268H7.74219V8.24268H13.2422V7.24268ZM13.2422 7.24268V8.24268C13.7945 8.24268 14.2422 7.79496 14.2422 7.24268H13.2422ZM13.2422 7.24268H14.2422C14.2422 6.69039 13.7945 6.24268 13.2422 6.24268V7.24268ZM7.74219 7.24268H13.2422V6.24268H7.74219V7.24268ZM7.24219 1.24268V6.74268H8.24219V1.24268H7.24219Z"
+        fill="#505050"
+      />
+    </svg>
+  </button>`;
+};

package/src/components/BasicSelect/index.ts

@@ -0,0 +1,114 @@
+import { html } from 'htm/preact';
+import { useEffect } from 'preact/hooks';
+import { Hint } from '@/components/Tooltip';
+import { createNewSortInstance } from 'fast-sort';
+import { ErrorMessage } from '../ErrorMessage';
+
+import styles from './styles.module.scss';
+
+interface SelectProps {
+  ariaLabel: string;
+  options: { label: string; key: string }[];
+  placeholder: string;
+  value?: string;
+  showUnselectedValue?: boolean;
+  unselectedText?: string;
+  loading?: boolean;
+  isRequired?: boolean;
+  showStepValidation?: boolean;
+  onChange?: (index: number) => void;
+  isReadOnly?: boolean;
+}
+
+/**
+ * Input component
+ *
+ */
+const Select = (props: SelectProps) => {
+  const {
+    placeholder,
+    ariaLabel,
+    value,
+    options = [],
+    showUnselectedValue = false,
+    unselectedText = 'Select a value',
+    isRequired = false,
+    showStepValidation = false,
+    onChange = () => null,
+    isReadOnly = false,
+  } = props;
+
+  const handleInputChange = (e: MouseEvent) => {
+    if (!isReadOnly && e.currentTarget instanceof HTMLSelectElement) {
+      const { value: newValue } = e.currentTarget;
+      const val = options.findIndex((el) => `${el.key}` === `${newValue}`);
+      onChange(val);
+    }
+  };
+
+  // if value cannot be found in options, unset the value
+  useEffect(() => {
+    if (options.findIndex((el) => el.key === value) === -1) {
+      onChange(-1);
+    }
+  }, []);
+
+  const getSortedOptions = (): { label: string; key: string }[] => {
+    if (options.length > 0) {
+      const naturalSort = createNewSortInstance({
+        comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare,
+      });
+      const sorted = naturalSort(options).asc((option) => option.label);
+      return sorted;
+    }
+    return [];
+  }
+
+  return html`
+    <div class=${styles.selectWrapper}>
+     <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+     ${isReadOnly && html `<span class=${styles.readonlyHint} data-hint=${isReadOnly ? `Cannot modify user selection` : ''}></span>`}
+      <select
+        aria-label=${ariaLabel}
+        onchange=${handleInputChange}
+        class=${`${value && styles.selectedVal} ${isReadOnly ? styles.readonly: ''}`}
+        disabled=${isReadOnly}
+      >
+        ${showUnselectedValue &&
+        html` <option value="">${unselectedText}</option> `}
+        ${value === undefined &&
+        html`
+          <option value="" disabled selected hidden>${placeholder}</option>
+        `}
+        ${getSortedOptions().map(
+          (el) => html`
+            <option value=${el.key} selected=${value === el.key}>
+              ${el.label}
+            </option>
+          `,
+        )}
+      </select>
+      <svg
+        width="12"
+        height="8"
+        viewBox="0 0 12 8"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11 1.5L6 6.5L1 1.5"
+          stroke="#999999"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+      <//>
+    </div>
+    ${isRequired &&
+    !value &&
+    showStepValidation &&
+    html`<${ErrorMessage}>Please map this required field<//>`}
+  `;
+};
+
+export { Select, SelectProps };

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

@@ -0,0 +1,44 @@
+.selectWrapper {
+  position: relative;
+  width: 100%;
+  fieldset {
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+  select {
+    width: 100%;
+    color: #999999;
+    position: relative;
+    font-size: 14px;
+    appearance: none;
+    padding: 8.5px 14px;
+    padding-right: 28px;
+    border-radius: 4px;
+    border: 1px solid #e2e0db;
+    outline: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    &:focus {
+      outline: none;
+    }
+    &.selectedVal {
+      color: #333;
+    }
+    &.readonly {
+      opacity: 1;
+    }
+  }
+  svg {
+    position: absolute;
+    right: 10px;
+    top: 13px;
+  }
+  .readonlyHint {
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    position: absolute;
+  }
+}

package/src/components/Button/index.ts

@@ -0,0 +1,94 @@
+import { html } from 'htm/preact';
+import cx from 'classnames';
+
+import { Hint } from '@/components/Tooltip';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
+
+import styles from './styles.module.scss';
+
+export enum ButtonTypes {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  LINK = 'link',
+}
+
+export interface ButtonProps {
+  label: string;
+  type?: ButtonTypes;
+  color?: string;
+  width?: string;
+  height?: string;
+  dismissOnClick?: boolean;
+  position?: 'top' | 'bottom';
+  tooltip?: string;
+  isLoading?: boolean;
+  disabled?: boolean;
+  hasError?: boolean;
+  backgroundColor: string;
+  onClick: (e: MouseEvent) => void;
+  className?: string;
+}
+
+/**
+ * Button component
+ *
+ */
+export const Button = (props: ButtonProps) => {
+  const {
+    label,
+    type = ButtonTypes.PRIMARY,
+    color = null,
+    backgroundColor = null,
+    disabled = false,
+    hasError = false,
+    tooltip,
+    width,
+    height,
+    dismissOnClick = true,
+    isLoading = false,
+    position = 'bottom',
+    onClick = undefined,
+    className = '',
+    ...restOfProps
+  } = props;
+
+  return html`
+    <${Hint} dismissOnClick=${dismissOnClick} position=${position}>
+      <button
+        type="button"
+        onclick=${onClick}
+        data-hint=${tooltip || null}
+        class=${`${cx(
+          styles.button,
+          {
+            [styles.btnPrimary]: type === ButtonTypes.PRIMARY,
+            [styles.btnSecondary]: type === ButtonTypes.SECONDARY,
+            [styles.buttonLink]: type === ButtonTypes.LINK,
+            [styles.disabled]: disabled || hasError,
+          },
+          {
+            'integry-container__button--primary': type === ButtonTypes.PRIMARY,
+            'integry-container__button--secondary':
+              type === ButtonTypes.SECONDARY,
+            'integry-container__button--link': type === ButtonTypes.LINK,
+            'integry-container__button--disabled': hasError || disabled,
+          },
+        )} ${styles[className || '']}`}
+        disabled=${disabled}
+        style=${{
+          backgroundColor:
+            type === ButtonTypes.PRIMARY ? backgroundColor : null,
+          borderColor: type === ButtonTypes.PRIMARY ? backgroundColor : color,
+          color,
+          width,
+          height,
+        }}
+        ${{ ...restOfProps }}
+      >
+        ${isLoading
+          ? html`<${ThreeDotLoader} className="${className}" />`
+          : label}
+      </button>
+    <//>
+  `;
+};

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

@@ -0,0 +1,152 @@
+.button {
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  font-size: 12px;
+  padding: 0px 15px;
+  height: 30px;
+  &.btnPrimary {
+    border: 1px solid #4250f0;
+    background: #4250f0;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #ffffff;
+    &:not(.disabled):hover {
+      background: var(--theme-accent-blue-2, #3a46d5);
+      border: 1px solid var(--theme-accent-blue-2, #3a46d5);
+    }
+  }
+  &.btnSecondary {
+    border: 1px solid #4250f0;
+    background: transparent;
+    text-align: center;
+    font-size: 12px;
+    color: #4250f0;
+    border-radius: 4px;
+    &:not(.disabled):hover {
+      background: #4250f0;
+      color: white;
+    }
+  }
+  &.buttonLink {
+    border: none;
+    color: #4250f0;
+    font-weight: 500;
+    font-size: 12px;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    &:not(.disabled):hover {
+      color: #473a64;
+    }
+  }
+
+  &.tell-us-more-btn {
+    width: 113px;
+    height: 36px;
+    background: #ffffff;
+    border: 1px solid #4250f0;
+    // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #4250f0;
+    &:not(.disabled):hover {
+      background: #ffffff;
+      color: #4250f0;
+    }
+    padding: 0px;
+  }
+
+  &.integry-primary-btn {
+    width: auto;
+    height: auto;
+    background: #4250f0;
+    border: 1px solid #4250f0;
+    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08),
+      inset 0px -1px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    color: #ffffff;
+    &:not(.disabled):hover {
+      background: #2c36ad;
+      color: #ffffff;
+    }
+    padding: 0px;
+  }
+
+  &.integry-btn-grey {
+    width: auto;
+    height: auto;
+    background: #f3f3f3;
+    border: 1px solid #f3f3f3;
+    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08),
+      inset 0px -1px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    color: #333333;
+    &:not(.disabled):hover {
+      background: #e6e6e6;
+      color: #333333;
+    }
+    padding: 0px;
+  }
+
+  &.integry-secondary-btn {
+    width: auto;
+    height: auto;
+    background: #ffffff;
+    border: 1px solid #4250f0;
+    // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #4250f0;
+    &:not(.disabled):hover {
+      background: #4250f0;
+      color: #ffffff;
+    }
+    padding: 0px;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.flowWrapButton {
+    border-radius: 5px;
+    border: 1px solid var(--theme-accent-blue-1, #4250f0);
+    background: var(--theme-accent-blue-1, #4250f0);
+    color: #fff;
+    font-family: Inter;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 4.5px 10px;
+    cursor: pointer;
+    height: auto;
+
+    &:hover {
+      background: var(--theme-accent-blue-2, #3a46d5) !important;
+      border: 1px solid var(--theme-accent-blue-2, #3a46d5) !important;
+    }
+  }
+}

package/src/components/CheckboxGroup/Checkbox.ts

@@ -0,0 +1,104 @@
+import { html } from 'htm/preact';
+import { Hint } from '@/components/Tooltip';
+
+import styles from './styles.module.scss';
+
+export interface CheckboxProps extends Partial<HTMLInputElement> {
+  fieldId: string;
+  id: string;
+  value: string;
+  description?: string;
+  isChecked?: boolean;
+  handleChange?: (id: string, value: boolean) => void;
+  isReadOnly?: boolean;
+  title?: string;
+}
+
+/**
+ * Checkbox component
+ *
+ */
+export const Checkbox = (props: CheckboxProps) => {
+  const {
+    fieldId,
+    id,
+    description = null,
+    value,
+    isChecked = false,
+    handleChange = () => null,
+    isReadOnly = false,
+    title = '',
+  } = props;
+
+  const handleCheckboxChange = (e: MouseEvent) => {
+    if (!isReadOnly && e.target instanceof HTMLInputElement) {
+      const { name, checked } = e.target;
+      handleChange(name, checked);
+    }
+  };
+
+  return html`
+    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+      <div class=${styles.checkboxWrap}>
+        ${isReadOnly &&
+        html`<span
+          class=${styles.readonlyHint}
+          data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+        ></span>`}
+        <div class=${styles.checkbox}>
+          <label for=${fieldId + id}>
+            <input
+              id=${fieldId + id}
+              type="checkbox"
+              name=${id}
+              value=${value}
+              checked=${isChecked}
+              onclick=${handleCheckboxChange}
+              readonly=${isReadOnly}
+            />
+            <div class=${styles.button}>
+              ${isChecked
+                ? html`
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7.86364 15.5L10 13.4923L17.5 6.49357L15.3485 4.5L7.86364 11.4987L4.63636 8.50129L2.5 10.4949L5.71212 13.4923L7.86364 15.5Z"
+                        fill="#4250f0"
+                      />
+                      <path
+                        d="M0 0V-2H-2V0H0ZM20 0H22V-2H20V0ZM20 20V22H22V20H20ZM0 20H-2V22H0V20ZM0 2H20V-2H0V2ZM18 0V20H22V0H18ZM20 18H0V22H20V18ZM2 20V0H-2V20H2Z"
+                        fill="#4250f0"
+                      />
+                    </svg>
+                  `
+                : html`
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M0 0V-2H-2V0H0ZM20 0H22V-2H20V0ZM20 20V22H22V20H20ZM0 20H-2V22H0V20ZM0 2H20V-2H0V2ZM18 0V20H22V0H18ZM20 18H0V22H20V18ZM2 20V0H-2V20H2Z"
+                        fill="#4250f0"
+                      />
+                    </svg>
+                  `}
+            </div>
+            <div>
+              <div class=${styles.text}>${title || value}</div>
+              ${description &&
+              html`<div class=${styles.description}>${description}</div>`}
+            </div>
+          </label>
+        </div>
+      </div>
+    <//>
+  `;
+};