@integry/sdk 4.5.2 → 4.5.3

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

@@ -0,0 +1,197 @@
+.listboxGroupWrapper {
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    margin-bottom: 16px !important;
+  }
+}
+
+.listbox {
+  position: relative;
+  max-width: 285px;
+  user-select: none;
+  .customSelect {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    font-family: inherit;
+    letter-spacing: -0.197647px;
+    color: #999999;
+
+    &.open .customOptions {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+    .readonlyHint {
+      width: 100%;
+      height: 100%;
+      z-index: 99;
+      position: absolute;
+    }
+  }
+  .customSelectTrigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 35px;
+    padding: 0 10px;
+    justify-content: space-between;
+    cursor: pointer;
+    font-size: 14px;
+    font-family: inherit;
+    border: 1px solid #e2e0db;
+    border-radius: 4px;
+    span {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      height: 100%;
+      padding-right: 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.selected {
+        color: #333333;
+      }
+    }
+    &:focus {
+      outline: none;
+    }
+    &.error {
+      border-color: #f05c42;
+    }
+    &.searchable {
+      // cursor: text;
+    }
+    .arrow {
+      transform: rotate(0);
+      cursor: pointer;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      &.close {
+        transform: rotate(180deg);
+      }
+      &.readonly {
+        cursor: auto;
+      }
+    }
+    .searchInput {
+      border: 0;
+      outline: none;
+      width: 100%;
+      color: #333;
+      font-size: 12px;
+      font-family: inherit;
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      &::placeholder {
+        color: #999999;
+      }
+    }
+    &.readonly {
+      cursor: auto;
+    }
+  }
+  .customOptions {
+    position: absolute;
+    top: 100%;
+    left: 0px;
+    right: 0px;
+    z-index: 10;
+    margin-top: 10px;
+    display: block;
+    overflow: hidden;
+    background-color: #fff;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 20px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    pointer-events: none;
+    visibility: hidden;
+    max-height: 132px;
+    min-height: 100%;
+    overflow-y: auto;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e2e0db;
+    opacity: 0;
+    border-radius: 4px;
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      // background: #f1f1f1;
+      background: transparent;
+      border-radius: 10px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: #ededed;
+      border: 1px solid #e7e7e7;
+      border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgb(116, 116, 116);
+    }
+  }
+}
+
+.noResults {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.listboxItem {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  border-width: 0px;
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-color: #e2e0db;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 8px 10px;
+  svg {
+    position: absolute;
+    height: 100%;
+    width: 12px;
+    left: 16px;
+    top: 0;
+  }
+  &:last-child {
+    border: none;
+  }
+  &:hover {
+    color: #333;
+    background: #ececec;
+  }
+  &.selected {
+    color: #333;
+    font-weight: 500;
+    background: #ececec;
+  }
+  &.highlighted {
+    color: #333;
+    background: #ececec;
+  }
+}

package/src/components/Loader/index.ts

@@ -0,0 +1,25 @@
+import { html } from 'htm/preact';
+
+import styles from './styles.module.scss';
+
+const Loader = ({ fill = '#ADADAD', size='md' }) => html`
+  <svg
+    class=${styles.loader}
+    width="${size === 'sm' ? '12' : '15'}"
+    height="${size === 'sm' ? '12' : '15'}"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.13037 0.179352C7.57047 -0.168051 5.94039 -0.00810102 4.47777 0.635883C3.01515 1.27987 1.79647 2.37421 0.999409 3.75937C0.202348 5.14453 -0.131421 6.74808 0.0467641 8.33623C0.224949 9.92438 0.90577 11.4141 1.98997 12.5882C3.07417 13.7623 4.50506 14.5593 6.07402 14.8632C7.64298 15.167 9.26799 14.9618 10.7121 14.2773C12.1562 13.5929 13.344 12.4651 14.1022 11.0582C14.8604 9.65144 15.1494 8.03922 14.9271 6.45665L14.1844 6.56098C14.3845 7.9853 14.1243 9.43629 13.442 10.7024C12.7596 11.9685 11.6906 12.9836 10.3909 13.5996C9.09119 14.2156 7.62869 14.4003 6.21662 14.1269C4.80455 13.8534 3.51675 13.136 2.54097 12.0794C1.56519 11.0227 0.952454 9.68194 0.792088 8.2526C0.631721 6.82327 0.932113 5.38008 1.64947 4.13343C2.36682 2.88679 3.46363 1.90188 4.77999 1.32229C6.09635 0.742709 7.56343 0.598754 8.96733 0.911417L9.13037 0.179352Z"
+      fill="#E0E0E0"
+    />
+    <path
+      d="M14.93 6.47755C14.7207 4.95709 14.0501 3.53742 13.0085 2.41017C11.9669 1.28292 10.6046 0.50235 9.10537 0.173829L8.94483 0.906446C10.2941 1.20212 11.5202 1.90462 12.4577 2.91915C13.3951 3.93368 13.9987 5.21138 14.187 6.57979L14.93 6.47755Z"
+      fill="${fill}"
+    />
+  </svg>
+`;
+
+export { Loader };

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

@@ -0,0 +1,16 @@
+.loader {
+  animation-name: ckw;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  transform-origin: 50% 50%;
+}
+
+@keyframes ckw {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/MediaGallery/MediaGalleryModal.ts

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-use-before-define */
+import { html } from 'htm/preact';
+import { useState } from 'preact/hooks';
+import { MediaObject } from '@/interfaces';
+import { Modal } from '../Modal';
+import styles from './styles.module.scss';
+
+
+interface MediaGalleryModalProps {
+    media: MediaObject[];
+    showGallery?: boolean;
+    onClose: () => void;
+    defaultActiveIndex?: number;
+}
+
+const MediaGalleryModal = (props: MediaGalleryModalProps) => {
+    const {
+        media,
+        showGallery = false,
+        onClose,
+        defaultActiveIndex = 0,
+    } = props;
+    const [activeMediaIndex, setActiveMediaIndex] = useState(defaultActiveIndex);
+
+    const currentMedia = media[activeMediaIndex];
+ 
+    const handleCloseGallery = (): void => {
+        if (onClose) {
+            onClose();
+        }
+    }
+
+    const prevMedia = (): void => {
+        setActiveMediaIndex((prevIndex) => {
+            if (prevIndex === 0) {
+                return media.length - 1;
+            }
+            return prevIndex - 1;
+        })
+    }
+
+    const nextMedia = (): void => {
+        setActiveMediaIndex((prevIndex) => {
+            if (prevIndex === media.length - 1) {
+                return 0;
+            }
+            return prevIndex + 1;
+        })
+    }
+
+    return html`
+        <${Modal}
+            isOpen=${showGallery}
+            onClose=${handleCloseGallery}
+            className="media-gallery-modal"
+        >
+            <div class="${styles.modalSetup} ${'integry-container__media-gallery-modal'}">
+            <div class="${styles.modalContentWrap}">
+                <div class="${styles.mediaGalleryModal}"> 
+                    <div class="${styles.galleryContent}">
+                        <a class="${styles.prev}" onclick=${prevMedia}>
+                        <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5.78906 11.5176L0.789062 6.51758L5.78906 1.51758" stroke="#4250F0" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        </a>                     
+                            <img src=${currentMedia.url} class="${styles.mediaImage}" />
+                        <a class="${styles.next}" onclick=${nextMedia}>
+                            <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M1.0293 1.51758L6.0293 6.51758L1.0293 11.5176" stroke="#4250F0" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </a>
+                    </div>
+                    <div class="${styles.mediaCount}">${activeMediaIndex + 1} / ${media.length}</div>
+                </div>
+            </div>
+            </div>
+        <//>
+  `;
+};
+
+export default MediaGalleryModal;

package/src/components/MediaGallery/MediaSlider.ts

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-use-before-define */
+import { html } from 'htm/preact';
+import { useRef, useState } from 'preact/hooks';
+import { MediaObject } from '@/interfaces';
+import styles from './styles.module.scss';
+
+
+interface MediaSliderProps {
+    media: MediaObject[];
+}
+
+const MediaSlider = (props: MediaSliderProps) => {
+    const {
+        media,
+    } = props;
+    const [activeMediaIndex, setActiveMediaIndex] = useState(0);
+    const shuffledMediaRef = useRef(media);
+
+    shuffledMediaRef.current = media.slice(activeMediaIndex, activeMediaIndex + 2);
+
+    const prevMedia = (): void => {
+        if (activeMediaIndex > 0) {
+            setActiveMediaIndex((prevIndex) => {
+                if (prevIndex === 0) {
+                    return media.length - 1;
+                }
+                return prevIndex - 1;
+            })
+        }
+    }
+
+    const nextMedia = (): void => {
+        if (activeMediaIndex < media.length - 1) {
+            setActiveMediaIndex((prevIndex) => {
+                if (prevIndex === media.length - 1) {
+                    return 0;
+                }
+                return prevIndex + 1;
+            })
+        }
+    }
+
+    return html`
+    <div class="${styles.mediaSliderGallery}">
+        <a class="${`${styles.prev}`}" onclick=${prevMedia}>
+            <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.78906 11.5176L0.789062 6.51758L5.78906 1.51758" stroke="${activeMediaIndex < 1 ? '#BDBDBD' : '#4250F0'}" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </a>                     
+            ${shuffledMediaRef.current && shuffledMediaRef.current.length > 0 && html `
+            <div class="${styles.mediaDisplayWrap}">
+                ${shuffledMediaRef.current.map((mediaItem, index) => {
+                    const { url } = mediaItem;
+                    return (
+                        html`
+                            <img
+                            key=${`m_${mediaItem.id}`}
+                            src=${url} 
+                            class="${styles.mediaImage}" 
+                            />
+                        
+                        `
+                    )
+                })}
+            </div>`}
+        <a class="${`${styles.next}`}" onclick=${nextMedia}>
+            <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.0293 1.51758L6.0293 6.51758L1.0293 11.5176" stroke="${activeMediaIndex >= media.length - 1 ? '#BDBDBD' : '#4250F0'}" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </a>
+    </div>
+  `;
+};
+
+export default MediaSlider;

package/src/components/MediaGallery/index.ts

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-use-before-define */
+import { html } from 'htm/preact';
+import { useRef, useState } from 'preact/hooks';
+import { MediaObject, MediaType } from '@/interfaces';
+import MediaGalleryModal from './MediaGalleryModal';
+import MediaSlider from './MediaSlider';
+import styles from './styles.module.scss';
+
+
+interface MediaGalleryProps {
+    media: MediaObject[];
+}
+
+const MediaGallery = (props: MediaGalleryProps) => {
+  const {
+      media,
+    } = props;
+    const [openGallery, setOpenGallery] = useState(false);
+    const activeMediaIndexRef = useRef(0);
+
+    const handleMediaClick = (mediaIndex: number): void => {
+        activeMediaIndexRef.current = mediaIndex;
+        setOpenGallery(true);
+    }
+ 
+    return html`
+        <div class="${styles.mediaGallery}"> 
+            ${media.length >= 1 && html`
+                <img onclick=${() => {
+                    handleMediaClick(0);
+                }} 
+                src=${media[0].url} 
+                class="${styles.mediaImage}" />
+            `}
+            ${media.length > 1 && html `
+            <div class="${styles.layout2}">
+                ${media.map((mediaItem, index) => {
+                if (index > 0 && index <=2 ) {
+                    const { url, type } = mediaItem;
+                    if (type === MediaType.IMAGE) {
+                        return (
+                            html`${
+                                media.length > 3 && index === 2 ? html`
+                                <div class="${styles.mediaImageWrap}" onclick=${
+                                        () => {
+                                            handleMediaClick(index);
+                                        }
+                                    } >
+                                    <img src=${url} 
+                                    class="${styles.mediaImage}" 
+                                    />
+                                    <span class="${styles.moreImages}">+ ${media.length - 3} more</span>
+                                </div>
+                             ` : html`
+                                <img onclick=${
+                                () => {
+                                        handleMediaClick(index);
+                                    }
+                                    } 
+                                src=${url} 
+                                class="${styles.mediaImage}" />
+                             `   
+                            }
+                            `
+                        )
+                    }
+                    return (
+                        html`
+                        `
+                    )
+                }
+                return html``
+                })}
+            </div>`}
+            <div class="${styles.mediaSlider}">
+                <${MediaSlider} media=${media} />     
+            </div>
+        </div>
+        ${openGallery && html `
+        <${MediaGalleryModal} 
+            media=${media} 
+            showGallery=${openGallery} 
+            onClose=${() => {
+                setOpenGallery(false);
+            }} 
+            defaultActiveIndex=${activeMediaIndexRef.current}
+        /> `}
+  `;
+};
+
+export default MediaGallery;

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

@@ -0,0 +1,156 @@
+.mediaGallery {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 16px;
+    .mediaImage {
+        width: 288px;
+        height: 162px;
+        border-radius: 6px;
+        object-fit: cover;
+        cursor: pointer;
+    }
+    .layout2 {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: 16px;
+        .mediaImage {
+            width: 121px;
+            height: 73px;
+            border-radius: 6px;
+        }
+        .mediaImageWrap {
+            width: min-content;
+            position: relative;
+            opacity: 0.7;
+            cursor: pointer;
+            .moreImages {
+                background: #FFFFFF;
+                border-radius: 8px;
+                padding: 5px 12px;
+                font-style: normal;
+                font-weight: 500;
+                font-size: 12px;
+                line-height: 15px;
+                color: #333333;
+                position: absolute;
+                left: 23px;
+                bottom: 14px;
+                cursor: pointer;
+            }
+        }
+    }
+    .mediaSlider {
+        display: none;
+        max-width: 400px;
+    }
+    @media (min-width: 320px ) and (max-width: 856px)  {
+        .layout2 {
+            display: none;
+        }
+        .mediaImage {
+            display: none;
+        }
+        .mediaSlider {
+            display: block;
+        }
+    }
+    @media (min-width: 857px) {
+        .mediaSlider {
+            display: none;
+        }
+        .mediaImage {
+            display: block;
+        }
+    }
+}
+
+.mediaGalleryModal {
+    .galleryContent {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        .prev {
+            cursor: pointer;
+            svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+        .next {
+            cursor: pointer;
+            svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+    .mediaCount {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 15px;
+        color: #333333;
+        margin-top: 16px;
+        display: flex;
+        justify-content: center;
+    }
+    .mediaImage {
+        height: calc(100vh - 300px);
+        object-fit: contain;
+        width: 522px;
+        margin-top: 34px;
+        @media (min-width: 640px) {
+          width: 200px;
+        }
+        @media (min-width: 857px) {
+          width: 422px;
+          max-width: 422px;
+        }
+        @media (min-width: 1237px) {
+          width: 522px;
+          max-width: 522px;
+        }
+        @media (min-height: 1152px) {
+          max-height: 600px;
+          height: 600px;
+        }
+    }
+}
+
+.mediaSliderGallery {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    .mediaDisplayWrap {
+        display: flex;
+        gap: 24px;
+        overflow: hidden;
+    }
+    .prev {
+        cursor: pointer;
+        svg {
+            width: 20px;
+            height: 20px;
+        }
+    }
+    .next {
+        cursor: pointer;
+        svg {
+            width: 20px;
+            height: 20px;
+        }
+    }
+    .mediaImage {
+        width: 288px;
+        height: 162px;
+        border-radius: 6px;
+        object-fit: cover;
+        cursor: default;
+        display: block;
+    }
+}