@opexa/portal-components 0.0.109 → 0.0.111

package/dist/components/KYC/CaptureIdDocument.js

@@ -1,11 +1,205 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { Camera01Icon } from '../../icons/Camera01Icon.js';
+import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
+import { dataURLtoBlob } from '../../utils/dataUrlToBlob.js';
+import { resizeFile } from '../../utils/resizeImageSize.js';
 import { useKYCContext } from './KYCContext.js';
 export function CaptureIdDocument() {
     const kyc = useKYCContext();
-    return (_jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => kyc.setCapturing(null), children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", { className: "hidden lg:block" }), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8" }), _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", disabled: true, children: ["Capture", _jsx(Camera01Icon, { className: "size-5" })] })] }));
+    const { mutate, isPending } = useUploadImageFileMutation();
+    const [videoStream, setVideoStream] = useState(null);
+    const [cameraError, setCameraError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [captureInProgress, setCaptureInProgress] = useState(false);
+    const [proccessImageCanvas, setProccessImageCanvas] = useState(null);
+    const videoElement = useRef(null);
+    const containerRef = useRef(null);
+    function stopCamera() {
+        if (videoStream) {
+            videoStream.getTracks().forEach((track) => track.stop());
+            setVideoStream(null);
+        }
+    }
+    useEffect(() => {
+        return () => {
+            stopCamera();
+        };
+    }, [videoStream]);
+    async function startCamera() {
+        try {
+            setIsLoading(true);
+            setCameraError(null);
+            setCaptureInProgress(true);
+            console.log('Starting camera...');
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode: 'environment',
+                    aspectRatio: 16 / 9,
+                    width: { ideal: 1920, max: 1920 },
+                    height: { ideal: 1080, max: 1080 },
+                    frameRate: {
+                        ideal: 30,
+                        max: 60,
+                    },
+                },
+                audio: false,
+            });
+            // Set the stream directly to the video element
+            if (videoElement.current) {
+                videoElement.current.srcObject = stream;
+                videoElement.current.onloadedmetadata = () => {
+                    console.log('Video metadata loaded, starting playback...');
+                    videoElement.current
+                        ?.play()
+                        .then(() => {
+                        setVideoStream(stream);
+                        setIsLoading(false);
+                    })
+                        .catch(() => {
+                        setCameraError('Failed to start camera stream. Please try again.');
+                        setIsLoading(false);
+                        // Stop the stream if playback fails
+                        stream.getTracks().forEach((track) => track.stop());
+                    });
+                };
+                videoElement.current.onerror = (err) => {
+                    console.error('Video element error:', err);
+                    setCameraError('Video playback error. Please try again.');
+                    setIsLoading(false);
+                    stream.getTracks().forEach((track) => track.stop());
+                };
+            }
+            else {
+                console.error('Video element not available');
+                setCameraError('Camera initialization failed. Please try again.');
+                setCaptureInProgress(false);
+                setIsLoading(false);
+                stream.getTracks().forEach((track) => track.stop());
+            }
+        }
+        catch (error) {
+            setIsLoading(false);
+            if (error instanceof DOMException) {
+                console.error('Error accessing camera:', error.message);
+                setCameraError(error.message);
+            }
+            else {
+                console.error('Unknown error accessing camera:', error);
+                setCameraError('An unknown error occurred. Please check permissions and try again.');
+            }
+            setCaptureInProgress(false);
+        }
+    }
+    function captureAndProcessImage() {
+        if (!videoElement.current || !videoStream) {
+            console.error('Video element or stream not available for capture');
+            return;
+        }
+        try {
+            const canvas = document.createElement('canvas');
+            const parentDiv = document.getElementById('parent');
+            canvas.width = parentDiv?.clientWidth || videoElement.current.width;
+            canvas.height = parentDiv?.clientHeight || videoElement.current.height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                console.error('Could not get 2D context for canvas');
+                setCameraError('Failed to process image. Please try again.');
+                setCaptureInProgress(false);
+                return;
+            }
+            ctx.drawImage(videoElement.current, 0, 0, canvas.width, canvas.height);
+            const imageSrc = canvas.toDataURL('image/png', 1.0);
+            setSelectedImage({ src: imageSrc });
+            setCaptureInProgress(false);
+            stopCamera();
+            const newImg = document.createElement('img');
+            newImg.src = imageSrc;
+            //@ts-expect-error jscanify is not typed
+            const scanner = new jscanify();
+            newImg.onload = () => {
+                try {
+                    if (containerRef.current) {
+                        // containerRef.current.innerHTML = '';
+                        const paperWidth = parentDiv?.clientWidth || videoElement.current?.videoWidth;
+                        const paperHeight = parentDiv?.clientHeight || videoElement.current?.videoHeight;
+                        //@ts-expect-error jscanify is not typed
+                        const contour = scanner.findPaperContour(cv.imread(newImg));
+                        const cornerPoints = scanner.getCornerPoints(contour);
+                        const resultCanvas = scanner.extractPaper(newImg, paperWidth, paperHeight, cornerPoints);
+                        newImg.className =
+                            'absolute inset-0 m-auto w-full h-auto md:max-h-[333px] md:max-w-[643px] aspect-video rounded-lg object-contain';
+                        setProccessImageCanvas(resultCanvas);
+                        containerRef.current.appendChild(resultCanvas);
+                        setCaptureInProgress(false);
+                        setSelectedImage({ src: resultCanvas.toDataURL('image/png') });
+                    }
+                }
+                catch (error) {
+                    console.error('Error processing image:', error);
+                    setCameraError('Failed to process image. Please try again.');
+                }
+            };
+            newImg.onerror = () => {
+                console.error('Error loading image');
+                setCameraError('Failed to load image. Please try again.');
+            };
+        }
+        catch (error) {
+            console.error('Error capturing image:', error);
+            setCameraError('Failed to capture image. Please try again.');
+            setCaptureInProgress(false);
+        }
+    }
+    async function uploadPhoto() {
+        if (!proccessImageCanvas) {
+            console.error('Failed to process the image. Please try again.');
+            return;
+        }
+        const blob = proccessImageCanvas.toDataURL('image/png', 1.0);
+        const processedBlob = dataURLtoBlob(blob);
+        const img = new File([processedBlob], 'frontImage', { type: 'image/jpeg' });
+        const resizedImage = (await resizeFile(img));
+        if (resizedImage) {
+            await mutate({
+                file: resizedImage,
+            }, {
+                onSuccess: (data) => {
+                    kyc.setFrontImageId(data);
+                    kyc.setCapturing(null);
+                },
+            });
+        }
+    }
+    function retakePhoto() {
+        setSelectedImage(null);
+        setCaptureInProgress(true);
+        setCameraError(null);
+        if (containerRef.current) {
+            const canvas = containerRef.current.querySelector('canvas');
+            if (canvas) {
+                canvas.width = canvas.width;
+            }
+            containerRef.current.innerHTML = '';
+        }
+        if (videoElement.current) {
+            videoElement.current.play();
+        }
+        startCamera();
+    }
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => {
+                        stopCamera();
+                        kyc.setCapturing(null);
+                    }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", { className: "hidden lg:block" }), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: cameraError ? (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-red-500 mb-2 text-sm", children: "Camera Error" }), _jsx("p", { className: "text-gray-400 text-xs", children: cameraError })] }) })) : captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoElement, autoPlay: true, muted: true, playsInline: true, className: "relative h-[60vh] w-full rounded-lg object-cover md:aspect-video md:max-h-[333px]", width: "100%", height: "100%" }), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-50", children: [_jsx("div", { className: twMerge('absolute inset-0 w-full bg-black/60 backdrop-blur-sm [clip-path:polygon(0%_0%,0%_100%,calc(50%-158px)_100%,calc(50%-158px)_calc(50%-100px),calc(50%+158px)_calc(50%-100px),calc(50%+158px)_calc(50%+100px),calc(50%-158px)_calc(50%+100px),calc(50%-158px)_100%,100%_100%,100%_0%)] md:[clip-path:polygon(0%_0%,0%_100%,calc(50%-225px)_100%,calc(50%-225px)_calc(50%-142px),calc(50%+225px)_calc(50%-142px),calc(50%+225px)_calc(50%+142px),calc(50%-225px)_calc(50%+142px),calc(50%-225px)_100%,100%_100%,100%_0%)]') }), _jsx("div", { className: "absolute inset-0 z-[60] mx-auto flex items-center justify-center", children: _jsx("div", { className: "relative aspect-[1011/638] h-[200px] md:h-[295px] md:w-[450px]", children: _jsx("div", { className: "h-full w-full rounded-lg border-4 border-dashed border-[#B54708]" }) }) })] })] })) : (_jsx("div", { ref: containerRef, className: "relative grid h-full w-full place-items-center rounded-lg object-contain md:max-h-[333px]" })) }), cameraError ? (_jsx("div", { className: "mt-4 text-center", children: _jsx(Button, { className: "mx-auto px-xl lg:w-fit", onClick: () => {
+                            setCameraError(null);
+                            startCamera();
+                        }, children: "Try Again" }) })) : captureInProgress ? (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: captureAndProcessImage, children: ["Capture Image", _jsx(Camera01Icon, { className: "size-5" })] })) : selectedImage && selectedImage.src ? (_jsxs("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "lg:w-fit", type: "button", onClick: retakePhoto, children: ["Retake Photo ", _jsx(Camera01Icon, { className: "ml-1" })] }), _jsxs(Button, { className: "lg:w-fit", type: "button", onClick: uploadPhoto, disabled: isPending, children: ["Use Photo ", _jsx(CheckCircleIcon, { className: "ml-1" })] })] })) : (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: startCamera, disabled: isLoading || !!videoStream, children: [isLoading ? 'Starting Camera...' : 'Start Camera', _jsx(Camera01Icon, { className: "size-5" })] }))] }) }));
 }

package/dist/components/KYC/DisplayImage.d.ts

@@ -0,0 +1,2 @@
+declare function DisplayImage(): import("react/jsx-runtime").JSX.Element;
+export default DisplayImage;

package/dist/components/KYC/DisplayImage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useFileQuery } from '../../client/hooks/useFileQuery.js';
+import { useKYCContext } from './KYCContext.js';
+function DisplayImage() {
+    const kyc = useKYCContext();
+    const { data } = useFileQuery(kyc.idFrontImageId ?? '');
+    return (_jsx("div", { className: "border-border-primary bg-bg-primary min-h-[11.25rem]", children: data?.url && (_jsx(Image, { src: data.url, alt: "Uploaded", className: "w-full object-contain", width: 500, height: 500 })) }));
+}
+export default DisplayImage;

