@ludo.ninja/components 2.3.6 → 2.3.7

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

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

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

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

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

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

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