@hubstr/kit 0.1.4 → 0.1.6

package/ui/src/Image/Image.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import { Image as AntImage, Skeleton } from 'antd';
-import { cssVar, cx, useThemeMode } from 'antd-style';
-import { memo } from 'react';
-
-import { Flexbox } from '../Flex';
-
-import usePreview from './components/usePreview';
-import { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';
-import type { ImageProps } from './type';
-
-const Image = memo<ImageProps>(
-  ({
-    ref,
-    style,
-    preview,
-    isLoading,
-    maxHeight = '100%',
-    maxWidth = '100%',
-    minHeight,
-    minWidth,
-    actions,
-    className,
-    alwaysShowActions,
-    variant = 'filled',
-    objectFit = 'cover',
-    classNames,
-    styles: customStyles,
-    onClick,
-    width,
-    height,
-    ...rest
-  }) => {
-    const { isDarkMode } = useThemeMode();
-    const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;
-    const mergePreview = usePreview(preview);
-
-    if (isLoading)
-      return (
-        <div onClick={onClick}>
-          <Skeleton.Avatar
-            active
-            style={{
-              borderRadius: cssVar.borderRadius,
-              height,
-              maxHeight,
-              maxWidth,
-              minHeight,
-              minWidth,
-              width,
-            }}
-          />
-        </div>
-      );
-
-    return (
-      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>
-        {actions && (
-          <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>
-            {actions}
-          </div>
-        )}
-        <AntImage
-          className={cx(styles.image, classNames?.image)}
-          fallback={isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}
-          height={height}
-          loading={'lazy'}
-          preview={preview === false ? false : (mergePreview as any)}
-          width={width}
-          classNames={{
-            root: cx(styles.wrapper, classNames?.wrapper),
-          }}
-          style={{
-            maxHeight,
-            maxWidth,
-            minHeight,
-            minWidth,
-            objectFit: objectFit || 'cover',
-            ...customStyles?.image,
-          }}
-          styles={{
-            root: customStyles?.wrapper,
-          }}
-          onClick={onClick}
-          {...rest}
-        />
-      </Flexbox>
-    );
-  },
-);
-
-Image.displayName = 'Image';
-
-export default Image;

package/ui/src/Image/PreviewGroup.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import { Image } from 'antd';
-import { memo } from 'react';
-
-import usePreviewGroup from './components/usePreviewGroup';
-import type { PreviewGroupProps } from './type';
-
-const { PreviewGroup: AntdPreviewGroup } = Image;
-
-const PreviewGroup = memo<PreviewGroupProps>(({ items, children, enable = true, preview }) => {
-  const mergePreview = usePreviewGroup(preview);
-
-  if (!enable) return children;
-
-  return (
-    <AntdPreviewGroup items={items} preview={mergePreview}>
-      {children}
-    </AntdPreviewGroup>
-  );
-});
-
-PreviewGroup.displayName = 'PreviewGroup';
-
-export default PreviewGroup;

package/ui/src/Image/components/Preview.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { memo, type PropsWithChildren, useEffect, useRef } from 'react';
-
-interface PreviewProps extends PropsWithChildren {
-  visible?: boolean;
-}
-
-const Preview = memo<PreviewProps>(({ children, visible }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!ref.current) return;
-
-    const handleDisableZoom = (event: any) => {
-      event.preventDefault();
-    };
-
-    if (visible) {
-      ref.current.addEventListener('wheel', handleDisableZoom, { passive: false });
-    } else {
-      ref.current.removeEventListener('wheel', handleDisableZoom);
-    }
-  }, [visible]);
-
-  return <div ref={ref}>{children}</div>;
-});
-
-export default Preview;

package/ui/src/Image/components/Toolbar.tsx

