@ludo.ninja/components 2.3.4 → 2.3.6

package/build/modules/gallery/ui/chooseGalleryItems/index.js

@@ -1,160 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const useFetchMyFavorites_1 = require("../../../../api/server-galleries/queries/useFetchMyFavorites");
-const useFetchMyGalleries_1 = require("../../../../api/server-galleries/queries/useFetchMyGalleries");
-const PlaceholderItemsGallery_1 = require("../PlaceholderItemsGallery");
-const chooseGalleryItem_1 = __importDefault(require("./chooseGalleryItem"));
-const ui_1 = require("../../../../store/ui");
-const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
-const colors_1 = require("../../../../styles/colors");
-const typography_1 = require("../../../../styles/typography");
-const MainButton_1 = __importDefault(require("../../../../system/Buttons/MainButton"));
-const CardsHolderLoader_1 = __importDefault(require("../../../../system/CardsHolderWithSkeleton/CardsHolderLoader"));
-const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const react_1 = require("react");
-const react_virtuoso_1 = require("react-virtuoso");
-const styled_components_1 = __importDefault(require("styled-components"));
-// Styles
-const StyledChooseGalleryItems = styled_components_1.default.div `
-  min-height: calc(460px - 24px);
-  //position: relative;
-
-  @media (min-width: 1200px) {
-    min-width: 344px;
-  }
-
-  .head {
-    margin-bottom: 20px;
-
-    .tittle {
-      ${typography_1.FH3};
-      color: ${colors_1.BlackColor};
-      margin: 0;
-    }
-  }
-
-  .content {
-    height: 234px;
-    overflow-x: auto;
-    margin-bottom: 55px;
-
-    [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {
-      padding-top: 4px;
-    }
-  }
-
-  .favoriteBtn {
-    button {
-      width: 100%;
-    }
-  }
-
-  .btns {
-    margin-top: 16px;
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-
-    button {
-      width: 100%;
-    }
-
-    //button:not(:last-child) {
-    // margin-right: 16px;
-    //}
-  }
-
-  @media (max-width: 767px) {
-    .content {
-      width: auto;
-      margin-bottom: 32px;
-    }
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    min-height: calc(${(0, _4k_1.adaptiveValueCalc)(460)} - ${(0, _4k_1.adaptiveValueCalc)(24)});
-    min-width: ${(0, _4k_1.adaptiveValueCalc)(344)};
-
-    .head {
-      margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(20)};
-    }
-
-    .content {
-      height: ${(0, _4k_1.adaptiveValueCalc)(234)};
-      margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(55)};
-
-      [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {
-        padding-top ${(0, _4k_1.adaptiveValueCalc)(4)};
-      }
-    }
-
-    .btns {
-      margin-top: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      gap: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    }
-  }
-`;
-const GalleryItems = ({ galleryItems, loadMore, isNextLoading, isAdded, titleBtn, title, currentMyGalleryId, setAddGallery, addMethod, ids, error, isLoading, }) => {
-    const { closeModalSidebar, openAlert, closeModalSidebarPortal } = (0, ui_1.useUiStore)((state) => ({
-        openAlert: state.openAlert,
-        closeModalSidebarPortal: state.closeModalSidebarPortal,
-        closeModalSidebar: state.closeModalSidebar,
-    }));
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (isAdded) {
-            setSelectedItem(null);
-            openAlert({
-                type: type_1.alertVariants.success,
-                caption: "NFT successfully added!",
-                text: "",
-            });
-        }
-    }, [isAdded]);
-    (0, react_1.useEffect)(() => {
-        if (error) {
-            setSelectedItem(null);
-            openAlert({
-                type: type_1.alertVariants.error,
-                caption: error.message,
-                text: "",
-            });
-        }
-    }, [error]);
-    const handleIsSelected = (newGallery) => {
-        setSelectedItem(newGallery);
-    };
-    const renderItems = galleryItems
-        ?.filter((gallery) => gallery.galleryType !== "likelist" && gallery.galleryId !== currentMyGalleryId)
-        .map((galleryItem) => ((0, jsx_runtime_1.jsx)(chooseGalleryItem_1.default, { galleryItem: galleryItem, isSelected: galleryItem.galleryId === selectedItem?.galleryId, handleIsSelected: handleIsSelected }, galleryItem.galleryId)));
-    return ((0, jsx_runtime_1.jsxs)(StyledChooseGalleryItems, { children: [(0, jsx_runtime_1.jsx)("div", { className: "head", children: (0, jsx_runtime_1.jsx)("h3", { className: "tittle", children: title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "content", children: [!isLoading && galleryItems && ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { totalCount: renderItems.length, itemContent: (index) => renderItems[index], endReached: loadMore, overscan: 200, components: {
-                            Footer: () => (isNextLoading ? (0, jsx_runtime_1.jsx)(CardsHolderLoader_1.default, {}) : null),
-                        } })), isLoading && (0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { totalCount: 20, itemContent: () => (0, jsx_runtime_1.jsx)(PlaceholderItemsGallery_1.PlaceholderItemsGallery, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "favoriteBtn", children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: titleBtn, variant: "outline", onClick: () => setAddGallery(true) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "btns", children: [(0, jsx_runtime_1.jsx)(MainButton_1.default, { text: "Add", variant: "primaryM", disabled: !selectedItem || !ids, onClick: () => {
-                            addMethod(selectedItem?.galleryId, ids);
-                        } }), (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: "Cancel", variant: "secondary", onClick: () => {
-                            closeModalSidebarPortal();
-                            closeModalSidebar();
-                        } })] })] }));
-};
-const GalleryItemsMyGallery = (props) => {
-    const { galleryItems, loadMore, isNextLoading, load, isLoading } = (0, useFetchMyGalleries_1.useFetchMyGalleriesV2)();
-    (0, react_1.useEffect)(() => {
-        load({ pageSize: 100, pageToken: "" });
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(GalleryItems, { ...props, galleryItems: galleryItems, loadMore: loadMore, isNextLoading: isNextLoading, isLoading: isLoading }));
-};
-const GalleryItemsMyFavorite = (props) => {
-    const { galleryItems, loadMore, isNextLoading, load, isLoading } = (0, useFetchMyFavorites_1.useFetchMyFavoritesV2)();
-    (0, react_1.useEffect)(() => {
-        load({ pageSize: 100, pageToken: "" });
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(GalleryItems, { ...props, galleryItems: galleryItems, loadMore: loadMore, isNextLoading: isNextLoading, isLoading: isLoading }));
-};
-const ChooseGalleryItems = ({ isGetMyGalleries, ...props }) => (isGetMyGalleries ? (0, jsx_runtime_1.jsx)(GalleryItemsMyGallery, { ...props }) : (0, jsx_runtime_1.jsx)(GalleryItemsMyFavorite, { ...props }));
-// Export
-exports.default = ChooseGalleryItems;

package/build/modules/gallery/ui/createGalleryForm/index.d.ts

@@ -1,12 +0,0 @@
-import { ApolloError } from '@apollo/client';
-import { galleriesSchema as schema } from '@ludo.ninja/api';
-declare const CreateGalleryForm: ({ setAddGallery, title, inputPlaceHolderText, createMethod, error, refetchFavoritesList, }: {
-    setAddGallery: (value: boolean) => void;
-    refetchFavoritesList?: () => Promise<void>;
-    title: string;
-    inputPlaceHolderText: string;
-    ids?: string[];
-    createMethod: ({ name, description, publicAccessible, creationIds, }: schema.IMutationCreateFavoriteListV2Args | schema.IMutationCreateGalleryV2Args) => Promise<void>;
-    error: ApolloError | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CreateGalleryForm;

package/build/modules/gallery/ui/createGalleryForm/index.js

@@ -1,140 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_hook_form_1 = require("react-hook-form");
-const styled_components_1 = __importDefault(require("styled-components"));
-const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ui_1 = require("../../../../store/ui");
-const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
-const colors_1 = require("../../../../styles/colors");
-const typography_1 = require("../../../../styles/typography");
-const MainButton_1 = __importDefault(require("../../../../system/Buttons/MainButton"));
-const Forms_1 = require("../../../../system/Forms");
-const Messages_1 = __importDefault(require("../../../../system/Forms/Messages"));
-// Styles
-const StyledCreateForm = styled_components_1.default.div `
-  min-width: 344px;
-  min-height: calc(460px - 24px);
-  position: relative;
-
-  .head {
-    margin-bottom: 20px;
-
-    .tittle {
-      ${typography_1.FH3};
-      color: ${colors_1.BlackColor};
-      margin: 0;
-    }
-  }
-
-  .content {
-    margin-bottom: 60px;
-
-    .input_group {
-      position: relative;
-      margin-bottom: 16px;
-    }
-  }
-
-  .btns {
-    margin-top: 16px;
-    display: flex;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    justify-content: center;
-    gap: 16px;
-
-    button {
-      width: 100%;
-    }
-  }
-
-  @media (max-width: 767px) {
-    margin-right: 0;
-    .content {
-      width: auto;
-    }
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    min-width: ${(0, _4k_1.adaptiveValueCalc)(344)};
-    min-height: calc(${(0, _4k_1.adaptiveValueCalc)(460)} - ${(0, _4k_1.adaptiveValueCalc)(24)});
-
-    .head {
-      margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(20)};
-    }
-
-    .content {
-      margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(60)};
-
-      .input_group {
-        margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      }
-    }
-
-    .btns {
-      margin-top: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      gap: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    }
-  }
-`;
-// Component
-const CreateGalleryForm = ({ setAddGallery, title, inputPlaceHolderText, 
-// ids,
-createMethod, error, refetchFavoritesList, }) => {
-    const { register, handleSubmit, formState: { errors }, } = (0, react_hook_form_1.useForm)({
-        mode: 'all',
-    });
-    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
-    const dataForgalleryName = {
-        labelText: 'galleryName',
-        name: 'galleryName',
-        placeHolder: inputPlaceHolderText,
-    };
-    const dataForBio = {
-        labelText: 'Bio',
-        name: 'galleryDescription',
-        placeHolder: 'Description (tags and hashtags are supported)',
-    };
-    const registergalleryName = register('galleryName', Messages_1.default[dataForgalleryName.name]);
-    const registergalleryDescription = register('galleryDescription', Messages_1.default[dataForBio.name]);
-    const errorGalleryName = {
-        isNeedShowError: Boolean(errors?.galleryName),
-        message: errors?.galleryName && errors?.galleryName.message,
-    };
-    const errorGalleryDescription = {
-        isNeedShowError: Boolean(errors?.galleryDescription),
-        message: errors?.galleryDescription && errors?.galleryDescription.message,
-    };
-    const onSubmit = async ({ galleryName, galleryDescription }) => {
-        // const creationIds = getCreationIdsArray();
-        await createMethod({
-            name: galleryName,
-            description: galleryDescription,
-            publicAccessible: true,
-            creationIds: [],
-        });
-        refetchFavoritesList && (await refetchFavoritesList());
-        if (error) {
-            openAlert({
-                type: type_1.alertVariants.error,
-                caption: error?.message,
-            });
-            return;
-        }
-        setAddGallery(false);
-    };
-    return ((0, jsx_runtime_1.jsxs)(StyledCreateForm, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'head', children: (0, jsx_runtime_1.jsx)("h3", { className: 'tittle', children: title }) }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'content', children: [(0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(Forms_1.Input, { register: registergalleryName, error: errorGalleryName, data: dataForgalleryName }) }), (0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(Forms_1.BasicTextArea, { register: registergalleryDescription, 
-                                    // counter={0}
-                                    isNeedBiggerArea: false, error: errorGalleryDescription, data: dataForBio }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "btns", children: [(0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Create', type: 'submit', variant: "primaryM", onClick: () => null }), (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Go Back', variant: "outline", onClick: () => {
-                                    setAddGallery(false);
-                                } })] })] })] }));
-};
-// Export
-exports.default = CreateGalleryForm;