package/dist/components/KYC/IdentityVerification.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { HelpCircleIcon } from '../../icons/HelpCircleIcon.js';
@@ -7,6 +7,7 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { Portal } from '../../ui/Portal/index.js';
+import DisplayImage from './DisplayImage.js';
 import { useKYCContext } from './KYCContext.js';
 export function IdentityVerification() {
     const kyc = useKYCContext();
@@ -24,9 +25,9 @@ export function IdentityVerification() {
 }
 function UploadIdDocument() {
     const kyc = useKYCContext();
-    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg font-semibold", children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
+    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [kyc.idFrontImageId ? (_jsx(DisplayImage, {})) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg font-semibold", children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
                     kyc.setCapturing('ID_DOCUMENT');
-                }, children: "Take a photo" })] }));
+                }, children: kyc.idFrontImageId ? 'Rekate Photo' : 'Take a Photo' })] }));
 }
 function UploadSelfie() {
     const kyc = useKYCContext();

package/dist/components/KYC/useKYC.d.ts

@@ -17,6 +17,8 @@ export interface UseKYCReturn {
     setCapturing: (capturing: CaptureSubject | null) => void;
     subscribe: (subscriber: Subscriber) => UnsubscribeFn;
     triggerEvent: (detail: EventDetail) => void;
+    idFrontImageId: string | null;
+    setFrontImageId: (id: string | null) => void;
 }
 export declare function useKYC(): UseKYCReturn;
 export {};

package/dist/components/KYC/useKYC.js

@@ -2,6 +2,7 @@ import { useRef, useState } from 'react';
 export function useKYC() {
     const [step, setStep] = useState(1);
     const [done, setDone] = useState(false);
+    const [idFrontImageId, setFrontImageId] = useState(null);
     const [capturing, setCapturing] = useState(null);
     const subscribers = useRef([]);
     const subscribe = (subscriber) => {
@@ -22,6 +23,8 @@ export function useKYC() {
         setDone,
         capturing,
         setCapturing,
+        idFrontImageId,
+        setFrontImageId,
         subscribe,
         triggerEvent,
     };

package/dist/components/News/News.js

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { Prose } from '../../ui/Prose/index.js';
 export function News(props) {
-    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/news', className: "text-button-secondary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all News"] }), _jsx(Image, { src: props.news.image, alt: "", width: 356, height: 244, className: "mt-3xl block h-auto w-full rounded-xl lg:mt-6" }), _jsx("p", { className: "text-brand-400 mt-xl text-sm font-semibold lg:mt-6", children: props.news.category }), _jsx("h2", { className: "mt-xl text-2xl font-semibold lg:mt-6", children: props.news.title }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: {
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/news', className: "text-button-secondary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all News"] }), _jsx(Image, { src: props.news.image, alt: "", width: 1024, height: 600, className: "mt-3xl block h-auto w-full rounded-xl lg:mt-6" }), _jsx("p", { className: "text-brand-400 mt-xl text-sm font-semibold lg:mt-6", children: props.news.category }), _jsx("h2", { className: "mt-xl text-2xl font-semibold lg:mt-6", children: props.news.title }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: {
                     __html: props.news.content,
                 } })] }));
 }

