@integry/sdk 4.7.39 → 4.7.40

package/src/components/RadioGroup/index.ts

@@ -1,169 +0,0 @@
-import { html } from 'htm/preact';
-import { useContext, useEffect, useRef, useState } from 'preact/hooks';
-
-import AppContext from '@/contexts/AppContext';
-import { Radio } from './Radio';
-import { Label } from '../Label';
-import { ErrorMessage } from '../ErrorMessage';
-
-import styles from './styles.module.scss';
-import { ThreeDotLoader } from '../ThreeDotLoader';
-
-interface RadioItem {
-  id: string;
-  value: string;
-}
-
-export interface RadioGroupProps {
-  title: string;
-  description: string;
-  isDynamic: boolean;
-  dataSrcEndpoint?: string;
-  ariaLabel: string;
-  value: string;
-  initialOptions?: RadioItem[];
-  endpointData: string;
-  isRequired?: boolean;
-  showStepValidation?: boolean;
-  onChange?: (selected: string) => void;
-  isReadOnly?: boolean;
-  isChanged?: boolean;
-}
-
-/**
- * RadioGroup component
- *
- */
-export const RadioGroup = (props: RadioGroupProps) => {
-  const {
-    title,
-    description,
-    ariaLabel,
-    initialOptions = [],
-    value = null,
-    isDynamic,
-    dataSrcEndpoint,
-    endpointData,
-    isRequired = false,
-    showStepValidation = false,
-    onChange = () => null,
-    isReadOnly = false,
-    isChanged = false,
-  } = props;
-
-  const [loading, setLoading] = useState(isDynamic);
-
-  const selectedItemRef = useRef(value);
-
-  const [selectedItem, setSelectedItem] = useState(value);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleChange = (inputValue: string) => {
-    setSelectedItem(inputValue);
-  };
-
-  const [parsedOptions, setParsedOptions] = useState<
-    { id: string; value: string }[]
-  >([]);
-
-  const context = useContext(AppContext);
-
-  useEffect(() => {
-    if (isDynamic) {
-      if (dataSrcEndpoint) {
-        // eslint-disable-next-line no-use-before-define
-        fetchDynamicData();
-      } else {
-        setParsedOptions(initialOptions);
-        setLoading(false);
-      }
-    } else
-      throw new Error(
-        'Radio group with dynamic source has no data src endpoint',
-      );
-  }, []);
-
-  useEffect(() => {
-    if (selectedItemRef.current !== selectedItem && selectedItem)
-      onChange(selectedItem);
-  }, [selectedItem]);
-
-  const fetchDynamicData = (): void => {
-    if (dataSrcEndpoint) {
-      setLoading(true);
-        let data;
-        try {
-          data = JSON.parse(endpointData);
-        } catch (parseErr) {
-          data = '';
-        }
-        // call dynamic endpoint
-        context?.apiHandler
-          .callDynamicDataEndpoint<{ id: string; value: string }[]>(
-            new URL(dataSrcEndpoint),
-            data,
-          )
-          .then((res) => {
-            if (res) setParsedOptions(res);
-            else setError(`Error loading radio options`);
-          })
-          .catch((err) => {
-            console.error(err);
-            setError('Error loading radio options');
-          })
-          .finally(() => setLoading(false));
-      }
-  }
-
-  const handleRefreshClick = (): void => {
-    fetchDynamicData();
-    setSelectedItem('');
-  }
-
-  return html`
-    <div class="${styles.radioGroup}">
-      <fieldset>
-        <${Label} title=${title} description=${description}
-        isRequired=${isRequired} labelTag=${isReadOnly && isChanged ? 'Changed' : ''} 
-        allowRefresh=${isDynamic && dataSrcEndpoint} 
-        handleRefreshClick=${handleRefreshClick}
-        //>
-        <div
-          role="group"
-          class="${styles.radioGroupWrap}"
-          aria-labelledby=${ariaLabel}
-        >
-          ${loading
-            ? html`<div style="margin: 20px 0;">
-                <${ThreeDotLoader} color="#999" />
-              </div>`
-            : html`
-                ${error
-                  ? html`<div style="margin-top: 20px">
-                      <${ErrorMessage}>${error}<//>
-                    </div>`
-                  : html`
-                      ${parsedOptions.map(
-                        (el) =>
-                          html`
-                            <${Radio}
-                              id=${el.id}
-                              value=${el.value}
-                              isChecked=${selectedItem === el.id}
-                              onChange=${handleChange}
-                              isDisabled=${isReadOnly}
-                              isReadOnly=${isReadOnly}
-                            ><//>
-                          `,
-                      )}
-                    `}
-              `}
-        </div>
-      </fieldset>
-      ${showStepValidation &&
-      !selectedItem &&
-      isRequired &&
-      html` <${ErrorMessage}>Please select an option</${ErrorMessage}>`}
-    </div>
-  `;
-};

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

