krl-alfred 2.22.1 → 2.23.1

package/dist/components/RichTextEditor/RichTextEditor.styled.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const RichTextEditorRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const EditorShell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasError" | "$disabled" | "$focused"> & {
+    $hasError?: boolean;
+    $disabled?: boolean;
+    $focused?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasError" | "$disabled" | "$focused"> & {
+    $hasError?: boolean;
+    $disabled?: boolean;
+    $focused?: boolean;
+}, never>>> & string;
+export declare const Toolbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$active"> & {
+    $active?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$active"> & {
+    $active?: boolean;
+}, never>>> & string;
+export declare const ToolbarDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const EditorContentArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
+    $minHeight?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
+    $minHeight?: string;
+}, never>>> & string;
+export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const VariableActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const VariableChipButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;

package/dist/components/RichTextEditor/RichTextEditor.styled.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.RichTextEditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
+exports.FieldLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
+exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: border-color 0.15s ease;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: border-color 0.15s ease;\n"])), function (props) { return (props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); });
+exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"])));
+exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: ", ";\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-10);\n        color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: ", ";\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-10);\n        color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"])), function (props) { return (props.$active ? 'var(--primary-opacity-10)' : 'transparent'); }, function (props) { return (props.$active ? 'var(--primary)' : 'var(--grey-50)'); });
+exports.ToolbarDivider = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"], ["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"])));
+exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
+exports.ErrorMessage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"])));
+exports.VariableActions = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"])));
+exports.VariableChipButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/components/RichTextEditor/extensions/VariableBadgeView.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type NodeViewProps } from '@tiptap/react';
+declare const VariableBadgeView: ({ node }: NodeViewProps) => React.JSX.Element;
+export default VariableBadgeView;

package/dist/components/RichTextEditor/extensions/VariableBadgeView.js

@@ -0,0 +1,25 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@tiptap/react");
+var Badges_1 = __importDefault(require("../../Badges"));
+var VariableBadgeView = function (_a) {
+    var node = _a.node;
+    var label = node.attrs.label || node.attrs.id || '';
+    return ((0, jsx_runtime_1.jsx)(react_1.NodeViewWrapper, __assign({ as: "span", className: "rte-variable-node", "data-variable": "", "data-id": node.attrs.id || undefined, "data-label": node.attrs.label || undefined }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: label }) })));
+};
+exports.default = VariableBadgeView;

package/dist/components/RichTextEditor/extensions/VariableNode.d.ts

@@ -0,0 +1,14 @@
+import { Node } from '@tiptap/core';
+export type VariableAttributes = {
+    id: string;
+    label: string;
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        variable: {
+            insertVariable: (attrs: VariableAttributes) => ReturnType;
+        };
+    }
+}
+export declare const VariableNode: Node<any, any>;
+export default VariableNode;

package/dist/components/RichTextEditor/extensions/VariableNode.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariableNode = void 0;
+var core_1 = require("@tiptap/core");
+var react_1 = require("@tiptap/react");
+var VariableBadgeView_1 = __importDefault(require("./VariableBadgeView"));
+exports.VariableNode = core_1.Node.create({
+    name: 'variable',
+    group: 'inline',
+    inline: true,
+    atom: true,
+    selectable: true,
+    addAttributes: function () {
+        return {
+            id: {
+                default: null,
+                parseHTML: function (element) { return element.getAttribute('data-id'); },
+                renderHTML: function (attributes) {
+                    if (!attributes.id)
+                        return {};
+                    return { 'data-id': attributes.id };
+                },
+            },
+            label: {
+                default: null,
+                parseHTML: function (element) { return element.getAttribute('data-label'); },
+                renderHTML: function (attributes) {
+                    if (!attributes.label)
+                        return {};
+                    return { 'data-label': attributes.label };
+                },
+            },
+        };
+    },
+    parseHTML: function () {
+        return [
+            {
+                tag: 'span[data-variable]',
+            },
+        ];
+    },
+    renderHTML: function (_a) {
+        var node = _a.node, HTMLAttributes = _a.HTMLAttributes;
+        return [
+            'span',
+            (0, core_1.mergeAttributes)(HTMLAttributes, {
+                'data-variable': '',
+                class: 'rte-variable',
+                contenteditable: 'false',
+            }),
+            node.attrs.label || node.attrs.id || '',
+        ];
+    },
+    addNodeView: function () {
+        return (0, react_1.ReactNodeViewRenderer)(VariableBadgeView_1.default);
+    },
+    addCommands: function () {
+        var _this = this;
+        return {
+            insertVariable: function (attrs) {
+                return function (_a) {
+                    var commands = _a.commands;
+                    return commands.insertContent({
+                        type: _this.name,
+                        attrs: attrs,
+                    });
+                };
+            },
+        };
+    },
+});
+exports.default = exports.VariableNode;

