@deenruv/product-badges-plugin 1.0.0

package/dist/plugin-server/zeus/typedDocumentNode.d.ts

@@ -0,0 +1,3 @@
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { ValueTypes, GenericOperation, OperationOptions, GraphQLTypes, InputType, ScalarDefinition, ThunderGraphQLOptions, ExtractVariables } from './';
+export declare const typedGql: <O extends "query" | "mutation", SCLR extends ScalarDefinition, R extends keyof ValueTypes = GenericOperation<O>>(operation: O, graphqlOptions?: ThunderGraphQLOptions<SCLR> | undefined) => <Z extends ValueTypes[R]>(o: Z & { [P in keyof Z]: P extends keyof ValueTypes[R] ? Z[P] : never; }, ops?: OperationOptions) => TypedDocumentNode<InputType<GraphQLTypes[R], Z, SCLR>, ExtractVariables<Z>>;

package/dist/plugin-server/zeus/typedDocumentNode.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typedGql = void 0;
+const graphql_tag_1 = __importDefault(require("graphql-tag"));
+const _1 = require("./");
+const typedGql = (operation, graphqlOptions) => (o, ops) => {
+    const str = (0, _1.Zeus)(operation, o, {
+        operationOptions: ops,
+        scalars: graphqlOptions === null || graphqlOptions === void 0 ? void 0 : graphqlOptions.scalars,
+    });
+    return (0, graphql_tag_1.default)(str);
+};
+exports.typedGql = typedGql;

package/dist/plugin-ui/components/Badges.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { FromSelector } from "../zeus";
+import { BadgeSelector } from "../graphql/selectors";
+export type BadgeType = FromSelector<typeof BadgeSelector, "Badge">;
+export declare const Badges: () => React.JSX.Element | null;

package/dist/plugin-ui/components/Badges.js

@@ -0,0 +1,82 @@
+import React, { useState, useMemo, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Info, Plus, Trash } from "lucide-react";
+import { toast } from "sonner";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogTrigger, useLazyQuery, useMutation, useSettings, } from "@deenruv/react-ui-devkit";
+import { useLocation } from "react-router-dom";
+import { BadgesModal } from "./BadgesModal";
+import { translationNS } from "../translation-ns";
+import { ProductBadgesQuery } from "../graphql/queries";
+import { RemoveBadgeMutation } from "../graphql/mutations";
+export const Badges = () => {
+    const [editedBadge, setEditedBadge] = useState();
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { t } = useTranslation(translationNS);
+    const { pathname } = useLocation();
+    const [removeBadge] = useMutation(RemoveBadgeMutation);
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    console.log("ącontentLng", contentLng);
+    const productId = useMemo(() => pathname.match(/\/products\/(\d+)(\/.*)?$/)?.[1] || "", [pathname]);
+    const [fetchBadges, { data: badgesData }] = useLazyQuery(ProductBadgesQuery);
+    const badges = badgesData?.getProductBadges || [];
+    const closeHandler = () => {
+        setOpen(false);
+        setEditedBadge(undefined);
+    };
+    const editHandler = (e) => (badge) => {
+        setEditedBadge(badge);
+        setOpen(true);
+        e.stopPropagation();
+    };
+    const removeHandler = async (id) => {
+        try {
+            setLoading(true);
+            await removeBadge({ id });
+            await fetchBadges({ productId });
+            toast.success(t("modal.remove.success"));
+        }
+        catch (err) {
+            console.log(err);
+            toast.error(t("modal.remove.error"));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchBadges({ productId });
+    }, [contentLng]);
+    if (!productId)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Card, null,
+            React.createElement(CardHeader, null,
+                React.createElement("div", { className: "flex items-start justify-between" },
+                    React.createElement("div", { className: "flex flex-col gap-2" },
+                        React.createElement(CardTitle, null, t("title")),
+                        React.createElement(CardDescription, null, t("description"))),
+                    React.createElement("div", { className: "flex flex-col gap-2 sm:flex-row" },
+                        React.createElement(Dialog, { open: open, onOpenChange: (open) => {
+                                if (!open)
+                                    closeHandler();
+                                if (open)
+                                    setOpen(true);
+                            } },
+                            React.createElement(DialogTrigger, { asChild: true },
+                                React.createElement(Button, { size: "sm", className: "h-10" },
+                                    React.createElement(Plus, null))),
+                            open && (React.createElement(BadgesModal, { closeHandler: () => setOpen(false), productId: productId, badge: editedBadge, onSuccess: () => fetchBadges({ productId }) })))))),
+            React.createElement(CardContent, null,
+                React.createElement("div", { className: "flex flex-col gap-2" },
+                    !badges.length && React.createElement("span", null, t("not-found")),
+                    React.createElement("div", { className: "mt-2 flex flex-col gap-1" }, badges.map((el, idx) => (React.createElement("div", { key: el.id, className: "flex flex-col gap-1" },
+                        idx !== 0 && React.createElement("hr", null),
+                        React.createElement("div", { className: "flex items-center justify-between gap-2" },
+                            React.createElement("span", { className: "px-2 py-1 font-semibold text-white", style: { backgroundColor: el.color } }, el.name),
+                            React.createElement("div", { className: "flex gap-2" },
+                                React.createElement(Button, { size: "sm", variant: "secondary", disabled: loading, onClick: (e) => editHandler(e)(el) },
+                                    React.createElement(Info, { size: 18 })),
+                                React.createElement(Button, { size: "sm", variant: "destructive", disabled: loading, onClick: () => removeHandler(el.id) },
+                                    React.createElement(Trash, { size: 18 })))))))))))));
+};

