@quadrats/react 1.1.7 → 1.1.8

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

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { WithElementParent } from '@quadrats/core/serializers';
+import {
+  CarouselElement,
+  CarouselTypeKey,
+  CarouselImagesTypeKey,
+  CarouselCaptionTypeKey,
+  CAROUSEL_TYPES,
+} from '@quadrats/common/carousel';
+import { CreateJsxSerializeElementOptions, createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
+import { defaultRenderCarouselElements } from './defaultRenderCarouselElements';
+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 function createJsxSerializeCarousel(options: CreateJsxSerializeCarouselOptions = {}) {
+  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 as CarouselElement & WithElementParent;
+
+        return renderCarousel({
+          children,
+          element,
+        });
+      },
+    },
+    {
+      type: imagesType,
+      render: (props) => {
+        const { children, element } = props as JsxSerializeCarouselImagesElementProps;
+
+        return renderCarouselImages({
+          children,
+          element,
+        });
+      },
+    },
+    {
+      type: captionType,
+      render: (props) => {
+        const { children, element } = props as JsxSerializeCarouselCaptionElementProps;
+
+        return renderCarouselCaption({
+          children,
+          element,
+        });
+      },
+    },
+  ]);
+}

package/carousel/jsx-serializer/src/defaultRenderCarouselElements.tsx

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

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

@@ -0,0 +1,20 @@
+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/jsx-serializer/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "exclude": ["**/*.spec.*"],
+  "include": ["./src"]
+}

package/carousel/package.json

@@ -4,7 +4,14 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "quadratsConfig": {
+    "deps": [
+      "__ROOT__",
+      "toolbar",
+      "utils"
+    ],
+    "styles": {
+      "carousel": "carousel"
+    }
+  }
 }

