@quadrats/react 1.1.6 → 1.1.8

package/components/package.json

@@ -4,7 +4,25 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "quadratsConfig": {
+    "deps": [
+      "utils",
+      "configs"
+    ],
+    "styles": {
+      "BaseField/baseField": "baseField",
+      "Progress/progress": "progress",
+      "Tooltip/tooltip": "tooltip",
+      "Button/button": "button",
+      "Input/input": "input",
+      "Textarea/textarea": "textarea",
+      "Hint/hint": "hint",
+      "Modal/modal": "modal",
+      "Message/message": "message",
+      "SegmentedControl/segmentedControl": "segmentedControl",
+      "ImageUploader/imageUploader": "imageUploader",
+      "Toggle/toggle": "toggle",
+      "components": "components"
+    }
+  }
 }

package/components/src/BaseField/index.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+import { Error } from '@quadrats/icons';
+import clsx from 'clsx';
+import Icon from '../Icon';
+
+export interface BaseFieldProps {
+  label?: string;
+  className?: string;
+  width?: number;
+  children: ReactNode;
+  required?: boolean;
+  errorMessage?: string;
+}
+
+const BaseField = ({ label, className, width, children, required = false, errorMessage }: BaseFieldProps) => {
+  return (
+    <div className={clsx('qdr-base-field', className)} style={{ width }}>
+      {label && (
+        <p className="qdr-base-field__label">
+          {label}
+          {required && <span className="qdr-base-field__required-mark">*</span>}
+        </p>
+      )}
+      {children}
+      {errorMessage && (
+        <div className="qdr-base-field__error-message">
+          <Icon icon={Error} width={16} height={16} />
+          <span>{errorMessage}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BaseField;

package/components/src/Button/index.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode, MouseEventHandler } from 'react';
+import clsx from 'clsx';
+
+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;
+}
+
+const Button = ({
+  onClick,
+  className,
+  type = 'button',
+  variant = 'primary',
+  size = 'small',
+  prefix,
+  danger = false,
+  disabled,
+  children,
+}: ButtonProps) => {
+  return (
+    <button
+      className={clsx(
+        'qdr-button',
+        `qdr-button--${variant}`,
+        `qdr-button--${size}`,
+        {
+          'qdr-button--danger': danger,
+        },
+        className,
+      )}
+      type={type}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {prefix}
+      {children}
+    </button>
+  );
+};
+
+export default Button;

package/components/src/Hint/index.tsx

@@ -0,0 +1,61 @@
+import React, { CSSProperties, useMemo } from 'react';
+import clsx from 'clsx';
+import { Info, Success, Warning, Error } from '@quadrats/icons';
+import Icon from '../Icon';
+
+export interface HintProps {
+  children: string;
+  variant?: 'info' | 'success' | 'warning' | 'error';
+}
+
+const Hint = ({ children, variant = 'info' }: HintProps) => {
+  const icon = useMemo(() => {
+    switch (variant) {
+      case 'info':
+        return Info;
+
+      case 'success':
+        return Success;
+
+      case 'warning':
+        return Warning;
+
+      case 'error':
+        return Error;
+
+      default:
+        return Info;
+    }
+  }, [variant]);
+
+  return (
+    <div className="qdr-hint">
+      <div className={clsx('qdr-hint__icon', `qdr-hint__icon--${variant}`)}>
+        <Icon icon={icon} width={16} height={16} />
+      </div>
+      <div className={clsx('qdr-hint__children', `qdr-hint__children--${variant}`)}>{children}</div>
+    </div>
+  );
+};
+
+export interface HintsProps {
+  hints: {
+    text: string;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+  }[];
+  style?: CSSProperties;
+}
+
+export const Hints = ({ hints, style }: HintsProps) => {
+  return (
+    <div className="qdr-hints" style={style}>
+      {hints.map((hint, index) => (
+        <Hint key={index} variant={hint.variant}>
+          {hint.text}
+        </Hint>
+      ))}
+    </div>
+  );
+};
+
+export default Hint;

package/components/src/Icon/index.tsx

@@ -0,0 +1,45 @@
+import React, { SVGProps, forwardRef } from 'react';
+import { IconDefinition } from '@quadrats/icons';
+
+const svgBaseProps: SVGProps<SVGSVGElement> = {
+  width: '1em',
+  height: '1em',
+  'aria-hidden': true,
+  focusable: false,
+};
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  /**
+   * The `IconDefinition` will be rendered.
+   */
+  icon: IconDefinition;
+  /**
+   * Provide `fontSize` by `em` to control size of icon.
+   * @default 1
+   */
+  size?: number;
+}
+
+const Icon = forwardRef<SVGSVGElement, IconProps>(({
+  children, style, icon, size = 1, ...props
+}, ref) => {
+  if (!icon) {
+    throw new Error('The icon definition is needed.');
+  }
+
+  const { definition } = icon;
+  const svgProps: SVGProps<SVGSVGElement> = {
+    ...svgBaseProps,
+    ...definition.svg,
+    ...props,
+    style: { ...style, fontSize: `${size}em` },
+  };
+
+  return (
+    <svg {...svgProps} ref={ref}>
+      <path {...definition.path} />
+    </svg>
+  );
+});
+
+export default Icon;

package/components/src/ImageUploader/index.tsx

@@ -0,0 +1,306 @@
+import React, { Dispatch, SetStateAction, useState, useMemo, useCallback } from 'react';
+import {
+  FileUploaderGetBody,
+  FileUploaderGetHeaders,
+  FileUploaderGetUrl,
+  FileUploaderImplement,
+  ImageAccept,
+} from '@quadrats/common/file-uploader';
+import { readFileAsBase64, upload } from '@quadrats/react/utils';
+import { Trash } from '@quadrats/icons';
+import clsx from 'clsx';
+import { Plus, Image } from '@quadrats/icons';
+import BaseField, { BaseFieldProps } from '../BaseField';
+import Icon from '../Icon';
+import { Hints } from '../Hint';
+import Progress from '../Progress';
+
+export type ImageUploaderItem = {
+  file: File;
+  progress: number;
+  preview: string;
+  url: string;
+};
+
+export interface ImageUploaderProps extends Omit<BaseFieldProps, 'children'> {
+  getBody: FileUploaderGetBody;
+  getHeaders?: FileUploaderGetHeaders;
+  getUrl: FileUploaderGetUrl;
+  uploader?: FileUploaderImplement;
+  imageUploaderItem: ImageUploaderItem | null;
+  setImageUploaderItem: Dispatch<SetStateAction<ImageUploaderItem | null>>;
+  accept?: ImageAccept[];
+  ratio?: [number, number];
+  limitSize?: number;
+  disabled?: boolean;
+  onOverLimitSize?: VoidFunction;
+  onErrorAccept?: VoidFunction;
+}
+
+// TODO: i18n
+const ImageUploader = ({
+  label,
+  className,
+  getBody,
+  getHeaders,
+  getUrl,
+  uploader,
+  imageUploaderItem,
+  setImageUploaderItem,
+  width = 140,
+  accept = ['image/jpeg', 'image/jpg', 'image/png'],
+  ratio,
+  limitSize = 5,
+  disabled = false,
+  required,
+  errorMessage,
+  onOverLimitSize,
+  onErrorAccept,
+}: ImageUploaderProps) => {
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [isError, setIsError] = useState<boolean>(false);
+
+  const onProgress = useCallback(
+    (p: number) => {
+      setImageUploaderItem((prev) => {
+        if (prev) {
+          return {
+            ...prev,
+            progress: p,
+          };
+        }
+
+        return prev;
+      });
+    },
+    [setImageUploaderItem],
+  );
+
+  const onUpload = useCallback(
+    async (file?: File) => {
+      if (file) {
+        if (file.size > limitSize * 1024 * 1024) {
+          setIsError(true);
+          onOverLimitSize?.();
+        } else {
+          const base64 = await readFileAsBase64(file);
+
+          setImageUploaderItem(() => ({
+            file,
+            preview: base64,
+            url: '',
+            progress: 0,
+          }));
+
+          try {
+            const url = await upload({
+              file,
+              getBody,
+              getHeaders,
+              getUrl,
+              uploader,
+              onProgress,
+            });
+
+            setImageUploaderItem((prev) => {
+              if (prev) {
+                return {
+                  ...prev,
+                  preview: url,
+                  url,
+                };
+              }
+
+              return prev;
+            });
+          } catch (error) {
+            setIsError(true);
+            setImageUploaderItem(() => null);
+          }
+        }
+      }
+    },
+    [getBody, getHeaders, getUrl, limitSize, onOverLimitSize, onProgress, setImageUploaderItem, uploader],
+  );
+
+  const onSelectFile = useCallback(async () => {
+    if (!disabled && !imageUploaderItem) {
+      setIsError(false);
+
+      return new Promise<File | undefined>((resolve) => {
+        const inputEl = document.createElement('input');
+
+        if (accept) {
+          inputEl.accept = accept.join(',');
+        }
+
+        inputEl.multiple = false;
+        inputEl.type = 'file';
+
+        inputEl.addEventListener('cancel', () => {
+          resolve(undefined);
+        });
+
+        inputEl.addEventListener('change', () => {
+          const { files: fileList } = inputEl;
+
+          if (!fileList || !fileList.length) {
+            resolve(undefined);
+          } else {
+            resolve(fileList[0]);
+          }
+        });
+
+        inputEl.click();
+      });
+    }
+  }, [accept, disabled, imageUploaderItem]);
+
+  const handleDrop = useCallback(
+    async (event: React.DragEvent<HTMLDivElement>) => {
+      if (event.dataTransfer?.types?.includes('Files') && !disabled && !imageUploaderItem) {
+        event.preventDefault();
+        setIsDragging(false);
+        setIsError(false);
+
+        const files = Array.from(event.dataTransfer.files);
+        const targetFile = files[0];
+
+        if (targetFile.size > limitSize * 1024 * 1024) {
+          setIsError(true);
+          onOverLimitSize?.();
+
+          return;
+        }
+
+        if (!accept.find((a) => a === targetFile.type)) {
+          setIsError(true);
+          onErrorAccept?.();
+
+          return;
+        }
+
+        await onUpload(targetFile);
+      }
+    },
+    [accept, disabled, imageUploaderItem, limitSize, onErrorAccept, onOverLimitSize, onUpload],
+  );
+
+  const acceptText = useMemo(() => {
+    if (accept.find((a) => a === 'image/jpeg' || a === 'image/jpg') && accept.find((a) => a === 'image/png')) {
+      return 'JPG 或 PNG';
+    } else if (accept.find((a) => a === 'image/png')) {
+      return 'PNG';
+    } else if (accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) {
+      return 'JPG';
+    }
+
+    return '';
+  }, [accept]);
+
+  return (
+    <BaseField className={className} label={label} required={required} width={width} errorMessage={errorMessage}>
+      <div className="qdr-image-uploader__wrapper">
+        {imageUploaderItem ? (
+          <div
+            className="qdr-image-uploader qdr-image-uploader__previewer"
+            style={{ width, aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1' }}
+          >
+            <div className="qdr-image-uploader__image-wrapper">
+              {imageUploaderItem.progress !== 100 && <Progress percentage={imageUploaderItem.progress} />}
+              <div contentEditable={false} className={clsx('qdr-inline-toolbar', 'qdr-image-uploader__inline-toolbar')}>
+                <Icon
+                  className={clsx('qdr-inline-toolbar__icon', {
+                    'qdr-inline-toolbar__icon--disabled': disabled,
+                  })}
+                  icon={Trash}
+                  width={24}
+                  height={24}
+                  onClick={() => {
+                    if (!disabled) {
+                      setImageUploaderItem(() => null);
+                    }
+                  }}
+                />
+              </div>
+              <img
+                src={imageUploaderItem.url || imageUploaderItem.preview}
+                className="qdr-image-uploader__image"
+                style={{
+                  objectFit: ratio ? 'cover' : 'contain',
+                  aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1',
+                }}
+              />
+            </div>
+          </div>
+        ) : (
+          <div
+            className={clsx('qdr-image-uploader', {
+              'qdr-image-uploader--dragging': isDragging,
+              'qdr-image-uploader--error': isError,
+              'qdr-image-uploader--disabled': disabled,
+            })}
+            style={isDragging ? undefined : { width, aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1' }}
+            onClick={async () => {
+              const file = await onSelectFile();
+
+              await onUpload(file);
+            }}
+            onDragOver={(e) => {
+              e.preventDefault();
+
+              if (e.dataTransfer?.types?.includes('Files')) {
+                setIsDragging(true);
+                setIsError(false);
+              }
+            }}
+            onDragLeave={() => {
+              setIsDragging(false);
+              setIsError(false);
+            }}
+            onDrop={handleDrop}
+          >
+            {isError ? (
+              <>
+                <Icon icon={Image} width={24} height={24} className="qdr-image-uploader__icon" />
+                <span className="qdr-image-uploader__main-text">上傳錯誤</span>
+              </>
+            ) : (
+              <>
+                <Icon icon={Plus} width={24} height={24} className="qdr-image-uploader__icon" />
+                {isDragging ? (
+                  <div className="qdr-image-uploader__dragging-wrapper">
+                    <span className="qdr-image-uploader__main-text">點擊或拖曳檔案到此上傳</span>
+                    <span className="qdr-image-uploader__info-text">
+                      {ratio
+                        ? `僅能上傳 ${acceptText}；建議比例為 ${ratio[0]}:${ratio[1]} 且寬度至少達 2000px 以上；檔案大小不可超過 ${limitSize}MB`
+                        : `僅能上傳 ${acceptText}；檔案大小不可超過 ${limitSize}MB`}
+                    </span>
+                  </div>
+                ) : (
+                  <span className="qdr-image-uploader__main-text">上傳</span>
+                )}
+              </>
+            )}
+          </div>
+        )}
+        <Hints
+          style={{ width }}
+          hints={[
+            {
+              text: `檔案格式：限 ${acceptText}。`,
+            },
+            ratio && {
+              text: `檔案尺寸：最佳比例為 ${ratio[0]}:${ratio[1]}。建議圖片寬度達 2000px 以上，高度不限。`,
+            },
+            {
+              text: `檔案大小：不可大於 ${limitSize} MB。`,
+            },
+          ].filter((h) => !!h)}
+        />
+      </div>
+    </BaseField>
+  );
+};
+
+export default ImageUploader;

package/components/src/Input/index.tsx

@@ -0,0 +1,72 @@
+import React, { Ref, useMemo } from 'react';
+import clsx from 'clsx';
+import BaseField, { BaseFieldProps } from '../BaseField';
+
+export interface InputProps extends Omit<BaseFieldProps, 'children'> {
+  value?: string;
+  onChange?: (value: string) => void;
+  inputRef?: Ref<HTMLInputElement>;
+  placeholder?: string;
+  disabled?: boolean;
+  isError?: boolean;
+  hint?: string;
+  maxLength?: number;
+}
+
+const Input = ({
+  label,
+  className,
+  width,
+  value = '',
+  onChange,
+  inputRef,
+  placeholder,
+  disabled,
+  isError,
+  hint,
+  maxLength,
+  errorMessage,
+  required = false,
+}: InputProps) => {
+  const isLimited = useMemo(() => maxLength && value && value.length >= maxLength, [maxLength, value]);
+
+  return (
+    <BaseField className={className} label={label} required={required} width={width} errorMessage={errorMessage}>
+      <div className="qdr-input">
+        <input
+          ref={inputRef}
+          className={clsx('qdr-input__input', {
+            'qdr-input__input--error': isError,
+          })}
+          value={value}
+          onChange={(e) => {
+            onChange?.(e.target.value);
+          }}
+          type="text"
+          maxLength={maxLength}
+          placeholder={placeholder}
+          disabled={disabled}
+        />
+        {hint && (
+          <div className="qdr-input__hint-wrapper">
+            <span className="qdr-input__hint">{hint}</span>
+          </div>
+        )}
+        {maxLength && (
+          <span
+            className={clsx('qdr-input__counter', {
+              'qdr-input__counter--have-hint': hint,
+              'qdr-input__counter--limited': isLimited,
+              'qdr-input__counter--error': isError,
+              'qdr-input__counter--disabled': disabled,
+            })}
+          >
+            {`${value ? value.length : 0}/${maxLength}`}
+          </span>
+        )}
+      </div>
+    </BaseField>
+  );
+};
+
+export default Input;