@oneplatformdev/ui 0.0.1-beta.18 → 0.0.1-beta.3

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.0.1-beta.18",
3
+ "version": "0.0.1-beta.3",
4
4
  "description": "UI React Components.",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -35,16 +35,16 @@
35
35
  "directory": "build",
36
36
  "registry": "https://registry.npmjs.org/",
37
37
  "dependencies": {
38
- "@oneplatformdev/hooks": "~0.0.1-beta.3",
39
- "@oneplatformdev/utils": "~0.0.2-beta.7"
38
+ "@oneplatformdev/utils": "latest",
39
+ "@oneplatformdev/hooks": "latest"
40
40
  }
41
41
  },
42
42
  "peerDependency": {
43
43
  "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
44
44
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
45
45
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
46
- "@oneplatformdev/hooks": "~0.0.1-beta.3",
47
- "@oneplatformdev/utils": "~0.0.2-beta.7",
46
+ "@oneplatformdev/utils": "latest",
47
+ "@oneplatformdev/hooks": "latest",
48
48
  "lucide-react": "^0.469.0"
49
49
  },
50
50
  "peerDependenciesMeta": {
@@ -87,17 +87,16 @@
87
87
  "@radix-ui/react-tooltip": "^1.1.6",
88
88
  "@tanstack/react-table": "^8.20.6",
89
89
  "cmdk": "1.0.0",
90
- "date-fns": "^4.1.0",
91
90
  "embla-carousel-react": "^8.5.1",
92
91
  "input-otp": "^1.4.1",
93
92
  "next-themes": "^0.4.4",
94
93
  "react-day-picker": "8.10.1",
95
- "react-dropzone": "^14.3.5",
96
94
  "react-hook-form": "^7.54.2",
97
95
  "react-resizable-panels": "^2.1.7",
98
96
  "recharts": "^2.15.0",
99
97
  "sonner": "^1.7.1",
100
98
  "vaul": "^1.1.2",
99
+ "date-fns": "^4.1.0",
101
100
  "zod": "^3.24.1"
102
101
  }
103
102
  }
