@hai-dev/ui-kit 1.0.0

package/dist/components/photo-crop-uploader/photo-crop-uploader.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { PhotoCropUploaderProps } from './types';
+export declare const PhotoCropUploader: FC<PhotoCropUploaderProps>;

package/dist/components/photo-crop-uploader/photo-crop-uploader.js

@@ -0,0 +1,143 @@
+import { jsxs as K, Fragment as Q, jsx as s } from "react/jsx-runtime";
+import { useState as a, useRef as S } from "react";
+import "../../index-BiffjjQq.js";
+import { c as V } from "../../Button-BjNjCLw8.js";
+import { localizedText as W } from "./locale.js";
+import { EN_LOCALE as Y } from "../../constants.js";
+import { DEFAULT_MIN_DIMENSION as $, DEFAULT_ASPECT_RATIO as oo, DEFAULT_TIMEOUT as to, DEFAULT_FILE_MAX_SIZE as ro } from "./constants.js";
+import { UploadDialog as eo } from "./components/upload-dialog/upload-dialog.js";
+import { UploadButton as ao } from "./components/upload-button/upload-button.js";
+import { ErrorUploadDialog as no } from "./components/error-upload-dialog/error-upload-dialog.js";
+import { validatePhotoFile as so } from "./utils/validate-photo-file.js";
+import { readPhoto as po } from "./utils/read-photo.js";
+import { getPhotoCrop as io } from "./utils/get-photo-crop.js";
+import { getCropedPhoto as lo } from "./utils/get-croped-photo.js";
+import '../../assets/photo-crop-uploader.css';const co = "_photoCropCanvas_1i4lr_1", ho = {
+  photoCropCanvas: co
+}, vo = (_) => {
+  const {
+    buttonClassname: U = "",
+    onStartUpload: T = () => {
+    },
+    onEndUpload: w = () => {
+    },
+    onError: v = () => {
+    },
+    onStartCrop: x = () => {
+    },
+    onEndCrop: A = () => {
+    },
+    showErrorPopup: F = !1,
+    minDimension: n = $,
+    aspectRatio: l = oo,
+    locale: e = Y,
+    timeout: I = to,
+    fileMaxSize: y = ro,
+    allowedExtensions: c,
+    allowedMimeTypes: M,
+    circular: O,
+    width: N,
+    keepSelection: R,
+    ...b
+  } = _, [z, p] = a(!1), [H, h] = a(""), [i, d] = a(), m = S(null), f = S(null), [u, C] = a(!1), [E, P] = a(""), [j, g] = a(!1), D = () => {
+    p(!1);
+  }, k = () => {
+    g(!1);
+  }, B = (o) => {
+    w(o), h(o), p(!0), P("");
+  }, L = (o) => {
+    o instanceof Error && (console.warn(o.message), v(o), P(o.message), g(!0), h(""), p(!1));
+  }, X = async (o) => {
+    const r = o.target.files?.[0];
+    if (r)
+      try {
+        C(!0), T(), so(
+          r,
+          { maxSize: y, allowedExtensions: c, allowedMimeTypes: M },
+          e
+        );
+        const t = await po(r, n, e, I);
+        B(t);
+      } catch (t) {
+        L(t);
+      } finally {
+        o.target.value = "", C(!1);
+      }
+  }, Z = (o) => {
+    const { width: r, height: t } = o.currentTarget, J = io(r, t, n, l);
+    d(J);
+  }, q = (o, r) => {
+    d(r);
+  }, G = () => {
+    const o = f.current, r = m.current;
+    if (o && r && i)
+      try {
+        x();
+        const t = lo(
+          r,
+          o,
+          i,
+          e
+        );
+        A(t), D();
+      } catch (t) {
+        t instanceof Error && (console.warn(t), L(t));
+      }
+  };
+  return /* @__PURE__ */ K(Q, { children: [
+    /* @__PURE__ */ s(
+      ao,
+      {
+        onChange: X,
+        buttonClassname: U,
+        disabled: u,
+        buttonDisabled: u,
+        locale: e,
+        width: N,
+        allowedExtensions: c,
+        ...b,
+        children: W[e].upload
+      }
+    ),
+    /* @__PURE__ */ s(
+      eo,
+      {
+        open: z,
+        photoCrop: i,
+        photoSource: H,
+        photoError: E,
+        onCloseDialogHandler: D,
+        onCropChange: q,
+        onPhotoCrop: G,
+        onPhotoLoad: Z,
+        imageRef: m,
+        minDimension: n,
+        aspectRatio: l,
+        locale: e,
+        circular: O,
+        keepSelection: R
+      }
+    ),
+    /* @__PURE__ */ s(
+      no,
+      {
+        open: F && j,
+        photoError: E,
+        onCloseErrorDialog: k,
+        locale: e
+      }
+    ),
+    /* @__PURE__ */ s(
+      "canvas",
+      {
+        className: V(ho.photoCropCanvas),
+        width: n,
+        height: n,
+        ref: f
+      }
+    )
+  ] });
+};
+export {
+  vo as PhotoCropUploader
+};