package/dist/plugin-ui/components/BadgesModal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { BadgeType } from "./Badges";
+type Props = {
+    productId: string;
+    closeHandler: () => void;
+    onSuccess?: () => Promise<unknown>;
+    badge?: BadgeType;
+};
+export declare const BadgesModal: ({ onSuccess, closeHandler, productId, badge, }: Props) => React.JSX.Element | null;
+export {};

package/dist/plugin-ui/components/BadgesModal.js

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { Button, DialogContent, DialogHeader, DialogTitle, Input, useMutation, useSettings, } from "@deenruv/react-ui-devkit";
+import { translationNS } from "../translation-ns";
+import { CreateBadgeMutation, EditBadgeMutation } from "../graphql/mutations";
+export const BadgesModal = ({ onSuccess, closeHandler, productId, badge, }) => {
+    const { t } = useTranslation(translationNS);
+    const [text, setText] = useState(badge?.name || "");
+    const [loading, setLoading] = useState(false);
+    const [color, setColor] = useState(badge?.color || "#000000");
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const [editBadge] = useMutation(EditBadgeMutation);
+    const [createBadge] = useMutation(CreateBadgeMutation);
+    const mode = badge ? "edit" : "add";
+    const submitHandler = async () => {
+        if (!text) {
+            toast.error(t("modal.text-error"));
+            return;
+        }
+        try {
+            setLoading(true);
+            const input = {
+                color,
+                translations: [{ languageCode: contentLng, name: text }],
+            };
+            if (mode === "edit") {
+                await editBadge({
+                    input: {
+                        id: badge.id,
+                        ...input,
+                    },
+                });
+            }
+            if (mode === "add") {
+                await createBadge({
+                    input: {
+                        productId,
+                        ...input,
+                    },
+                });
+            }
+            toast.success(t(`modal.${mode}.success`));
+            await onSuccess?.();
+            closeHandler();
+        }
+        catch (err) {
+            console.log(err);
+            toast.error(t(`modal.${mode}.error`));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    if (!productId)
+        return null;
+    return (React.createElement(DialogContent, { className: "max-h-[80vh] max-w-[400px] overflow-auto" },
+        React.createElement(DialogHeader, null,
+            React.createElement(DialogTitle, null, t(`modal.${mode}.title`))),
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("div", { className: "flex items-center justify-between gap-2" },
+                React.createElement("div", { className: "flex-1" },
+                    React.createElement(Input, { label: "text", type: "text", value: text, onChange: (e) => setText(e.target.value) })),
+                React.createElement("div", { className: "w-14" },
+                    React.createElement(Input, { label: "color", className: "cursor-pointer", type: "color", value: color, onChange: (e) => setColor(e.target.value) }))),
+            React.createElement("div", { className: "mt-2 flex justify-end gap-2" },
+                React.createElement(Button, { variant: "secondary", onClick: closeHandler }, t("modal.cancel")),
+                React.createElement(Button, { disabled: loading, onClick: submitHandler }, t(`modal.${mode}.action`))))));
+};

package/dist/plugin-ui/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./Badges";

package/dist/plugin-ui/components/index.js

@@ -0,0 +1 @@
+export * from "./Badges";

package/dist/plugin-ui/graphql/mutations.d.ts

@@ -0,0 +1,33 @@
+export declare const RemoveBadgeMutation: import("@graphql-typed-document-node/core").TypedDocumentNode<{
+    removeBadge: boolean;
+}, {} & {
+    id: {};
+}>;
+export declare const CreateBadgeMutation: import("@graphql-typed-document-node/core").TypedDocumentNode<{
+    createBadge: {
+        id: string;
+    };
+}, {} & {
+    input: {
+        productId: string | import("../zeus").Variable<any, string>;
+        color: string | import("../zeus").Variable<any, string>;
+        translations?: import("../zeus").Variable<any, string> | {
+            languageCode: import("../zeus").LanguageCode | import("../zeus").Variable<any, string>;
+            name: string | import("../zeus").Variable<any, string>;
+        }[] | null | undefined;
+    };
+}>;
+export declare const EditBadgeMutation: import("@graphql-typed-document-node/core").TypedDocumentNode<{
+    editBadge: {
+        id: string;
+    };
+}, {} & {
+    input: {
+        id: string | import("../zeus").Variable<any, string>;
+        color?: string | import("../zeus").Variable<any, string> | null | undefined;
+        translations?: import("../zeus").Variable<any, string> | {
+            languageCode: import("../zeus").LanguageCode | import("../zeus").Variable<any, string>;
+            name: string | import("../zeus").Variable<any, string>;
+        }[] | null | undefined;
+    };
+}>;

package/dist/plugin-ui/graphql/mutations.js

@@ -0,0 +1,29 @@
+import { typedGql } from "../zeus/typedDocumentNode";
+import { $ } from "../zeus";
+import { scalars } from "@deenruv/admin-types";
+export const RemoveBadgeMutation = typedGql("mutation", { scalars })({
+    removeBadge: [
+        {
+            input: {
+                id: $("id", "ID!"),
+            },
+        },
+        true,
+    ],
+});
+export const CreateBadgeMutation = typedGql("mutation", { scalars })({
+    createBadge: [
+        {
+            input: $("input", "CreateBadgeInput!"),
+        },
+        { id: true },
+    ],
+});
+export const EditBadgeMutation = typedGql("mutation", { scalars })({
+    editBadge: [
+        {
+            input: $("input", "EditBadgeInput!"),
+        },
+        { id: true },
+    ],
+});

package/dist/plugin-ui/graphql/queries.d.ts

@@ -0,0 +1,9 @@
+export declare const ProductBadgesQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<{
+    getProductBadges?: {
+        id: string;
+        name?: string | null | undefined;
+        color: string;
+    }[] | undefined;
+}, {} & {
+    productId: {};
+}>;

package/dist/plugin-ui/graphql/queries.js

@@ -0,0 +1,14 @@
+import { typedGql } from "../zeus/typedDocumentNode";
+import { $ } from "../zeus";
+import { scalars } from "@deenruv/admin-types";
+import { BadgeSelector } from "./selectors";
+export const ProductBadgesQuery = typedGql("query", { scalars })({
+    getProductBadges: [
+        {
+            input: {
+                productId: $("productId", "ID!"),
+            },
+        },
+        BadgeSelector,
+    ],
+});

package/dist/plugin-ui/graphql/selectors.d.ts

@@ -0,0 +1,11 @@
+export declare const ProductsSelector: {
+    name: true;
+    slug: true;
+    id: true;
+    description: true;
+};
+export declare const BadgeSelector: {
+    id: true;
+    name: true;
+    color: true;
+};

package/dist/plugin-ui/graphql/selectors.js

@@ -0,0 +1,12 @@
+import { Selector } from "../zeus";
+export const ProductsSelector = Selector("Product")({
+    name: true,
+    slug: true,
+    id: true,
+    description: true,
+});
+export const BadgeSelector = Selector("Badge")({
+    id: true,
+    name: true,
+    color: true,
+});

package/dist/plugin-ui/index.d.ts

@@ -0,0 +1 @@
+export declare const BadgesUiPlugin: import("@deenruv/react-ui-devkit").DeenruvUIPlugin<Record<string, any>>;

package/dist/plugin-ui/index.js

@@ -0,0 +1,14 @@
+import { createDeenruvUIPlugin } from "@deenruv/react-ui-devkit";
+import pl from "./locales/pl";
+import en from "./locales/en";
+import { translationNS } from "./translation-ns";
+import { Badges } from "./components/Badges";
+export const BadgesUiPlugin = createDeenruvUIPlugin({
+    version: "1.0.0",
+    name: "Example Plugin",
+    components: [{ id: "products-detail-view", component: Badges }],
+    translations: {
+        ns: translationNS,
+        data: { en, pl },
+    },
+});

package/dist/plugin-ui/locales/en/badges.json

@@ -0,0 +1,25 @@
+{
+    "title": "Badges",
+    "description": "Badges that will be shown on product image",
+    "not-found": "No badges has been found",
+    "modal": {
+        "add": {
+            "title": "Add badge",
+            "action": "Add",
+            "success": "Added successfully"
+        },
+        "edit": {
+            "title": "Edit badge",
+            "action": "Edit",
+            "success": "Edited successfully"
+        },
+        "remove": {
+            "title": "Remove badge",
+            "description": "Are you sure you want to remove this badge?",
+            "action": "Remove",
+            "success": "Removed successfully"
+        },
+        "text-error": "Text field can't be empty",
+        "cancel": "Cancel"
+    }
+}

package/dist/plugin-ui/locales/en/index.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+    title: string;
+    description: string;
+    "not-found": string;
+    modal: {
+        add: {
+            title: string;
+            action: string;
+            success: string;
+        };
+        edit: {
+            title: string;
+            action: string;
+            success: string;
+        };
+        remove: {
+            title: string;
+            description: string;
+            action: string;
+            success: string;
+        };
+        "text-error": string;
+        cancel: string;
+    };
+}[];
+export default _default;