package/dist/components/RichTextEditor/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './RichTextEditor';
+export type { RichTextEditorProps, RichTextEditorRef, RichTextVariable } from './props';
+export { VariableNode } from './extensions/VariableNode';
+export { sanitizeHtml, serializeEditorHtml, prepareEditorHtml } from './utils/sanitize';

package/dist/components/RichTextEditor/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareEditorHtml = exports.serializeEditorHtml = exports.sanitizeHtml = exports.VariableNode = exports.default = void 0;
+var RichTextEditor_1 = require("./RichTextEditor");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(RichTextEditor_1).default; } });
+var VariableNode_1 = require("./extensions/VariableNode");
+Object.defineProperty(exports, "VariableNode", { enumerable: true, get: function () { return VariableNode_1.VariableNode; } });
+var sanitize_1 = require("./utils/sanitize");
+Object.defineProperty(exports, "sanitizeHtml", { enumerable: true, get: function () { return sanitize_1.sanitizeHtml; } });
+Object.defineProperty(exports, "serializeEditorHtml", { enumerable: true, get: function () { return sanitize_1.serializeEditorHtml; } });
+Object.defineProperty(exports, "prepareEditorHtml", { enumerable: true, get: function () { return sanitize_1.prepareEditorHtml; } });

package/dist/components/RichTextEditor/props.d.ts

@@ -0,0 +1,38 @@
+import type { Editor } from '@tiptap/react';
+export type RichTextVariable = {
+    id: string;
+    label: string;
+};
+export interface RichTextEditorProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (html: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    className?: string;
+    id?: string;
+    minHeight?: string;
+    /** Story / consumer tarafında değişken listesi göstermek için opsiyonel */
+    variables?: RichTextVariable[];
+}
+export interface RichTextEditorRef {
+    insertVariable: (variable: RichTextVariable) => void;
+    getHTML: () => string;
+    getEditor: () => Editor | null;
+    focus: () => void;
+    clear: () => void;
+}
+export declare const RichTextEditorDefault: {
+    label: string;
+    placeholder: string;
+    defaultValue: string;
+    disabled: boolean;
+    hasError: boolean;
+    errorMessage: string;
+    minHeight: string;
+    variables: RichTextVariable[];
+};

package/dist/components/RichTextEditor/props.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextEditorDefault = void 0;
+exports.RichTextEditorDefault = {
+    label: null,
+    placeholder: 'Metin yaz…',
+    defaultValue: '',
+    disabled: false,
+    hasError: false,
+    errorMessage: null,
+    minHeight: '200px',
+    variables: [],
+};

