@quadrats/react 0.7.8 → 1.1.0

package/card/index.cjs.js

@@ -0,0 +1,242 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var toolbar = require('@quadrats/react/toolbar');
+var icons = require('@quadrats/icons');
+var components = require('@quadrats/react/components');
+var card = require('@quadrats/common/card');
+var utils = require('@quadrats/react/utils');
+
+function Card({ attributes, children, element, controller, }) {
+    const { setCardModalConfig, setConfirmModalConfig } = react.useModal();
+    const editor = react.useSlateStatic();
+    const path = react.ReactEditor.findPath(editor, element);
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: clsx('qdr-card', `qdr-card--${element.alignment}`) }),
+        React.createElement(toolbar.InlineToolbar, { className: "qdr-card__inline-toolbar", iconGroups: [
+                element.alignment === 'noImage'
+                    ? { icons: [] }
+                    : {
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: icons.BlockLeft,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'leftImageRightText',
+                                        path,
+                                    });
+                                },
+                                active: element.alignment === 'leftImageRightText',
+                            },
+                            {
+                                icon: icons.BlockRight,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'rightImageLeftText',
+                                        path,
+                                    });
+                                },
+                                active: element.alignment === 'rightImageLeftText',
+                            },
+                        ],
+                    },
+                {
+                    icons: [
+                        {
+                            icon: icons.Edit,
+                            onClick: () => {
+                                setCardModalConfig({
+                                    controller,
+                                    initialValue: {
+                                        values: {
+                                            alignment: element.alignment,
+                                            title: element.title,
+                                            description: element.description,
+                                            remark: element.remark,
+                                            linkText: element.linkText,
+                                            linkUrl: element.linkUrl,
+                                        },
+                                        imageItem: element.imageItem,
+                                        haveLink: element.haveLink,
+                                    },
+                                    onConfirm: ({ values, imageItem, haveLink }) => {
+                                        controller.updateCardElement({
+                                            editor,
+                                            cardValues: {
+                                                alignment: values.alignment,
+                                                imageItem,
+                                                title: values.title,
+                                                description: values.description,
+                                                remark: values.remark,
+                                                haveLink,
+                                                linkText: values.linkText,
+                                                linkUrl: values.linkUrl,
+                                            },
+                                            path,
+                                        });
+                                    },
+                                });
+                            },
+                        },
+                        {
+                            icon: icons.Trash,
+                            onClick: () => {
+                                if (controller.confirmModal) {
+                                    // TODO: i18n
+                                    setConfirmModalConfig({
+                                        title: '刪除卡片',
+                                        content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
+                                        confirmText: '刪除卡片',
+                                        onConfirm: () => {
+                                            core.Transforms.removeNodes(editor, { at: path });
+                                        },
+                                    });
+                                }
+                                else {
+                                    core.Transforms.removeNodes(editor, { at: path });
+                                }
+                            },
+                        },
+                    ],
+                },
+            ] }),
+        children));
+}
+function CardWithoutToolbar({ attributes, children, element, }) {
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: clsx('qdr-card', `qdr-card--${element.alignment}`) }), children));
+}
+
+function CardImage({ attributes, element, }) {
+    if (!element.src)
+        return null;
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-card__image-wrapper" }),
+        React.createElement("img", { draggable: false, className: "qdr-card__image", src: element.src, style: {
+                objectFit: element.ratio ? 'cover' : 'contain',
+                aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '1 / 1',
+            } })));
+}
+
+function CardContents({ attributes, element, }) {
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-card__contents" }),
+        React.createElement("div", { className: "qdr-card__content-wrapper" },
+            React.createElement("p", { className: "qdr-card__title" }, element.title),
+            React.createElement("p", { className: "qdr-card__description" }, element.description),
+            React.createElement("p", { className: "qdr-card__remark" }, element.remark)),
+        element.haveLink && (React.createElement("div", { className: clsx('qdr-card__link-wrapper', `qdr-card__link-wrapper--${element.alignment}`) },
+            React.createElement("a", { href: element.linkUrl, className: "qdr-card__link", target: "_blank", rel: "noreferrer" },
+                element.linkText,
+                React.createElement(components.Icon, { icon: icons.ChevronRight, width: 20, height: 20, className: "qdr-card__link-icon" }))))));
+}
+
+function CardPlaceholder({ attributes, element }) {
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-card__placeholder", contentEditable: false }),
+        React.createElement("div", { contentEditable: false, className: "qdr-card__placeholder-image-wrapper", style: { aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '1 / 1' } },
+            React.createElement(components.Icon, { icon: icons.Image, width: 48, height: 48 }),
+            React.createElement("div", { className: "qdr-card__placeholder-bg" })),
+        React.createElement("div", { contentEditable: false, className: "qdr-card__placeholder-contents" },
+            React.createElement("div", { className: "qdr-card__placeholder-content-wrapper" },
+                React.createElement("div", { className: "qdr-card__placeholder__line qdr-card__placeholder__line--small-radius", style: { height: 24 } }),
+                React.createElement("div", { className: "qdr-card__placeholder-description-wrapper" },
+                    React.createElement("div", { className: "qdr-card__placeholder__line", style: { marginRight: 'var(--qdr-spacing-12)' } }),
+                    React.createElement("div", { className: "qdr-card__placeholder__line" }),
+                    React.createElement("div", { className: "qdr-card__placeholder__line", style: { marginRight: 'var(--qdr-spacing-19)' } }))),
+            React.createElement("div", { className: "qdr-card__placeholder-link-wrapper" },
+                React.createElement("div", { className: "qdr-card__placeholder__line qdr-card__placeholder__line--small-radius", style: { width: 120, height: 32 } })))));
+}
+
+const defaultRenderCardElements = {
+    card: (props) => React.createElement(Card, Object.assign({}, props)),
+    card_image: (props) => React.createElement(CardImage, Object.assign({}, props)),
+    card_contents: (props) => React.createElement(CardContents, Object.assign({}, props)),
+};
+const defaultRenderCardPlaceholderElement = (props) => (React.createElement(CardPlaceholder, Object.assign({}, props)));
+
+function createReactCard(options) {
+    const core = card.createCard(options);
+    const { types, confirmModal } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: (setNeedConfirmModal, locale) => ({
+            onKeyDown(event, editor, next) {
+                if (event.key === 'Backspace') {
+                    utils.removePreviousElement({
+                        event,
+                        editor,
+                        type: types.card,
+                        confirmModal,
+                        doConfirm: (remove) => {
+                            if (setNeedConfirmModal) {
+                                // TODO: i18n
+                                console.log('locale', locale);
+                                setNeedConfirmModal({
+                                    title: '刪除卡片',
+                                    content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
+                                    confirmText: '刪除卡片',
+                                    onConfirm: () => {
+                                        remove();
+                                        setNeedConfirmModal(null);
+                                    },
+                                });
+                            }
+                        },
+                    });
+                }
+                next();
+            },
+        }), createRenderElement: (options = {}) => {
+            const renderCard = options.card || defaultRenderCardElements.card;
+            const renderCardImage = options.card_image || defaultRenderCardElements.card_image;
+            const renderCardContents = options.card_contents || defaultRenderCardElements.card_contents;
+            return react.createRenderElements([
+                {
+                    type: types.card,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCard({
+                            attributes,
+                            element,
+                            children,
+                            controller: core,
+                        });
+                    },
+                },
+                {
+                    type: types.card_image,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCardImage({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.card_contents,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCardContents({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+            ]);
+        }, createRenderPlaceholderElement: ({ render = defaultRenderCardPlaceholderElement } = {}) => react.createRenderElement({
+            type: card.CARD_PLACEHOLDER_TYPE,
+            render,
+        }) });
+}
+
+exports.Card = Card;
+exports.CardContents = CardContents;
+exports.CardImage = CardImage;
+exports.CardPlaceholder = CardPlaceholder;
+exports.CardWithoutToolbar = CardWithoutToolbar;
+exports.createReactCard = createReactCard;
+exports.defaultRenderCardElements = defaultRenderCardElements;
+exports.defaultRenderCardPlaceholderElement = defaultRenderCardPlaceholderElement;

package/card/index.d.ts

@@ -0,0 +1,7 @@
+export * from './typings';
+export * from './components/Card';
+export * from './components/CardImage';
+export * from './components/CardContents';
+export * from './components/CardPlaceholder';
+export * from './createReactCard';
+export * from './defaultRenderCardElements';

package/card/index.js

@@ -0,0 +1,6 @@
+export { Card, CardWithoutToolbar } from './components/Card.js';
+export { CardImage } from './components/CardImage.js';
+export { CardContents } from './components/CardContents.js';
+export { CardPlaceholder } from './components/CardPlaceholder.js';
+export { createReactCard } from './createReactCard.js';
+export { defaultRenderCardElements, defaultRenderCardPlaceholderElement } from './defaultRenderCardElements.js';

package/card/jsx-serializer/createJsxSerializeCard.d.ts

@@ -0,0 +1,5 @@
+import { CardTypeKey, CardImageTypeKey, CardContentsTypeKey } from '@quadrats/common/card';
+import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
+import { JsxSerializeCardElementProps, JsxSerializeCardImageElementProps, JsxSerializeCardContentsElementProps } from './typings';
+export type CreateJsxSerializeCardOptions = Partial<Record<CardTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCardElementProps>>> & Record<CardImageTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCardImageElementProps>>> & Record<CardContentsTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCardContentsElementProps>>>>;
+export declare function createJsxSerializeCard(options?: CreateJsxSerializeCardOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/card/jsx-serializer/createJsxSerializeCard.js

@@ -0,0 +1,48 @@
+import { CARD_TYPES } from '@quadrats/common/card';
+import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
+import { defaultRenderCardElements } from './defaultRenderCardElements.js';
+
+function createJsxSerializeCard(options = {}) {
+    const { card = {}, card_image = {}, card_contents = {} } = options;
+    const cardType = card.type || CARD_TYPES.card;
+    const imageType = card_image.type || CARD_TYPES.card_image;
+    const contentsType = card_contents.type || CARD_TYPES.card_contents;
+    const renderCard = card.render || defaultRenderCardElements.card;
+    const renderCardImage = card_image.render || defaultRenderCardElements.card_image;
+    const renderCardContents = card_contents.render || defaultRenderCardElements.card_contents;
+    return createJsxSerializeElements([
+        {
+            type: cardType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderCard({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: imageType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCardImage({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: contentsType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCardContents({
+                    children,
+                    element,
+                });
+            },
+        },
+    ]);
+}
+
+export { createJsxSerializeCard };

package/card/jsx-serializer/defaultRenderCardElements.d.ts

@@ -0,0 +1,2 @@
+import { CardJsxSerializeElements } from './typings';
+export declare const defaultRenderCardElements: CardJsxSerializeElements;

package/card/jsx-serializer/defaultRenderCardElements.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CardContents, CardImage, CardWithoutToolbar } from '@quadrats/react/card';
+
+const defaultRenderCardElements = {
+    card: (props) => React.createElement(CardWithoutToolbar, Object.assign({}, props)),
+    card_image: (props) => React.createElement(CardImage, Object.assign({}, props)),
+    card_contents: (props) => React.createElement(CardContents, Object.assign({}, props)),
+};
+
+export { defaultRenderCardElements };

package/card/jsx-serializer/index.cjs.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+var card = require('@quadrats/react/card');
+var card$1 = require('@quadrats/common/card');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+
+const defaultRenderCardElements = {
+    card: (props) => React.createElement(card.CardWithoutToolbar, Object.assign({}, props)),
+    card_image: (props) => React.createElement(card.CardImage, Object.assign({}, props)),
+    card_contents: (props) => React.createElement(card.CardContents, Object.assign({}, props)),
+};
+
+function createJsxSerializeCard(options = {}) {
+    const { card = {}, card_image = {}, card_contents = {} } = options;
+    const cardType = card.type || card$1.CARD_TYPES.card;
+    const imageType = card_image.type || card$1.CARD_TYPES.card_image;
+    const contentsType = card_contents.type || card$1.CARD_TYPES.card_contents;
+    const renderCard = card.render || defaultRenderCardElements.card;
+    const renderCardImage = card_image.render || defaultRenderCardElements.card_image;
+    const renderCardContents = card_contents.render || defaultRenderCardElements.card_contents;
+    return jsxSerializer.createJsxSerializeElements([
+        {
+            type: cardType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderCard({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: imageType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCardImage({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: contentsType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCardContents({
+                    children,
+                    element,
+                });
+            },
+        },
+    ]);
+}
+
+exports.createJsxSerializeCard = createJsxSerializeCard;
+exports.defaultRenderCardElements = defaultRenderCardElements;

package/card/jsx-serializer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export * from './defaultRenderCardElements';
+export * from './createJsxSerializeCard';

package/card/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderCardElements } from './defaultRenderCardElements.js';
+export { createJsxSerializeCard } from './createJsxSerializeCard.js';

package/card/jsx-serializer/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/card/jsx-serializer",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/card/jsx-serializer/typings.d.ts

@@ -0,0 +1,9 @@
+import { CardElement, CardImageElement, CardContentsElement, CardTypeKey, CardImageTypeKey, CardContentsTypeKey } from '@quadrats/common/card';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export interface JsxSerializeCardElementProps extends JsxSerializeElementProps<CardElement> {
+}
+export interface JsxSerializeCardImageElementProps extends JsxSerializeElementProps<CardImageElement> {
+}
+export interface JsxSerializeCardContentsElementProps extends JsxSerializeElementProps<CardContentsElement> {
+}
+export type CardJsxSerializeElements = Record<CardTypeKey, (props: JsxSerializeCardElementProps) => JSX.Element | null | undefined> & Record<CardImageTypeKey, (props: JsxSerializeCardImageElementProps) => JSX.Element | null | undefined> & Record<CardContentsTypeKey, (props: JsxSerializeCardContentsElementProps) => JSX.Element | null | undefined>;

package/card/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@quadrats/react/card",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/card/toolbar/CardToolbarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactCard } from '@quadrats/react/card';
+export interface CardToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactCard;
+}
+declare function CardToolbarIcon(props: CardToolbarIconProps): React.JSX.Element;
+export default CardToolbarIcon;

package/card/toolbar/CardToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useCardTool } from './useCardTool.js';
+
+function CardToolbarIcon(props) {
+    const { controller } = props, rest = __rest(props, ["controller"]);
+    const { onClick } = useCardTool(controller);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
+}
+
+export { CardToolbarIcon as default };

package/card/toolbar/index.cjs.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var React = require('react');
+var core = require('@quadrats/core');
+var card = require('@quadrats/common/card');
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useCardTool(controller) {
+    const editor = react.useSlateStatic();
+    const { setCardModalConfig, isModalClosed, setIsModalClosed } = react.useModal();
+    React.useEffect(() => {
+        const [match] = core.Editor.nodes(editor, {
+            at: [],
+            match: (node) => {
+                const placeholderElement = node;
+                return core.Element.isElement(placeholderElement) && placeholderElement.type === card.CARD_PLACEHOLDER_TYPE;
+            },
+        });
+        if (match) {
+            setCardModalConfig({
+                controller,
+                onConfirm: ({ values, imageItem, haveLink }) => {
+                    controller.removeCardPlaceholder(editor);
+                    controller.insertCard({
+                        editor,
+                        cardValues: {
+                            alignment: values.alignment,
+                            imageItem,
+                            title: values.title,
+                            description: values.description,
+                            remark: values.remark,
+                            haveLink,
+                            linkText: values.linkText,
+                            linkUrl: values.linkUrl,
+                        },
+                    });
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controller, editor]);
+    React.useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCardPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCardPlaceholder(editor);
+        },
+    };
+}
+
+function CardToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { onClick } = useCardTool(controller);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
+}
+
+exports.CardToolbarIcon = CardToolbarIcon;
+exports.useCardTool = useCardTool;

package/card/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useCardTool';
+export { CardToolbarIconProps, default as CardToolbarIcon } from './CardToolbarIcon';

package/card/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useCardTool } from './useCardTool.js';
+export { default as CardToolbarIcon } from './CardToolbarIcon.js';

package/card/toolbar/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/card/toolbar",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/card/toolbar/useCardTool.d.ts

@@ -0,0 +1,4 @@
+import { ReactCard } from '@quadrats/react/card';
+export declare function useCardTool(controller: ReactCard): {
+    onClick: () => void;
+};

package/card/toolbar/useCardTool.js

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { Editor, Element } from '@quadrats/core';
+import { CARD_PLACEHOLDER_TYPE } from '@quadrats/common/card';
+import { useSlateStatic, useModal } from '@quadrats/react';
+
+function useCardTool(controller) {
+    const editor = useSlateStatic();
+    const { setCardModalConfig, isModalClosed, setIsModalClosed } = useModal();
+    useEffect(() => {
+        const [match] = Editor.nodes(editor, {
+            at: [],
+            match: (node) => {
+                const placeholderElement = node;
+                return Element.isElement(placeholderElement) && placeholderElement.type === CARD_PLACEHOLDER_TYPE;
+            },
+        });
+        if (match) {
+            setCardModalConfig({
+                controller,
+                onConfirm: ({ values, imageItem, haveLink }) => {
+                    controller.removeCardPlaceholder(editor);
+                    controller.insertCard({
+                        editor,
+                        cardValues: {
+                            alignment: values.alignment,
+                            imageItem,
+                            title: values.title,
+                            description: values.description,
+                            remark: values.remark,
+                            haveLink,
+                            linkText: values.linkText,
+                            linkUrl: values.linkUrl,
+                        },
+                    });
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controller, editor]);
+    useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCardPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCardPlaceholder(editor);
+        },
+    };
+}
+
+export { useCardTool };

package/card/typings.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Card, CardElement, CardImageElement, CardContentsElement, CardPlaceholderElement, CardTypeKey, CardImageTypeKey, CardContentsTypeKey } from '@quadrats/common/card';
+import { RenderElementProps, Editor, WithCreateRenderElement, Handlers, ConfirmModalConfig } from '@quadrats/react';
+import { LocaleDefinition } from '@quadrats/locales';
+export interface RenderCardElementProps extends RenderElementProps<CardElement> {
+    controller: Card<Editor>;
+}
+export interface RenderCardImageElementProps extends RenderElementProps<CardImageElement> {
+}
+export interface RenderCardContentsElementProps extends RenderElementProps<CardContentsElement> {
+}
+export interface RenderCardPlaceholderElementProps extends RenderElementProps<CardPlaceholderElement> {
+}
+export type RenderCardPlaceholderElement = (props: RenderCardPlaceholderElementProps) => JSX.Element | null | undefined;
+export type CardRenderElements = Record<CardTypeKey, (props: RenderCardElementProps) => JSX.Element | null | undefined> & Record<CardImageTypeKey, (props: RenderCardImageElementProps) => JSX.Element | null | undefined> & Record<CardContentsTypeKey, (props: RenderCardContentsElementProps) => JSX.Element | null | undefined>;
+export type ReactCardCreateRenderElementOptions = {
+    [K in CardTypeKey | CardImageTypeKey | CardContentsTypeKey]?: CardRenderElements[K];
+};
+export interface ReactCard extends Card<Editor>, WithCreateRenderElement<[ReactCardCreateRenderElementOptions?]> {
+    createHandlers: (setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>, locale?: LocaleDefinition) => Handlers;
+    createRenderPlaceholderElement: (params_0?: {
+        render?: RenderCardPlaceholderElement;
+    }) => (props: RenderElementProps) => JSX.Element | null | undefined;
+}

package/carousel/carousel.css

@@ -0,0 +1 @@
+.qdr-carousel{position:relative;margin:var(--qdr-spacing-14) 0}.qdr-carousel__image-wrapper{flex:0 0 100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--qdr-radius-1)}.qdr-carousel__image-wrapper::after{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,0);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel--with-inline-toolbar:hover .qdr-carousel__image-wrapper::after{background-color:var(--qdr-overlay-dark)}.qdr-carousel:hover .qdr-carousel__inline-toolbar{opacity:1;pointer-events:auto}.qdr-carousel-modal__side{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:var(--qdr-spacing-9)}.qdr-carousel-modal__side__hints-wrapper{width:100%}.qdr-carousel-modal__side__hints-title{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-h6-font-size);line-height:var(--qdr-typography-basic-h6-line-height);letter-spacing:var(--qdr-typography-basic-h6-letter-spacing);font-weight:var(--qdr-typography-basic-h6-font-weight);margin-bottom:var(--qdr-spacing-4)}.qdr-carousel-modal__side__upload{width:100%}.qdr-carousel-modal__main{display:flex;flex-direction:column;position:relative;background-color:var(--qdr-bg);overflow-y:unset;padding:unset}.qdr-carousel-modal__counter{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-body2-font-size);line-height:var(--qdr-typography-basic-body2-line-height);letter-spacing:var(--qdr-typography-basic-body2-letter-spacing);font-weight:var(--qdr-typography-basic-body2-font-weight)}.qdr-carousel-modal__placeholder{display:flex;align-items:center;justify-content:center;pointer-events:none;height:100%}.qdr-carousel-modal__placeholder__block{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:360px;padding-bottom:var(--qdr-spacing-14)}.qdr-carousel-modal__placeholder__icon{display:flex;align-items:center;justify-content:center;color:var(--qdr-action-inactive);padding:var(--qdr-spacing-4);border:1px solid var(--qdr-divider);background-color:var(--qdr-surface);border-radius:var(--qdr-radius-5)}.qdr-carousel-modal__placeholder__title{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-h5-font-size);line-height:var(--qdr-typography-basic-h5-line-height);letter-spacing:var(--qdr-typography-basic-h5-letter-spacing);font-weight:var(--qdr-typography-basic-h5-font-weight);text-align:center;margin-top:var(--qdr-spacing-9)}.qdr-carousel-modal__placeholder__hint{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-body2-font-size);line-height:var(--qdr-typography-basic-body2-line-height);letter-spacing:var(--qdr-typography-basic-body2-letter-spacing);font-weight:var(--qdr-typography-basic-body2-font-weight);text-align:center;margin-top:var(--qdr-spacing-2)}.qdr-carousel-modal__zone{flex:1;align-self:stretch;overflow-y:auto;padding:var(--qdr-spacing-9)}.qdr-carousel-modal__zone__wrapper{position:absolute;inset:0;width:100%;height:100%;z-index:101;display:flex;align-items:flex-end;justify-content:center;background-color:var(--qdr-primary-hover-bg);pointer-events:none}.qdr-carousel-modal__zone__block{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-2);background-color:var(--qdr-primary);color:var(--qdr-on-primary);padding:var(--qdr-spacing-7) var(--qdr-spacing-14);box-shadow:var(--qdr-shadow-xl);margin-bottom:var(--qdr-spacing-7);border-radius:9999px}.qdr-carousel-modal__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--qdr-spacing-6)}.qdr-carousel-modal__grid--isDragging{opacity:0;pointer-events:none}.qdr-carousel-modal__image-wrapper{display:flex;align-items:center;justify-content:center;position:relative}.qdr-carousel-modal__image-wrapper::after{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,0);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel-modal__error-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--qdr-spacing-4);background-color:var(--qdr-error-hover-bg)}.qdr-carousel-modal__error-icon{color:var(--qdr-error)}.qdr-carousel-modal__error-text{color:var(--qdr-error);font-size:var(--qdr-typography-basic-h6-font-size);line-height:var(--qdr-typography-basic-h6-line-height);letter-spacing:var(--qdr-typography-basic-h6-letter-spacing);font-weight:var(--qdr-typography-basic-h6-font-weight);margin:0}.qdr-carousel-modal__item{display:flex;flex-direction:column;position:relative;border:1px solid var(--qdr-divider);border-radius:var(--qdr-radius-2);overflow:hidden;transition:box-shadow var(--qdr-duration-short) var(--qdr-easing-standard);z-index:100}.qdr-carousel-modal__item:hover{box-shadow:0 0 0 2px var(--qdr-surface),0 0 0 4px var(--qdr-primary-light)}.qdr-carousel-modal__item:hover .qdr-carousel-modal__image-wrapper::after{background-color:var(--qdr-overlay-dark)}.qdr-carousel-modal__item:hover .qdr-carousel-modal__inline-toolbar{opacity:1;pointer-events:auto}.qdr-carousel-modal__item--isDragging{border-style:dashed;border-color:var(--qdr-primary);box-shadow:var(--qdr-shadow-xl);cursor:grabbing}.qdr-carousel-modal__item--isDragging>*{display:none}.qdr-carousel-modal__item--isOver{box-shadow:0 0 0 2px var(--qdr-surface),0 0 0 4px var(--qdr-primary-light)}.qdr-carousel-modal__image{width:100%}.qdr-carousel-modal__input-wrapper{border-top:1px solid var(--qdr-divider);background-color:var(--qdr-surface);padding:var(--qdr-spacing-6)}.qdr-carousel__placeholder{margin:var(--qdr-spacing-14) 0}.qdr-carousel__placeholder__icon-wrapper{display:flex;align-items:center;justify-content:center;width:100%;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);background-color:var(--qdr-block)}.qdr-carousel__placeholder__icon{color:var(--qdr-action-inactive)}.qdr-carousel__dots{display:flex;align-items:center;justify-content:center;margin-top:var(--qdr-spacing-4)}.qdr-carousel__dot{width:5px;height:5px;border-radius:50%;background-color:var(--qdr-action-disabled-bg);margin:2.5px}.qdr-carousel__dot:hover{cursor:pointer}.qdr-carousel__dot--active{background-color:var(--qdr-primary)}.qdr-carousel__images-wrapper{display:flex;flex-direction:column}.qdr-carousel__slider-wrapper{width:100%;overflow-x:hidden;border-radius:var(--qdr-radius-1)}.qdr-carousel__slider-wrapper:hover{cursor:grab}.qdr-carousel__slider-wrapper--isDragging:hover{cursor:grabbing}.qdr-carousel__slider{width:100%;display:flex;align-items:flex-start;justify-content:flex-start;transition:transform var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel__slider--isDragging{transition:none}.qdr-carousel__image{width:100%;border-radius:var(--qdr-radius-1)}.qdr-carousel__caption{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body2-font-size);line-height:var(--qdr-typography-basic-body2-line-height);letter-spacing:var(--qdr-typography-basic-body2-letter-spacing);font-weight:var(--qdr-typography-basic-body2-font-weight);margin-top:var(--qdr-spacing-6)}