package/dist/components/photo-crop-uploader/photo-crop-uploder.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PhotoCropUploader } from './';
+type PhotoCropUploaderMeta = Meta<typeof PhotoCropUploader>;
+type PhotoCropUploaderStory = StoryObj<typeof PhotoCropUploader>;
+declare const meta: PhotoCropUploaderMeta;
+export default meta;
+export declare const Base: PhotoCropUploaderStory;

package/dist/components/photo-crop-uploader/types.d.ts

@@ -0,0 +1,33 @@
+import { InputHTMLAttributes } from 'react';
+import { Locale } from '../../types';
+import { BMP_IMAGE_TYPE, GIF_IMAGE_TYPE, ICO_IMAGE_TYPE, JPEG_IMAGE_TYPE, JPG_IMAGE_TYPE, MICROSOFT_ICO_IMAGE_TYPE, PNG_IMAGE_TYPE, SVG_IMAGE_TYPE, WEBP_IMAGE_TYPE, ICO_IMAGE_EXT, BMP_IMAGE_EXT, GIF_IMAGE_EXT, JPEG_IMAGE_EXT, JPG_IMAGE_EXT, PNG_IMAGE_EXT, SVG_IMAGE_EXT, WEBP_IMAGE_EXT } from './constants';
+export type PhotoDataUrl = string;
+export type PhotoFileSize = number;
+export type PhotoExtension = typeof JPG_IMAGE_EXT | typeof JPEG_IMAGE_EXT | typeof PNG_IMAGE_EXT | typeof SVG_IMAGE_EXT | typeof BMP_IMAGE_EXT | typeof GIF_IMAGE_EXT | typeof WEBP_IMAGE_EXT | typeof ICO_IMAGE_EXT;
+export type PhotoMimeType = typeof JPG_IMAGE_TYPE | typeof JPEG_IMAGE_TYPE | typeof PNG_IMAGE_TYPE | typeof SVG_IMAGE_TYPE | typeof BMP_IMAGE_TYPE | typeof GIF_IMAGE_TYPE | typeof WEBP_IMAGE_TYPE | typeof ICO_IMAGE_TYPE | typeof MICROSOFT_ICO_IMAGE_TYPE;
+export type PhotoFileOptions = {
+    maxSize?: PhotoFileSize;
+    allowedExtensions?: PhotoExtension[];
+    allowedMimeTypes?: PhotoMimeType[];
+};
+export type PhotoCropUploaderCustomProps = {
+    buttonClassname?: string;
+    onStartUpload?: () => unknown;
+    onEndUpload?: (photoData: PhotoDataUrl) => unknown;
+    onError?: (error: Error) => unknown;
+    onStartCrop?: () => unknown;
+    onEndCrop?: (photoData: PhotoDataUrl) => unknown;
+    showErrorPopup?: boolean;
+    minDimension?: number;
+    aspectRatio?: number;
+    locale?: 'ru' | 'en';
+    timeout?: number;
+    fileMaxSize?: number;
+    allowedExtensions?: PhotoExtension[];
+    allowedMimeTypes?: PhotoMimeType[];
+    circular?: boolean;
+    keepSelection?: boolean;
+    width?: number;
+};
+export type PhotoCropUploaderProps = PhotoCropUploaderCustomProps & InputHTMLAttributes<HTMLInputElement>;
+export type PhotoCropUploaderLocaleText = Record<Locale, Record<string, string>>;