@@ -1,140 +0,0 @@
-import { message } from 'antd';
-import {
-  Copy,
-  Download,
-  FlipHorizontal,
-  FlipVertical,
-  RotateCcw,
-  RotateCw,
-  ZoomIn,
-  ZoomOut,
-} from 'lucide-react';
-import { type ToolbarRenderInfoType } from 'rc-image/lib/Preview';
-import { memo, type ReactNode, useCallback, useState } from 'react';
-
-import ActionIcon from '../../ActionIcon';
-import { Flexbox } from '../../Flex';
-import imageMessages from '../../i18n/resources/en/image';
-import { useTranslation } from '../../i18n/useTranslation';
-import { TooltipGroup } from '../../Tooltip';
-import { getClipboardBlob } from '../../utils/blobToPng';
-import { downloadBlob } from '../../utils/downloadBlob';
-
-import { styles } from '../style';
-
-const getFileNameFromUrl = (url: string): string => {
-  try {
-    const pathname = new URL(url).pathname;
-    const match = pathname.match(/\/([^/]+)$/);
-    return match ? decodeURIComponent(match[1]) : 'image';
-  } catch {
-    return 'image';
-  }
-};
-
-const getExtensionFromMimeType = (mimeType: string): string => {
-  const map: Record<string, string> = {
-    'image/svg+xml': 'svg',
-    'image/png': 'png',
-    'image/jpeg': 'jpg',
-    'image/jpg': 'jpg',
-    'image/webp': 'webp',
-    'image/gif': 'gif',
-  };
-  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';
-};
-
-export interface ToolbarProps {
-  children?: ReactNode;
-  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;
-  maxScale: number;
-  minScale: number;
-}
-
-const Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {
-  const { t } = useTranslation(imageMessages);
-  const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);
-  const [copyLoading, setCopyLoading] = useState(false);
-  const [downloadLoading, setDownloadLoading] = useState(false);
-  const {
-    transform: { scale },
-    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },
-    image: { url },
-  } = info;
-
-  const handleDownload = useCallback(async () => {
-    setDownloadLoading(true);
-    try {
-      const response = await fetch(url, { mode: 'cors' });
-      const blob = await response.blob();
-      const blobUrl = URL.createObjectURL(blob);
-      let fileName = getFileNameFromUrl(url);
-      const ext = getExtensionFromMimeType(blob.type);
-      if (!fileName.includes('.')) {
-        fileName = `${fileName}.${ext}`;
-      } else if (fileName.endsWith('.svg+xml')) {
-        fileName = fileName.replace(/\.svg\+xml$/i, '.svg');
-      }
-      await downloadBlob(blobUrl, fileName);
-      URL.revokeObjectURL(blobUrl);
-      message.success(t('image.downloadSuccess'));
-    } catch {
-      message.error(t('image.downloadFailed'));
-    } finally {
-      setDownloadLoading(false);
-    }
-  }, [url, t]);
-
-  const handleCopy = useCallback(async () => {
-    setCopyLoading(true);
-    try {
-      const response = await fetch(url, { mode: 'cors' });
-      const blob = await response.blob();
-      const clipboardBlob = await getClipboardBlob(blob);
-      await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);
-      message.success(t('image.copySuccess'));
-    } catch {
-      message.error(t('image.copyFailed'));
-    } finally {
-      setCopyLoading(false);
-    }
-  }, [url, t]);
-
-  return (
-    <TooltipGroup popupContainer={containerEl ?? undefined}>
-      <Flexbox horizontal className={styles.toolbar} gap={4} ref={setContainerEl}>
-        <ActionIcon icon={FlipHorizontal} title={t('image.flipHorizontal')} onClick={onFlipX} />
-        <ActionIcon icon={FlipVertical} title={t('image.flipVertical')} onClick={onFlipY} />
-        <ActionIcon icon={RotateCcw} title={t('image.rotateLeft')} onClick={onRotateLeft} />
-        <ActionIcon icon={RotateCw} title={t('image.rotateRight')} onClick={onRotateRight} />
-        <ActionIcon
-          disabled={scale === minScale}
-          icon={ZoomOut}
-          title={t('image.zoomOut')}
-          onClick={onZoomOut}
-        />
-        <ActionIcon
-          disabled={scale === maxScale}
-          icon={ZoomIn}
-          title={t('image.zoomIn')}
-          onClick={onZoomIn}
-        />
-        <ActionIcon
-          icon={Copy}
-          loading={copyLoading}
-          title={t('image.copy')}
-          onClick={handleCopy}
-        />
-        <ActionIcon
-          icon={Download}
-          loading={downloadLoading}
-          title={t('image.download')}
-          onClick={handleDownload}
-        />
-        {children}
-      </Flexbox>
-    </TooltipGroup>
-  );
-});
-
-export default Toolbar;

package/ui/src/Image/components/usePreview.tsx