package/dist/components/NewsFeed/NewsFeed.d.ts

@@ -1,18 +1,4 @@
-import type { CSSProperties } from 'react';
-import type { News } from '../../types';
-export interface NewsFeedProps {
-    newsFeed: News[];
-    /** @default 'News' */
-    heading?: string;
-    /**
-     * @default '/news'
-     * @example
-     * ```ts
-     * '/custom-path' // '/custom-path/123'
-     * ```
-     */
-    viewDetailsUrl?: string;
-    className?: string;
-    style?: CSSProperties;
-}
-export declare function NewsFeed(props: NewsFeedProps): import("react/jsx-runtime").JSX.Element;
+import { type NewsFeedCarouselProps } from './NewsFeedCarousel';
+import { type NewsFeedListProps } from './NewsFeedList';
+export type NewsFeedProps = NewsFeedListProps | NewsFeedCarouselProps;
+export declare function NewsFeed(props: NewsFeedProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/NewsFeed/NewsFeed.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import Link from 'next/link';
-import { Button } from '../../ui/Button/index.js';
-export function NewsFeed(props) {
-    const heading = props.heading ?? 'News';
-    const viewDetailsUrl = props.viewDetailsUrl ?? '/news';
-    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), _jsx("div", { className: "mt-lg grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: props.newsFeed.map((news) => (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 356, height: 244, className: "block h-auto w-full" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
-                                                __html: news.content,
-                                            } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, children: "Read More" }) })] })] }, news.id))) })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NewsFeedCarousel, } from './NewsFeedCarousel.js';
+import { NewsFeedList } from './NewsFeedList.js';
+export async function NewsFeed(props) {
+    if (props.layout === 'list') {
+        return _jsx(NewsFeedList, { ...props });
+    }
+    else {
+        return _jsx(NewsFeedCarousel, { ...props });
+    }
 }