package/dist/plugin-ui/locales/en/index.js

@@ -0,0 +1,2 @@
+import badges from "./badges.json";
+export default [badges];

package/dist/plugin-ui/locales/pl/badges.json

@@ -0,0 +1,25 @@
+{
+    "title": "Odznaki",
+    "description": "Odznaki które będą widoczne na zdjęciu produktu",
+    "not-found": "Nie znaleziono odznak",
+    "modal": {
+        "add": {
+            "title": "Dodaj odznakę",
+            "action": "Dodaj",
+            "success": "Dodano pomyślnie"
+        },
+        "edit": {
+            "title": "Edytuj odznakę",
+            "action": "Edytuj",
+            "success": "Edytowano pomyślnie"
+        },
+        "remove": {
+            "title": "Usuń odznakę",
+            "description": "Czy jesteś pewien, że chcesz usunąć tę odznakę?",
+            "action": "Usuń",
+            "success": "Usunięto pomyślnie"
+        },
+        "text-error": "Text field can't be empty",
+        "cancel": "Cancel"
+    }
+}

package/dist/plugin-ui/locales/pl/index.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+    title: string;
+    description: string;
+    "not-found": string;
+    modal: {
+        add: {
+            title: string;
+            action: string;
+            success: string;
+        };
+        edit: {
+            title: string;
+            action: string;
+            success: string;
+        };
+        remove: {
+            title: string;
+            description: string;
+            action: string;
+            success: string;
+        };
+        "text-error": string;
+        cancel: string;
+    };
+}[];
+export default _default;

package/dist/plugin-ui/locales/pl/index.js

@@ -0,0 +1,2 @@
+import badges from "./badges.json";
+export default [badges];

package/dist/plugin-ui/translation-ns.d.ts

@@ -0,0 +1 @@
+export declare const translationNS: string;

package/dist/plugin-ui/translation-ns.js

@@ -0,0 +1 @@
+export const translationNS = Symbol("product-badges-plugin").toString();

package/dist/plugin-ui/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "target": "ES2020",
+        "jsx": "react",
+        "outDir": "../../dist/plugin-ui",
+        "importHelpers": true,
+        "declaration": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noImplicitAny": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["./**/*.tsx", "./**/*.json", "./**/*.ts"]
+}

package/dist/plugin-ui/zeus/const.d.ts

@@ -0,0 +1,6 @@
+export declare const AllTypesProps: Record<string, any>;
+export declare const ReturnTypes: Record<string, any>;
+export declare const Ops: {
+    query: "Query";
+    mutation: "Mutation";
+};