@@ -1,69 +0,0 @@
-import type { ImageProps as AntdImageProps } from 'antd';
-import { cx } from 'antd-style';
-import { X } from 'lucide-react';
-import { useMemo, useState } from 'react';
-
-import Icon from '../../Icon';
-
-import { styles } from '../style';
-import type { ImagePreviewOptions } from '../type';
-import Preview from './Preview';
-import Toolbar from './Toolbar';
-
-export const usePreview = (
-  props: ImagePreviewOptions | boolean | undefined,
-): AntdImageProps['preview'] => {
-  const [visible, setVisible] = useState(false);
-
-  return useMemo(() => {
-    if (props === false) return props;
-
-    const {
-      onVisibleChange,
-      onOpenChange,
-      minScale = 0.32,
-      maxScale = 32,
-      toolbarAddon,
-      rootClassName,
-      imageRender,
-      toolbarRender,
-      actionsRender,
-      ...rest
-    }: ImagePreviewOptions = (props === true ? {} : props || {}) as ImagePreviewOptions;
-
-    return {
-      actionsRender:
-        actionsRender ||
-        ((_, info) => {
-          const originalNode = (
-            <Toolbar info={info} maxScale={maxScale} minScale={minScale}>
-              {toolbarAddon}
-            </Toolbar>
-          );
-          // 向后兼容 toolbarRender
-          if (toolbarRender) return toolbarRender(originalNode, info);
-          return originalNode;
-        }),
-      closeIcon: <Icon color={'#fff'} icon={X} />,
-      imageRender: (originalNode, info) => {
-        const node = <Preview visible={visible}>{originalNode}</Preview>;
-        if (imageRender) return imageRender(node, info);
-        return node;
-      },
-      maxScale,
-      minScale,
-      onOpenChange: (open: boolean) => {
-        setVisible(open);
-        // 支持新的 onOpenChange
-        onOpenChange?.(open);
-        // 向后兼容旧的 onVisibleChange
-        onVisibleChange?.(open, !open);
-      },
-      rootClassName: cx(styles.preview, rootClassName),
-      styles: { mask: { backdropFilter: 'blur(8px)' } },
-      ...rest,
-    };
-  }, [props, visible, styles]);
-};
-
-export default usePreview;

package/ui/src/Image/components/usePreviewGroup.tsx

@@ -1,67 +0,0 @@
-import { type GroupPreviewConfig } from 'antd/es/image/PreviewGroup';
-import { cx } from 'antd-style';
-import { X } from 'lucide-react';
-import { useMemo, useState } from 'react';
-
-import Icon from '../../Icon';
-
-import { styles as componentStyles, styles } from '../style';
-import { type PreviewGroupPreviewOptions } from '../type';
-import Preview from './Preview';
-import Toolbar from './Toolbar';
-
-export const usePreview = (
-  props: PreviewGroupPreviewOptions | boolean | undefined,
-): GroupPreviewConfig | boolean => {
-  const [visible, setVisible] = useState(false);
-
-  return useMemo(() => {
-    if (props === false) return props;
-
-    const {
-      onVisibleChange,
-      onOpenChange,
-      minScale = 0.32,
-      maxScale = 32,
-      toolbarAddon,
-      rootClassName,
-      imageRender,
-      toolbarRender,
-      ...rest
-    }: PreviewGroupPreviewOptions = (
-      props === true ? {} : props || {}
-    ) as PreviewGroupPreviewOptions;
-
-    return {
-      actionsRender: (_, info) => {
-        const originalNode = (
-          <Toolbar info={info} maxScale={maxScale} minScale={minScale}>
-            {toolbarAddon}
-          </Toolbar>
-        );
-        if (toolbarRender) return toolbarRender(originalNode, info);
-        return originalNode;
-      },
-      closeIcon: <Icon color={'#fff'} icon={X} />,
-
-      imageRender: (originalNode, info) => {
-        const node = <Preview visible={visible}>{originalNode}</Preview>;
-        if (imageRender) return imageRender(node, info);
-        return node;
-      },
-      maxScale,
-      minScale,
-      onOpenChange: (open: boolean, info: { current: number }) => {
-        setVisible(open);
-        // 支持新的 onOpenChange
-        onOpenChange?.(open, info);
-        // 向后兼容旧的 onVisibleChange (注意参数差异)
-        onVisibleChange?.(open, !open, info.current);
-      },
-      rootClassName: cx(styles.preview, rootClassName),
-      ...rest,
-    } satisfies GroupPreviewConfig;
-  }, [props, visible, componentStyles]);
-};
-
-export default usePreview;

package/ui/src/Image/demos/CustomActions.tsx

@@ -1,13 +0,0 @@
-import { ActionIcon, Image } from '@hubstr/kit/ui';
-import { Trash } from 'lucide-react';
-
-export default () => {
-  return (
-    <Image
-      actions={<ActionIcon danger glass icon={Trash} variant={'filled'} />}
-      src={
-        'https://registry.npmmirror.com/@hubstr/fluent-emoji-3d/latest/files/assets/1f5bc-fe0f.webp'
-      }
-    />
-  );
-};

package/ui/src/Image/demos/Fallback.tsx

@@ -1,7 +0,0 @@
-import { Image } from '@hubstr/kit/ui';
-
-const url = 'https://error';
-
-export default () => {
-  return <Image height={512} src={url} width={512} />;
-};

package/ui/src/Image/demos/Gallery.tsx