package/dist/components/photo-crop-uploader/types.js

@@ -0,0 +1 @@
+

package/dist/components/photo-crop-uploader/utils/get-croped-photo.d.ts

@@ -0,0 +1,4 @@
+import { Crop } from 'react-image-crop';
+import { Locale } from '../../../types';
+import { PhotoDataUrl } from '../types';
+export declare const getCropedPhoto: (photo: HTMLImageElement, canvas: HTMLCanvasElement, crop: Crop, locale?: Locale) => PhotoDataUrl;

package/dist/components/photo-crop-uploader/utils/get-croped-photo.js

@@ -0,0 +1,26 @@
+import { D as w } from "../../../index-BiffjjQq.js";
+import { localizedText as x } from "../locale.js";
+import { EN_LOCALE as O } from "../../../constants.js";
+import { PHOTO_CANVAS_CONTEXT as f, PHOTO_SMOOTHING_QUALITY as T } from "../constants.js";
+const H = (c, o, d, m = O) => {
+  const t = o.getContext(f);
+  if (!t)
+    throw new Error(x[m]["canvas-error"]);
+  const { width: l, height: n, naturalWidth: i, naturalHeight: a } = c, r = w(d, l, n), e = window.devicePixelRatio, h = i / l, s = a / n;
+  o.width = Math.floor(r.width * h * e), o.height = Math.floor(r.height * s * e), t.scale(e, e), t.imageSmoothingQuality = T, t.save();
+  const p = r.x * h, g = r.y * s;
+  return t.translate(-p, -g), t.drawImage(
+    c,
+    0,
+    0,
+    i,
+    a,
+    0,
+    0,
+    i,
+    a
+  ), t.restore(), o.toDataURL();
+};
+export {
+  H as getCropedPhoto
+};

package/dist/components/photo-crop-uploader/utils/get-photo-crop.d.ts

@@ -0,0 +1,2 @@
+import { Crop } from 'react-image-crop';
+export declare const getPhotoCrop: (width: number, height: number, minDimension?: number, aspectRatio?: number) => Crop;

package/dist/components/photo-crop-uploader/utils/get-photo-crop.js

@@ -0,0 +1,18 @@
+import { B as I, L as E } from "../../../index-BiffjjQq.js";
+import { DEFAULT_MIN_DIMENSION as T, DEFAULT_ASPECT_RATIO as C, PRECENT_UNIT as N } from "../constants.js";
+const A = (o, r, t = T, c = C) => {
+  const e = t / o * 100, n = t / r * 100, p = I(
+    {
+      unit: N,
+      width: e,
+      height: n
+    },
+    c,
+    o,
+    r
+  );
+  return E(p, o, r);
+};
+export {
+  A as getPhotoCrop
+};

package/dist/components/photo-crop-uploader/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { readPhoto } from './read-photo';
+export { getPhotoCrop } from './get-photo-crop';
+export { getCropedPhoto } from './get-croped-photo';
+export { validatePhotoFile } from './validate-photo-file';

package/dist/components/photo-crop-uploader/utils/index.js

@@ -0,0 +1,10 @@
+import { readPhoto as t } from "./read-photo.js";
+import { getPhotoCrop as p } from "./get-photo-crop.js";
+import { getCropedPhoto as h } from "./get-croped-photo.js";
+import { validatePhotoFile as x } from "./validate-photo-file.js";
+export {
+  h as getCropedPhoto,
+  p as getPhotoCrop,
+  t as readPhoto,
+  x as validatePhotoFile
+};

package/dist/components/photo-crop-uploader/utils/read-photo.d.ts

@@ -0,0 +1,3 @@
+import { Locale } from '../../../types';
+import { PhotoDataUrl } from '../types';
+export declare const readPhoto: (file: File, minDimension?: number, locale?: Locale, timeout?: number) => Promise<PhotoDataUrl>;

package/dist/components/photo-crop-uploader/utils/read-photo.js