package/dist/components/RichTextEditor/stories/RichTextEditor.stories.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import type { RichTextEditorRef } from '../props';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../props").RichTextEditorProps & React.RefAttributes<RichTextEditorRef>>;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        hasError: {
+            control: string;
+        };
+        errorMessage: {
+            control: string;
+        };
+        minHeight: {
+            control: string;
+        };
+        onChange: {
+            control: boolean;
+        };
+        onBlur: {
+            control: boolean;
+        };
+        value: {
+            control: boolean;
+        };
+        defaultValue: {
+            control: boolean;
+        };
+        variables: {
+            control: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        label: string;
+        placeholder: string;
+        minHeight: string;
+    };
+};
+export declare const WithSampleContent: {
+    name: string;
+    args: {
+        label: string;
+        defaultValue: string;
+        minHeight: string;
+    };
+};
+export declare const WithError: {
+    args: {
+        label: string;
+        hasError: boolean;
+        errorMessage: string;
+        defaultValue: string;
+        minHeight: string;
+    };
+};
+export declare const Disabled: {
+    args: {
+        label: string;
+        disabled: boolean;
+        defaultValue: string;
+        minHeight: string;
+    };
+};
+export declare const InsertVariables: {
+    name: string;
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/components/RichTextEditor/stories/RichTextEditor.stories.js

@@ -0,0 +1,101 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var RichTextEditor_1 = __importDefault(require("../RichTextEditor"));
+var RichTextEditor_styled_1 = require("../RichTextEditor.styled");
+var SAMPLE_VARIABLES = [
+    { id: 'name', label: 'Ad' },
+    { id: 'order_no', label: 'Sipariş no' },
+    { id: 'amount', label: 'Tutar' },
+];
+var SAMPLE_CONTENT = "\n<p>Merhaba <span data-variable data-id=\"name\" data-label=\"Ad\">Ad</span></p>\n<p>Abonelik sipari\u015Fin ba\u015Far\u0131yla al\u0131nd\u0131, te\u015Fekk\u00FCr ederiz.</p>\n<p><span data-variable data-id=\"order_no\" data-label=\"Sipari\u015F no\">Sipari\u015F no</span> sipari\u015Fin haz\u0131rlanmaya ba\u015Flad\u0131; kargoya verildi\u011Finde sana ayr\u0131 bir bilgilendirme maili g\u00F6nderece\u011Fiz.</p>\n<p>Aboneliklerim sayfandaki sipari\u015F detay b\u00F6l\u00FCm\u00FCnden aboneliklerini g\u00F6r\u00FCnt\u00FCleyebilir ve y\u00F6netebilirsin.</p>\n";
+exports.default = {
+    title: 'Components/RichTextEditor',
+    component: RichTextEditor_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        disabled: { control: 'boolean' },
+        hasError: { control: 'boolean' },
+        errorMessage: { control: 'text' },
+        minHeight: { control: 'text' },
+        onChange: { control: false },
+        onBlur: { control: false },
+        value: { control: false },
+        defaultValue: { control: false },
+        variables: { control: false },
+    },
+};
+exports.Default = {
+    args: {
+        label: 'Mail metni',
+        placeholder: 'Metin yaz…',
+        minHeight: '220px',
+    },
+};
+exports.WithSampleContent = {
+    name: 'Örnek içerik + değişken chip’leri',
+    args: {
+        label: 'Mail metni',
+        defaultValue: SAMPLE_CONTENT,
+        minHeight: '240px',
+    },
+};
+exports.WithError = {
+    args: {
+        label: 'Mail metni',
+        hasError: true,
+        errorMessage: 'Mail metni zorunludur.',
+        defaultValue: '<p></p>',
+        minHeight: '180px',
+    },
+};
+exports.Disabled = {
+    args: {
+        label: 'Mail metni',
+        disabled: true,
+        defaultValue: SAMPLE_CONTENT,
+        minHeight: '220px',
+    },
+};
+var InsertVariableStory = function () {
+    var editorRef = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(SAMPLE_CONTENT), html = _a[0], setHtml = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 720 } }, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_1.default, { ref: editorRef, label: "Mail metni", value: html, onChange: setHtml, minHeight: "240px" }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.VariableActions, { children: SAMPLE_VARIABLES.map(function (variable) { return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.VariableChipButton, __assign({ type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.insertVariable(variable); } }, { children: ["+ ", variable.label] }), variable.id)); }) }), (0, jsx_runtime_1.jsxs)("details", __assign({ style: { marginTop: '1rem' } }, { children: [(0, jsx_runtime_1.jsx)("summary", __assign({ style: { cursor: 'pointer', font: 'var(--caption-bold-12-15)', color: 'var(--dark-opacity-50)' } }, { children: "HTML \u00E7\u0131kt\u0131s\u0131" })), (0, jsx_runtime_1.jsx)("pre", __assign({ style: {
+                            marginTop: '0.5rem',
+                            padding: '0.75rem',
+                            borderRadius: '0.5rem',
+                            background: 'var(--dark-opacity-3)',
+                            fontSize: 12,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        } }, { children: html }))] }))] })));
+};
+exports.InsertVariables = {
+    name: 'Değişken ekleme (ref API)',
+    render: function () { return (0, jsx_runtime_1.jsx)(InsertVariableStory, {}); },
+    parameters: {
+        docs: {
+            description: {
+                story: "\nDesign system bile\u015Feni de\u011Fi\u015Fken se\u00E7ici UI i\u00E7ermez; t\u00FCketici taraf\u0131nda `ref.insertVariable` ile cursor konumuna chip eklenir:\n\n```tsx\nconst ref = useRef<RichTextEditorRef>(null);\n\n<RichTextEditor ref={ref} value={html} onChange={setHtml} />\n<button onClick={() => ref.current?.insertVariable({ id: 'name', label: 'Ad' })}>\n  Ad ekle\n</button>\n```\n                ",
+            },
+        },
+    },
+};

