@quadrats/react 0.7.8 → 1.1.0

package/card/card.scss

@@ -0,0 +1,243 @@
+.qdr-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--qdr-spacing-6);
+  border-radius: var(--qdr-radius-3);
+  border: 1px solid var(--qdr-border);
+  background-color: var(--qdr-block);
+  margin: var(--qdr-spacing-12) 0;
+  padding: var(--qdr-spacing-6);
+
+  &:hover {
+    .qdr-card__inline-toolbar {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &--rightImageLeftText {
+    flex-direction: row-reverse;
+  }
+
+  &-modal {
+    &__main {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      gap: var(--qdr-spacing-12);
+    }
+
+    &__block {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      gap: var(--qdr-spacing-6);
+    }
+
+    &__block-title {
+      align-self: stretch;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      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);
+      margin: 0;
+    }
+
+    &__block-content {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      gap: var(--qdr-spacing-9);
+    }
+
+    &__block-field {
+      width: 100%;
+    }
+
+    &__toggle-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--qdr-spacing-2);
+      color: var(--qdr-text-secondary);
+      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);
+    }
+
+    &__link-wrapper {
+      align-self: stretch;
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      gap: var(--qdr-spacing-7);
+    }
+
+    &__url-field {
+      flex: 1;
+    }
+  }
+
+  &__placeholder {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-6);
+    border-radius: var(--qdr-radius-3);
+    border: 1px solid var(--qdr-border);
+    background-color: var(--qdr-block);
+    margin: var(--qdr-spacing-12) 0;
+    padding: var(--qdr-spacing-6);
+
+    &__line {
+      align-self: stretch;
+      height: 16px;
+      border-radius: var(--qdr-radius-6);
+      opacity: 0.2;
+      background: linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%);
+
+      &--small-radius {
+        border-radius: var(--qdr-radius-3);
+      }
+    }
+  }
+
+  &__placeholder-image-wrapper {
+    position: relative;
+    width: 240px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--qdr-radius-1);
+    color: var(--qdr-action-disabled);
+  }
+
+  &__placeholder-bg {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--qdr-radius-1);
+    opacity: 0.2;
+    background: linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%);
+  }
+
+  &__placeholder-contents {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    align-self: stretch;
+    flex: 1;
+  }
+
+  &__placeholder-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: var(--qdr-spacing-7);
+  }
+
+  &__placeholder-description-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: var(--qdr-spacing-4);
+  }
+
+  &__placeholder-link-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    align-self: stretch;
+  }
+
+  &__image-wrapper {
+    width: 240px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--qdr-radius-1);
+  }
+
+  &__image {
+    width: 100%;
+    border-radius: var(--qdr-radius-1);
+  }
+
+  &__contents {
+    flex: 1;
+  }
+
+  &__content-wrapper {
+    width: 100%;
+  }
+
+  &__title {
+    color: var(--qdr-text-primary);
+    font-size: var(--qdr-typography-article-h5-font-size);
+    line-height: var(--qdr-typography-article-h5-line-height);
+    letter-spacing: var(--qdr-typography-article-h5-letter-spacing);
+    font-weight: var(--qdr-typography-article-h5-font-weight);
+    margin: 0;
+    word-break: break-word;
+  }
+
+  &__description {
+    color: var(--qdr-text-primary);
+    font-size: var(--qdr-typography-article-body2-font-size);
+    line-height: var(--qdr-typography-article-body2-line-height);
+    letter-spacing: var(--qdr-typography-article-body2-letter-spacing);
+    font-weight: var(--qdr-typography-article-body2-font-weight);
+    margin: var(--qdr-spacing-4) 0 0;
+    word-break: break-word;
+  }
+
+  &__remark {
+    color: var(--qdr-text-secondary);
+    font-size: var(--qdr-typography-article-body2-font-size);
+    line-height: var(--qdr-typography-article-body2-line-height);
+    letter-spacing: var(--qdr-typography-article-body2-letter-spacing);
+    font-weight: var(--qdr-typography-article-body2-font-weight);
+    margin: var(--qdr-spacing-2) 0 0;
+  }
+
+  &__link-wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    margin-top: var(--qdr-spacing-9);
+
+    &--rightImageLeftText {
+      justify-content: flex-start;
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-1);
+    color: var(--qdr-primary);
+    font-size: var(--qdr-typography-article-h6-font-size);
+    line-height: var(--qdr-typography-article-h6-line-height);
+    letter-spacing: var(--qdr-typography-article-h6-letter-spacing);
+    font-weight: var(--qdr-typography-article-h6-font-weight);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--qdr-primary-light);
+    }
+  }
+}

package/card/components/Card.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderCardElementProps } from '../typings';
+export declare function Card({ attributes, children, element, controller, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderCardElementProps['element'];
+    controller: RenderCardElementProps['controller'];
+}): React.JSX.Element;
+export declare function CardWithoutToolbar({ attributes, children, element, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderCardElementProps['element'];
+}): React.JSX.Element;
+export default Card;