@@ -1,22 +0,0 @@
-import { Image } from '@hubstr/kit/ui';
-
-import { Flexbox } from '../../Flex';
-
-export default () => {
-  return (
-    <Flexbox horizontal gap={8}>
-      <Image.PreviewGroup>
-        <Image
-          src={
-            'https://registry.npmmirror.com/@hubstr/fluent-emoji-3d/latest/files/assets/1f5bc-fe0f.webp'
-          }
-        />
-        <Image
-          src={
-            'https://registry.npmmirror.com/@hubstr/fluent-emoji-3d/latest/files/assets/1f379.webp'
-          }
-        />
-      </Image.PreviewGroup>
-    </Flexbox>
-  );
-};

package/ui/src/Image/demos/index.tsx

@@ -1,23 +0,0 @@
-import { Image, type ImageProps } from '@hubstr/kit/ui';
-import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
-
-export default () => {
-  const store = useCreateStore();
-  const options = useControls(
-    {
-      alt: 'Image',
-      preview: true,
-      src: 'https://registry.npmmirror.com/@hubstr/fluent-emoji-3d/latest/files/assets/1f5bc-fe0f.webp',
-      variant: {
-        options: ['filled', 'outlined', 'borderless'],
-        value: 'filled',
-      },
-    },
-    { store },
-  ) as ImageProps;
-  return (
-    <StoryBook levaStore={store}>
-      <Image {...options} />
-    </StoryBook>
-  );
-};

package/ui/src/Image/index.md

@@ -1,63 +0,0 @@
----
-nav: Components
-group: Data Display
-title: Image
-description: Image is an enhanced image component with preview capabilities, custom actions, and various display styles. It extends Ant Design's Image component with additional features like size control, loading state, and custom toolbar addons.
----
-
-## Default
-
-<code src="./demos/index.tsx" nopadding></code>
-
-## Gallery
-
-<code src="./demos/Gallery.tsx" center></code>
-
-## Fallback
-
-<code src="./demos/Fallback.tsx" center></code>
-
-## Custom Actions
-
-<code src="./demos/CustomActions.tsx" center></code>
-
-## APIs
-
-### Image
-
-| Property          | Description                                  | Type                                                  | Default |
-| ----------------- | -------------------------------------------- | ----------------------------------------------------- | ------- |
-| src               | Image source                                 | `string`                                              | -       |
-| alt               | Image alt text                               | `string`                                              | -       |
-| variant           | Visual style variant                         | `'borderless' \| 'filled' \| 'outlined'`              | -       |
-| preview           | Whether to enable preview or preview options | `boolean \| ImagePreviewOptions`                      | `true`  |
-| size              | Size of the image container                  | `number \| string`                                    | -       |
-| maxWidth          | Maximum width of image container             | `number \| string`                                    | -       |
-| minWidth          | Minimum width of image container             | `number \| string`                                    | -       |
-| maxHeight         | Maximum height of image container            | `number \| string`                                    | -       |
-| minHeight         | Minimum height of image container            | `number \| string`                                    | -       |
-| objectFit         | Object-fit style for the image               | `'cover' \| 'contain'`                                | -       |
-| isLoading         | Whether the image is in loading state        | `boolean`                                             | `false` |
-| actions           | Custom actions to display                    | `ReactNode`                                           | -       |
-| alwaysShowActions | Whether to always show action buttons        | `boolean`                                             | `false` |
-| toolbarAddon      | Additional content for the preview toolbar   | `ReactNode`                                           | -       |
-| classNames        | Custom class names                           | `{ image?: string; wrapper?: string; }`               | -       |
-| styles            | Custom styles                                | `{ image?: CSSProperties; wrapper?: CSSProperties; }` | -       |
-
-> Additional props are inherited from Ant Design's [Image](https://ant.design/components/image/) component.
-
-### PreviewGroup
-
-| Property | Description                                  | Type                         | Default |
-| -------- | -------------------------------------------- | ---------------------------- | ------- |
-| enable   | Whether to enable the preview group          | `boolean`                    | `true`  |
-| items    | List of image URLs to include in the preview | `string[]`                   | -       |
-| preview  | Preview options                              | `PreviewGroupPreviewOptions` | -       |
-
-### ImagePreviewOptions
-
-| Property     | Description                                | Type        | Default |
-| ------------ | ------------------------------------------ | ----------- | ------- |
-| toolbarAddon | Additional content for the preview toolbar | `ReactNode` | -       |
-
-> Additional options are inherited from rc-image's ImagePreviewType.

package/ui/src/Image/index.ts

@@ -1,17 +0,0 @@
-import type { ReactNode } from 'react';
-
-import ImageParent from './Image';
-import PreviewGroup from './PreviewGroup';
-import type { ImageProps } from './type';
-
-export interface IImage {
-  (props: ImageProps): ReactNode;
-  PreviewGroup: typeof PreviewGroup;
-}
-
-const Image = ImageParent as unknown as IImage;
-Image.PreviewGroup = PreviewGroup;
-
-export default Image;
-export { default as PreviewGroup } from './PreviewGroup';
-export type * from './type';