package/build/modules/gallery/ui/editGalleryForm/index.d.ts

@@ -1,8 +0,0 @@
-declare const EditGalleryForm: ({ title, inputPlaceHolderText, galleryId, name, description, }: {
-    title: string;
-    inputPlaceHolderText: string;
-    galleryId: string;
-    name: string;
-    description: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default EditGalleryForm;

package/build/modules/gallery/ui/editGalleryForm/index.js

@@ -1,192 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const styled_components_1 = __importDefault(require("styled-components"));
-const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const store_1 = require("../../store");
-const ui_1 = require("../../../../store/ui");
-const useEditGallery_1 = __importDefault(require("../../../../api/server-galleries/mutations/useEditGallery"));
-const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
-const colors_1 = require("../../../../styles/colors");
-const typography_1 = require("../../../../styles/typography");
-const MainButton_1 = __importDefault(require("../../../../system/Buttons/MainButton"));
-const Forms_1 = require("../../../../system/Forms");
-const Messages_1 = __importDefault(require("../../../../system/Forms/Messages"));
-// Styles
-const StyledCreateForm = styled_components_1.default.div `
-  min-width: 344px;
-  min-height: calc(460px - 24px);
-  position: relative;
-
-  .head {
-    margin-bottom: 20px;
-
-    .tittle {
-      ${typography_1.FH3};
-      color: ${colors_1.BlackColor};
-      margin: 0;
-    }
-  }
-
-  .content {
-    margin-bottom: 60px;
-
-    .input_group {
-      position: relative;
-      margin-bottom: 16px;
-    }
-  }
-
-  .btns {
-    margin-top: 16px;
-    display: flex;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    gap: 16px;
-
-    .add {
-      width: 100%;
-
-      & button {
-        font-size: 15px;
-        font-weight: 500;
-        line-height: 1.47;
-
-        @media (max-width: 767px) {
-          font-size: 14px;
-          line-height: 1.43;
-        }
-      }
-    }
-
-    .cancel {
-      width: 100%;
-    }
-
-    & button {
-      width: 100%;
-      padding: 9px 0;
-    }
-  }
-
-  @media (max-width: 767px) {
-    margin-right: 0;
-    .content {
-      width: auto;
-    }
-
-    .btns {
-      position: static;
-      justify-content: center;
-    }
-
-    .add,
-    .cancel {
-      max-width: 140px;
-    }
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    min-width: ${(0, _4k_1.adaptiveValueCalc)(344)};
-    min-height: calc(${(0, _4k_1.adaptiveValueCalc)(460)} - ${(0, _4k_1.adaptiveValueCalc)(24)});
-
-    .head {
-      margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(20)};
-    }
-
-    .content {
-      margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(60)};
-
-      .input_group {
-        margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      }
-    }
-
-    .btns {
-      margin-top: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      gap: ${(0, _4k_1.adaptiveValueCalc)(16)};
-
-      .add {
-        & button {
-          font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
-        }
-      }
-
-      & button {
-        padding: ${(0, _4k_1.adaptiveValueCalc)(9)} 0;
-      }
-    }
-  }
-`;
-// Component
-const EditGalleryForm = ({ title, inputPlaceHolderText, galleryId, name, description, }) => {
-    const updateGalleryInfo = (0, store_1.useGalleryStore)((state) => state.updateGalleryInfo);
-    const { editGallery } = (0, useEditGallery_1.default)();
-    const { register, handleSubmit, formState: { errors }, reset, } = (0, react_hook_form_1.useForm)({
-        mode: 'all',
-    });
-    (0, react_1.useEffect)(() => {
-        const defaultValues = {
-            galleryName: name,
-            galleryDescription: description,
-        };
-        reset({ ...defaultValues });
-    }, [name, description]);
-    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
-    const closeModalSidebar = (0, ui_1.useUiStore)((state) => state.closeModalSidebar);
-    const dataForgalleryName = {
-        labelText: 'galleryName',
-        name: 'galleryName',
-        placeHolder: inputPlaceHolderText,
-    };
-    const dataForBio = {
-        labelText: 'Bio',
-        name: 'galleryDescription',
-        placeHolder: 'Description (tags and hashtags are supported)',
-    };
-    const registergalleryName = register('galleryName', Messages_1.default[dataForgalleryName.name]);
-    const registergalleryDescription = register('galleryDescription', Messages_1.default[dataForBio.name]);
-    const errorGalleryName = {
-        isNeedShowError: Boolean(errors?.galleryName),
-        message: errors?.galleryName && errors?.galleryName.message,
-    };
-    const errorGalleryDescription = {
-        isNeedShowError: Boolean(errors?.galleryDescription),
-        message: errors?.galleryDescription && errors?.galleryDescription.message,
-    };
-    const onSubmit = async ({ galleryName, galleryDescription }) => {
-        try {
-            const data = await editGallery({
-                galleryId,
-                name: galleryName,
-                description: galleryDescription,
-            });
-            if (data.data.editGallery) {
-                updateGalleryInfo({
-                    galleryName,
-                    galleryDescription,
-                });
-            }
-            closeModalSidebar();
-        }
-        catch (error) {
-            openAlert({
-                type: type_1.alertVariants.error,
-                caption: error?.message,
-            });
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(StyledCreateForm, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'head', children: (0, jsx_runtime_1.jsx)("h3", { className: 'tittle', children: title }) }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'content', children: [(0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(Forms_1.Input, { register: registergalleryName, error: errorGalleryName, data: dataForgalleryName }) }), (0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(Forms_1.BasicTextArea, { register: registergalleryDescription, 
-                                    // counter={0}
-                                    isNeedBiggerArea: false, error: errorGalleryDescription, data: dataForBio }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "btns", children: [(0, jsx_runtime_1.jsx)("div", { className: 'add', children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Save', type: 'submit', variant: "primaryL", onClick: () => null }) }), (0, jsx_runtime_1.jsx)("div", { className: 'cancel', children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Cancel', variant: "outline", onClick: closeModalSidebar }) })] })] })] }));
-};
-// Export
-exports.default = EditGalleryForm;

package/build/modules/gallery/ui/itemsPreview/index.d.ts

@@ -1,19 +0,0 @@
-import { TCreation } from '../../../../entities/creation/types';
-import { TVirtuosoData } from '../../../virtuoso/types';
-export declare const useVirtuosoData: <TData>({ creations, isMobile }: {
-    isMobile: boolean;
-    creations: TData[];
-}) => {
-    virtuosoData: TVirtuosoData<TData>;
-    placeholderData: number[][];
-};
-declare const ItemsPreview: ({ creations, deleteMethod, title, loadMore, isLoading, isNextLoading, allCount, }: {
-    creations: TCreation[];
-    deleteMethod: (itemId: string) => void;
-    title: string;
-    loadMore?: () => void;
-    isLoading?: boolean;
-    isNextLoading?: boolean;
-    allCount?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ItemsPreview;