package/dist/components/RichTextEditor/utils/sanitize.d.ts

@@ -0,0 +1,13 @@
+export declare const sanitizeHtml: (html: string) => string;
+/**
+ * TipTap HTML → dışarı verilen HTML
+ * Boş paragraflar (Enter + yazı yok) <br> olur.
+ * İçinde metin olan paragraflar <p> olarak kalır.
+ */
+export declare const serializeEditorHtml: (html: string) => string;
+/**
+ * Dışarıdan gelen HTML → TipTap'in düzenleyebileceği HTML
+ * Blok seviyesindeki <br> etiketleri boş <p> olur (Enter satırı).
+ * <p> içindeki <br> hard-break olarak kalır.
+ */
+export declare const prepareEditorHtml: (html: string) => string;

package/dist/components/RichTextEditor/utils/sanitize.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareEditorHtml = exports.serializeEditorHtml = exports.sanitizeHtml = void 0;
+var dompurify_1 = __importDefault(require("dompurify"));
+var ALLOWED_TAGS = [
+    'p',
+    'br',
+    'strong',
+    'b',
+    'em',
+    'i',
+    'u',
+    's',
+    'strike',
+    'ul',
+    'ol',
+    'li',
+    'span',
+];
+var ALLOWED_ATTR = [
+    'class',
+    'data-variable',
+    'data-id',
+    'data-label',
+];
+var EMPTY_PARAGRAPH_REGEX = /<p>(?:\s|&nbsp;|<br\s*\/?>)*<\/p>/gi;
+var sanitizeHtml = function (html) {
+    if (!html)
+        return '';
+    return dompurify_1.default.sanitize(html, {
+        ALLOWED_TAGS: ALLOWED_TAGS,
+        ALLOWED_ATTR: ALLOWED_ATTR,
+        KEEP_CONTENT: true,
+    });
+};
+exports.sanitizeHtml = sanitizeHtml;
+/**
+ * TipTap HTML → dışarı verilen HTML
+ * Boş paragraflar (Enter + yazı yok) <br> olur.
+ * İçinde metin olan paragraflar <p> olarak kalır.
+ */
+var serializeEditorHtml = function (html) {
+    var sanitized = (0, exports.sanitizeHtml)(html);
+    if (!sanitized)
+        return '';
+    var serialized = sanitized.replace(EMPTY_PARAGRAPH_REGEX, '<br>');
+    if (/^(?:<br\s*\/?>|\s)*$/i.test(serialized)) {
+        return '';
+    }
+    return serialized;
+};
+exports.serializeEditorHtml = serializeEditorHtml;
+/**
+ * Dışarıdan gelen HTML → TipTap'in düzenleyebileceği HTML
+ * Blok seviyesindeki <br> etiketleri boş <p> olur (Enter satırı).
+ * <p> içindeki <br> hard-break olarak kalır.
+ */
+var prepareEditorHtml = function (html) {
+    var sanitized = (0, exports.sanitizeHtml)(html);
+    if (!sanitized)
+        return '';
+    if (typeof DOMParser === 'undefined') {
+        return sanitized;
+    }
+    var parser = new DOMParser();
+    var doc = parser.parseFromString("<div id=\"rte-root\">".concat(sanitized, "</div>"), 'text/html');
+    var root = doc.getElementById('rte-root');
+    if (!root)
+        return sanitized;
+    var replaceBlockBreaks = function (parent) {
+        Array.from(parent.childNodes).forEach(function (child) {
+            if (child.nodeType !== Node.ELEMENT_NODE)
+                return;
+            var element = child;
+            var tag = element.tagName;
+            if (tag === 'BR') {
+                var emptyParagraph = doc.createElement('p');
+                parent.replaceChild(emptyParagraph, element);
+                return;
+            }
+            if (tag === 'P' || tag === 'SPAN') {
+                return;
+            }
+            if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV') {
+                replaceBlockBreaks(element);
+            }
+        });
+    };
+    replaceBlockBreaks(root);
+    return (0, exports.sanitizeHtml)(root.innerHTML);
+};
+exports.prepareEditorHtml = prepareEditorHtml;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -55,6 +55,6 @@ var ShoppingCartProduct = function (_a) {
     var showUpfrontProductPriceLoading = insuranceType === 3 && upfrontAddonChecked && hasUpfrontAddonPriceLoading;
     var hasUpfrontAddonDiscount = Boolean(upfrontAddonOldPrice);
     var hasInsurancePointer = !hasLoading && insuranceType === 1 && Boolean(toggleInsurance);
-    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductInner, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductImage, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: image })) }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductText, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductTitle, { children: title }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductPriceContent, __assign({ "$discountRate": discountRate }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductDiscountRate, { children: ["%", discountRate] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductPriceStack, { children: showUpfrontProductPriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [oldPrice && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductOldPrice, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductOldPriceAmount, { children: [oldPrice, oldPriceSm && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductOldPriceSmall, { children: oldPriceSm })] }), oldPricePeriod && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductOldPricePeriod, { children: "/".concat(oldPricePeriod) }))] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductNewPrice, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductNewPriceAmount, { children: [price, priceSm && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductNewPriceSmall, { children: priceSm })] }), period && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductNewPricePeriod, { children: "/".concat(period) })] })] })) })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductDeliveryText, { children: [deliveryDangerText && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductDeliveryDanger, { children: deliveryDangerText })), deliveryText] })] })) }), (0, jsx_runtime_1.jsx)(QuantitySelector_1.default, { orientation: "vertical", quantity: quantity, onIncrement: onIncrement, onDecrement: onDecrement, onRemove: onRemove, hasRemove: hasRemove, hasLoading: hasLoading, hasError: hasError, errorText: errorText, hasDisableActions: hasDisableActions, hasDisableIncrement: hasDisableIncrement })] }), hasInsurance && insuranceType === 1 && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceSection, __assign({ "$hasInsurance": hasInsurancePointer }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceImage, __assign({ onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceContent, __assign({ onClick: !hasLoading ? toggleInsurance : undefined }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceText, { children: [insuranceText, insurancePrice && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsurancePrice, { children: hasInsuranceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsurancePriceValue, { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceQuantity, { children: insuranceQuantity })] })) }))] }), hasInsuranceActions && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceActions, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) }))] }))] }))), hasInsurance && insuranceType === 2 && !hasLoading && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Wrapper, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 1 }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { name: "insurance-option", checked: selectedInsuranceOption === 1, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(1); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption1Title }), insuranceOption1TooltipText && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2TooltipWrapper, __assign({ ref: tooltipWrapperRef, htmlFor: "insurance-option-1-tooltip", onClick: handleTooltipWrapperClick, onMouseDown: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", popupWidth: "302px", position: "bottomRight", iconWidth: "24px", iconHeight: "24px", title: insuranceOption1TooltipTitle, popupSize: "medium", hasClickAction: hasInsuranceTooltipClickAction }, { children: insuranceOption1TooltipText })) })))] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption1Description }), (insuranceOption1Price || hasInsuranceOption1PriceLoading) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Price, { children: hasInsuranceOption1PriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2PriceValue, { children: insuranceOption1Price }), insuranceOption1PricePeriod && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2PricePeriod, { children: [" ", insuranceOption1PricePeriod] }))] })) }))] })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 2 }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { name: "insurance-option", checked: selectedInsuranceOption === 2, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(2); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption2Title })] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption2Description }) })] }))] })), hasInsurance && insuranceType === 3 && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonWrapper, { children: (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonCard, __assign({ htmlFor: "upfront-addon" }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonHeader, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonCheckboxWrapper, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: "upfront-addon", size: "medium", checked: upfrontAddonChecked, onChange: onUpfrontAddonChange }) }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonTitle, { children: upfrontAddonTitle }), upfrontAddonDiscountBadge && ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: upfrontAddonDiscountBadge }))] }), (upfrontAddonSummaryText || upfrontAddonPrice) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonPriceBlock, { children: hasUpfrontAddonDiscount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonOldPrice, { children: upfrontAddonOldPrice })] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: ["yerine \u015Fimdi", " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] })] })) : ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, upfrontAddonPrice && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] }))] })) }))] })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductInner, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductImage, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: image })) }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductText, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductTitle, { children: title }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductPriceContent, __assign({ "$discountRate": discountRate }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductDiscountRate, { children: ["%", discountRate] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductPriceStack, __assign({ "$hasPriceLoading": showUpfrontProductPriceLoading }, { children: showUpfrontProductPriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [oldPrice && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductOldPrice, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductOldPriceAmount, { children: [oldPrice, oldPriceSm && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductOldPriceSmall, { children: oldPriceSm })] }), oldPricePeriod && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductOldPricePeriod, { children: "/".concat(oldPricePeriod) }))] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductNewPrice, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductNewPriceAmount, { children: [price, priceSm && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductNewPriceSmall, { children: priceSm })] }), period && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductNewPricePeriod, { children: "/".concat(period) })] })] })) }))] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductDeliveryText, { children: [deliveryDangerText && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductDeliveryDanger, { children: deliveryDangerText })), deliveryText] })] })) }), (0, jsx_runtime_1.jsx)(QuantitySelector_1.default, { orientation: "vertical", quantity: quantity, onIncrement: onIncrement, onDecrement: onDecrement, onRemove: onRemove, hasRemove: hasRemove, hasLoading: hasLoading, hasError: hasError, errorText: errorText, hasDisableActions: hasDisableActions, hasDisableIncrement: hasDisableIncrement })] }), hasInsurance && insuranceType === 1 && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceSection, __assign({ "$hasInsurance": hasInsurancePointer }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceImage, __assign({ onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceContent, __assign({ onClick: !hasLoading ? toggleInsurance : undefined }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceText, { children: [insuranceText, insurancePrice && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsurancePrice, { children: hasInsuranceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsurancePriceValue, { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceQuantity, { children: insuranceQuantity })] })) }))] }), hasInsuranceActions && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceActions, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) }))] }))] }))), hasInsurance && insuranceType === 2 && !hasLoading && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Wrapper, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 1 }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { name: "insurance-option", checked: selectedInsuranceOption === 1, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(1); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption1Title }), insuranceOption1TooltipText && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2TooltipWrapper, __assign({ ref: tooltipWrapperRef, htmlFor: "insurance-option-1-tooltip", onClick: handleTooltipWrapperClick, onMouseDown: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", popupWidth: "302px", position: "bottomRight", iconWidth: "24px", iconHeight: "24px", title: insuranceOption1TooltipTitle, popupSize: "medium", hasClickAction: hasInsuranceTooltipClickAction }, { children: insuranceOption1TooltipText })) })))] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption1Description }), (insuranceOption1Price || hasInsuranceOption1PriceLoading) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Price, { children: hasInsuranceOption1PriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2PriceValue, { children: insuranceOption1Price }), insuranceOption1PricePeriod && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2PricePeriod, { children: [" ", insuranceOption1PricePeriod] }))] })) }))] })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 2 }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { name: "insurance-option", checked: selectedInsuranceOption === 2, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(2); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption2Title })] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption2Description }) })] }))] })), hasInsurance && insuranceType === 3 && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonWrapper, { children: (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonCard, __assign({ htmlFor: "upfront-addon" }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonHeader, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonCheckboxWrapper, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: "upfront-addon", size: "medium", checked: upfrontAddonChecked, onChange: onUpfrontAddonChange }) }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonTitle, { children: upfrontAddonTitle }), upfrontAddonDiscountBadge && ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: upfrontAddonDiscountBadge }))] }), (upfrontAddonSummaryText || upfrontAddonPrice) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonPriceBlock, { children: hasUpfrontAddonDiscount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonOldPrice, { children: upfrontAddonOldPrice })] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: ["yerine \u015Fimdi", " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] })] })) : ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, upfrontAddonPrice && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] }))] })) }))] })) }))] }));
 };
 exports.default = ShoppingCartProduct;