@quadrats/react 0.7.8 → 1.1.0

package/carousel/index.cjs.js

@@ -0,0 +1,236 @@
+'use strict';
+
+var React = require('react');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var toolbar = require('@quadrats/react/toolbar');
+var icons = require('@quadrats/icons');
+var clsx = require('clsx');
+var components = require('@quadrats/react/components');
+var carousel = require('@quadrats/common/carousel');
+var utils = require('@quadrats/react/utils');
+
+const CarouselContext = React.createContext({ activeIndex: 0, setActiveIndex: () => { } });
+
+function useCarousel() {
+    return React.useContext(CarouselContext);
+}
+
+function Carousel({ attributes, children, element, controller, }) {
+    const { setCarouselModalConfig, setConfirmModalConfig } = react.useModal();
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const editor = react.useSlateStatic();
+    const path = react.ReactEditor.findPath(editor, element);
+    return (React.createElement(CarouselContext.Provider, { value: {
+            activeIndex,
+            setActiveIndex,
+        } },
+        React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel qdr-carousel--with-inline-toolbar" }),
+            React.createElement(toolbar.InlineToolbar, { className: "qdr-carousel__inline-toolbar", iconGroups: [
+                    {
+                        icons: [
+                            {
+                                icon: icons.Edit,
+                                onClick: () => {
+                                    setCarouselModalConfig({
+                                        controller,
+                                        initialValue: element.items,
+                                        onConfirm: (items) => {
+                                            controller.updateCarouselElement({ editor, items, 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 CarouselWithoutToolbar({ attributes, children, }) {
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    return (React.createElement(CarouselContext.Provider, { value: {
+            activeIndex,
+            setActiveIndex,
+        } },
+        React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel" }), children)));
+}
+
+const deltaLimit = 100;
+function CarouselImages({ attributes, element, }) {
+    var _a, _b;
+    const imageRef = React.useRef(null);
+    const { activeIndex, setActiveIndex } = useCarousel();
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [startX, setStartX] = React.useState(0);
+    const [delta, setDelta] = React.useState(0);
+    const images = React.useMemo(() => element.images, [element.images]);
+    const onMouseUp = React.useCallback(() => {
+        setIsDragging(false);
+        if (delta < -100 && activeIndex < images.length - 1) {
+            setActiveIndex((prev) => prev + 1);
+        }
+        else if (delta > deltaLimit && activeIndex > 0) {
+            setActiveIndex((prev) => prev - 1);
+        }
+        setDelta(0);
+    }, [activeIndex, delta, images.length, setActiveIndex]);
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel__images-wrapper" }),
+        React.createElement("div", { className: clsx('qdr-carousel__slider-wrapper', {
+                'qdr-carousel__slider-wrapper--isDragging': isDragging,
+            }), onMouseDown: (e) => {
+                setIsDragging(true);
+                setStartX(e.clientX);
+            }, onMouseMove: (e) => {
+                if (isDragging) {
+                    const delta = e.clientX - startX;
+                    setDelta(delta);
+                }
+            }, onMouseUp: onMouseUp },
+            React.createElement("div", { className: clsx('qdr-carousel__slider', {
+                    'qdr-carousel__slider--isDragging': isDragging,
+                }), style: {
+                    transform: `translateX(${delta - activeIndex * ((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0)}px)`,
+                } }, images.map((image) => (React.createElement("div", { key: image, className: "qdr-carousel__image-wrapper" },
+                React.createElement("img", { ref: imageRef, draggable: false, className: "qdr-carousel__image", src: image, style: {
+                        objectFit: element.ratio ? 'cover' : 'contain',
+                        aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '3 / 2',
+                    } })))))),
+        React.createElement("div", { className: "qdr-carousel__dots" }, images.map((_, index) => (React.createElement("div", { key: index, onClick: () => {
+                setActiveIndex(index);
+            }, className: clsx('qdr-carousel__dot', {
+                'qdr-carousel__dot--active': index === activeIndex,
+            }) }))))));
+}
+
+function CarouselCaption({ attributes, element, }) {
+    const { activeIndex } = useCarousel();
+    const currentCaption = React.useMemo(() => element.captions[activeIndex], [activeIndex, element.captions]);
+    if (!currentCaption)
+        return null;
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel__caption" }), currentCaption));
+}
+
+function CarouselPlaceholder({ attributes, element }) {
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-carousel__placeholder", contentEditable: false }),
+        React.createElement("div", { className: "qdr-carousel__placeholder__icon-wrapper", style: { aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '3 / 2' } },
+            React.createElement(components.Icon, { className: "qdr-carousel__placeholder__icon", icon: icons.Image, width: 48, height: 48 })),
+        React.createElement("div", { className: "qdr-carousel__dots" },
+            React.createElement("div", { className: "qdr-carousel__dot qdr-carousel__dot--active" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }))));
+}
+
+const defaultRenderCarouselElements = {
+    carousel: (props) => React.createElement(Carousel, Object.assign({}, props)),
+    carousel_images: (props) => React.createElement(CarouselImages, Object.assign({}, props)),
+    carousel_caption: (props) => React.createElement(CarouselCaption, Object.assign({}, props)),
+};
+const defaultRenderCarouselPlaceholderElement = (props) => (React.createElement(CarouselPlaceholder, Object.assign({}, props)));
+
+function createReactCarousel(options) {
+    const core = carousel.createCarousel(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.carousel,
+                        confirmModal,
+                        doConfirm: (remove) => {
+                            if (setNeedConfirmModal) {
+                                // TODO: i18n
+                                console.log('locale', locale);
+                                setNeedConfirmModal({
+                                    title: '刪除輪播',
+                                    content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
+                                    confirmText: '刪除輪播',
+                                    onConfirm: () => {
+                                        remove();
+                                        setNeedConfirmModal(null);
+                                    },
+                                });
+                            }
+                        },
+                    });
+                }
+                next();
+            },
+        }), createRenderElement: (options = {}) => {
+            const renderCarousel = options.carousel || defaultRenderCarouselElements.carousel;
+            const renderCarouselImages = options.carousel_images || defaultRenderCarouselElements.carousel_images;
+            const renderCarouselCaption = options.carousel_caption || defaultRenderCarouselElements.carousel_caption;
+            return react.createRenderElements([
+                {
+                    type: types.carousel,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCarousel({
+                            attributes,
+                            element,
+                            children,
+                            controller: core,
+                        });
+                    },
+                },
+                {
+                    type: types.carousel_images,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCarouselImages({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.carousel_caption,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCarouselCaption({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+            ]);
+        }, createRenderPlaceholderElement: ({ render = defaultRenderCarouselPlaceholderElement } = {}) => react.createRenderElement({
+            type: carousel.CAROUSEL_PLACEHOLDER_TYPE,
+            render,
+        }) });
+}
+
+exports.Carousel = Carousel;
+exports.CarouselCaption = CarouselCaption;
+exports.CarouselContext = CarouselContext;
+exports.CarouselImages = CarouselImages;
+exports.CarouselPlaceholder = CarouselPlaceholder;
+exports.CarouselWithoutToolbar = CarouselWithoutToolbar;
+exports.createReactCarousel = createReactCarousel;
+exports.defaultRenderCarouselElements = defaultRenderCarouselElements;
+exports.defaultRenderCarouselPlaceholderElement = defaultRenderCarouselPlaceholderElement;
+exports.useCarousel = useCarousel;

package/carousel/index.d.ts

@@ -0,0 +1,9 @@
+export * from './typings';
+export * from './contexts/CarouselContext';
+export * from './hooks/useCarousel';
+export * from './components/Carousel';
+export * from './components/CarouselImages';
+export * from './components/CarouselCaption';
+export * from './components/CarouselPlaceholder';
+export * from './createReactCarousel';
+export * from './defaultRenderCarouselElements';

package/carousel/index.js

@@ -0,0 +1,8 @@
+export { CarouselContext } from './contexts/CarouselContext.js';
+export { useCarousel } from './hooks/useCarousel.js';
+export { Carousel, CarouselWithoutToolbar } from './components/Carousel.js';
+export { CarouselImages } from './components/CarouselImages.js';
+export { CarouselCaption } from './components/CarouselCaption.js';
+export { CarouselPlaceholder } from './components/CarouselPlaceholder.js';
+export { createReactCarousel } from './createReactCarousel.js';
+export { defaultRenderCarouselElements, defaultRenderCarouselPlaceholderElement } from './defaultRenderCarouselElements.js';

package/carousel/jsx-serializer/createJsxSerializeCarousel.d.ts

@@ -0,0 +1,5 @@
+import { CarouselTypeKey, CarouselImagesTypeKey, CarouselCaptionTypeKey } from '@quadrats/common/carousel';
+import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
+import { JsxSerializeCarouselElementProps, JsxSerializeCarouselImagesElementProps, JsxSerializeCarouselCaptionElementProps } from './typings';
+export type CreateJsxSerializeCarouselOptions = Partial<Record<CarouselTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCarouselElementProps>>> & Record<CarouselImagesTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCarouselImagesElementProps>>> & Record<CarouselCaptionTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCarouselCaptionElementProps>>>>;
+export declare function createJsxSerializeCarousel(options?: CreateJsxSerializeCarouselOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/carousel/jsx-serializer/createJsxSerializeCarousel.js

@@ -0,0 +1,48 @@
+import { CAROUSEL_TYPES } from '@quadrats/common/carousel';
+import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
+import { defaultRenderCarouselElements } from './defaultRenderCarouselElements.js';
+
+function createJsxSerializeCarousel(options = {}) {
+    const { carousel = {}, carousel_images = {}, carousel_caption = {} } = options;
+    const carouselType = carousel.type || CAROUSEL_TYPES.carousel;
+    const imagesType = carousel_images.type || CAROUSEL_TYPES.carousel_images;
+    const captionType = carousel_caption.type || CAROUSEL_TYPES.carousel_caption;
+    const renderCarousel = carousel.render || defaultRenderCarouselElements.carousel;
+    const renderCarouselImages = carousel_images.render || defaultRenderCarouselElements.carousel_images;
+    const renderCarouselCaption = carousel_caption.render || defaultRenderCarouselElements.carousel_caption;
+    return createJsxSerializeElements([
+        {
+            type: carouselType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderCarousel({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: imagesType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCarouselImages({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: captionType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCarouselCaption({
+                    children,
+                    element,
+                });
+            },
+        },
+    ]);
+}
+
+export { createJsxSerializeCarousel };

package/carousel/jsx-serializer/defaultRenderCarouselElements.d.ts

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

package/carousel/jsx-serializer/defaultRenderCarouselElements.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CarouselCaption, CarouselImages, CarouselWithoutToolbar } from '@quadrats/react/carousel';
+
+const defaultRenderCarouselElements = {
+    carousel: (props) => React.createElement(CarouselWithoutToolbar, Object.assign({}, props)),
+    carousel_images: (props) => React.createElement(CarouselImages, Object.assign({}, props)),
+    carousel_caption: (props) => React.createElement(CarouselCaption, Object.assign({}, props)),
+};
+
+export { defaultRenderCarouselElements };

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+var carousel = require('@quadrats/react/carousel');
+var carousel$1 = require('@quadrats/common/carousel');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+
+const defaultRenderCarouselElements = {
+    carousel: (props) => React.createElement(carousel.CarouselWithoutToolbar, Object.assign({}, props)),
+    carousel_images: (props) => React.createElement(carousel.CarouselImages, Object.assign({}, props)),
+    carousel_caption: (props) => React.createElement(carousel.CarouselCaption, Object.assign({}, props)),
+};
+
+function createJsxSerializeCarousel(options = {}) {
+    const { carousel = {}, carousel_images = {}, carousel_caption = {} } = options;
+    const carouselType = carousel.type || carousel$1.CAROUSEL_TYPES.carousel;
+    const imagesType = carousel_images.type || carousel$1.CAROUSEL_TYPES.carousel_images;
+    const captionType = carousel_caption.type || carousel$1.CAROUSEL_TYPES.carousel_caption;
+    const renderCarousel = carousel.render || defaultRenderCarouselElements.carousel;
+    const renderCarouselImages = carousel_images.render || defaultRenderCarouselElements.carousel_images;
+    const renderCarouselCaption = carousel_caption.render || defaultRenderCarouselElements.carousel_caption;
+    return jsxSerializer.createJsxSerializeElements([
+        {
+            type: carouselType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderCarousel({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: imagesType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCarouselImages({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: captionType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCarouselCaption({
+                    children,
+                    element,
+                });
+            },
+        },
+    ]);
+}
+
+exports.createJsxSerializeCarousel = createJsxSerializeCarousel;
+exports.defaultRenderCarouselElements = defaultRenderCarouselElements;

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

@@ -0,0 +1,3 @@
+export * from './typings';
+export * from './defaultRenderCarouselElements';
+export * from './createJsxSerializeCarousel';

package/carousel/jsx-serializer/index.js

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

package/carousel/jsx-serializer/package.json

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

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

@@ -0,0 +1,9 @@
+import { CarouselElement, CarouselImagesElement, CarouselCaptionElement, CarouselTypeKey, CarouselImagesTypeKey, CarouselCaptionTypeKey } from '@quadrats/common/carousel';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export interface JsxSerializeCarouselElementProps extends JsxSerializeElementProps<CarouselElement> {
+}
+export interface JsxSerializeCarouselImagesElementProps extends JsxSerializeElementProps<CarouselImagesElement> {
+}
+export interface JsxSerializeCarouselCaptionElementProps extends JsxSerializeElementProps<CarouselCaptionElement> {
+}
+export type CarouselJsxSerializeElements = Record<CarouselTypeKey, (props: JsxSerializeCarouselElementProps) => JSX.Element | null | undefined> & Record<CarouselImagesTypeKey, (props: JsxSerializeCarouselImagesElementProps) => JSX.Element | null | undefined> & Record<CarouselCaptionTypeKey, (props: JsxSerializeCarouselCaptionElementProps) => JSX.Element | null | undefined>;

package/carousel/package.json

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

package/carousel/toolbar/CarouselToolbarIcon.d.ts

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

package/carousel/toolbar/CarouselToolbarIcon.js

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

package/carousel/toolbar/index.cjs.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var core = require('@quadrats/core');
+var carousel = require('@quadrats/common/carousel');
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useCarouselTool(controller) {
+    const editor = react.useSlateStatic();
+    const { setCarouselModalConfig, 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 === carousel.CAROUSEL_PLACEHOLDER_TYPE;
+            },
+        });
+        if (match) {
+            setCarouselModalConfig({
+                controller,
+                onConfirm: (items) => {
+                    controller.removeCarouselPlaceholder(editor);
+                    controller.insertCarousel({
+                        editor,
+                        items,
+                    });
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controller, editor]);
+    React.useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCarouselPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCarouselPlaceholder(editor);
+        },
+    };
+}
+
+function CarouselToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { onClick } = useCarouselTool(controller);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
+}
+
+exports.CarouselToolbarIcon = CarouselToolbarIcon;
+exports.useCarouselTool = useCarouselTool;

package/carousel/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useCarouselTool';
+export { CarouselToolbarIconProps, default as CarouselToolbarIcon } from './CarouselToolbarIcon';

package/carousel/toolbar/index.js

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

package/carousel/toolbar/package.json

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

package/carousel/toolbar/useCarouselTool.d.ts

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

package/carousel/toolbar/useCarouselTool.js

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { Editor, Element } from '@quadrats/core';
+import { CAROUSEL_PLACEHOLDER_TYPE } from '@quadrats/common/carousel';
+import { useSlateStatic, useModal } from '@quadrats/react';
+
+function useCarouselTool(controller) {
+    const editor = useSlateStatic();
+    const { setCarouselModalConfig, isModalClosed, setIsModalClosed } = useModal();
+    useEffect(() => {
+        const [match] = Editor.nodes(editor, {
+            at: [],
+            match: (node) => {
+                const placeholderElement = node;
+                return Element.isElement(placeholderElement) && placeholderElement.type === CAROUSEL_PLACEHOLDER_TYPE;
+            },
+        });
+        if (match) {
+            setCarouselModalConfig({
+                controller,
+                onConfirm: (items) => {
+                    controller.removeCarouselPlaceholder(editor);
+                    controller.insertCarousel({
+                        editor,
+                        items,
+                    });
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controller, editor]);
+    useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCarouselPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCarouselPlaceholder(editor);
+        },
+    };
+}
+
+export { useCarouselTool };

package/carousel/typings.d.ts

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Carousel, CarouselElement, CarouselImagesElement, CarouselCaptionElement, CarouselPlaceholderElement, CarouselTypeKey, CarouselImagesTypeKey, CarouselCaptionTypeKey } from '@quadrats/common/carousel';
+import { RenderElementProps, Editor, WithCreateRenderElement, Handlers, ConfirmModalConfig } from '@quadrats/react';
+import { LocaleDefinition } from '@quadrats/locales';
+export type CarouselContextType = {
+    activeIndex: number;
+    setActiveIndex: Dispatch<SetStateAction<number>>;
+};
+export interface RenderCarouselElementProps extends RenderElementProps<CarouselElement> {
+    controller: Carousel<Editor>;
+}
+export interface RenderCarouselImagesElementProps extends RenderElementProps<CarouselImagesElement> {
+}
+export type RenderCarouselCaptionElementProps = RenderElementProps<CarouselCaptionElement>;
+export interface RenderCarouselPlaceholderElementProps extends RenderElementProps<CarouselPlaceholderElement> {
+}
+export type RenderCarouselPlaceholderElement = (props: RenderCarouselPlaceholderElementProps) => JSX.Element | null | undefined;
+export type CarouselRenderElements = Record<CarouselTypeKey, (props: RenderCarouselElementProps) => JSX.Element | null | undefined> & Record<CarouselImagesTypeKey, (props: RenderCarouselImagesElementProps) => JSX.Element | null | undefined> & Record<CarouselCaptionTypeKey, (props: RenderCarouselCaptionElementProps) => JSX.Element | null | undefined>;
+export type ReactCarouselCreateRenderElementOptions = {
+    [K in CarouselTypeKey | CarouselImagesTypeKey | CarouselCaptionTypeKey]?: CarouselRenderElements[K];
+};
+export interface ReactCarousel extends Carousel<Editor>, WithCreateRenderElement<[ReactCarouselCreateRenderElementOptions?]> {
+    createHandlers: (setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>, locale?: LocaleDefinition) => Handlers;
+    createRenderPlaceholderElement: (params_0?: {
+        render?: RenderCarouselPlaceholderElement;
+    }) => (props: RenderElementProps) => JSX.Element | null | undefined;
+}

package/components/BaseField/index.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+export interface BaseFieldProps {
+    label?: string;
+    className?: string;
+    width?: number;
+    children: ReactNode;
+    required?: boolean;
+    errorMessage?: string;
+}
+declare const BaseField: ({ label, className, width, children, required, errorMessage }: BaseFieldProps) => React.JSX.Element;
+export default BaseField;

package/components/BaseField/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Error } from '@quadrats/icons';
+import clsx from 'clsx';
+import Icon from '../Icon/index.js';
+
+const BaseField = ({ label, className, width, children, required = false, errorMessage }) => {
+    return (React.createElement("div", { className: clsx('qdr-base-field', className), style: { width } },
+        label && (React.createElement("p", { className: "qdr-base-field__label" },
+            label,
+            required && React.createElement("span", { className: "qdr-base-field__required-mark" }, "*"))),
+        children,
+        errorMessage && (React.createElement("div", { className: "qdr-base-field__error-message" },
+            React.createElement(Icon, { icon: Error, width: 16, height: 16 }),
+            React.createElement("span", null, errorMessage)))));
+};
+
+export { BaseField as default };

package/components/Button/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode, MouseEventHandler } from 'react';
+export interface ButtonProps {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    type?: 'submit' | 'reset' | 'button';
+    variant?: 'primary' | 'secondary' | 'outlined' | 'dashed' | 'tertiary';
+    size?: 'small' | 'medium' | 'large';
+    prefix?: ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+}
+declare const Button: ({ onClick, className, type, variant, size, prefix, danger, disabled, children, }: ButtonProps) => React.JSX.Element;
+export default Button;