package/dist/components/NewsFeed/NewsFeedCarousel.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties } from 'react';
+import type { News } from '../../types';
+export interface NewsFeedCarouselProps {
+    layout: 'carousel';
+    newsFeed: News[];
+    /** @default 'News' */
+    heading?: string;
+    /** @default '/news' */
+    viewAllUrl?: string;
+    /**
+     * @default '/news'
+     * @example
+     * ```ts
+     * '/custom-path' // '/custom-path/123'
+     * ```
+     */
+    viewDetailsUrl?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function NewsFeedCarousel(props: NewsFeedCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NewsFeed/NewsFeedCarousel.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { Tv03Icon } from '../../icons/Tv03Icon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Empty } from '../shared/Empty.js';
+export function NewsFeedCarousel(props) {
+    const empty = props.newsFeed.length <= 0;
+    const heading = props.heading ?? 'News';
+    const viewAllUrl = props.viewAllUrl ?? '/news';
+    const viewDetailsUrl = props.viewDetailsUrl ?? '/news';
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                slidesToScroll: 3,
+            },
+        },
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), empty && (_jsx(Empty, { icon: Tv03Icon, title: "No News", message: "No news is currently available.", className: "mt-8" })), !empty && (_jsx(_Fragment, { children: _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: props.newsFeed.map((news) => (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 356, height: 244, className: "block h-auto w-full" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
+                                                        __html: news.content,
+                                                    } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, children: "Read More" }) })] })] }, news.id))) }) }) }))] }));
+}