@@ -1,81 +0,0 @@
-.radioGroup {
-  fieldset {
-    border: none;
-    padding: 0;
-  }
-  .radioGroupWrap {
-    margin-top: 14px;
-    width: fit-content;
-  }
-}
-
-.radio {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: 10px 0;
-  .button {
-    position: absolute;
-    width: 15px;
-    height: 15px;
-    left: 0;
-    display: inline-block;
-    border-radius: 9999px;
-    background: transparent;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  input[type='radio'] {
-    opacity: 0;
-    margin: 0;
-    height: 13px !important;
-  }
-  label {
-    display: flex;
-    margin-left: 15px;
-    align-items: center;
-    cursor: pointer;
-    &.disabled {
-      cursor: auto;
-    }
-  }
-  .text {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    margin: 2px 0;
-    color: #333333;
-  }
-  .description {
-    font-size: 12px;
-    line-height: 15px;
-    color: #999999;
-  }
-   &.authRadio {
-    .labelDiv {
-      width: calc(100% - 20px);
-        .textDiv {
-          width: 100%;
-          white-space: break-spaces;
-          word-break: break-word;
-          .text {
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 2px 0;
-          margin: 0px;
-        }
-      }
-    }
-    margin: 0;
-  }
-}
-
-.readonlyHint {
-  position: absolute;
-  width: 100%;
-  height: -webkit-fill-available;
-  z-index: 99;
-}

package/src/components/Search/index.ts

@@ -1,69 +0,0 @@
-import { html, Component } from 'htm/preact';
-import styles from './styles.module.scss';
-
-interface SearchState {
-  value: string;
-}
-
-interface SearchProps {
-  initialValue?: string;
-  placeholder: string;
-  resultCount: number;
-  onChange: (val: string) => void;
-  className?: string;
-  reset?: boolean; 
-}
-
-export class Search extends Component<SearchProps, SearchState> {
-  constructor(props: SearchProps) {
-    super(props);
-    this.state = {
-      value: this.props.initialValue || '',
-    };
-  }
-
-  componentDidUpdate(previousProps: Readonly<SearchProps>): void {
-    if (previousProps.reset !== this.props.reset) {
-      this.onClear();
-    }
-  };
-
-  onInput = (e: Event) => {
-    if (e.target instanceof HTMLInputElement) {
-      const { value } = e.target;
-      this.setState({ value });
-      this.props.onChange(value);
-    }
-  };
-
-  onClear = () => {
-    this.setState({ value: '' });
-    this.props.onChange('');
-  };
-
-  render() {
-    return html`
-      <div class="${styles.search} ${styles[this.props.className || '']} integry-container__search">
-        <div class="${styles.searchIcon} integry-container__search-count">
-          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
-            <path d="M14.7706 13.6638L11.148 10.0407C13.0421 7.59989 12.8712 4.06416 10.6303 1.82385C9.45395 0.647448 7.89024 0 6.2271 0C4.56335 0 2.99953 0.647997 1.82385 1.82385C0.647448 2.99965 0 4.56335 0 6.2271C0 7.89084 0.647996 9.45466 1.82385 10.6303C3.00025 11.8067 4.56396 12.4542 6.2271 12.4542C7.62663 12.4542 8.95411 11.9942 10.0413 11.1481L13.6638 14.7706C13.8168 14.9236 14.0167 14.9997 14.2172 14.9997C14.4172 14.9997 14.6177 14.9236 14.7706 14.7706C15.0765 14.4654 15.0765 13.9697 14.7706 13.6639L14.7706 13.6638ZM2.93043 9.52291C2.05038 8.64226 1.56482 7.47179 1.56482 6.22694C1.56482 4.98153 2.04978 3.81114 2.93043 2.93037C3.81049 2.04972 4.98156 1.56476 6.2264 1.56476C7.47124 1.56476 8.6422 2.04972 9.52297 2.93037C11.3409 4.74767 11.3409 7.705 9.52297 9.52276C8.64232 10.4034 7.47124 10.8884 6.2264 10.8884C4.98156 10.8884 3.8112 10.4034 2.93043 9.52276V9.52291Z" fill="#BDBDBD"/>
-          </svg>
-        </div>
-        <input
-          class="${styles.integrySearchInput}"
-          placeholder=${this.props.placeholder || 'Search...'}
-          value=${this.state.value}
-          oninput=${this.onInput}
-        />
-        ${this.state.value && html`
-          <div class="${styles.crossIcon}">
-            <svg onclick=${this.onClear} width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M12 4.69336L4 12.6934" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M4 4.69336L12 12.6934" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </div>
-        `}
-      </div>
-    `;
-  }
-}

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

@@ -1,149 +0,0 @@
-.search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  flex: 1 1 0%;
-  overflow: hidden;
-  border-width: 1px;
-  border-style: solid;
-  font-family: inherit;
-  // border: 1px solid #e2e0db;
-  border: 1px solid var(--Gray-6, #F2F2F2);
-  border-radius: 4px;
-  height: 40px;
-
-  .integrySearchInput {
-    font-family: inherit;
-    // margin: 0.25rem;
-    height: auto;
-    font-size: 14px;
-    line-height: 15px;
-    width: 100%;
-    flex: 1 1 0%;
-    background: transparent;
-    color: #333333;
-    outline: none;
-    border-style: none;
-    padding-right: 12px; // 0.75rem;
-    // padding-top: 12px; //0.5rem;
-    // padding-bottom: 12px; //0.5rem;
-    margin-left: 0px;
-    color: #333;  
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-
-    &::placeholder {
-      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;
-    }
-  }
-  .crossIcon {
-    display: flex;
-    align-items: center;
-    margin-right: 12px;
-    svg {
-      cursor: pointer;
-    }
-  }
-  &:focus-within {
-    border: 1px solid #b6b5b5;
-  }
-  &.search-marketplace {
-    width: 445px;
-    height: 40px;
-    margin-bottom: 24px;
-    border-radius: 8px;
-    input {
-      height: 38px;
-      margin: 0px;
-      padding: 0px;
-    }
-    @media (min-width: 320px) {
-      max-width: 353px;
-    }
-    @media (min-width: 875px) {
-      max-width: 445px;
-    }
-  }
-
-  .searchIcon {
-    font-family: inherit;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-left: 12px;
-    padding-right: 10px;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    color: #999;
-  }
-}
-
-.resultCount {
-  font-family: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 12px;
-  padding-right: 10px;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  color: #999;
-}
-
-.compact-search {
-  border-radius: 8px;
-  border: 1px solid var(--Gray-6, #F2F2F2);
-  background: #FFF;
-  padding: 0 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
-  // max-width: 316px;
-  width: calc(100% - 30px);
-  height: 40px;
-
-  .searchIcon {
-    padding: 0;
-  }
-
-  input {
-    color: var(--black-and-grey-title-and-desc, #333);
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    padding: 0;
-    margin: 0;
-
-    &::placeholder {
-      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;
-    }
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &:focus-within {
-    border: 1px solid var(--Gray-6, #F2F2F2);;
-  }
-}

package/src/components/TabBar/Tab.ts

@@ -1,33 +0,0 @@
-import { html } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-interface TabProps {
-  activeTab: string;
-  label: string;
-  onClick(label: string): void;
-  tabId: string;
-}
-
-const Tab = (props: TabProps) => {
-  const { label, activeTab, onClick, tabId } = props;
-
-  const onClickHandler = () => {
-    onClick(tabId);
-  };
-
-  return html`
-    <li
-      class=${`${styles.tab} ${
-        activeTab === tabId
-          ? `${styles.tabactive} integry-container__tabbed-nav__tab--active`
-          : ''
-      } integry-container__tabbed-nav__tab`}
-      onclick=${onClickHandler}
-    >
-      ${label}
-    </li>
-  `;
-};
-
-export { Tab, TabProps };

package/src/components/TabBar/index.ts

@@ -1,64 +0,0 @@
-import { html } from 'htm/preact';
-import { VNode } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
-
-import { Tab } from './Tab';
-
-import styles from './styles.module.scss';
-
-interface TabBarProps {
-  preSelectedTab?: string;
-  children: VNode<{ label: string; id: string }>[];
-  activatedTab: string;
-  setTabInStore: (tabId: string) => void;
-}
-
-const TabBar = (props: TabBarProps) => {
-  const { preSelectedTab, children, activatedTab, setTabInStore } = props;
-
-  if (!Array.isArray(children) || children.length < 2) {
-    throw new Error('Tab Bar must have at least two children');
-  }
-
-  // either select preselected if specified, or the first tab
-  const [activeTab, setActiveTab] = useState<string>(
-    preSelectedTab || children[0].props.id,
-  );
-
-  useEffect(() => {
-    if (activatedTab && activatedTab !== activeTab) setActiveTab(activatedTab);
-  }, [activatedTab]);
-
-  const onClickTabItem = (tabId: string) => {
-    setTabInStore(tabId);
-    setActiveTab(tabId);
-  };
-
-  return html`
-    <div>
-      <ol class="${styles.nav} integry-container__tabbed-nav">
-        ${children.map((child) => {
-          const { label, id } = child.props;
-          return html`
-            <${Tab}
-              activeTab=${activeTab}
-              key=${label}
-              label=${label}
-              onClick=${onClickTabItem}
-              tabId=${id}
-            >
-            <//>
-          `;
-        })}
-      </ol>
-      <div className="tab-content">
-        ${children.map((child) => {
-          if (child.props.id !== activeTab) return undefined;
-          return child.props.children;
-        })}
-      </div>
-    </div>
-  `;
-};
-
-export { TabBar, TabBarProps };

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

@@ -1,43 +0,0 @@
-.nav {
-  margin-bottom: 0px;
-  margin-top: 0px;
-  padding: 0px;
-  border-top-width: 0px;
-  border-right-width: 0px;
-  border-left-width: 0px;
-  border-bottom-width: 1px;
-  border-style: solid;
-  border-color: rgba(107, 114, 128, 0.25);
-}
-
-.tab {
-  display: inline-block;
-  cursor: pointer;
-  list-style-type: none;
-  border-bottom-width: 2px;
-  border-color: transparent;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-bottom: 0.25rem;
-  line-height: 2rem;
-  color: rgba(156, 163, 175, 1);
-  transition-property: background-color, border-color, color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  margin-bottom: -1px;
-  &:hover {
-    border-width: 0px;
-    border-bottom-width: 2px;
-    border-style: solid;
-    border-color: rgba(80, 156, 246, 1);
-  }
-}
-.tabactive {
-  border-width: 0px;
-  border-bottom-width: 2px;
-  border-style: solid;
-  border-color: rgba(80, 156, 246, 1);
-  color: rgba(55, 65, 81, 1);
-}

package/src/components/Tag/index.ts

@@ -1,29 +0,0 @@
-import { html } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-interface TagProps {
-  label: string;
-  type: 'info' | 'success' | 'fail' | 'grey',
-  className?: string;
-}
-
-/**
- * Tag component
- *
- */
-const Tag = (props: TagProps) => {
-  const {
-    label,
-    type = 'info',
-    className
-  } = props;
-
-  return html`
-    <span class="${`${styles.tag} ${styles[type]} ${styles[className || '']}`}">
-      ${label}
-    </span>
-  `;
-};
-
-export { Tag, TagProps };

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

@@ -1,57 +0,0 @@
-.tag {
-  box-sizing: border-box;
-  /* Auto layout */
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 10px;
-
-  width: fit-content;
-  height: 22px;
-  border-radius: 4px;
-
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 10px;
-  line-height: 12px;
-  text-align: center;
-
-  &.app-card-tag {
-    height: 20px;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 10px;
-    line-height: 12px;
-    padding: 4px 10px;
-  }
-
-  &.integration-card-tag {
-    height: 25px;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 15px;
-    padding: 5px 12px;
-  }
-  &.flow-instance {
-    height: 20px;
-  }
-  &.info {
-    background: #dceaff;
-    color: #0a6cff;
-  }
-  &.success {
-    background: #dff4c8;
-    color: #749d48;
-  }
-  &.fail {
-    background: #fbd6d0;
-    color: #f05c42;
-  }
-  &.grey {
-    background: #f2f2f2;
-    color: #999999;
-  }
-}