@akinon/ui-upload 0.3.0 → 1.0.0

package/dist/cjs/index.css

@@ -0,0 +1,89 @@
+/* TODO: use antd useStyleRegister */
+
+.akinon-upload.akinon-upload-select {
+  cursor: pointer;
+  flex: 1;
+  width: 100%;
+  /* TODO: use antd tokens */
+  padding: 10px 20px;
+  font-weight: 600;
+  background-color: var(--color-ebonyClay-475);
+  border-radius: 5px;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+
+.akinon-upload.akinon-upload-select:not(:has(.akinon-upload-list-item)) {
+  max-width: 300px;
+}
+
+.akinon-upload-wrapper
+  .akinon-upload-list:not(.akinon-upload-list-picture-card) {
+  line-height: 0;
+  max-width: 300px;
+}
+
+.akinon-upload-wrapper
+  .akinon-upload-list:not(.akinon-upload-list-picture-card)
+  .akinon-upload-list-item {
+  /* TODO: use antd tokens */
+  border-radius: 5px;
+  height: unset;
+  padding: 10px 20px;
+  background-color: var(--color-ebonyClay-550);
+  font-size: 14px;
+  font-weight: 600;
+  gap: 10px;
+  align-items: center;
+}
+
+.akinon-upload-wrapper
+  .akinon-upload-list:not(.akinon-upload-list-picture-card)
+  .akinon-upload-list-item
+  .akinon-upload-list-item-name {
+  white-space: normal;
+  word-break: break-all;
+}
+
+.akinon-upload-wrapper.akinon-upload-picture-card-wrapper
+  .akinon-upload-list.akinon-upload-list-picture-card
+  .akinon-upload-list-item {
+  /* TODO: use antd tokens */
+  border-radius: 0;
+  border: 2px solid var(--color-neutral-350);
+}
+
+.akinon-upload-wrapper.akinon-upload-picture-card-wrapper
+  .akinon-upload-list.akinon-upload-list-picture-card
+  .akinon-upload-list-item-error {
+  border-color: var(--color-red-500);
+}
+
+.akinon-upload-wrapper.akinon-upload-picture-card-wrapper
+  .akinon-upload-list.akinon-upload-list-picture-card
+  .akinon-upload-list-item::before {
+  display: none;
+}
+
+.akinon-upload-wrapper.akinon-upload-picture-card-wrapper
+  .akinon-upload-list.akinon-upload-list-picture-card
+  .akinon-upload-list-item-actions {
+  cursor: pointer;
+  width: fit-content;
+  inset: auto 6px 6px auto;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  height: 18px;
+  width: 18px;
+  font-size: 12px;
+}
+
+.akinon-upload-wrapper
+  .akinon-upload-list
+  .akinon-upload-list-item
+  .akinon-upload-list-item-actions
+  .akinon-upload-list-item-action {
+  opacity: 1;
+}

package/dist/cjs/index.d.ts

@@ -1,12 +1,23 @@
 import './index.css';
 import type { UploadProps as AntUploadProps } from 'antd';
 import * as React from 'react';
-export type UploadProps = Omit<AntUploadProps, 'prefixCls' | 'rootClassName'>;
+import type { UploadProps } from './types';
+/**
+ * Upload component for Akinon UI.
+ *
+ * The Upload component provides an interface for users to upload files.
+ * It supports various configurations like drag-and-drop, previewing files,
+ * and customizing request methods. The component is designed to handle multiple
+ * file types and offers flexibility for integrating with server-side logic.
+ *
+ * The component adheres to the Akinon design system, ensuring consistency across applications.
+ */
 declare const Upload: {
-    (Props: UploadProps): React.JSX.Element;
+    (props: UploadProps): React.JSX.Element;
     Dragger: React.ForwardRefExoticComponent<AntUploadProps<any> & {
-        height?: number | undefined;
+        height?: number;
     } & React.RefAttributes<import("antd/es/upload/Upload").UploadRef<any>>>;
 };
 export { Upload };
+export * from './types.d';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,MAAM,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,eAAe,CAAC,CAAC;AAC9E,QAAA,MAAM,MAAM;YAAW,WAAW;;;;CAEjC,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,MAAM,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;GASG;AAEH,QAAA,MAAM,MAAM;YAAW,WAAW;;;;CAiEjC,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,cAAc,WAAW,CAAC"}

package/dist/cjs/index.js

@@ -1,11 +1,73 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Upload = void 0;
 require("./index.css");
+const ui_image_1 = require("@akinon/ui-image");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
-const Upload = (Props) => {
-    return React.createElement(antd_1.Upload, Object.assign({}, Props));
+const item_1 = require("./item");
+/**
+ * Upload component for Akinon UI.
+ *
+ * The Upload component provides an interface for users to upload files.
+ * It supports various configurations like drag-and-drop, previewing files,
+ * and customizing request methods. The component is designed to handle multiple
+ * file types and offers flexibility for integrating with server-side logic.
+ *
+ * The component adheres to the Akinon design system, ensuring consistency across applications.
+ */
+const Upload = (props) => {
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const uploadToken = token.Upload;
+    const prefixClsWithoutHash = `${getPrefixCls()}-upload`;
+    const prefixCls = `:where(.${hashId}).${prefixClsWithoutHash}`;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Upload'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        return {
+            [`${prefixCls}-wrapper`]: {
+                [`.${prefixClsWithoutHash}-list`]: {
+                    '&-item-error-border': {
+                        border: `1px solid ${uploadToken === null || uploadToken === void 0 ? void 0 : uploadToken.colorError}`
+                    },
+                    '&-item-actions': {
+                        '.anticon.anticon-delete': {
+                            display: 'inline-block',
+                            textAlign: 'center',
+                            svg: {
+                                color: 'black',
+                                height: '12px',
+                                width: '12px'
+                            }
+                        }
+                    }
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(ui_image_1.Image.PreviewGroup, null,
+        React.createElement(antd_1.Upload, Object.assign({ fileList: props.fileList, itemRender: (originNode, file, fileList, actions) => (React.createElement(item_1.UploadItem, { props: Object.assign({ listType: 'text' }, props), originNode: originNode, file: file, fileList: fileList, actions: actions, prefixClsWithoutHash: prefixClsWithoutHash, onPreview: props.onPreview })) }, props))));
 };
 exports.Upload = Upload;
 Upload.Dragger = antd_1.Upload.Dragger;
+__exportStar(require("./types.d"), exports);

package/dist/cjs/item.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { UploadItemProps } from './types';
+declare const componentMap: {
+    readonly 'picture-card': typeof ImageItem;
+    readonly text: typeof TextItem;
+};
+export declare function UploadItem({ props, originNode, file, fileList, actions, prefixClsWithoutHash, onPreview, Component }: UploadItemProps & {
+    Component?: (typeof componentMap)[keyof typeof componentMap] | React.ComponentType<UploadItemProps & {
+        akinonNode: (typeof componentMap)[keyof typeof componentMap];
+    }>;
+}): React.JSX.Element;
+declare function ImageItem({ file, onPreview, prefixClsWithoutHash, actions, originNode }: UploadItemProps): React.JSX.Element;
+declare function TextItem({ file, prefixClsWithoutHash, actions }: UploadItemProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=item.d.ts.map

package/dist/cjs/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/item.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,YAAY;;;CAGR,CAAC;AAEX,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,oBAAoB,EACpB,SAAS,EACT,SAAqE,EACtE,EAAE,eAAe,GAAG;IACnB,SAAS,CAAC,EACN,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,GAChD,KAAK,CAAC,aAAa,CACjB,eAAe,GAAG;QAChB,UAAU,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;KAC9D,CACF,CAAC;CACP,qBAiBA;AAED,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,SAAS,EACT,oBAAoB,EACpB,OAAO,EACP,UAAU,EACX,EAAE,eAAe,qBA2BjB;AAED,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,oBAAoB,EAAE,OAAO,EAAE,EAAE,eAAe,qBA4CzE"}

package/dist/cjs/item.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadItem = UploadItem;
+const icons_1 = require("@akinon/icons");
+const ui_image_1 = require("@akinon/ui-image");
+const ui_layout_1 = require("@akinon/ui-layout");
+const ui_tooltip_1 = require("@akinon/ui-tooltip");
+const clsx_1 = require("clsx");
+const react_1 = require("react");
+const componentMap = {
+    'picture-card': ImageItem,
+    text: TextItem
+};
+function UploadItem({ props, originNode, file, fileList, actions, prefixClsWithoutHash, onPreview, Component = componentMap[props.listType] }) {
+    if (Component) {
+        return (react_1.default.createElement(Component, { akinonNode: componentMap[props.listType], originNode: originNode, props: props, file: file, fileList: fileList, actions: actions, prefixClsWithoutHash: prefixClsWithoutHash, onPreview: onPreview }));
+    }
+    return originNode;
+}
+function ImageItem({ file, onPreview, prefixClsWithoutHash, actions, originNode }) {
+    return file.thumbUrl ? (react_1.default.createElement("div", { className: (0, clsx_1.default)(`${prefixClsWithoutHash}-list-item`, `${prefixClsWithoutHash}-list-item-${file.status}-border`), onClick: () => {
+            actions.preview();
+        } },
+        react_1.default.createElement(ui_image_1.Image, Object.assign({ src: file.thumbUrl }, (onPreview && { preview: false }))),
+        react_1.default.createElement("div", { className: `${prefixClsWithoutHash}-list-item-actions` },
+            react_1.default.createElement(icons_1.Icon, { icon: "bin", size: 12, color: "black", onClick: e => {
+                    e.stopPropagation();
+                    actions.remove();
+                } })))) : (originNode);
+}
+function TextItem({ file, prefixClsWithoutHash, actions }) {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(`${prefixClsWithoutHash}-list-item`, `${prefixClsWithoutHash}-list-item-${file.status}-border`) },
+        react_1.default.createElement(ui_layout_1.Flex, { flex: 1, justify: "between", align: "center", gap: 8 },
+            react_1.default.createElement(ui_layout_1.Flex, { align: "center", gap: 10, flex: 1 },
+                react_1.default.createElement("div", { className: `${prefixClsWithoutHash}-list-item-actions` },
+                    react_1.default.createElement(icons_1.Icon, { cursor: "pointer", icon: "bin", size: 13, color: "var(--color-azure-500)", onClick: e => {
+                            e.stopPropagation();
+                            actions.remove();
+                        } })),
+                react_1.default.createElement("div", { className: `${prefixClsWithoutHash}-list-item-name` }, file.name)),
+            file.status === 'error' && (
+            // TODO: pass proper error messages
+            react_1.default.createElement(ui_tooltip_1.Tooltip, { title: "Error" },
+                react_1.default.createElement(icons_1.Icon, { className: (0, clsx_1.default)(`${prefixClsWithoutHash}-list-item-${file.status}`), icon: "warning_tri", size: 13, color: "var(--color-azure-500)" }))))));
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,311 @@
+import type { IProgressProps } from '@akinon/ui-progress';
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type { UploadFile } from 'antd';
+
+export type UploadItemProps = RenderedItemProps & {
+  /**
+   * Props of the upload component.
+   */
+  props: UploadProps;
+
+  /**
+   * The original React node for the upload item.
+   */
+  originNode: React.ReactElement;
+};
+
+export type UploadMethod = 'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch';
+
+export type UploadListType =
+  | 'text'
+  | 'picture'
+  | 'picture-card'
+  | 'picture-circle';
+
+export interface UploadProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'onError' | 'onProgress'
+  > {
+  /**
+   * Whether to control the component internally.
+   */
+  hasControlInside?: boolean;
+
+  /**
+   * The type of the upload input.
+   */
+  type?: 'drag' | 'select';
+
+  /**
+   * The name attribute for the file input.
+   */
+  name?: string;
+
+  /**
+   * Default list of files.
+   */
+  defaultFileList?: UploadFile[];
+
+  /**
+   * Controlled file list.
+   */
+  fileList?: UploadFile[];
+
+  /**
+   * The URL or function that returns the URL for uploading files.
+   */
+  action?: string | ((file: UploadFile) => string | PromiseLike<string>);
+
+  /**
+   * Whether to enable directory upload.
+   */
+  directory?: boolean;
+
+  /**
+   * Additional data to include in the upload request.
+   */
+  data?:
+    | Record<string, unknown>
+    | ((
+        file: UploadFile
+      ) => Record<string, unknown> | Promise<Record<string, unknown>>);
+
+  /**
+   * HTTP method to use for the upload request.
+   */
+  method?: UploadMethod;
+
+  /**
+   * Custom headers for the upload request.
+   */
+  headers?: Record<string, string>;
+
+  /**
+   * Configuration for displaying the upload list.
+   */
+  showUploadList?:
+    | boolean
+    | {
+        showRemoveIcon?: boolean;
+        showPreviewIcon?: boolean;
+        showDownloadIcon?: boolean;
+        removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+        downloadIcon?:
+          | React.ReactNode
+          | ((file: UploadFile) => React.ReactNode);
+        previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+      };
+
+  /**
+   * Whether to allow uploading multiple files.
+   */
+  multiple?: boolean;
+
+  /**
+   * The file types that can be uploaded.
+   */
+  accept?: string;
+
+  /**
+   * Function called before uploading a file.
+   */
+  beforeUpload?: (
+    file: UploadFile,
+    FileList: UploadFile[]
+  ) =>
+    | void
+    | boolean
+    | string
+    | Blob
+    | File
+    | Promise<void | boolean | string | Blob | File>;
+
+  /**
+   * Function called when the file list changes.
+   */
+  onChange?: (info: {
+    file: UploadFile;
+    fileList: UploadFile[];
+    event?: {
+      percent: number;
+    };
+  }) => void;
+
+  /**
+   * Function called when a file is dropped into the upload area.
+   */
+  onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+
+  /**
+   * Additional class name for the upload component.
+   */
+  className?: string;
+
+  /**
+   * Root class name for the upload component.
+   */
+  rootClassName?: string;
+
+  /**
+   * Function called to preview a file.
+   */
+  onPreview?: (file: UploadFile) => void;
+
+  /**
+   * Function called to download a file.
+   */
+  onDownload?: (file: UploadFile) => void;
+
+  /**
+   * Function called to remove a file.
+   */
+  onRemove?: (file: UploadFile) => void | boolean | Promise<void | boolean>;
+
+  /**
+   * Whether to support server-side rendering.
+   */
+  supportServerRender?: boolean;
+
+  /**
+   * Whether the upload input is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Custom request function for handling uploads.
+   */
+  customRequest?: (options: {
+    onProgress?: (event: Partial<ProgressEvent> & { percent?: number }) => void;
+    onError?: (
+      event:
+        | (Error & {
+            status?: number;
+            method?: UploadMethod;
+          })
+        | ProgressEvent,
+      body?: UploadFile
+    ) => void;
+    onSuccess?: (body: UploadFile, xhr?: XMLHttpRequest) => void;
+    data?: Record<string, unknown>;
+    filename?: string;
+    file: void | string | Blob | UploadFile['originFileObj'];
+    withCredentials?: boolean;
+    action: string;
+    headers?: Record<string, string>;
+    method: UploadMethod;
+  }) => void;
+
+  /**
+   * Whether to send credentials with the upload request.
+   */
+  withCredentials?: boolean;
+
+  /**
+   * Whether to open the file dialog when clicking on the upload area.
+   */
+  openFileDialogOnClick?: boolean;
+
+  /**
+   * Locale strings for the upload component.
+   */
+  locale?: {
+    uploading?: string;
+    removeFile?: string;
+    downloadFile?: string;
+    uploadError?: string;
+    previewFile?: string;
+  };
+
+  /**
+   * ID for the upload component.
+   */
+  id?: string;
+
+  /**
+   * Function to generate a preview for a file.
+   */
+  previewFile?: (file: File | Blob) => PromiseLike<string>;
+
+  /**
+   * Function to render a custom icon for a file.
+   */
+  iconRender?: (file: UploadFile, listType?: UploadListType) => React.ReactNode;
+
+  /**
+   * Function to determine if a file is an image.
+   */
+  isImageUrl?: (file: UploadFile) => boolean;
+
+  /**
+   * Progress bar properties for the upload component.
+   */
+  progress?: Omit<IProgressProps, 'percent' | 'type'>;
+
+  /**
+   * Function to render a custom item in the upload list.
+   */
+  itemRender?: Omit<RenderedItemProps, 'prefixClsWithoutHash' | 'onPreview'>;
+
+  /**
+   * Maximum number of files that can be uploaded.
+   */
+  maxCount?: number;
+
+  /**
+   * Child elements to render within the upload component.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Type of upload list to display.
+   */
+  listType?: UploadListType;
+
+  /**
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}
+
+export type RenderedItemProps = {
+  /**
+   * List of files in the upload component.
+   */
+  fileList: UploadFile[];
+
+  /**
+   * The individual file being rendered.
+   */
+  file: UploadFile;
+
+  /**
+   * Function to preview the file.
+   */
+  onPreview?: (file: UploadFile) => void;
+
+  /**
+   * Prefix class name without hash.
+   */
+  prefixClsWithoutHash: string;
+
+  /**
+   * Actions available for the file (download, preview, remove).
+   */
+  actions: {
+    /**
+     * Function to download the file.
+     */
+    download: () => void;
+
+    /**
+     * Function to preview the file.
+     */
+    preview: () => void;
+
+    /**
+     * Function to remove the file.
+     */
+    remove: () => void;
+  };
+};

package/dist/esm/index.css

@@ -0,0 +1,89 @@
+/* TODO: use antd useStyleRegister */
+
+.akinon-upload.akinon-upload-select {
+  cursor: pointer;
+  flex: 1;
+  width: 100%;
+  /* TODO: use antd tokens */
+  padding: 10px 20px;
+  font-weight: 600;
+  background-color: var(--color-ebonyClay-475);
+  border-radius: 5px;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+
+.akinon-upload.akinon-upload-select:not(:has(.akinon-upload-list-item)) {
+  max-width: 300px;
+}
+
+.akinon-upload-wrapper
+  .akinon-upload-list:not(.akinon-upload-list-picture-card) {
+  line-height: 0;
+  max-width: 300px;
+}
+
+.akinon-upload-wrapper
+  .akinon-upload-list:not(.akinon-upload-list-picture-card)
+  .akinon-upload-list-item {
+  /* TODO: use antd tokens */
+  border-radius: 5px;
+  height: unset;
+  padding: 10px 20px;
+  background-color: var(--color-ebonyClay-550);
+  font-size: 14px;
+  font-weight: 600;
+  gap: 10px;
+  align-items: center;
+}
+
+.akinon-upload-wrapper
+  .akinon-upload-list:not(.akinon-upload-list-picture-card)
+  .akinon-upload-list-item
+  .akinon-upload-list-item-name {
+  white-space: normal;
+  word-break: break-all;
+}
+
+.akinon-upload-wrapper.akinon-upload-picture-card-wrapper
+  .akinon-upload-list.akinon-upload-list-picture-card
+  .akinon-upload-list-item {
+  /* TODO: use antd tokens */
+  border-radius: 0;
+  border: 2px solid var(--color-neutral-350);
+}
+
+.akinon-upload-wrapper.akinon-upload-picture-card-wrapper
+  .akinon-upload-list.akinon-upload-list-picture-card
+  .akinon-upload-list-item-error {
+  border-color: var(--color-red-500);
+}
+
+.akinon-upload-wrapper.akinon-upload-picture-card-wrapper
+  .akinon-upload-list.akinon-upload-list-picture-card
+  .akinon-upload-list-item::before {
+  display: none;
+}
+
+.akinon-upload-wrapper.akinon-upload-picture-card-wrapper
+  .akinon-upload-list.akinon-upload-list-picture-card
+  .akinon-upload-list-item-actions {
+  cursor: pointer;
+  width: fit-content;
+  inset: auto 6px 6px auto;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  height: 18px;
+  width: 18px;
+  font-size: 12px;
+}
+
+.akinon-upload-wrapper
+  .akinon-upload-list
+  .akinon-upload-list-item
+  .akinon-upload-list-item-actions
+  .akinon-upload-list-item-action {
+  opacity: 1;
+}

package/dist/esm/index.d.ts

@@ -1,12 +1,23 @@
 import './index.css';
 import type { UploadProps as AntUploadProps } from 'antd';
 import * as React from 'react';
-export type UploadProps = Omit<AntUploadProps, 'prefixCls' | 'rootClassName'>;
+import type { UploadProps } from './types';
+/**
+ * Upload component for Akinon UI.
+ *
+ * The Upload component provides an interface for users to upload files.
+ * It supports various configurations like drag-and-drop, previewing files,
+ * and customizing request methods. The component is designed to handle multiple
+ * file types and offers flexibility for integrating with server-side logic.
+ *
+ * The component adheres to the Akinon design system, ensuring consistency across applications.
+ */
 declare const Upload: {
-    (Props: UploadProps): React.JSX.Element;
+    (props: UploadProps): React.JSX.Element;
     Dragger: React.ForwardRefExoticComponent<AntUploadProps<any> & {
-        height?: number | undefined;
+        height?: number;
     } & React.RefAttributes<import("antd/es/upload/Upload").UploadRef<any>>>;
 };
 export { Upload };
+export * from './types.d';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,MAAM,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,eAAe,CAAC,CAAC;AAC9E,QAAA,MAAM,MAAM;YAAW,WAAW;;;;CAEjC,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,MAAM,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;GASG;AAEH,QAAA,MAAM,MAAM;YAAW,WAAW;;;;CAiEjC,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,cAAc,WAAW,CAAC"}

package/dist/esm/index.js

@@ -1,8 +1,56 @@
 import './index.css';
-import { Upload as AntUpload } from 'antd';
+import { Image } from '@akinon/ui-image';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Upload as AntUpload } from 'antd';
 import * as React from 'react';
-const Upload = (Props) => {
-    return React.createElement(AntUpload, Object.assign({}, Props));
+import { UploadItem } from './item';
+/**
+ * Upload component for Akinon UI.
+ *
+ * The Upload component provides an interface for users to upload files.
+ * It supports various configurations like drag-and-drop, previewing files,
+ * and customizing request methods. The component is designed to handle multiple
+ * file types and offers flexibility for integrating with server-side logic.
+ *
+ * The component adheres to the Akinon design system, ensuring consistency across applications.
+ */
+const Upload = (props) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const uploadToken = token.Upload;
+    const prefixClsWithoutHash = `${getPrefixCls()}-upload`;
+    const prefixCls = `:where(.${hashId}).${prefixClsWithoutHash}`;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Upload'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        return {
+            [`${prefixCls}-wrapper`]: {
+                [`.${prefixClsWithoutHash}-list`]: {
+                    '&-item-error-border': {
+                        border: `1px solid ${uploadToken === null || uploadToken === void 0 ? void 0 : uploadToken.colorError}`
+                    },
+                    '&-item-actions': {
+                        '.anticon.anticon-delete': {
+                            display: 'inline-block',
+                            textAlign: 'center',
+                            svg: {
+                                color: 'black',
+                                height: '12px',
+                                width: '12px'
+                            }
+                        }
+                    }
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(Image.PreviewGroup, null,
+        React.createElement(AntUpload, Object.assign({ fileList: props.fileList, itemRender: (originNode, file, fileList, actions) => (React.createElement(UploadItem, { props: Object.assign({ listType: 'text' }, props), originNode: originNode, file: file, fileList: fileList, actions: actions, prefixClsWithoutHash: prefixClsWithoutHash, onPreview: props.onPreview })) }, props))));
 };
 Upload.Dragger = AntUpload.Dragger;
 export { Upload };
+export * from './types.d';

package/dist/esm/item.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { UploadItemProps } from './types';
+declare const componentMap: {
+    readonly 'picture-card': typeof ImageItem;
+    readonly text: typeof TextItem;
+};
+export declare function UploadItem({ props, originNode, file, fileList, actions, prefixClsWithoutHash, onPreview, Component }: UploadItemProps & {
+    Component?: (typeof componentMap)[keyof typeof componentMap] | React.ComponentType<UploadItemProps & {
+        akinonNode: (typeof componentMap)[keyof typeof componentMap];
+    }>;
+}): React.JSX.Element;
+declare function ImageItem({ file, onPreview, prefixClsWithoutHash, actions, originNode }: UploadItemProps): React.JSX.Element;
+declare function TextItem({ file, prefixClsWithoutHash, actions }: UploadItemProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=item.d.ts.map

package/dist/esm/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/item.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,YAAY;;;CAGR,CAAC;AAEX,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,oBAAoB,EACpB,SAAS,EACT,SAAqE,EACtE,EAAE,eAAe,GAAG;IACnB,SAAS,CAAC,EACN,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,GAChD,KAAK,CAAC,aAAa,CACjB,eAAe,GAAG;QAChB,UAAU,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;KAC9D,CACF,CAAC;CACP,qBAiBA;AAED,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,SAAS,EACT,oBAAoB,EACpB,OAAO,EACP,UAAU,EACX,EAAE,eAAe,qBA2BjB;AAED,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,oBAAoB,EAAE,OAAO,EAAE,EAAE,eAAe,qBA4CzE"}

package/dist/esm/item.js

@@ -0,0 +1,42 @@
+import { Icon } from '@akinon/icons';
+import { Image } from '@akinon/ui-image';
+import { Flex } from '@akinon/ui-layout';
+import { Tooltip } from '@akinon/ui-tooltip';
+import clsx from 'clsx';
+import React from 'react';
+const componentMap = {
+    'picture-card': ImageItem,
+    text: TextItem
+};
+export function UploadItem({ props, originNode, file, fileList, actions, prefixClsWithoutHash, onPreview, Component = componentMap[props.listType] }) {
+    if (Component) {
+        return (React.createElement(Component, { akinonNode: componentMap[props.listType], originNode: originNode, props: props, file: file, fileList: fileList, actions: actions, prefixClsWithoutHash: prefixClsWithoutHash, onPreview: onPreview }));
+    }
+    return originNode;
+}
+function ImageItem({ file, onPreview, prefixClsWithoutHash, actions, originNode }) {
+    return file.thumbUrl ? (React.createElement("div", { className: clsx(`${prefixClsWithoutHash}-list-item`, `${prefixClsWithoutHash}-list-item-${file.status}-border`), onClick: () => {
+            actions.preview();
+        } },
+        React.createElement(Image, Object.assign({ src: file.thumbUrl }, (onPreview && { preview: false }))),
+        React.createElement("div", { className: `${prefixClsWithoutHash}-list-item-actions` },
+            React.createElement(Icon, { icon: "bin", size: 12, color: "black", onClick: e => {
+                    e.stopPropagation();
+                    actions.remove();
+                } })))) : (originNode);
+}
+function TextItem({ file, prefixClsWithoutHash, actions }) {
+    return (React.createElement("div", { className: clsx(`${prefixClsWithoutHash}-list-item`, `${prefixClsWithoutHash}-list-item-${file.status}-border`) },
+        React.createElement(Flex, { flex: 1, justify: "between", align: "center", gap: 8 },
+            React.createElement(Flex, { align: "center", gap: 10, flex: 1 },
+                React.createElement("div", { className: `${prefixClsWithoutHash}-list-item-actions` },
+                    React.createElement(Icon, { cursor: "pointer", icon: "bin", size: 13, color: "var(--color-azure-500)", onClick: e => {
+                            e.stopPropagation();
+                            actions.remove();
+                        } })),
+                React.createElement("div", { className: `${prefixClsWithoutHash}-list-item-name` }, file.name)),
+            file.status === 'error' && (
+            // TODO: pass proper error messages
+            React.createElement(Tooltip, { title: "Error" },
+                React.createElement(Icon, { className: clsx(`${prefixClsWithoutHash}-list-item-${file.status}`), icon: "warning_tri", size: 13, color: "var(--color-azure-500)" }))))));
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,311 @@
+import type { IProgressProps } from '@akinon/ui-progress';
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type { UploadFile } from 'antd';
+
+export type UploadItemProps = RenderedItemProps & {
+  /**
+   * Props of the upload component.
+   */
+  props: UploadProps;
+
+  /**
+   * The original React node for the upload item.
+   */
+  originNode: React.ReactElement;
+};
+
+export type UploadMethod = 'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch';
+
+export type UploadListType =
+  | 'text'
+  | 'picture'
+  | 'picture-card'
+  | 'picture-circle';
+
+export interface UploadProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'onError' | 'onProgress'
+  > {
+  /**
+   * Whether to control the component internally.
+   */
+  hasControlInside?: boolean;
+
+  /**
+   * The type of the upload input.
+   */
+  type?: 'drag' | 'select';
+
+  /**
+   * The name attribute for the file input.
+   */
+  name?: string;
+
+  /**
+   * Default list of files.
+   */
+  defaultFileList?: UploadFile[];
+
+  /**
+   * Controlled file list.
+   */
+  fileList?: UploadFile[];
+
+  /**
+   * The URL or function that returns the URL for uploading files.
+   */
+  action?: string | ((file: UploadFile) => string | PromiseLike<string>);
+
+  /**
+   * Whether to enable directory upload.
+   */
+  directory?: boolean;
+
+  /**
+   * Additional data to include in the upload request.
+   */
+  data?:
+    | Record<string, unknown>
+    | ((
+        file: UploadFile
+      ) => Record<string, unknown> | Promise<Record<string, unknown>>);
+
+  /**
+   * HTTP method to use for the upload request.
+   */
+  method?: UploadMethod;
+
+  /**
+   * Custom headers for the upload request.
+   */
+  headers?: Record<string, string>;
+
+  /**
+   * Configuration for displaying the upload list.
+   */
+  showUploadList?:
+    | boolean
+    | {
+        showRemoveIcon?: boolean;
+        showPreviewIcon?: boolean;
+        showDownloadIcon?: boolean;
+        removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+        downloadIcon?:
+          | React.ReactNode
+          | ((file: UploadFile) => React.ReactNode);
+        previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+      };
+
+  /**
+   * Whether to allow uploading multiple files.
+   */
+  multiple?: boolean;
+
+  /**
+   * The file types that can be uploaded.
+   */
+  accept?: string;
+
+  /**
+   * Function called before uploading a file.
+   */
+  beforeUpload?: (
+    file: UploadFile,
+    FileList: UploadFile[]
+  ) =>
+    | void
+    | boolean
+    | string
+    | Blob
+    | File
+    | Promise<void | boolean | string | Blob | File>;
+
+  /**
+   * Function called when the file list changes.
+   */
+  onChange?: (info: {
+    file: UploadFile;
+    fileList: UploadFile[];
+    event?: {
+      percent: number;
+    };
+  }) => void;
+
+  /**
+   * Function called when a file is dropped into the upload area.
+   */
+  onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+
+  /**
+   * Additional class name for the upload component.
+   */
+  className?: string;
+
+  /**
+   * Root class name for the upload component.
+   */
+  rootClassName?: string;
+
+  /**
+   * Function called to preview a file.
+   */
+  onPreview?: (file: UploadFile) => void;
+
+  /**
+   * Function called to download a file.
+   */
+  onDownload?: (file: UploadFile) => void;
+
+  /**
+   * Function called to remove a file.
+   */
+  onRemove?: (file: UploadFile) => void | boolean | Promise<void | boolean>;
+
+  /**
+   * Whether to support server-side rendering.
+   */
+  supportServerRender?: boolean;
+
+  /**
+   * Whether the upload input is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Custom request function for handling uploads.
+   */
+  customRequest?: (options: {
+    onProgress?: (event: Partial<ProgressEvent> & { percent?: number }) => void;
+    onError?: (
+      event:
+        | (Error & {
+            status?: number;
+            method?: UploadMethod;
+          })
+        | ProgressEvent,
+      body?: UploadFile
+    ) => void;
+    onSuccess?: (body: UploadFile, xhr?: XMLHttpRequest) => void;
+    data?: Record<string, unknown>;
+    filename?: string;
+    file: void | string | Blob | UploadFile['originFileObj'];
+    withCredentials?: boolean;
+    action: string;
+    headers?: Record<string, string>;
+    method: UploadMethod;
+  }) => void;
+
+  /**
+   * Whether to send credentials with the upload request.
+   */
+  withCredentials?: boolean;
+
+  /**
+   * Whether to open the file dialog when clicking on the upload area.
+   */
+  openFileDialogOnClick?: boolean;
+
+  /**
+   * Locale strings for the upload component.
+   */
+  locale?: {
+    uploading?: string;
+    removeFile?: string;
+    downloadFile?: string;
+    uploadError?: string;
+    previewFile?: string;
+  };
+
+  /**
+   * ID for the upload component.
+   */
+  id?: string;
+
+  /**
+   * Function to generate a preview for a file.
+   */
+  previewFile?: (file: File | Blob) => PromiseLike<string>;
+
+  /**
+   * Function to render a custom icon for a file.
+   */
+  iconRender?: (file: UploadFile, listType?: UploadListType) => React.ReactNode;
+
+  /**
+   * Function to determine if a file is an image.
+   */
+  isImageUrl?: (file: UploadFile) => boolean;
+
+  /**
+   * Progress bar properties for the upload component.
+   */
+  progress?: Omit<IProgressProps, 'percent' | 'type'>;
+
+  /**
+   * Function to render a custom item in the upload list.
+   */
+  itemRender?: Omit<RenderedItemProps, 'prefixClsWithoutHash' | 'onPreview'>;
+
+  /**
+   * Maximum number of files that can be uploaded.
+   */
+  maxCount?: number;
+
+  /**
+   * Child elements to render within the upload component.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Type of upload list to display.
+   */
+  listType?: UploadListType;
+
+  /**
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}
+
+export type RenderedItemProps = {
+  /**
+   * List of files in the upload component.
+   */
+  fileList: UploadFile[];
+
+  /**
+   * The individual file being rendered.
+   */
+  file: UploadFile;
+
+  /**
+   * Function to preview the file.
+   */
+  onPreview?: (file: UploadFile) => void;
+
+  /**
+   * Prefix class name without hash.
+   */
+  prefixClsWithoutHash: string;
+
+  /**
+   * Actions available for the file (download, preview, remove).
+   */
+  actions: {
+    /**
+     * Function to download the file.
+     */
+    download: () => void;
+
+    /**
+     * Function to preview the file.
+     */
+    preview: () => void;
+
+    /**
+     * Function to remove the file.
+     */
+    remove: () => void;
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-upload",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,14 +9,21 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.22.6",
+    "clsx": "2.1.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.3.0"
+    "typescript": "*",
+    "@akinon/icons": "1.0.0",
+    "@akinon/ui-layout": "1.0.0",
+    "@akinon/ui-theme": "1.0.0",
+    "@akinon/ui-progress": "1.0.0",
+    "@akinon/ui-image": "1.0.0",
+    "@akinon/ui-tooltip": "1.0.0",
+    "@akinon/typescript-config": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -36,7 +43,7 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
     "typecheck": "tsc --noEmit"
   }