package/card/components/Card.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Transforms } from '@quadrats/core';
+import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+import { BlockLeft, BlockRight, Edit, Trash } from '@quadrats/icons';
+
+function Card({ attributes, children, element, controller, }) {
+    const { setCardModalConfig, setConfirmModalConfig } = useModal();
+    const editor = useSlateStatic();
+    const path = ReactEditor.findPath(editor, element);
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: clsx('qdr-card', `qdr-card--${element.alignment}`) }),
+        React.createElement(InlineToolbar, { className: "qdr-card__inline-toolbar", iconGroups: [
+                element.alignment === 'noImage'
+                    ? { icons: [] }
+                    : {
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: BlockLeft,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'leftImageRightText',
+                                        path,
+                                    });
+                                },
+                                active: element.alignment === 'leftImageRightText',
+                            },
+                            {
+                                icon: BlockRight,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'rightImageLeftText',
+                                        path,
+                                    });
+                                },
+                                active: element.alignment === 'rightImageLeftText',
+                            },
+                        ],
+                    },
+                {
+                    icons: [
+                        {
+                            icon: 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: Trash,
+                            onClick: () => {
+                                if (controller.confirmModal) {
+                                    // TODO: i18n
+                                    setConfirmModalConfig({
+                                        title: '刪除卡片',
+                                        content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
+                                        confirmText: '刪除卡片',
+                                        onConfirm: () => {
+                                            Transforms.removeNodes(editor, { at: path });
+                                        },
+                                    });
+                                }
+                                else {
+                                    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));
+}
+
+export { Card, CardWithoutToolbar, Card as default };

package/card/components/CardContents.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderCardContentsElementProps } from '../typings';
+export declare function CardContents({ attributes, element, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderCardContentsElementProps['element'];
+}): React.JSX.Element;
+export default CardContents;

package/card/components/CardContents.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '@quadrats/react/components';
+import { ChevronRight } from '@quadrats/icons';
+
+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(Icon, { icon: ChevronRight, width: 20, height: 20, className: "qdr-card__link-icon" }))))));
+}
+
+export { CardContents, CardContents as default };

package/card/components/CardImage.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderCardImageElementProps } from '../typings';
+export declare function CardImage({ attributes, element, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderCardImageElementProps['element'];
+}): React.JSX.Element | null;
+export default CardImage;

package/card/components/CardImage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+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',
+            } })));
+}
+
+export { CardImage, CardImage as default };

package/card/components/CardPlaceholder.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderCardPlaceholderElementProps } from '../typings';
+export declare function CardPlaceholder({ attributes, element }: RenderCardPlaceholderElementProps): React.JSX.Element;
+export default CardPlaceholder;

package/card/components/CardPlaceholder.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Icon } from '@quadrats/react/components';
+import { Image } from '@quadrats/icons';
+
+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(Icon, { icon: 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 } })))));
+}
+
+export { CardPlaceholder, CardPlaceholder as default };

package/card/createReactCard.d.ts

@@ -0,0 +1,4 @@
+import { CreateCardOptions } from '@quadrats/common/card';
+import { ReactCard } from './typings';
+export type CreateReactCardOptions = CreateCardOptions;
+export declare function createReactCard(options: CreateReactCardOptions): ReactCard;

package/card/createReactCard.js

@@ -0,0 +1,82 @@
+import { createCard, CARD_PLACEHOLDER_TYPE } from '@quadrats/common/card';
+import { createRenderElement, createRenderElements } from '@quadrats/react';
+import { removePreviousElement } from '@quadrats/react/utils';
+import { defaultRenderCardPlaceholderElement, defaultRenderCardElements } from './defaultRenderCardElements.js';
+
+function createReactCard(options) {
+    const core = createCard(options);
+    const { types, confirmModal } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: (setNeedConfirmModal, locale) => ({
+            onKeyDown(event, editor, next) {
+                if (event.key === 'Backspace') {
+                    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 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 } = {}) => createRenderElement({
+            type: CARD_PLACEHOLDER_TYPE,
+            render,
+        }) });
+}
+
+export { createReactCard };

package/card/defaultRenderCardElements.d.ts

@@ -0,0 +1,3 @@
+import { CardRenderElements, RenderCardPlaceholderElement } from './typings';
+export declare const defaultRenderCardElements: CardRenderElements;
+export declare const defaultRenderCardPlaceholderElement: RenderCardPlaceholderElement;

package/card/defaultRenderCardElements.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card } from './components/Card.js';
+import { CardImage } from './components/CardImage.js';
+import { CardContents } from './components/CardContents.js';
+import { CardPlaceholder } from './components/CardPlaceholder.js';
+
+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)));
+
+export { defaultRenderCardElements, defaultRenderCardPlaceholderElement };