package/dist/components/NewsFeed/NewsFeedList.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'react';
+import type { News } from '../../types';
+export interface NewsFeedListProps {
+    layout: 'list';
+    newsFeed: News[];
+    /** @default 'News' */
+    heading?: string;
+    /**
+     * @default '/news'
+     * @example
+     * ```ts
+     * '/custom-path' // '/custom-path/123'
+     * ```
+     */
+    viewDetailsUrl?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function NewsFeedList(props: NewsFeedListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NewsFeed/NewsFeedList.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { Tv03Icon } from '../../icons/Tv03Icon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Empty } from '../shared/Empty.js';
+export function NewsFeedList(props) {
+    const empty = props.newsFeed.length <= 0;
+    const heading = props.heading ?? 'News';
+    const viewDetailsUrl = props.viewDetailsUrl ?? '/news';
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), empty && (_jsx(Empty, { icon: Tv03Icon, title: "No News", message: "No news is currently available.", className: "mt-8" })), !empty && (_jsx("div", { className: "mt-lg grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: props.newsFeed.map((news) => (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 356, height: 244, className: "block h-auto w-full" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
+                                                __html: news.content,
+                                            } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, children: "Read More" }) })] })] }, news.id))) }))] }));
+}

package/dist/icons/Tv03Icon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function Tv03Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/Tv03Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Tv03Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M17 3L12 7L7 3M6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V11.8C22 10.1198 22 9.27976 21.673 8.63803C21.3854 8.07354 20.9265 7.6146 20.362 7.32698C19.7202 7 18.8802 7 17.2 7H6.8C5.11984 7 4.27976 7 3.63803 7.32698C3.07354 7.6146 2.6146 8.07354 2.32698 8.63803C2 9.27976 2 10.1198 2 11.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z" }) }));
+}

package/dist/utils/dataUrlToBlob.d.ts

@@ -0,0 +1 @@
+export declare function dataURLtoBlob(dataURL: string): Blob;

package/dist/utils/dataUrlToBlob.js

@@ -0,0 +1,11 @@
+export function dataURLtoBlob(dataURL) {
+    const parts = dataURL.split(';base64,');
+    const contentType = parts[0].split(':')[1];
+    const raw = window.atob(parts[1]);
+    const rawLength = raw.length;
+    const uInt8Array = new Uint8Array(rawLength);
+    for (let i = 0; i < rawLength; ++i) {
+        uInt8Array[i] = raw.charCodeAt(i);
+    }
+    return new Blob([uInt8Array], { type: contentType });
+}

package/dist/utils/resizeImageSize.d.ts

@@ -0,0 +1 @@
+export declare const resizeFile: (file: File) => Promise<unknown>;

package/dist/utils/resizeImageSize.js

@@ -0,0 +1,6 @@
+import Resizer from 'react-image-file-resizer';
+export const resizeFile = (file) => new Promise((resolve) => {
+    Resizer.imageFileResizer(file, 300, 300, 'jpeg', 100, 0, (uri) => {
+        resolve(uri);
+    }, 'file');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.109",
+  "version": "0.0.111",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",
@@ -86,6 +86,7 @@
     "embla-carousel-react": "^8.6.0",
     "is-mobile": "^5.0.0",
     "lodash-es": "^4.17.21",
+    "react-image-file-resizer": "^0.4.8",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0",
     "tailwind-zag": "^1.0.2",