@integry/sdk 4.5.2 → 4.5.4

package/src/components/RadioGroup/index.ts

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

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

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

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

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

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

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

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

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