krl-alfred 2.22.1 → 2.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DescriptionCard/DescriptionCard.d.ts +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.js +7 -7
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +22 -16
- package/dist/components/DescriptionCard/props.d.ts +13 -3
- package/dist/components/DescriptionCard/props.js +5 -3
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +13 -2
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +12 -6
- package/dist/components/RichTextEditor/RichTextEditor.d.ts +4 -0
- package/dist/components/RichTextEditor/RichTextEditor.js +113 -0
- package/dist/components/RichTextEditor/RichTextEditor.styled.d.ts +27 -0
- package/dist/components/RichTextEditor/RichTextEditor.styled.js +22 -0
- package/dist/components/RichTextEditor/extensions/VariableBadgeView.d.ts +4 -0
- package/dist/components/RichTextEditor/extensions/VariableBadgeView.js +25 -0
- package/dist/components/RichTextEditor/extensions/VariableNode.d.ts +14 -0
- package/dist/components/RichTextEditor/extensions/VariableNode.js +75 -0
- package/dist/components/RichTextEditor/index.d.ts +4 -0
- package/dist/components/RichTextEditor/index.js +14 -0
- package/dist/components/RichTextEditor/props.d.ts +38 -0
- package/dist/components/RichTextEditor/props.js +13 -0
- package/dist/components/RichTextEditor/stories/RichTextEditor.stories.d.ts +86 -0
- package/dist/components/RichTextEditor/stories/RichTextEditor.stories.js +101 -0
- package/dist/components/RichTextEditor/utils/sanitize.d.ts +13 -0
- package/dist/components/RichTextEditor/utils/sanitize.js +95 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +3 -1
- package/package.json +8 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DescriptionCardProps } from "./props";
|
|
3
|
-
declare const DescriptionCard: ({ title, titleSize, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList,
|
|
3
|
+
declare const DescriptionCard: ({ title, titleSize, headerSize, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
|
|
4
4
|
export default DescriptionCard;
|
|
@@ -24,23 +24,23 @@ var Button_1 = __importDefault(require("./../Button"));
|
|
|
24
24
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
25
25
|
var SubcategoryRow = function (_a) {
|
|
26
26
|
var _b, _c, _d, _e, _f;
|
|
27
|
-
var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth,
|
|
27
|
+
var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout;
|
|
28
28
|
var hasButton = (_b = item.hasButton) !== null && _b !== void 0 ? _b : true;
|
|
29
29
|
var buttonText = (_c = item.buttonText) !== null && _c !== void 0 ? _c : defaultButtonText;
|
|
30
|
-
var DropdownComponent =
|
|
30
|
+
var DropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
31
31
|
var isClickable = !!item.onClick;
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
|
|
33
33
|
};
|
|
34
34
|
var DescriptionCard = function (_a) {
|
|
35
|
-
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.
|
|
35
|
+
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerDescription, headerDescription = _e === void 0 ? props_1.DescriptionCardDefault.headerDescription : _e, _f = _a.headerButtonText, headerButtonText = _f === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _f, _g = _a.hasHeaderDropdown, hasHeaderDropdown = _g === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _g, _h = _a.hasHeaderBackButton, hasHeaderBackButton = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _h, _j = _a.list, list = _j === void 0 ? props_1.DescriptionCardDefault.list : _j, _k = _a.hasBadge, hasBadge = _k === void 0 ? props_1.DescriptionCardDefault.hasBadge : _k, _l = _a.badgeText, badgeText = _l === void 0 ? props_1.DescriptionCardDefault.badgeText : _l, _m = _a.hasHeader, hasHeader = _m === void 0 ? props_1.DescriptionCardDefault.hasHeader : _m, _o = _a.hasHeaderBackground, hasHeaderBackground = _o === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _o, _p = _a.hasHeaderBorder, hasHeaderBorder = _p === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _p, _q = _a.hasRounded, hasRounded = _q === void 0 ? props_1.DescriptionCardDefault.hasRounded : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasBorder : _r, _s = _a.headerImage, headerImage = _s === void 0 ? props_1.DescriptionCardDefault.headerImage : _s, _t = _a.headerRightContent, headerRightContent = _t === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _t, _u = _a.dropdownList, dropdownList = _u === void 0 ? props_1.DescriptionCardDefault.dropdownList : _u, _v = _a.dropdownWidth, dropdownWidth = _v === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _v, _w = _a.accordionList, accordionList = _w === void 0 ? props_1.DescriptionCardDefault.accordionList : _w, _x = _a.boxSize, boxSize = _x === void 0 ? props_1.DescriptionCardDefault.boxSize : _x, _y = _a.hasHeaderButton, hasHeaderButton = _y === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _y, _z = _a.headerButtonWidth, headerButtonWidth = _z === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _z, _0 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _0 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _0, _1 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _1 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _1, _2 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _2, _3 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _3, _4 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _4, _5 = _a.content, content = _5 === void 0 ? props_1.DescriptionCardDefault.content : _5, _6 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _6 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _6, _7 = _a.middleTitle, middleTitle = _7 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _7, _8 = _a.subcategoryList, subcategoryList = _8 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _8, _9 = _a.hasCategoryLayout, hasCategoryLayout = _9 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _9, _10 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _10 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _10, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _11 = _a.customColumnSpan, customColumnSpan = _11 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _11;
|
|
36
36
|
var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
|
|
37
|
-
var HeaderDropdownComponent =
|
|
37
|
+
var HeaderDropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
38
38
|
var hasHeaderRightContent = !!headerRightContent;
|
|
39
39
|
var isHeaderClickable = !!onHeaderClick;
|
|
40
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$
|
|
40
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryLayout, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder, "$hasHeaderDescription": Boolean(headerDescription), "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
|
|
41
41
|
e.stopPropagation();
|
|
42
42
|
onHeaderBack === null || onHeaderBack === void 0 ? void 0 : onHeaderBack();
|
|
43
|
-
}, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$
|
|
43
|
+
}, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(HeaderDropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, __assign({ "$hasNoContentSidePadding": hasNoContentSidePadding }, { children: content })), (hasCategoryLayout || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) }))) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize, "$hasHeader": hasHeader, "$hasAccordion": (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 }, { children: list.map(function (listItem, key) {
|
|
44
44
|
var _a;
|
|
45
45
|
var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
|
|
46
46
|
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.ListItemStyled, __assign({ "$columnSpan": span }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayTitleStyled, { children: listItem.title }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayValueStyled, { children: listItem.display || "-" })] }), key));
|
|
@@ -10,29 +10,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.AccordionItemBody = exports.SubcategoryActionWrapper = exports.RowMiddleTitleStyled = exports.SubcategoryNameStyled = exports.SubcategoryIconWrapper = exports.SubcategoryNameWrapper = exports.SubcategoryRowStyled = exports.SubcategoryListWrapper = exports.HeaderMiddleTitleStyled = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DisplayValueStyled = exports.DisplayTitleStyled = exports.ListItemStyled = exports.ListStyled = exports.ContentWrapper = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.HeaderTitleDescriptionStyled = exports.HeaderTitleTopStyled = exports.HeaderTitleWrapperStyled = exports.HeaderRightContentStyled = exports.HeaderActionWrapperStyled = exports.HeaderRightStyled = exports.HeaderBackButtonStyled = exports.HeaderLeftStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = exports.CategoryDropdownWrapper = exports.DropdownWrapper = exports.CategoryContentWrapper = exports.categoryRowGridColumns = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.categoryRowGridColumns = 'minmax(0, 1fr) auto minmax(0, 1fr)';
|
|
13
|
-
exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0;\n"], ["\n display: block;\n padding: 0;\n"])));
|
|
13
|
+
exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0 1.5rem 1.5rem 1.5rem;\n"], ["\n display: block;\n padding: 0 1.5rem 1.5rem 1.5rem;\n"])));
|
|
14
14
|
exports.DropdownWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"])));
|
|
15
15
|
exports.CategoryDropdownWrapper = (0, styled_components_1.default)(exports.DropdownWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"], ["\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"])));
|
|
16
|
-
exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n position: relative;\n border-radius: ", ";\n
|
|
17
|
-
exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", ";\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-bottom: ", ";\n ", "\n"], ["\n padding: ", ";\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-bottom: ", ";\n ", "\n"])), function (props) {
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n position: relative;\n border-radius: ", ";\n padding: 0;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: ", ";\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n z-index: 2;\n }\n"], ["\n display: block;\n position: relative;\n border-radius: ", ";\n padding: 0;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: ", ";\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n z-index: 2;\n }\n"])), function (props) { return props.$hasRounded ? "0.5rem" : "0"; }, function (props) { return props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
17
|
+
exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n ", "\n"], ["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n ", "\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
|
|
18
|
+
var hasImage = Boolean(props.$headerImage);
|
|
19
|
+
var reduceBottomPadding = props.$hasHeaderDescription && props.$hasHeaderBorder;
|
|
20
|
+
if (props.$hasHeaderBackground) {
|
|
21
|
+
if (hasImage)
|
|
22
|
+
return '1rem 1.5rem';
|
|
23
|
+
return reduceBottomPadding ? '1.5rem 1.5rem 1rem' : '1.5rem';
|
|
20
24
|
}
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
if (hasImage)
|
|
26
|
+
return '1rem 0';
|
|
27
|
+
return reduceBottomPadding ? '1.5rem 0 1rem' : '1.5rem 0';
|
|
28
|
+
}, function (props) { return props.$headerSize === 'medium' ? '88px' : 'auto'; }, function (props) {
|
|
23
29
|
if (props.$hasTwoColumnHeader)
|
|
24
30
|
return '1fr auto';
|
|
25
|
-
if (props.$
|
|
31
|
+
if (props.$hasCategoryLayout)
|
|
26
32
|
return exports.categoryRowGridColumns;
|
|
27
33
|
if (props.$hasHeaderRightContent && !props.$hasMiddleTitle)
|
|
28
34
|
return 'minmax(0, 1fr) auto';
|
|
29
35
|
if (props.$hasMiddleTitle)
|
|
30
|
-
return '1fr
|
|
36
|
+
return '1fr 1fr auto';
|
|
31
37
|
return '1fr auto';
|
|
32
|
-
}, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$
|
|
38
|
+
}, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$hasCategoryLayout && "\n &:hover ".concat(exports.CategoryDropdownWrapper, ",\n ").concat(exports.CategoryDropdownWrapper, ":hover,\n ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n opacity: 1;\n visibility: visible;\n }\n "); });
|
|
33
39
|
exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n"])));
|
|
34
40
|
exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin: 0 1rem 0 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n color: var(--primary);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin: 0 1rem 0 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n color: var(--primary);\n"])));
|
|
35
|
-
exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"])), function (props) { return props.$
|
|
41
|
+
exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"])), function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; });
|
|
36
42
|
exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
37
43
|
exports.HeaderRightContentStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n min-width: 0;\n"], ["\n display: block;\n min-width: 0;\n"])));
|
|
38
44
|
exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n cursor: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
@@ -43,8 +49,8 @@ exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14
|
|
|
43
49
|
: 'var(--headline-semi-bold-18-22)'; });
|
|
44
50
|
exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"], ["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"])));
|
|
45
51
|
exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: block;\n margin-left: 1.5rem;\n"], ["\n display: block;\n margin-left: 1.5rem;\n"])));
|
|
46
|
-
exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: block;\n padding: ", ";\n"], ["\n display: block;\n padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '
|
|
47
|
-
exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n overflow: hidden;\n &:before{\n content: \"\";\n position: absolute;\n inset:
|
|
52
|
+
exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: block;\n padding: ", ";\n"], ["\n display: block;\n padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '0' : '0 1.5rem'; });
|
|
53
|
+
exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n overflow: hidden;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n overflow: hidden;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n"])), function (props) { return props.$boxSize; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; });
|
|
48
54
|
exports.ListItemStyled = styled_components_1.default.li(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\n word-break: break-word;\n grid-column: span ", ";\n\n &:is(:last-child){\n border-right: 0;\n }\n"], ["\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\n word-break: break-word;\n grid-column: span ", ";\n\n &:is(:last-child){\n border-right: 0;\n }\n"])), function (props) { var _a; return (_a = props.$columnSpan) !== null && _a !== void 0 ? _a : 1; });
|
|
49
55
|
exports.DisplayTitleStyled = styled_components_1.default.strong(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n"], ["\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n"])));
|
|
50
56
|
exports.DisplayValueStyled = styled_components_1.default.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n"], ["\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n"])));
|
|
@@ -53,12 +59,12 @@ exports.AccordionListWrapper = styled_components_1.default.div(templateObject_23
|
|
|
53
59
|
exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n + div{\n border-top: 1px solid var(--dark-opacity-10);\n margin-top: -1px;\n }\n"], ["\n + div{\n border-top: 1px solid var(--dark-opacity-10);\n margin-top: -1px;\n }\n"])));
|
|
54
60
|
exports.AccordionItemHeader = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--primary);\n padding: 1.5rem;\n cursor: pointer;\n border-bottom: ", ";\n strong{\n font: var(--body-bold-14-17);\n display: block;\n color: inherit;\n }\n .icon{\n *{\n display: block;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--primary);\n padding: 1.5rem;\n cursor: pointer;\n border-bottom: ", ";\n strong{\n font: var(--body-bold-14-17);\n display: block;\n color: inherit;\n }\n .icon{\n *{\n display: block;\n }\n }\n"])), function (props) { return props.$show ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
55
61
|
exports.HeaderMiddleTitleStyled = styled_components_1.default.span(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n cursor: ", ";\n"], ["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
56
|
-
exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap:
|
|
57
|
-
exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n padding: 1rem 1.5rem;\n border-radius:
|
|
62
|
+
exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-top: 1rem;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-top: 1rem;\n"])));
|
|
63
|
+
exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n transition: all 0.15s ease-in-out;\n cursor: ", ";\n\n &:hover {\n box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n }\n\n ", "\n"], ["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n transition: all 0.15s ease-in-out;\n cursor: ", ";\n\n &:hover {\n box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n }\n\n ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.categoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$hasCategoryLayout && "\n &:hover ".concat(exports.CategoryDropdownWrapper, ",\n ").concat(exports.CategoryDropdownWrapper, ":hover,\n ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n opacity: 1;\n visibility: visible;\n }\n "); });
|
|
58
64
|
exports.SubcategoryNameWrapper = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n"])));
|
|
59
65
|
exports.SubcategoryIconWrapper = styled_components_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--dark-opacity-50);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--dark-opacity-50);\n"])));
|
|
60
66
|
exports.SubcategoryNameStyled = styled_components_1.default.span(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font: var(--body-medium-14-17);\n color: var(--dark);\n"], ["\n font: var(--body-medium-14-17);\n color: var(--dark);\n"])));
|
|
61
67
|
exports.RowMiddleTitleStyled = styled_components_1.default.span(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n"], ["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n"])));
|
|
62
|
-
exports.SubcategoryActionWrapper = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"])), function (props) { return props.$
|
|
68
|
+
exports.SubcategoryActionWrapper = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"])), function (props) { return props.$hasCategoryLayout ? 'flex-end' : 'flex-start'; });
|
|
63
69
|
exports.AccordionItemBody = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
64
70
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34;
|
|
@@ -5,17 +5,23 @@ type ICON = typeof iconNames[any];
|
|
|
5
5
|
type BUTTON_SIZE = typeof buttonSizes[number];
|
|
6
6
|
export declare const titleSizes: readonly ["md", "lg"];
|
|
7
7
|
type TITLE_SIZE = typeof titleSizes[number];
|
|
8
|
+
export declare const headerSizes: readonly ["small", "medium"];
|
|
9
|
+
type HEADER_SIZE = typeof headerSizes[number];
|
|
8
10
|
export interface DescriptionCard {
|
|
9
11
|
title?: string;
|
|
10
12
|
titleSize?: TITLE_SIZE;
|
|
13
|
+
headerSize?: HEADER_SIZE;
|
|
11
14
|
headerDescription?: string;
|
|
12
15
|
hasBadge?: boolean;
|
|
16
|
+
badgeText?: string;
|
|
17
|
+
/** Header alanını gösterir/gizler */
|
|
13
18
|
hasHeader?: boolean;
|
|
19
|
+
/** Header arka planı (var / yok) */
|
|
14
20
|
hasHeaderBackground?: boolean;
|
|
21
|
+
/** Header alt border (var / yok) */
|
|
15
22
|
hasHeaderBorder?: boolean;
|
|
16
23
|
hasRounded?: boolean;
|
|
17
24
|
hasBorder?: boolean;
|
|
18
|
-
badgeText?: string;
|
|
19
25
|
hasHeaderDropdown?: boolean;
|
|
20
26
|
hasHeaderBackButton?: boolean;
|
|
21
27
|
headerImage?: React.ReactNode;
|
|
@@ -37,7 +43,8 @@ export interface DescriptionCard {
|
|
|
37
43
|
hasNoContentSidePadding?: boolean;
|
|
38
44
|
middleTitle?: string;
|
|
39
45
|
subcategoryList?: SubcategoryItem[];
|
|
40
|
-
|
|
46
|
+
/** Kategori listesi layout'u (3 kolon grid, hover dropdown vb.) */
|
|
47
|
+
hasCategoryLayout?: boolean;
|
|
41
48
|
/** Header grid'ini `1fr auto` (sol + sağ) olarak sabitler */
|
|
42
49
|
hasTwoColumnHeader?: boolean;
|
|
43
50
|
headerButtonAction?(e: any): void;
|
|
@@ -52,6 +59,7 @@ export interface DescriptionCardStyledProps {
|
|
|
52
59
|
$hasHeader?: boolean;
|
|
53
60
|
$hasHeaderBackground?: boolean;
|
|
54
61
|
$hasHeaderBorder?: boolean;
|
|
62
|
+
$hasHeaderDescription?: boolean;
|
|
55
63
|
$hasRounded?: boolean;
|
|
56
64
|
$hasBorder?: boolean;
|
|
57
65
|
$headerImage?: React.ReactNode;
|
|
@@ -61,11 +69,13 @@ export interface DescriptionCardStyledProps {
|
|
|
61
69
|
$hasHeaderPrimaryButton?: boolean;
|
|
62
70
|
$hasMiddleTitle?: boolean;
|
|
63
71
|
$hasHeaderRightContent?: boolean;
|
|
64
|
-
$
|
|
72
|
+
$hasCategoryLayout?: boolean;
|
|
65
73
|
$hasTwoColumnHeader?: boolean;
|
|
66
74
|
$hasNoContentSidePadding?: boolean;
|
|
67
75
|
$titleSize?: TITLE_SIZE;
|
|
76
|
+
$headerSize?: HEADER_SIZE;
|
|
68
77
|
$isClickable?: boolean;
|
|
78
|
+
$hasAccordion?: boolean;
|
|
69
79
|
$customColumnSpan?: {
|
|
70
80
|
[index: number]: number;
|
|
71
81
|
};
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DescriptionCardDefault = exports.titleSizes = exports.iconNames = void 0;
|
|
3
|
+
exports.DescriptionCardDefault = exports.headerSizes = exports.titleSizes = exports.iconNames = void 0;
|
|
4
4
|
var iconList_1 = require("../Icon/iconList");
|
|
5
5
|
exports.iconNames = Object.keys(iconList_1.iconList);
|
|
6
6
|
exports.titleSizes = ['md', 'lg'];
|
|
7
|
+
exports.headerSizes = ['small', 'medium'];
|
|
7
8
|
exports.DescriptionCardDefault = {
|
|
8
9
|
title: "Header title",
|
|
9
10
|
titleSize: "md",
|
|
11
|
+
headerSize: "small",
|
|
10
12
|
headerDescription: null,
|
|
11
13
|
hasBadge: false,
|
|
12
14
|
hasHeader: true,
|
|
13
15
|
hasHeaderBackground: false,
|
|
14
|
-
hasHeaderBorder:
|
|
16
|
+
hasHeaderBorder: false,
|
|
15
17
|
hasRounded: true,
|
|
16
18
|
hasBorder: true,
|
|
17
19
|
badgeText: null,
|
|
@@ -36,7 +38,7 @@ exports.DescriptionCardDefault = {
|
|
|
36
38
|
hasNoContentSidePadding: false,
|
|
37
39
|
middleTitle: null,
|
|
38
40
|
subcategoryList: [],
|
|
39
|
-
|
|
41
|
+
hasCategoryLayout: false,
|
|
40
42
|
hasTwoColumnHeader: false,
|
|
41
43
|
customColumnSpan: {}
|
|
42
44
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ title, titleSize, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList,
|
|
4
|
+
component: ({ title, titleSize, headerSize, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
argTypes: {
|
|
7
7
|
title: {
|
|
@@ -10,6 +10,10 @@ declare const _default: {
|
|
|
10
10
|
headerDescription: {
|
|
11
11
|
control: string;
|
|
12
12
|
};
|
|
13
|
+
headerSize: {
|
|
14
|
+
control: string;
|
|
15
|
+
options: string[];
|
|
16
|
+
};
|
|
13
17
|
hasBadge: {
|
|
14
18
|
control: string;
|
|
15
19
|
};
|
|
@@ -25,6 +29,10 @@ declare const _default: {
|
|
|
25
29
|
hasHeaderBorder: {
|
|
26
30
|
control: string;
|
|
27
31
|
};
|
|
32
|
+
hasCategoryLayout: {
|
|
33
|
+
control: string;
|
|
34
|
+
description: string;
|
|
35
|
+
};
|
|
28
36
|
hasRounded: {
|
|
29
37
|
control: string;
|
|
30
38
|
};
|
|
@@ -115,9 +123,13 @@ export declare const WithBadge: {
|
|
|
115
123
|
};
|
|
116
124
|
};
|
|
117
125
|
export declare const WithHeaderDescription: {
|
|
126
|
+
name: string;
|
|
118
127
|
args: {
|
|
128
|
+
headerImage: any;
|
|
119
129
|
headerDescription: string;
|
|
120
130
|
hasTwoColumnHeader: boolean;
|
|
131
|
+
hasHeaderBorder: boolean;
|
|
132
|
+
headerSize: string;
|
|
121
133
|
title: string;
|
|
122
134
|
hasBadge: boolean;
|
|
123
135
|
badgeText: string;
|
|
@@ -145,7 +157,6 @@ export declare const WithHeaderDescription: {
|
|
|
145
157
|
component: ({ children }: any) => React.JSX.Element;
|
|
146
158
|
}[];
|
|
147
159
|
dropdownWidth: string;
|
|
148
|
-
headerImage: React.JSX.Element;
|
|
149
160
|
};
|
|
150
161
|
};
|
|
151
162
|
export declare const WithHeaderBackground: {
|
|
@@ -63,11 +63,16 @@ exports.default = {
|
|
|
63
63
|
argTypes: {
|
|
64
64
|
title: { control: 'text' },
|
|
65
65
|
headerDescription: { control: 'text' },
|
|
66
|
+
headerSize: { control: 'select', options: ['small', 'medium'] },
|
|
66
67
|
hasBadge: { control: 'boolean' },
|
|
67
68
|
badgeText: { control: 'text' },
|
|
68
69
|
hasHeader: { control: 'boolean' },
|
|
69
70
|
hasHeaderBackground: { control: 'boolean' },
|
|
70
71
|
hasHeaderBorder: { control: 'boolean' },
|
|
72
|
+
hasCategoryLayout: {
|
|
73
|
+
control: 'boolean',
|
|
74
|
+
description: 'Kategori listesi layout\'u (3 kolon grid, hover dropdown)',
|
|
75
|
+
},
|
|
71
76
|
hasRounded: { control: 'boolean' },
|
|
72
77
|
hasBorder: { control: 'boolean' },
|
|
73
78
|
hasTwoColumnHeader: {
|
|
@@ -87,7 +92,8 @@ exports.WithBadge = {
|
|
|
87
92
|
args: __assign(__assign({}, defaultArgs), { hasBadge: true, badgeText: "Yeni" }),
|
|
88
93
|
};
|
|
89
94
|
exports.WithHeaderDescription = {
|
|
90
|
-
|
|
95
|
+
name: 'Header Description',
|
|
96
|
+
args: __assign(__assign({}, defaultArgs), { headerImage: null, headerDescription: "Bu alan başlığın altında gösterilen açıklama metnidir.", hasTwoColumnHeader: true, hasHeaderBorder: true, headerSize: "medium" }),
|
|
91
97
|
};
|
|
92
98
|
exports.WithHeaderBackground = {
|
|
93
99
|
args: __assign(__assign({}, defaultArgs), { hasHeaderBackground: true }),
|
|
@@ -190,7 +196,7 @@ exports.WithContent = {
|
|
|
190
196
|
headerPrimaryButtonAction: function () { return console.log("edit clicked"); },
|
|
191
197
|
headerImage: null,
|
|
192
198
|
list: [],
|
|
193
|
-
content: subscriptionRuleContent("Çekirdek kahve ürünleri için varsayılan abonelik kuralı. Müşteriler istedikleri zaman aboneliklerini duraklatabilir veya iptal edebilir.", ["5 Ürün kullanıyor", "32 Aktif abone", "Son güncelleme: iki hafta önce"]),
|
|
199
|
+
content: ((0, jsx_runtime_1.jsx)("div", __assign({ style: { padding: "16px 0 24px" } }, { children: subscriptionRuleContent("Çekirdek kahve ürünleri için varsayılan abonelik kuralı. Müşteriler istedikleri zaman aboneliklerini duraklatabilir veya iptal edebilir.", ["5 Ürün kullanıyor", "32 Aktif abone", "Son güncelleme: iki hafta önce"]) }))),
|
|
194
200
|
},
|
|
195
201
|
decorators: [
|
|
196
202
|
function (Story) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))); },
|
|
@@ -208,7 +214,7 @@ var CategoryListHeader = styled_components_1.default.div(templateObject_6 || (te
|
|
|
208
214
|
var CategoryListHeaderCount = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: nowrap;\n"], ["\n white-space: nowrap;\n"])));
|
|
209
215
|
var CategoryListHeaderAction = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n text-align: right;\n"], ["\n display: block;\n text-align: right;\n"])));
|
|
210
216
|
exports.CategoryStructure = {
|
|
211
|
-
render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "900px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00C7ekirdek kahve", middleTitle: "10 \u00FCr\u00FCn",
|
|
217
|
+
render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "900px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00C7ekirdek kahve", middleTitle: "10 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: [
|
|
212
218
|
{
|
|
213
219
|
name: "Blend",
|
|
214
220
|
middleTitle: "7 ürün",
|
|
@@ -227,7 +233,7 @@ exports.CategoryStructure = {
|
|
|
227
233
|
buttonAction: function () { return console.log("subcategory edit"); },
|
|
228
234
|
onClick: function () { return console.log("subcategory navigate"); },
|
|
229
235
|
},
|
|
230
|
-
] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00D6\u011F\u00FCt\u00FClm\u00FC\u015F kahve", middleTitle: "7 \u00FCr\u00FCn",
|
|
236
|
+
] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00D6\u011F\u00FCt\u00FClm\u00FC\u015F kahve", middleTitle: "7 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: [
|
|
231
237
|
{
|
|
232
238
|
name: "Terra",
|
|
233
239
|
middleTitle: "1 ürün",
|
|
@@ -237,9 +243,9 @@ exports.CategoryStructure = {
|
|
|
237
243
|
buttonAction: function () { return console.log("subcategory edit"); },
|
|
238
244
|
onClick: function () { return console.log("subcategory navigate"); },
|
|
239
245
|
},
|
|
240
|
-
] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Espresso", middleTitle: "1 \u00FCr\u00FCn",
|
|
246
|
+
] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Espresso", middleTitle: "1 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [] })] }))); },
|
|
241
247
|
};
|
|
242
248
|
exports.AddProductToCategory = {
|
|
243
|
-
render: function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Bu kategoriye \u00FCr\u00FCn ekle", titleSize: "lg", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderBackButton: true, onHeaderBack: function () { return console.log("back clicked"); }, list: [] }) }))); },
|
|
249
|
+
render: function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Bu kategoriye \u00FCr\u00FCn ekle", titleSize: "lg", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderBackButton: true, headerSize: "medium", onHeaderBack: function () { return console.log("back clicked"); }, list: [] }) }))); },
|
|
244
250
|
};
|
|
245
251
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var react_1 = require("react");
|
|
19
|
+
var react_2 = require("@tiptap/react");
|
|
20
|
+
var starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
|
|
21
|
+
var extension_underline_1 = __importDefault(require("@tiptap/extension-underline"));
|
|
22
|
+
var extension_placeholder_1 = __importDefault(require("@tiptap/extension-placeholder"));
|
|
23
|
+
var props_1 = require("./props");
|
|
24
|
+
var RichTextEditor_styled_1 = require("./RichTextEditor.styled");
|
|
25
|
+
var VariableNode_1 = require("./extensions/VariableNode");
|
|
26
|
+
var sanitize_1 = require("./utils/sanitize");
|
|
27
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
28
|
+
var BoldIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5h6.5a3.5 3.5 0 0 1 0 7H7V5Zm0 7h7.5a3.5 3.5 0 0 1 0 7H7v-7Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }))); };
|
|
29
|
+
var ItalicIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10 5h8M6 19h8M14.5 5l-5 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
|
|
30
|
+
var UnderlineIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 5v6a5 5 0 0 0 10 0V5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 19h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
|
|
31
|
+
var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.5 8.5C9.2 7 10.5 6 12.2 6c2.1 0 3.8 1.2 3.8 3 0 .8-.3 1.5-.9 2M15.5 15.5c-.7 1.5-2 2.5-3.7 2.5-2.1 0-3.8-1.2-3.8-3 0-.8.3-1.5.9-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
|
|
32
|
+
var OrderedListIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 6h10M10 12h10M10 18h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 5.5h1.5V9M4 9h3M4.5 14.5c.8 0 1.5.5 1.5 1.25S5.3 17 4.5 17H4v1.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
33
|
+
var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
|
|
34
|
+
var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.RichTextEditorDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.RichTextEditorDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.RichTextEditorDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.RichTextEditorDefault.errorMessage : _g, className = _a.className, id = _a.id, _h = _a.minHeight, minHeight = _h === void 0 ? props_1.RichTextEditorDefault.minHeight : _h;
|
|
35
|
+
var _j = (0, react_1.useState)(false), focused = _j[0], setFocused = _j[1];
|
|
36
|
+
var isControlled = value !== undefined;
|
|
37
|
+
var editor = (0, react_2.useEditor)({
|
|
38
|
+
immediatelyRender: false,
|
|
39
|
+
extensions: [
|
|
40
|
+
starter_kit_1.default.configure({
|
|
41
|
+
heading: false,
|
|
42
|
+
code: false,
|
|
43
|
+
codeBlock: false,
|
|
44
|
+
blockquote: false,
|
|
45
|
+
horizontalRule: false,
|
|
46
|
+
dropcursor: false,
|
|
47
|
+
gapcursor: false,
|
|
48
|
+
hardBreak: {
|
|
49
|
+
keepMarks: true,
|
|
50
|
+
},
|
|
51
|
+
}),
|
|
52
|
+
extension_underline_1.default,
|
|
53
|
+
extension_placeholder_1.default.configure({
|
|
54
|
+
placeholder: placeholder || '',
|
|
55
|
+
}),
|
|
56
|
+
VariableNode_1.VariableNode,
|
|
57
|
+
],
|
|
58
|
+
content: (0, sanitize_1.prepareEditorHtml)(isControlled ? (value || '') : defaultValue),
|
|
59
|
+
editable: !disabled,
|
|
60
|
+
editorProps: {
|
|
61
|
+
attributes: __assign(__assign({}, (id ? { id: id } : {})), { 'aria-invalid': hasError ? 'true' : 'false' }),
|
|
62
|
+
transformPastedHTML: function (html) {
|
|
63
|
+
return (0, sanitize_1.prepareEditorHtml)(html);
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
onUpdate: function (_a) {
|
|
67
|
+
var currentEditor = _a.editor;
|
|
68
|
+
onChange === null || onChange === void 0 ? void 0 : onChange((0, sanitize_1.serializeEditorHtml)(currentEditor.getHTML()));
|
|
69
|
+
},
|
|
70
|
+
onFocus: function () { return setFocused(true); },
|
|
71
|
+
onBlur: function () {
|
|
72
|
+
setFocused(false);
|
|
73
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
(0, react_1.useEffect)(function () {
|
|
77
|
+
if (!editor)
|
|
78
|
+
return;
|
|
79
|
+
editor.setEditable(!disabled);
|
|
80
|
+
}, [disabled, editor]);
|
|
81
|
+
(0, react_1.useEffect)(function () {
|
|
82
|
+
if (!editor || !isControlled)
|
|
83
|
+
return;
|
|
84
|
+
var nextHtml = (0, sanitize_1.serializeEditorHtml)(value || '');
|
|
85
|
+
var currentHtml = (0, sanitize_1.serializeEditorHtml)(editor.getHTML());
|
|
86
|
+
if (nextHtml !== currentHtml) {
|
|
87
|
+
editor.commands.setContent((0, sanitize_1.prepareEditorHtml)(value || ''), { emitUpdate: false });
|
|
88
|
+
}
|
|
89
|
+
}, [value, isControlled, editor]);
|
|
90
|
+
(0, react_1.useImperativeHandle)(ref, function () { return ({
|
|
91
|
+
insertVariable: function (variable) {
|
|
92
|
+
if (!editor || disabled)
|
|
93
|
+
return;
|
|
94
|
+
editor.chain().focus().insertVariable({
|
|
95
|
+
id: variable.id,
|
|
96
|
+
label: variable.label,
|
|
97
|
+
}).run();
|
|
98
|
+
},
|
|
99
|
+
getHTML: function () { return (0, sanitize_1.serializeEditorHtml)((editor === null || editor === void 0 ? void 0 : editor.getHTML()) || ''); },
|
|
100
|
+
getEditor: function () { return editor; },
|
|
101
|
+
focus: function () {
|
|
102
|
+
editor === null || editor === void 0 ? void 0 : editor.chain().focus().run();
|
|
103
|
+
},
|
|
104
|
+
clear: function () {
|
|
105
|
+
editor === null || editor === void 0 ? void 0 : editor.commands.clearContent(true);
|
|
106
|
+
},
|
|
107
|
+
}); }, [editor, disabled]);
|
|
108
|
+
if (!editor)
|
|
109
|
+
return null;
|
|
110
|
+
return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
|
|
111
|
+
});
|
|
112
|
+
RichTextEditor.displayName = 'RichTextEditor';
|
|
113
|
+
exports.default = RichTextEditor;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
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;
|
|
3
|
+
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;
|
|
4
|
+
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"> & {
|
|
5
|
+
$hasError?: boolean;
|
|
6
|
+
$disabled?: boolean;
|
|
7
|
+
$focused?: boolean;
|
|
8
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasError" | "$disabled" | "$focused"> & {
|
|
9
|
+
$hasError?: boolean;
|
|
10
|
+
$disabled?: boolean;
|
|
11
|
+
$focused?: boolean;
|
|
12
|
+
}, never>>> & string;
|
|
13
|
+
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;
|
|
14
|
+
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"> & {
|
|
15
|
+
$active?: boolean;
|
|
16
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$active"> & {
|
|
17
|
+
$active?: boolean;
|
|
18
|
+
}, never>>> & string;
|
|
19
|
+
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;
|
|
20
|
+
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"> & {
|
|
21
|
+
$minHeight?: string;
|
|
22
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
|
|
23
|
+
$minHeight?: string;
|
|
24
|
+
}, never>>> & string;
|
|
25
|
+
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;
|
|
26
|
+
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;
|
|
27
|
+
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;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
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"])));
|
|
13
|
+
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"])));
|
|
14
|
+
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'); });
|
|
15
|
+
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"])));
|
|
16
|
+
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)'); });
|
|
17
|
+
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"])));
|
|
18
|
+
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'; });
|
|
19
|
+
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"])));
|
|
20
|
+
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"])));
|
|
21
|
+
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"])));
|
|
22
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var react_1 = require("@tiptap/react");
|
|
19
|
+
var Badges_1 = __importDefault(require("../../Badges"));
|
|
20
|
+
var VariableBadgeView = function (_a) {
|
|
21
|
+
var node = _a.node;
|
|
22
|
+
var label = node.attrs.label || node.attrs.id || '';
|
|
23
|
+
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 }) })));
|
|
24
|
+
};
|
|
25
|
+
exports.default = VariableBadgeView;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Node } from '@tiptap/core';
|
|
2
|
+
export type VariableAttributes = {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
};
|
|
6
|
+
declare module '@tiptap/core' {
|
|
7
|
+
interface Commands<ReturnType> {
|
|
8
|
+
variable: {
|
|
9
|
+
insertVariable: (attrs: VariableAttributes) => ReturnType;
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
export declare const VariableNode: Node<any, any>;
|
|
14
|
+
export default VariableNode;
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VariableNode = void 0;
|
|
7
|
+
var core_1 = require("@tiptap/core");
|
|
8
|
+
var react_1 = require("@tiptap/react");
|
|
9
|
+
var VariableBadgeView_1 = __importDefault(require("./VariableBadgeView"));
|
|
10
|
+
exports.VariableNode = core_1.Node.create({
|
|
11
|
+
name: 'variable',
|
|
12
|
+
group: 'inline',
|
|
13
|
+
inline: true,
|
|
14
|
+
atom: true,
|
|
15
|
+
selectable: true,
|
|
16
|
+
addAttributes: function () {
|
|
17
|
+
return {
|
|
18
|
+
id: {
|
|
19
|
+
default: null,
|
|
20
|
+
parseHTML: function (element) { return element.getAttribute('data-id'); },
|
|
21
|
+
renderHTML: function (attributes) {
|
|
22
|
+
if (!attributes.id)
|
|
23
|
+
return {};
|
|
24
|
+
return { 'data-id': attributes.id };
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
label: {
|
|
28
|
+
default: null,
|
|
29
|
+
parseHTML: function (element) { return element.getAttribute('data-label'); },
|
|
30
|
+
renderHTML: function (attributes) {
|
|
31
|
+
if (!attributes.label)
|
|
32
|
+
return {};
|
|
33
|
+
return { 'data-label': attributes.label };
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
},
|
|
38
|
+
parseHTML: function () {
|
|
39
|
+
return [
|
|
40
|
+
{
|
|
41
|
+
tag: 'span[data-variable]',
|
|
42
|
+
},
|
|
43
|
+
];
|
|
44
|
+
},
|
|
45
|
+
renderHTML: function (_a) {
|
|
46
|
+
var node = _a.node, HTMLAttributes = _a.HTMLAttributes;
|
|
47
|
+
return [
|
|
48
|
+
'span',
|
|
49
|
+
(0, core_1.mergeAttributes)(HTMLAttributes, {
|
|
50
|
+
'data-variable': '',
|
|
51
|
+
class: 'rte-variable',
|
|
52
|
+
contenteditable: 'false',
|
|
53
|
+
}),
|
|
54
|
+
node.attrs.label || node.attrs.id || '',
|
|
55
|
+
];
|
|
56
|
+
},
|
|
57
|
+
addNodeView: function () {
|
|
58
|
+
return (0, react_1.ReactNodeViewRenderer)(VariableBadgeView_1.default);
|
|
59
|
+
},
|
|
60
|
+
addCommands: function () {
|
|
61
|
+
var _this = this;
|
|
62
|
+
return {
|
|
63
|
+
insertVariable: function (attrs) {
|
|
64
|
+
return function (_a) {
|
|
65
|
+
var commands = _a.commands;
|
|
66
|
+
return commands.insertContent({
|
|
67
|
+
type: _this.name,
|
|
68
|
+
attrs: attrs,
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
},
|
|
74
|
+
});
|
|
75
|
+
exports.default = exports.VariableNode;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { default } from './RichTextEditor';
|
|
2
|
+
export type { RichTextEditorProps, RichTextEditorRef, RichTextVariable } from './props';
|
|
3
|
+
export { VariableNode } from './extensions/VariableNode';
|
|
4
|
+
export { sanitizeHtml, serializeEditorHtml, prepareEditorHtml } from './utils/sanitize';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.prepareEditorHtml = exports.serializeEditorHtml = exports.sanitizeHtml = exports.VariableNode = exports.default = void 0;
|
|
7
|
+
var RichTextEditor_1 = require("./RichTextEditor");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(RichTextEditor_1).default; } });
|
|
9
|
+
var VariableNode_1 = require("./extensions/VariableNode");
|
|
10
|
+
Object.defineProperty(exports, "VariableNode", { enumerable: true, get: function () { return VariableNode_1.VariableNode; } });
|
|
11
|
+
var sanitize_1 = require("./utils/sanitize");
|
|
12
|
+
Object.defineProperty(exports, "sanitizeHtml", { enumerable: true, get: function () { return sanitize_1.sanitizeHtml; } });
|
|
13
|
+
Object.defineProperty(exports, "serializeEditorHtml", { enumerable: true, get: function () { return sanitize_1.serializeEditorHtml; } });
|
|
14
|
+
Object.defineProperty(exports, "prepareEditorHtml", { enumerable: true, get: function () { return sanitize_1.prepareEditorHtml; } });
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { Editor } from '@tiptap/react';
|
|
2
|
+
export type RichTextVariable = {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
};
|
|
6
|
+
export interface RichTextEditorProps {
|
|
7
|
+
label?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
value?: string;
|
|
10
|
+
defaultValue?: string;
|
|
11
|
+
onChange?: (html: string) => void;
|
|
12
|
+
onBlur?: () => void;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
hasError?: boolean;
|
|
15
|
+
errorMessage?: string;
|
|
16
|
+
className?: string;
|
|
17
|
+
id?: string;
|
|
18
|
+
minHeight?: string;
|
|
19
|
+
/** Story / consumer tarafında değişken listesi göstermek için opsiyonel */
|
|
20
|
+
variables?: RichTextVariable[];
|
|
21
|
+
}
|
|
22
|
+
export interface RichTextEditorRef {
|
|
23
|
+
insertVariable: (variable: RichTextVariable) => void;
|
|
24
|
+
getHTML: () => string;
|
|
25
|
+
getEditor: () => Editor | null;
|
|
26
|
+
focus: () => void;
|
|
27
|
+
clear: () => void;
|
|
28
|
+
}
|
|
29
|
+
export declare const RichTextEditorDefault: {
|
|
30
|
+
label: string;
|
|
31
|
+
placeholder: string;
|
|
32
|
+
defaultValue: string;
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
hasError: boolean;
|
|
35
|
+
errorMessage: string;
|
|
36
|
+
minHeight: string;
|
|
37
|
+
variables: RichTextVariable[];
|
|
38
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.RichTextEditorDefault = void 0;
|
|
4
|
+
exports.RichTextEditorDefault = {
|
|
5
|
+
label: null,
|
|
6
|
+
placeholder: 'Metin yaz…',
|
|
7
|
+
defaultValue: '',
|
|
8
|
+
disabled: false,
|
|
9
|
+
hasError: false,
|
|
10
|
+
errorMessage: null,
|
|
11
|
+
minHeight: '200px',
|
|
12
|
+
variables: [],
|
|
13
|
+
};
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { RichTextEditorRef } from '../props';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: React.ForwardRefExoticComponent<import("../props").RichTextEditorProps & React.RefAttributes<RichTextEditorRef>>;
|
|
6
|
+
tags: string[];
|
|
7
|
+
argTypes: {
|
|
8
|
+
label: {
|
|
9
|
+
control: string;
|
|
10
|
+
};
|
|
11
|
+
placeholder: {
|
|
12
|
+
control: string;
|
|
13
|
+
};
|
|
14
|
+
disabled: {
|
|
15
|
+
control: string;
|
|
16
|
+
};
|
|
17
|
+
hasError: {
|
|
18
|
+
control: string;
|
|
19
|
+
};
|
|
20
|
+
errorMessage: {
|
|
21
|
+
control: string;
|
|
22
|
+
};
|
|
23
|
+
minHeight: {
|
|
24
|
+
control: string;
|
|
25
|
+
};
|
|
26
|
+
onChange: {
|
|
27
|
+
control: boolean;
|
|
28
|
+
};
|
|
29
|
+
onBlur: {
|
|
30
|
+
control: boolean;
|
|
31
|
+
};
|
|
32
|
+
value: {
|
|
33
|
+
control: boolean;
|
|
34
|
+
};
|
|
35
|
+
defaultValue: {
|
|
36
|
+
control: boolean;
|
|
37
|
+
};
|
|
38
|
+
variables: {
|
|
39
|
+
control: boolean;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
export default _default;
|
|
44
|
+
export declare const Default: {
|
|
45
|
+
args: {
|
|
46
|
+
label: string;
|
|
47
|
+
placeholder: string;
|
|
48
|
+
minHeight: string;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
export declare const WithSampleContent: {
|
|
52
|
+
name: string;
|
|
53
|
+
args: {
|
|
54
|
+
label: string;
|
|
55
|
+
defaultValue: string;
|
|
56
|
+
minHeight: string;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
export declare const WithError: {
|
|
60
|
+
args: {
|
|
61
|
+
label: string;
|
|
62
|
+
hasError: boolean;
|
|
63
|
+
errorMessage: string;
|
|
64
|
+
defaultValue: string;
|
|
65
|
+
minHeight: string;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
export declare const Disabled: {
|
|
69
|
+
args: {
|
|
70
|
+
label: string;
|
|
71
|
+
disabled: boolean;
|
|
72
|
+
defaultValue: string;
|
|
73
|
+
minHeight: string;
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
export declare const InsertVariables: {
|
|
77
|
+
name: string;
|
|
78
|
+
render: () => React.JSX.Element;
|
|
79
|
+
parameters: {
|
|
80
|
+
docs: {
|
|
81
|
+
description: {
|
|
82
|
+
story: string;
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.Default = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var react_1 = require("react");
|
|
20
|
+
var RichTextEditor_1 = __importDefault(require("../RichTextEditor"));
|
|
21
|
+
var RichTextEditor_styled_1 = require("../RichTextEditor.styled");
|
|
22
|
+
var SAMPLE_VARIABLES = [
|
|
23
|
+
{ id: 'name', label: 'Ad' },
|
|
24
|
+
{ id: 'order_no', label: 'Sipariş no' },
|
|
25
|
+
{ id: 'amount', label: 'Tutar' },
|
|
26
|
+
];
|
|
27
|
+
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";
|
|
28
|
+
exports.default = {
|
|
29
|
+
title: 'Components/RichTextEditor',
|
|
30
|
+
component: RichTextEditor_1.default,
|
|
31
|
+
tags: ['autodocs'],
|
|
32
|
+
argTypes: {
|
|
33
|
+
label: { control: 'text' },
|
|
34
|
+
placeholder: { control: 'text' },
|
|
35
|
+
disabled: { control: 'boolean' },
|
|
36
|
+
hasError: { control: 'boolean' },
|
|
37
|
+
errorMessage: { control: 'text' },
|
|
38
|
+
minHeight: { control: 'text' },
|
|
39
|
+
onChange: { control: false },
|
|
40
|
+
onBlur: { control: false },
|
|
41
|
+
value: { control: false },
|
|
42
|
+
defaultValue: { control: false },
|
|
43
|
+
variables: { control: false },
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
exports.Default = {
|
|
47
|
+
args: {
|
|
48
|
+
label: 'Mail metni',
|
|
49
|
+
placeholder: 'Metin yaz…',
|
|
50
|
+
minHeight: '220px',
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
exports.WithSampleContent = {
|
|
54
|
+
name: 'Örnek içerik + değişken chip’leri',
|
|
55
|
+
args: {
|
|
56
|
+
label: 'Mail metni',
|
|
57
|
+
defaultValue: SAMPLE_CONTENT,
|
|
58
|
+
minHeight: '240px',
|
|
59
|
+
},
|
|
60
|
+
};
|
|
61
|
+
exports.WithError = {
|
|
62
|
+
args: {
|
|
63
|
+
label: 'Mail metni',
|
|
64
|
+
hasError: true,
|
|
65
|
+
errorMessage: 'Mail metni zorunludur.',
|
|
66
|
+
defaultValue: '<p></p>',
|
|
67
|
+
minHeight: '180px',
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
exports.Disabled = {
|
|
71
|
+
args: {
|
|
72
|
+
label: 'Mail metni',
|
|
73
|
+
disabled: true,
|
|
74
|
+
defaultValue: SAMPLE_CONTENT,
|
|
75
|
+
minHeight: '220px',
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
var InsertVariableStory = function () {
|
|
79
|
+
var editorRef = (0, react_1.useRef)(null);
|
|
80
|
+
var _a = (0, react_1.useState)(SAMPLE_CONTENT), html = _a[0], setHtml = _a[1];
|
|
81
|
+
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: {
|
|
82
|
+
marginTop: '0.5rem',
|
|
83
|
+
padding: '0.75rem',
|
|
84
|
+
borderRadius: '0.5rem',
|
|
85
|
+
background: 'var(--dark-opacity-3)',
|
|
86
|
+
fontSize: 12,
|
|
87
|
+
whiteSpace: 'pre-wrap',
|
|
88
|
+
wordBreak: 'break-word',
|
|
89
|
+
} }, { children: html }))] }))] })));
|
|
90
|
+
};
|
|
91
|
+
exports.InsertVariables = {
|
|
92
|
+
name: 'Değişken ekleme (ref API)',
|
|
93
|
+
render: function () { return (0, jsx_runtime_1.jsx)(InsertVariableStory, {}); },
|
|
94
|
+
parameters: {
|
|
95
|
+
docs: {
|
|
96
|
+
description: {
|
|
97
|
+
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 ",
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const sanitizeHtml: (html: string) => string;
|
|
2
|
+
/**
|
|
3
|
+
* TipTap HTML → dışarı verilen HTML
|
|
4
|
+
* Boş paragraflar (Enter + yazı yok) <br> olur.
|
|
5
|
+
* İçinde metin olan paragraflar <p> olarak kalır.
|
|
6
|
+
*/
|
|
7
|
+
export declare const serializeEditorHtml: (html: string) => string;
|
|
8
|
+
/**
|
|
9
|
+
* Dışarıdan gelen HTML → TipTap'in düzenleyebileceği HTML
|
|
10
|
+
* Blok seviyesindeki <br> etiketleri boş <p> olur (Enter satırı).
|
|
11
|
+
* <p> içindeki <br> hard-break olarak kalır.
|
|
12
|
+
*/
|
|
13
|
+
export declare const prepareEditorHtml: (html: string) => string;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.prepareEditorHtml = exports.serializeEditorHtml = exports.sanitizeHtml = void 0;
|
|
7
|
+
var dompurify_1 = __importDefault(require("dompurify"));
|
|
8
|
+
var ALLOWED_TAGS = [
|
|
9
|
+
'p',
|
|
10
|
+
'br',
|
|
11
|
+
'strong',
|
|
12
|
+
'b',
|
|
13
|
+
'em',
|
|
14
|
+
'i',
|
|
15
|
+
'u',
|
|
16
|
+
's',
|
|
17
|
+
'strike',
|
|
18
|
+
'ul',
|
|
19
|
+
'ol',
|
|
20
|
+
'li',
|
|
21
|
+
'span',
|
|
22
|
+
];
|
|
23
|
+
var ALLOWED_ATTR = [
|
|
24
|
+
'class',
|
|
25
|
+
'data-variable',
|
|
26
|
+
'data-id',
|
|
27
|
+
'data-label',
|
|
28
|
+
];
|
|
29
|
+
var EMPTY_PARAGRAPH_REGEX = /<p>(?:\s| |<br\s*\/?>)*<\/p>/gi;
|
|
30
|
+
var sanitizeHtml = function (html) {
|
|
31
|
+
if (!html)
|
|
32
|
+
return '';
|
|
33
|
+
return dompurify_1.default.sanitize(html, {
|
|
34
|
+
ALLOWED_TAGS: ALLOWED_TAGS,
|
|
35
|
+
ALLOWED_ATTR: ALLOWED_ATTR,
|
|
36
|
+
KEEP_CONTENT: true,
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
exports.sanitizeHtml = sanitizeHtml;
|
|
40
|
+
/**
|
|
41
|
+
* TipTap HTML → dışarı verilen HTML
|
|
42
|
+
* Boş paragraflar (Enter + yazı yok) <br> olur.
|
|
43
|
+
* İçinde metin olan paragraflar <p> olarak kalır.
|
|
44
|
+
*/
|
|
45
|
+
var serializeEditorHtml = function (html) {
|
|
46
|
+
var sanitized = (0, exports.sanitizeHtml)(html);
|
|
47
|
+
if (!sanitized)
|
|
48
|
+
return '';
|
|
49
|
+
var serialized = sanitized.replace(EMPTY_PARAGRAPH_REGEX, '<br>');
|
|
50
|
+
if (/^(?:<br\s*\/?>|\s)*$/i.test(serialized)) {
|
|
51
|
+
return '';
|
|
52
|
+
}
|
|
53
|
+
return serialized;
|
|
54
|
+
};
|
|
55
|
+
exports.serializeEditorHtml = serializeEditorHtml;
|
|
56
|
+
/**
|
|
57
|
+
* Dışarıdan gelen HTML → TipTap'in düzenleyebileceği HTML
|
|
58
|
+
* Blok seviyesindeki <br> etiketleri boş <p> olur (Enter satırı).
|
|
59
|
+
* <p> içindeki <br> hard-break olarak kalır.
|
|
60
|
+
*/
|
|
61
|
+
var prepareEditorHtml = function (html) {
|
|
62
|
+
var sanitized = (0, exports.sanitizeHtml)(html);
|
|
63
|
+
if (!sanitized)
|
|
64
|
+
return '';
|
|
65
|
+
if (typeof DOMParser === 'undefined') {
|
|
66
|
+
return sanitized;
|
|
67
|
+
}
|
|
68
|
+
var parser = new DOMParser();
|
|
69
|
+
var doc = parser.parseFromString("<div id=\"rte-root\">".concat(sanitized, "</div>"), 'text/html');
|
|
70
|
+
var root = doc.getElementById('rte-root');
|
|
71
|
+
if (!root)
|
|
72
|
+
return sanitized;
|
|
73
|
+
var replaceBlockBreaks = function (parent) {
|
|
74
|
+
Array.from(parent.childNodes).forEach(function (child) {
|
|
75
|
+
if (child.nodeType !== Node.ELEMENT_NODE)
|
|
76
|
+
return;
|
|
77
|
+
var element = child;
|
|
78
|
+
var tag = element.tagName;
|
|
79
|
+
if (tag === 'BR') {
|
|
80
|
+
var emptyParagraph = doc.createElement('p');
|
|
81
|
+
parent.replaceChild(emptyParagraph, element);
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
if (tag === 'P' || tag === 'SPAN') {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV') {
|
|
88
|
+
replaceBlockBreaks(element);
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
replaceBlockBreaks(root);
|
|
93
|
+
return (0, exports.sanitizeHtml)(root.innerHTML);
|
|
94
|
+
};
|
|
95
|
+
exports.prepareEditorHtml = prepareEditorHtml;
|
package/dist/index.d.ts
CHANGED
|
@@ -64,4 +64,5 @@ import CheckboxGroup from "./components/CheckboxGroup";
|
|
|
64
64
|
import QuantitySelector from "./components/QuantitySelector";
|
|
65
65
|
import Tag from "./components/Tag";
|
|
66
66
|
import TagInput from "./components/TagInput";
|
|
67
|
-
|
|
67
|
+
import RichTextEditor from "./components/RichTextEditor";
|
|
68
|
+
export { Button, Breadcrumbs, CategoryMenu, Checkbox, CircleProgress, Input, Modal, OtpInput, Stepper, Alert, Agreement, Icon, RadioButton, ActionButton, Textarea, SearchBox, Divider, Accordion, toast, Toaster, SuggestBox, Badges, SelectBox, TextLink, Tooltip, InsuranceBox, ListGroup, InfoBox, CouponCode, ShoppingCartProduct, Loader, InlineProgress, Dropdown, CampaignCard, initReactI18next, initi18n, enLocale, trLocale, useTranslation, ReviewCard, AddressCard, InstallmentBox, AutocompleteInput, BannerCard, ProductCardVertical, ProductCardHorizontal, ProductCardHorizontalSm, ProductCardHorizontalMd, ProductCardCheckbox, ProductCardRadio, Tabs, PaymentCart, OptionMenu, DropdownButton, Table, DescriptionCard, Pagination, SkeletonLoader, RadioScale, BlogCard, ReviewBlock, VideoCard, StepSlider, RadioGroup, CheckboxGroup, QuantitySelector, Tag, TagInput, RichTextEditor };
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ProductCardRadio = exports.ProductCardCheckbox = exports.ProductCardHorizontalMd = exports.ProductCardHorizontalSm = exports.ProductCardHorizontal = exports.ProductCardVertical = exports.BannerCard = exports.AutocompleteInput = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.useTranslation = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.SuggestBox = exports.Toaster = exports.toast = exports.Accordion = exports.Divider = exports.SearchBox = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
|
|
7
|
-
exports.TagInput = exports.Tag = exports.QuantitySelector = exports.CheckboxGroup = exports.RadioGroup = exports.StepSlider = exports.VideoCard = exports.ReviewBlock = exports.BlogCard = exports.RadioScale = exports.SkeletonLoader = exports.Pagination = exports.DescriptionCard = exports.Table = exports.DropdownButton = exports.OptionMenu = exports.PaymentCart = exports.Tabs = void 0;
|
|
7
|
+
exports.RichTextEditor = exports.TagInput = exports.Tag = exports.QuantitySelector = exports.CheckboxGroup = exports.RadioGroup = exports.StepSlider = exports.VideoCard = exports.ReviewBlock = exports.BlogCard = exports.RadioScale = exports.SkeletonLoader = exports.Pagination = exports.DescriptionCard = exports.Table = exports.DropdownButton = exports.OptionMenu = exports.PaymentCart = exports.Tabs = void 0;
|
|
8
8
|
var react_i18next_1 = require("react-i18next");
|
|
9
9
|
Object.defineProperty(exports, "initReactI18next", { enumerable: true, get: function () { return react_i18next_1.initReactI18next; } });
|
|
10
10
|
Object.defineProperty(exports, "useTranslation", { enumerable: true, get: function () { return react_i18next_1.useTranslation; } });
|
|
@@ -139,3 +139,5 @@ var Tag_1 = __importDefault(require("./components/Tag"));
|
|
|
139
139
|
exports.Tag = Tag_1.default;
|
|
140
140
|
var TagInput_1 = __importDefault(require("./components/TagInput"));
|
|
141
141
|
exports.TagInput = TagInput_1.default;
|
|
142
|
+
var RichTextEditor_1 = __importDefault(require("./components/RichTextEditor"));
|
|
143
|
+
exports.RichTextEditor = RichTextEditor_1.default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "krl-alfred",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.23.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -13,6 +13,11 @@
|
|
|
13
13
|
"@testing-library/jest-dom": "^5.16.5",
|
|
14
14
|
"@testing-library/react": "^14.0.0",
|
|
15
15
|
"@testing-library/user-event": "^14.4.3",
|
|
16
|
+
"@tiptap/extension-placeholder": "^3.27.3",
|
|
17
|
+
"@tiptap/extension-underline": "^3.27.3",
|
|
18
|
+
"@tiptap/pm": "^3.27.3",
|
|
19
|
+
"@tiptap/react": "^3.27.3",
|
|
20
|
+
"@tiptap/starter-kit": "^3.27.3",
|
|
16
21
|
"@types/jest": "^29.5.0",
|
|
17
22
|
"@types/node": "^18.15.11",
|
|
18
23
|
"@types/react": "^18.0.33",
|
|
@@ -22,6 +27,7 @@
|
|
|
22
27
|
"css-loader": "^6.7.3",
|
|
23
28
|
"date-fns": "^3.6.0",
|
|
24
29
|
"date-fns-tz": "^3.1.3",
|
|
30
|
+
"dompurify": "^3.4.11",
|
|
25
31
|
"i18next": "^23.7.6",
|
|
26
32
|
"plop": "^3.1.2",
|
|
27
33
|
"process": "^0.11.10",
|
|
@@ -100,6 +106,7 @@
|
|
|
100
106
|
"@storybook/react-webpack5": "10.2.7",
|
|
101
107
|
"@svgr/cli": "^7.0.0",
|
|
102
108
|
"@svgr/webpack": "^7.0.0",
|
|
109
|
+
"@types/dompurify": "^3.0.5",
|
|
103
110
|
"next": "^16.0.10",
|
|
104
111
|
"semantic-release": "^21.1.2",
|
|
105
112
|
"storybook": "10.2.7",
|