@@ -0,0 +1,51 @@
+import { localizedText as d } from "../locale.js";
+import { EN_LOCALE as l } from "../../../constants.js";
+import { DEFAULT_MIN_DIMENSION as I, DEFAULT_TIMEOUT as c, MS_UNIT as p } from "../constants.js";
+import { PhotoSizeError as v } from "../errors/photo-size.error.js";
+const N = async (f, s = I, o = l, u = c) => new Promise(
+  (m, t) => {
+    const e = new FileReader();
+    let r = !1;
+    const E = setTimeout(() => {
+      r || (r = !0, e.abort(), t(
+        new Error(
+          `${d[o]["timeout-error"]}: ${u}${p}`
+        )
+      ));
+    }, u);
+    e.addEventListener("load", () => {
+      if (r) return;
+      r = !0, clearTimeout(E);
+      const a = e.result?.toString() || "";
+      if (!a) {
+        m("");
+        return;
+      }
+      const n = new Image();
+      n.src = a, n.addEventListener("load", () => {
+        const { naturalWidth: i, naturalHeight: L } = n;
+        if (i < s || L < s) {
+          const T = v.get(s, o);
+          t(T);
+        } else
+          m(a);
+      }), n.addEventListener("error", () => {
+        const i = new Error(d[o]["paint-error"]);
+        t(i);
+      }), n.addEventListener("abort", () => {
+        const i = new Error(d[o]["read-abort"]);
+        t(i);
+      });
+    }), e.addEventListener("error", () => {
+      r || (r = !0, clearTimeout(E), t(e.error));
+    }), e.addEventListener("abort", () => {
+      if (r) return;
+      r = !0, clearTimeout(E);
+      const a = new Error(d[o]["paint-abort"]);
+      t(a);
+    }), e.readAsDataURL(f);
+  }
+);
+export {
+  N as readPhoto
+};

package/dist/components/photo-crop-uploader/utils/validate-photo-file.d.ts

@@ -0,0 +1,3 @@
+import { Locale } from '../../../types';
+import { PhotoFileOptions } from '../types';
+export declare const validatePhotoFile: (file: File, options?: PhotoFileOptions, locale?: Locale) => void;

package/dist/components/photo-crop-uploader/utils/validate-photo-file.js

@@ -0,0 +1,24 @@
+import { localizedText as i } from "../locale.js";
+import { EN_LOCALE as x, BYTE_TO_KILOBYTE as p } from "../../../constants.js";
+import { MB_UNIT as _, MB_FRACTION_DIGITS as $, SUPPORTED_IMAGE_EXTENSIONS as d, SUPPORTED_IMAGE_MIME_TYPES as n, MIME_TO_EXT as y } from "../constants.js";
+import { PhotoFileError as I } from "../errors/photo-file.error.js";
+const u = (e, t, r = x) => {
+  const o = [];
+  t?.maxSize && e.size > t.maxSize && o.push(
+    `${i[r]["large-file"]}. ${i[r]["maximum-size"]}: ${(t.maxSize / p / p).toFixed(
+      $
+    )}${_}`
+  );
+  const s = t?.allowedExtensions || d, m = "." + e.name.split(".").pop()?.toLowerCase();
+  s.includes(m) || o.push(`${i[r]["file-ext-error"]}: ${m}`);
+  const T = t?.allowedMimeTypes || n;
+  e.type && !T.includes(e.type) && o.push(`${i[r]["file-type-error"]}: ${e.type}`);
+  const E = y;
+  if (e.type && E[e.type] && (E[e.type].includes(m) || o.push(
+    `${i[r]["mime-type"]} ${e.type} ${i[r]["not-correspond-ext"]} ${m}`
+  )), o.length)
+    throw I.get(o, t);
+};
+export {
+  u as validatePhotoFile
+};

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const EN_LOCALE = "en";
+export declare const RU_LOCALE = "ru";
+export declare const BYTE_TO_KILOBYTE = 1024;

package/dist/constants.js

@@ -0,0 +1,6 @@
+const E = "en", L = "ru", n = 1024;
+export {
+  n as BYTE_TO_KILOBYTE,
+  E as EN_LOCALE,
+  L as RU_LOCALE
+};