package/carousel/src/components/Carousel.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { Transforms } from '@quadrats/core';
+import { RenderElementProps, useSlateStatic, ReactEditor, useModal } from '@quadrats/react';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+import { Edit, Trash } from '@quadrats/icons';
+import { CarouselContext } from '../contexts/CarouselContext';
+import { RenderCarouselElementProps } from '../typings';
+
+export function Carousel({
+  attributes,
+  children,
+  element,
+  controller,
+}: {
+  attributes?: RenderElementProps['attributes'];
+  children: RenderElementProps['children'];
+  element: RenderCarouselElementProps['element'];
+  controller: RenderCarouselElementProps['controller'];
+}) {
+  const { setCarouselModalConfig, setConfirmModalConfig } = useModal();
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        activeIndex,
+        setActiveIndex,
+      }}
+    >
+      <div {...attributes} contentEditable={false} className="qdr-carousel qdr-carousel--with-inline-toolbar">
+        <InlineToolbar
+          className="qdr-carousel__inline-toolbar"
+          iconGroups={[
+            {
+              icons: [
+                {
+                  icon: Edit,
+                  onClick: () => {
+                    setCarouselModalConfig({
+                      controller,
+                      initialValue: element.items,
+                      onConfirm: (items) => {
+                        controller.updateCarouselElement({ editor, items, 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}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+export function CarouselWithoutToolbar({
+  attributes,
+  children,
+}: {
+  attributes?: RenderElementProps['attributes'];
+  children: RenderElementProps['children'];
+  element: RenderCarouselElementProps['element'];
+}) {
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        activeIndex,
+        setActiveIndex,
+      }}
+    >
+      <div {...attributes} contentEditable={false} className="qdr-carousel">
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+export default Carousel;

package/carousel/src/components/CarouselCaption.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { useCarousel } from '../hooks/useCarousel';
+import { RenderCarouselCaptionElementProps } from '../typings';
+
+export function CarouselCaption({
+  attributes,
+  element,
+}: {
+  attributes?: RenderElementProps['attributes'];
+  children: RenderElementProps['children'];
+  element: RenderCarouselCaptionElementProps['element'];
+}) {
+  const { activeIndex } = useCarousel();
+
+  const currentCaption = useMemo(() => element.captions[activeIndex], [activeIndex, element.captions]);
+
+  if (!currentCaption) return null;
+
+  return (
+    <div {...attributes} contentEditable={false} className="qdr-carousel__caption">
+      {currentCaption}
+    </div>
+  );
+}
+
+export default CarouselCaption;

package/carousel/src/components/CarouselImages.tsx

@@ -0,0 +1,97 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { RenderElementProps } from '@quadrats/react';
+import { useCarousel } from '../hooks/useCarousel';
+import { RenderCarouselImagesElementProps } from '../typings';
+
+const deltaLimit = 100;
+
+export function CarouselImages({
+  attributes,
+  element,
+}: {
+  attributes?: RenderElementProps['attributes'];
+  children: RenderElementProps['children'];
+  element: RenderCarouselImagesElementProps['element'];
+}) {
+  const imageRef = useRef<HTMLImageElement | null>(null);
+  const { activeIndex, setActiveIndex } = useCarousel();
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [startX, setStartX] = useState<number>(0);
+  const [delta, setDelta] = useState(0);
+
+  const images = useMemo(() => element.images, [element.images]);
+
+  const onMouseUp = useCallback(() => {
+    setIsDragging(false);
+
+    if (delta < -deltaLimit && 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 (
+    <div {...attributes} contentEditable={false} className="qdr-carousel__images-wrapper">
+      <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}
+      >
+        <div
+          className={clsx('qdr-carousel__slider', {
+            'qdr-carousel__slider--isDragging': isDragging,
+          })}
+          style={{
+            transform: `translateX(${delta - activeIndex * (imageRef.current?.clientWidth ?? 0)}px)`,
+          }}
+        >
+          {images.map((image) => (
+            <div key={image} className="qdr-carousel__image-wrapper">
+              <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',
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="qdr-carousel__dots">
+        {images.map((_, index) => (
+          <div
+            key={index}
+            onClick={() => {
+              setActiveIndex(index);
+            }}
+            className={clsx('qdr-carousel__dot', {
+              'qdr-carousel__dot--active': index === activeIndex,
+            })}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CarouselImages;

package/carousel/src/components/CarouselPlaceholder.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from '@quadrats/react/components';
+import { Image } from '@quadrats/icons';
+import { RenderCarouselPlaceholderElementProps } from '../typings';
+
+export function CarouselPlaceholder({ attributes, element }: RenderCarouselPlaceholderElementProps) {
+  return (
+    <div {...attributes} className="qdr-carousel__placeholder" contentEditable={false}>
+      <div
+        className="qdr-carousel__placeholder__icon-wrapper"
+        style={{ aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '3 / 2' }}
+      >
+        <Icon className="qdr-carousel__placeholder__icon" icon={Image} width={48} height={48} />
+      </div>
+      <div className="qdr-carousel__dots">
+        <div className="qdr-carousel__dot qdr-carousel__dot--active" />
+        <div className="qdr-carousel__dot" />
+        <div className="qdr-carousel__dot" />
+        <div className="qdr-carousel__dot" />
+        <div className="qdr-carousel__dot" />
+      </div>
+    </div>
+  );
+}
+
+export default CarouselPlaceholder;

package/carousel/src/contexts/CarouselContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { CarouselContextType } from '../typings';
+
+export const CarouselContext = createContext<CarouselContextType>({ activeIndex: 0, setActiveIndex: () => {} });

package/carousel/src/createReactCarousel.ts

@@ -0,0 +1,104 @@
+import { createCarousel, CreateCarouselOptions, CAROUSEL_PLACEHOLDER_TYPE } from '@quadrats/common/carousel';
+import { createRenderElement, createRenderElements } from '@quadrats/react';
+import { removePreviousElement } from '@quadrats/react/utils';
+import {
+  defaultRenderCarouselElements,
+  defaultRenderCarouselPlaceholderElement,
+} from './defaultRenderCarouselElements';
+import {
+  ReactCarousel,
+  RenderCarouselElementProps,
+  RenderCarouselImagesElementProps,
+  RenderCarouselCaptionElementProps,
+} from './typings';
+
+export type CreateReactCarouselOptions = CreateCarouselOptions;
+
+export function createReactCarousel(options: CreateReactCarouselOptions): ReactCarousel {
+  const core = createCarousel(options);
+
+  const { types, confirmModal } = core;
+
+  return {
+    ...core,
+    createHandlers: (setNeedConfirmModal, locale) => ({
+      onKeyDown(event, editor, next) {
+        if (event.key === 'Backspace') {
+          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 createRenderElements([
+        {
+          type: types.carousel,
+          render: (props) => {
+            const { attributes, children, element } = props as RenderCarouselElementProps;
+
+            return renderCarousel({
+              attributes,
+              element,
+              children,
+              controller: core,
+            });
+          },
+        },
+        {
+          type: types.carousel_images,
+          render: (props) => {
+            const { attributes, children, element } = props as RenderCarouselImagesElementProps;
+
+            return renderCarouselImages({
+              attributes,
+              element,
+              children,
+            });
+          },
+        },
+        {
+          type: types.carousel_caption,
+          render: (props) => {
+            const { attributes, children, element } = props as RenderCarouselCaptionElementProps;
+
+            return renderCarouselCaption({
+              attributes,
+              element,
+              children,
+            });
+          },
+        },
+      ]);
+    },
+    createRenderPlaceholderElement: ({ render = defaultRenderCarouselPlaceholderElement } = {}) =>
+      createRenderElement({
+        type: CAROUSEL_PLACEHOLDER_TYPE,
+        render,
+      }),
+  };
+}

package/carousel/src/defaultRenderCarouselElements.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Carousel from './components/Carousel';
+import CarouselImages from './components/CarouselImages';
+import CarouselCaption from './components/CarouselCaption';
+import CarouselPlaceholder from './components/CarouselPlaceholder';
+import { CarouselRenderElements, RenderCarouselPlaceholderElement } from './typings';
+
+export const defaultRenderCarouselElements: CarouselRenderElements = {
+  carousel: (props) => <Carousel {...props} />,
+  carousel_images: (props) => <CarouselImages {...props} />,
+  carousel_caption: (props) => <CarouselCaption {...props} />,
+};
+
+export const defaultRenderCarouselPlaceholderElement: RenderCarouselPlaceholderElement = (props) => (
+  <CarouselPlaceholder {...props} />
+);

package/carousel/src/hooks/useCarousel.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { CarouselContext } from '../contexts/CarouselContext';
+
+export function useCarousel() {
+  return useContext(CarouselContext);
+}

package/carousel/src/typings.ts

@@ -0,0 +1,55 @@
+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/carousel/toolbar/package.json

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

package/carousel/toolbar/src/CarouselToolbarIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ToolbarIcon, ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactCarousel } from '@quadrats/react/carousel';
+import { useCarouselTool } from './useCarouselTool';
+
+export interface CarouselToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+  controller: ReactCarousel;
+}
+
+function CarouselToolbarIcon(props: CarouselToolbarIconProps) {
+  const { controller, ...rest } = props;
+  const { onClick } = useCarouselTool(controller);
+
+  return <ToolbarIcon {...rest} onClick={onClick} />;
+}
+
+export default CarouselToolbarIcon;

package/carousel/toolbar/src/useCarouselTool.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useSlateStatic, useModal } from '@quadrats/react';
+import { ReactCarousel } from '@quadrats/react/carousel';
+
+export function useCarouselTool(controller: ReactCarousel) {
+  const editor = useSlateStatic();
+  const { setCarouselModalConfig, isModalClosed, setIsModalClosed } = useModal();
+
+  useEffect(() => {
+    if (isModalClosed) {
+      setTimeout(() => {
+        controller.removeCarouselPlaceholder(editor);
+        setIsModalClosed(false);
+      }, 250);
+    }
+  }, [controller, editor, isModalClosed, setIsModalClosed]);
+
+  return {
+    onClick: () => {
+      controller.insertCarouselPlaceholder(editor);
+      setCarouselModalConfig({
+        controller,
+        onConfirm: (items) => {
+          controller.insertCarousel({
+            editor,
+            items,
+          });
+
+          controller.removeCarouselPlaceholder(editor);
+        },
+      });
+    },
+  };
+}

package/carousel/toolbar/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "exclude": ["**/*.spec.*"],
+  "include": ["./src"]
+}

package/carousel/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "exclude": ["**/*.spec.*"],
+  "include": ["./src"]
+}