@@ -1,22 +0,0 @@
1
- import { DropzoneProps } from './Dropzone.types';
2
-
3
- /**
4
- * Dropzone component - A drag-and-drop file upload area with image previews, error handling, and localization.
5
- *
6
- * @component
7
- * @param {DropzoneProps} props - The props for the Dropzone component.
8
- * @param {string[]} [props.acceptTypes=DEFAULT_FILE_TYPES] - Allowed file MIME types.
9
- * @param {number} props.maxSizeMB - Maximum allowed file size in megabytes.
10
- * @param {number} [props.maxFiles=1] - Maximum number of files that can be uploaded.
11
- * @param {DropzoneTranslations} props.translations - Translations for text labels.
12
- * @param {(errors: FileRejection[]) => void} [props.onErrors] - Callback triggered when file errors occur.
13
- * @param {boolean} [props.hideErrors=false] - Whether to hide error messages.
14
- * @param {boolean} [props.disabled=false] - Whether the dropzone is disabled.
15
- * @param {DropzoneStyles} [props.classNames] - Custom classNames for different dropzone states.
16
- * @param {DropzoneValueItem[]} [props.value=[]] - Current selected files or URLs.
17
- * @param {(items: DropzoneValueItem[]) => void} [props.onChangeValue] - Callback triggered when file selection changes.
18
- * @param {string} [props.className] - Additional class names for styling.
19
- * @param {React.Ref<HTMLDivElement>} ref - Ref for the root dropzone container.
20
- * @returns {JSX.Element} The rendered Dropzone component.
21
- */
22
- export declare const Dropzone: import('react').ForwardRefExoticComponent<DropzoneProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,136 +0,0 @@
1
- import { jsxs as t, jsx as o } from "react/jsx-runtime";
2
- import { forwardRef as L, useState as g } from "react";
3
- import { useDropzone as M } from "react-dropzone";
4
- import { Card as U } from "../Card/Card.mjs";
5
- import { File as j, X as O } from "lucide-react";
6
- import { cn as m } from "@oneplatformdev/utils";
7
- import { F as X, D as Y } from "../DropzoneFilePreview-Dhtv8F4u.js";
8
- import { isFile as v, extractName as q } from "./DropzoneUtils.mjs";
9
- const G = L(
10
- ({
11
- acceptTypes: y = Y,
12
- maxSizeMB: w,
13
- maxFiles: a = 1,
14
- onErrors: x,
15
- hideErrors: b = !1,
16
- disabled: p = !1,
17
- classNames: l,
18
- value: u = [],
19
- onChangeValue: s,
20
- className: F,
21
- labelDropzonePrompt: z = "Drop files here or click to select",
22
- labelOrClickToSelect: H = "Click to select files",
23
- labelSelectedFiles: D = "Selected Files",
24
- labelUploadErrors: I = "Upload Errors",
25
- labelFileTooLarge: k = "File is too large",
26
- labelInvalidFileType: S = "Invalid file type",
27
- ...E
28
- }, P) => {
29
- const [c, h] = g(u), [d, N] = g([]), W = (e, i) => {
30
- N(i), x && x(i);
31
- const r = [...c, ...e].slice(0, a);
32
- h(r), s == null || s(r);
33
- }, T = (e, i) => {
34
- if (p) return;
35
- e.stopPropagation();
36
- const r = c.filter((n, f) => f !== i);
37
- h(r), s == null || s(r);
38
- }, { getRootProps: _, getInputProps: A, isDragActive: B } = M({
39
- onDrop: W,
40
- accept: y.reduce((e, i) => (e[i] = [], e), {}),
41
- maxSize: w * 1024 * 1024,
42
- maxFiles: a,
43
- disabled: p
44
- });
45
- return /* @__PURE__ */ t(
46
- U,
47
- {
48
- ..._(),
49
- ...E,
50
- className: m(
51
- "border-dashed border-2 p-6 text-center flex flex-col items-center justify-center",
52
- p && "bg-gray-300 pointer-events-none",
53
- d.length > 0 ? "border-red-500" : "border-gray-300",
54
- B && "bg-gray-100",
55
- F
56
- ),
57
- ref: P,
58
- children: [
59
- /* @__PURE__ */ o("input", { ...A() }),
60
- c.length === 0 && d.length === 0 && /* @__PURE__ */ t(
61
- "div",
62
- {
63
- className: m(
64
- "flex flex-col items-center gap-1",
65
- l == null ? void 0 : l.idleWrapper
66
- ),
67
- children: [
68
- /* @__PURE__ */ o(j, { className: "w-8 h-8 text-gray-500" }),
69
- !p && /* @__PURE__ */ o("pre", { className: "font-semibold text-gray-600", children: z })
70
- ]
71
- }
72
- ),
73
- c.length > 0 && /* @__PURE__ */ t("div", { className: m("w-full mt-2", l == null ? void 0 : l.previewWrapper), children: [
74
- /* @__PURE__ */ t("pre", { className: "font-semibold text-gray-600", children: [
75
- D,
76
- ":"
77
- ] }),
78
- /* @__PURE__ */ o("ul", { className: "mt-2 text-sm text-gray-500 flex flex-wrap gap-4 items-start justify-center", children: c.map((e, i) => {
79
- const r = v(e) ? e.name : q(e), n = v(e) ? (e.size / (1024 * 1024)).toFixed(2) + " MB" : "";
80
- return /* @__PURE__ */ t(
81
- "li",
82
- {
83
- className: "flex flex-col items-center gap-2 relative",
84
- children: [
85
- /* @__PURE__ */ t("div", { className: "relative", children: [
86
- /* @__PURE__ */ o(X, { item: e, styles: l }),
87
- /* @__PURE__ */ o("div", { className: "absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm", children: /* @__PURE__ */ o(
88
- O,
89
- {
90
- size: 16,
91
- strokeWidth: 1,
92
- color: "black",
93
- onClick: (f) => T(f, i)
94
- }
95
- ) })
96
- ] }),
97
- /* @__PURE__ */ t("span", { className: "inline-flex flex-col items-center", children: [
98
- /* @__PURE__ */ o("span", { className: "max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap", children: r }),
99
- n && /* @__PURE__ */ t("span", { children: [
100
- "(",
101
- n,
102
- ")"
103
- ] })
104
- ] })
105
- ]
106
- },
107
- i
108
- );
109
- }) })
110
- ] }),
111
- d.length > 0 && /* @__PURE__ */ t("div", { className: m("w-full mt-4", l == null ? void 0 : l.errorWrapper), children: [
112
- /* @__PURE__ */ t("span", { className: "font-semibold text-red-500", children: [
113
- I,
114
- ":"
115
- ] }),
116
- /* @__PURE__ */ o("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: d.map((e, i) => /* @__PURE__ */ t("li", { children: [
117
- e.file.name,
118
- " (",
119
- (e.file.size / (1024 * 1024)).toFixed(2),
120
- " MB)",
121
- !b && /* @__PURE__ */ o("ul", { className: "ml-4 list-disc list-inside", children: e.errors.map((r, n) => /* @__PURE__ */ t("li", { children: [
122
- r.code === "file-too-large" && k,
123
- r.code === "file-invalid-type" && S,
124
- r.code !== "file-too-large" && r.code !== "file-invalid-type" && r.message
125
- ] }, n)) })
126
- ] }, i)) })
127
- ] })
128
- ]
129
- }
130
- );
131
- }
132
- );
133
- G.displayName = "Dropzone";
134
- export {
135
- G as Dropzone
136
- };
@@ -1,36 +0,0 @@
1
- import { FileRejection } from 'react-dropzone';
2
-
3
- export type DropzoneValueItem = File | string;
4
- export interface FilePreviewProps {
5
- item: DropzoneValueItem;
6
- styles?: Pick<DropzoneStyles, 'previewWraper' | 'previewImage' | 'previewFile'>;
7
- }
8
- export interface DropzoneTranslations {
9
- labelDropzonePrompt?: string;
10
- labelOrClickToSelect?: string;
11
- labelSelectedFiles?: string;
12
- labelUploadErrors?: string;
13
- labelFileTooLarge?: string;
14
- labelInvalidFileType?: string;
15
- }
16
- export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttributes<HTMLDivElement> {
17
- acceptTypes?: string[];
18
- maxSizeMB: number;
19
- maxFiles?: number;
20
- onErrors?: (errors: FileRejection[]) => void;
21
- hideErrors?: boolean;
22
- disabled?: boolean;
23
- classNames?: DropzoneStyles;
24
- value?: DropzoneValueItem[];
25
- onChangeValue?: (items: DropzoneValueItem[]) => void;
26
- }
27
- export interface DropzoneStyles {
28
- idleWrapper?: string;
29
- previewWrapper?: string;
30
- errorWrapper?: string;
31
- previewWraper?: string;
32
- previewImage?: string;
33
- previewFile?: string;
34
- }
35
- export declare const DEFAULT_FILE_TYPES: string[];
36
- export declare const DEFAULT_IMAGES_TYPES: string[];
@@ -1,4 +0,0 @@
1
- import { FilePreviewProps } from './Dropzone.types';
2
- import { FC } from 'react';
3
-
4
- export declare const FilePreview: FC<FilePreviewProps>;
@@ -1,9 +0,0 @@
1
- import "react/jsx-runtime";
2
- import "react";
3
- import "lucide-react";
4
- import { F } from "../DropzoneFilePreview-Dhtv8F4u.js";
5
- import "./DropzoneUtils.mjs";
6
- import "@oneplatformdev/utils";
7
- export {
8
- F as FilePreview
9
- };
@@ -1,4 +0,0 @@
1
- import { DropzoneValueItem } from './Dropzone.types';
2
-
3
- export declare function isFile(item: DropzoneValueItem): item is File;
4
- export declare function extractName(url: string): string;
@@ -1,15 +0,0 @@
1
- function e(t) {
2
- return t instanceof File;
3
- }
4
- function i(t) {
5
- try {
6
- const n = t.split("?")[0].split("#")[0].split("/");
7
- return n[n.length - 1] || t;
8
- } catch {
9
- return t;
10
- }
11
- }
12
- export {
13
- i as extractName,
14
- e as isFile
15
- };
@@ -1,2 +0,0 @@
1
- export * from './Dropzone';
2
- export * from './Dropzone.types';
@@ -1,7 +0,0 @@
1
- import { Dropzone as r } from "./Dropzone.mjs";
2
- import { D as T, a as _ } from "../DropzoneFilePreview-Dhtv8F4u.js";
3
- export {
4
- T as DEFAULT_FILE_TYPES,
5
- _ as DEFAULT_IMAGES_TYPES,
6
- r as Dropzone
7
- };
@@ -1,7 +0,0 @@
1
- {
2
- "sideEffects": false,
3
- "main": "./index.mjs",
4
- "module": "./index.mjs",
5
- "default": "./index.mjs",
6
- "types": "./index.d.ts"
7
- }
@@ -1,67 +0,0 @@
1
- import { jsx as l, jsxs as d } from "react/jsx-runtime";
2
- import { useState as m, useEffect as f } from "react";
3
- import { File as s } from "lucide-react";
4
- import { isFile as o } from "./Dropzone/DropzoneUtils.mjs";
5
- import { cn as c } from "@oneplatformdev/utils";
6
- const h = [
7
- "application/msword",
8
- "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
9
- "text/csv",
10
- "text/plain",
11
- "application/pdf"
12
- ], u = [
13
- "image/png",
14
- "image/jpeg",
15
- "image/jpg",
16
- "image/webp",
17
- "image/gif"
18
- ], j = ({ item: e, styles: r }) => {
19
- const [t, a] = m(null), p = o(e) && u.includes(e.type);
20
- return f(() => {
21
- let n = null;
22
- if (o(e) && p) {
23
- const i = new FileReader();
24
- return i.onloadend = () => a(i.result), i.readAsDataURL(e), () => a(null);
25
- } else {
26
- if (typeof e == "string")
27
- return n = new Image(), n.src = e, n.onload = () => a(e), n.onerror = () => a(null), () => {
28
- n.onload = null, n.onerror = null;
29
- };
30
- a(null);
31
- }
32
- return () => a(null);
33
- }, [e, p]), /* @__PURE__ */ l(
34
- "div",
35
- {
36
- className: c(
37
- "w-32 h-32 border border-gray-300 rounded-md overflow-hidden flex items-center justify-center",
38
- r == null ? void 0 : r.previewWraper
39
- ),
40
- children: t ? /* @__PURE__ */ l(
41
- "img",
42
- {
43
- src: t,
44
- alt: o(e) ? e.name : "external-image",
45
- className: c("w-full h-full object-cover", r == null ? void 0 : r.previewImage)
46
- }
47
- ) : /* @__PURE__ */ d(
48
- "div",
49
- {
50
- className: c(
51
- "flex flex-col items-center justify-center text-gray-500 text-sm p-2 text-center",
52
- r == null ? void 0 : r.previewFile
53
- ),
54
- children: [
55
- /* @__PURE__ */ l(s, { className: "w-6 h-6" }),
56
- o(e) ? /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e.name }) : /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e })
57
- ]
58
- }
59
- )
60
- }
61
- );
62
- };
63
- export {
64
- h as D,
65
- j as F,
66
- u as a
67
- };
@@ -1,4 +0,0 @@
1
- import { FormDropzoneProps } from './FormDropzone.types';
2
- import { FieldValues, UseFormReturn } from 'react-hook-form';
3
-
4
- export declare const FormDropzone: <Data extends FieldValues, Form extends UseFormReturn<Data>>(props: FormDropzoneProps<Data, Form>) => import("react/jsx-runtime").JSX.Element;
@@ -1,26 +0,0 @@
1
- import { jsx as o } from "react/jsx-runtime";
2
- import { FormControl as a } from "../Form/Form.mjs";
3
- import { FormRenderControl as l } from "../Form/FormRenderControl.mjs";
4
- import { Dropzone as f } from "../Dropzone/Dropzone.mjs";
5
- const h = (n) => {
6
- const { form: e, label: m, name: t, ...p } = n;
7
- return /* @__PURE__ */ o(
8
- l,
9
- {
10
- form: e,
11
- label: m,
12
- name: t,
13
- render: ({ field: r }) => /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
14
- f,
15
- {
16
- ...p,
17
- ...r,
18
- onChangeValue: r.onChange
19
- }
20
- ) })
21
- }
22
- );
23
- };
24
- export {
25
- h as FormDropzone
26
- };
@@ -1,7 +0,0 @@
1
- import { FormRenderControlExtendProps } from '../Form';
2
- import { DropzoneProps } from '../Dropzone';
3
- import { UseFormReturn } from 'react-hook-form';
4
- import { FieldValues } from 'react-hook-form/dist/types/fields';
5
-
6
- export interface FormDropzoneProps<Data extends FieldValues, Form extends UseFormReturn<Data>> extends FormRenderControlExtendProps<Data, Form>, DropzoneProps {
7
- }
@@ -1,2 +0,0 @@
1
- export * from './FormDropzone';
2
- export * from './FormDropzone.types';
@@ -1,4 +0,0 @@
1
- import { FormDropzone as e } from "./FormDropzone.mjs";
2
- export {
3
- e as FormDropzone
4
- };
@@ -1,7 +0,0 @@
1
- {
2
- "sideEffects": false,
3
- "main": "./index.mjs",
4
- "module": "./index.mjs",
5
- "default": "./index.mjs",
6
- "types": "./index.d.ts"
7
- }