@bouko/react 2.5.3 → 2.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/animate/configs.d.ts +136 -136
- package/dist/components/animate/configs.js +62 -62
- package/dist/components/animate/index.d.ts +54 -54
- package/dist/components/animate/index.js +33 -33
- package/dist/components/attachment.d.ts +2 -2
- package/dist/components/attachment.js +18 -18
- package/dist/components/button/ghost.d.ts +7 -7
- package/dist/components/button/ghost.js +8 -8
- package/dist/components/button/load.d.ts +11 -10
- package/dist/components/button/load.js +35 -35
- package/dist/components/button/normal.d.ts +11 -11
- package/dist/components/button/normal.js +38 -37
- package/dist/components/button.d.ts +10 -10
- package/dist/components/button.js +22 -22
- package/dist/components/carousel/index.d.ts +11 -11
- package/dist/components/carousel/index.js +19 -19
- package/dist/components/checkbox.d.ts +8 -8
- package/dist/components/checkbox.js +13 -13
- package/dist/components/dropdown/normal.d.ts +10 -10
- package/dist/components/dropdown/normal.js +19 -19
- package/dist/components/fade-carousel.d.ts +4 -4
- package/dist/components/fade-carousel.js +14 -14
- package/dist/components/field.d.ts +10 -10
- package/dist/components/field.js +10 -10
- package/dist/components/form/footer.js +2 -2
- package/dist/components/form/functions.d.ts +1 -1
- package/dist/components/form/functions.js +28 -28
- package/dist/components/form/types.d.ts +38 -38
- package/dist/components/form/types.js +1 -1
- package/dist/components/heading/normal.d.ts +29 -29
- package/dist/components/heading/normal.js +22 -22
- package/dist/components/heading/page.d.ts +25 -25
- package/dist/components/heading/page.js +23 -23
- package/dist/components/index.d.ts +12 -12
- package/dist/components/index.js +12 -12
- package/dist/components/input.d.ts +37 -37
- package/dist/components/input.js +40 -40
- package/dist/components/layout/fade.d.ts +7 -7
- package/dist/components/layout/fade.js +15 -15
- package/dist/components/layout/flex.d.ts +16 -16
- package/dist/components/layout/flex.js +42 -42
- package/dist/components/layout/heading.d.ts +1 -3
- package/dist/components/layout/heading.js +2 -2
- package/dist/components/layout/separator.d.ts +3 -3
- package/dist/components/layout/separator.js +5 -5
- package/dist/components/list/index.d.ts +2 -2
- package/dist/components/list/index.js +2 -2
- package/dist/components/list/item.d.ts +9 -9
- package/dist/components/list/item.js +7 -7
- package/dist/components/list/variants/bullet.d.ts +9 -9
- package/dist/components/list/variants/bullet.js +16 -16
- package/dist/components/list/variants/number.d.ts +10 -10
- package/dist/components/list/variants/number.js +18 -18
- package/dist/components/multiple-choice.d.ts +2 -2
- package/dist/components/multiple-choice.js +12 -12
- package/dist/components/search-bar.d.ts +14 -13
- package/dist/components/search-bar.js +22 -22
- package/dist/components/select.d.ts +6 -6
- package/dist/components/select.js +24 -24
- package/dist/components/text/badge.d.ts +16 -16
- package/dist/components/text/badge.js +28 -28
- package/dist/components/textarea.d.ts +7 -7
- package/dist/components/textarea.js +11 -11
- package/dist/components/upload/file.d.ts +8 -8
- package/dist/components/upload/file.js +23 -15
- package/dist/components/waveform/index.d.ts +8 -8
- package/dist/components/waveform/index.js +11 -11
- package/dist/components/waveform/patterns.d.ts +1 -1
- package/dist/components/waveform/patterns.js +27 -27
- package/dist/core/format.d.ts +3 -3
- package/dist/core/format.js +34 -34
- package/dist/core/functions.d.ts +13 -13
- package/dist/core/functions.js +79 -79
- package/dist/core/types.d.ts +14 -14
- package/dist/core/types.js +2 -2
- package/dist/hooks/audio/sound.d.ts +1 -1
- package/dist/hooks/audio/sound.js +6 -6
- package/dist/hooks/clock/interval.d.ts +8 -8
- package/dist/hooks/clock/interval.js +25 -25
- package/dist/hooks/element/container.d.ts +5 -4
- package/dist/hooks/element/container.js +7 -7
- package/dist/hooks/element/resize.d.ts +1 -1
- package/dist/hooks/element/resize.js +12 -12
- package/dist/hooks/index.d.ts +4 -4
- package/dist/hooks/index.js +4 -4
- package/dist/index.d.ts +14 -14
- package/dist/index.js +14 -14
- package/package.json +3 -35
- package/dist/assets/icons/check copy.svg +0 -6
- package/dist/assets/icons/check-circle copy.svg +0 -6
- package/dist/assets/icons/chevron copy.svg +0 -6
- package/dist/assets/icons/paperclip copy.svg +0 -6
- package/dist/assets/icons/spinner copy.svg +0 -6
- package/dist/assets/icons/x-circle copy.svg +0 -6
- package/dist/components/badge.d.ts +0 -5
- package/dist/components/badge.js +0 -4
- package/dist/components/flex.d.ts +0 -16
- package/dist/components/flex.js +0 -8
- package/dist/components/form/fields.d.ts +0 -16
- package/dist/components/form/fields.js +0 -21
- package/dist/components/form/loaders.d.ts +0 -3
- package/dist/components/form/loaders.js +0 -11
- package/dist/components/form/test-next.d.ts +0 -1
- package/dist/components/form/test-next.js +0 -6
- package/dist/components/search/index.d.ts +0 -6
- package/dist/components/search/index.js +0 -12
- package/dist/hooks/color.d.ts +0 -7
- package/dist/hooks/color.js +0 -8
|
@@ -1,15 +1,23 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { useDropzone } from "react-dropzone";
|
|
4
|
+
import { cn } from "@bouko/style";
|
|
5
|
+
import PaperClip from "../../assets/icons/paperclip.svg";
|
|
6
|
+
export function FileUploader({ style, accept = [], update }) {
|
|
7
|
+
const onDrop = useCallback((files) => {
|
|
8
|
+
if (files.length > 0)
|
|
9
|
+
update(files[0]);
|
|
10
|
+
}, []);
|
|
11
|
+
const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({
|
|
12
|
+
onDrop
|
|
13
|
+
});
|
|
14
|
+
const upload = () => inputRef.current?.click();
|
|
15
|
+
const save = (e) => update((e.target.files ?? [])[0]);
|
|
16
|
+
return (_jsxs("div", { className: cn(styles.container, isDragActive && "bg-background-light/40 border-border-light", style), onClick: upload, ...getRootProps(), children: [_jsxs("span", { className: styles.title, children: [_jsx(PaperClip, {}, void 0), "Drag and drop a file, or"] }, void 0), _jsx("span", { className: styles.subtitle, children: "browse" }, void 0), _jsx("input", { type: "file", className: "hidden", onChange: save, accept: accept.join(","), multiple: false, ...getInputProps() }, void 0)] }, void 0));
|
|
17
|
+
}
|
|
18
|
+
const styles = {
|
|
19
|
+
container: "flex flex-col justify-center items-center gap-1 w-full py-3 hover:bg-background-light/40 border-2 border-dashed border-border hover:border-border-light rounded overflow-hidden duration-200 cursor-pointer",
|
|
20
|
+
title: "flex gap-2 items-center font-semibold text-sm",
|
|
21
|
+
subtitle: "text-xs text-primary-darker"
|
|
22
|
+
};
|
|
23
|
+
export default FileUploader;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { type GenericPlugin } from "wavesurfer.js/dist/base-plugin";
|
|
2
|
-
type Props = {
|
|
3
|
-
file: File;
|
|
4
|
-
height: number;
|
|
5
|
-
plugins: GenericPlugin[];
|
|
6
|
-
};
|
|
7
|
-
export default function Waveform({ file, height, plugins }: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export {};
|
|
1
|
+
import { type GenericPlugin } from "wavesurfer.js/dist/base-plugin";
|
|
2
|
+
declare type Props = {
|
|
3
|
+
file: File;
|
|
4
|
+
height: number;
|
|
5
|
+
plugins: GenericPlugin[];
|
|
6
|
+
};
|
|
7
|
+
export default function Waveform({ file, height, plugins }: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useMemo } from "react";
|
|
4
|
-
import { squiggly } from "./patterns";
|
|
5
|
-
import { default as Player } from "@wavesurfer/react";
|
|
6
|
-
export default function Waveform({ file, height, plugins }) {
|
|
7
|
-
const url = useMemo(() => URL.createObjectURL(file), [file]);
|
|
8
|
-
const plugins2 = useMemo(() => plugins, [plugins]);
|
|
9
|
-
const waves = useMemo(() => squiggly, []);
|
|
10
|
-
return (_jsx(Player, { height: height, url: url, waveColor: "#1c1d23", progressColor: "#0085e4", cursorWidth: 2, renderFunction: waves, plugins: plugins2 }));
|
|
11
|
-
}
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { squiggly } from "./patterns";
|
|
5
|
+
import { default as Player } from "@wavesurfer/react";
|
|
6
|
+
export default function Waveform({ file, height, plugins }) {
|
|
7
|
+
const url = useMemo(() => URL.createObjectURL(file), [file]);
|
|
8
|
+
const plugins2 = useMemo(() => plugins, [plugins]);
|
|
9
|
+
const waves = useMemo(() => squiggly, []);
|
|
10
|
+
return (_jsx(Player, { height: height, url: url, waveColor: "#1c1d23", progressColor: "#0085e4", cursorWidth: 2, renderFunction: waves, plugins: plugins2 }, void 0));
|
|
11
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function squiggly(channels: (Float32Array | number[])[], ctx: CanvasRenderingContext2D): void;
|
|
1
|
+
export declare function squiggly(channels: (Float32Array | number[])[], ctx: CanvasRenderingContext2D): void;
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
export function squiggly(channels, ctx) {
|
|
2
|
-
const { width, height } = ctx.canvas;
|
|
3
|
-
const scale = channels[0].length / width;
|
|
4
|
-
const step = 12;
|
|
5
|
-
ctx.translate(0, height / 2);
|
|
6
|
-
ctx.strokeStyle = ctx.fillStyle;
|
|
7
|
-
ctx.lineWidth = 3;
|
|
8
|
-
ctx.beginPath();
|
|
9
|
-
for (let i = 0; i < width; i += step * 2) {
|
|
10
|
-
const index = Math.floor(i * scale);
|
|
11
|
-
const value = Math.abs(channels[0][index]);
|
|
12
|
-
let x = i;
|
|
13
|
-
let y = value * height;
|
|
14
|
-
ctx.moveTo(x, 0);
|
|
15
|
-
ctx.lineTo(x, y);
|
|
16
|
-
ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true);
|
|
17
|
-
ctx.lineTo(x + step, 0);
|
|
18
|
-
x = x + step;
|
|
19
|
-
y = -y;
|
|
20
|
-
ctx.moveTo(x, 0);
|
|
21
|
-
ctx.lineTo(x, y);
|
|
22
|
-
ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false);
|
|
23
|
-
ctx.lineTo(x + step, 0);
|
|
24
|
-
}
|
|
25
|
-
ctx.stroke();
|
|
26
|
-
ctx.closePath();
|
|
27
|
-
}
|
|
1
|
+
export function squiggly(channels, ctx) {
|
|
2
|
+
const { width, height } = ctx.canvas;
|
|
3
|
+
const scale = channels[0].length / width;
|
|
4
|
+
const step = 12;
|
|
5
|
+
ctx.translate(0, height / 2);
|
|
6
|
+
ctx.strokeStyle = ctx.fillStyle;
|
|
7
|
+
ctx.lineWidth = 3;
|
|
8
|
+
ctx.beginPath();
|
|
9
|
+
for (let i = 0; i < width; i += step * 2) {
|
|
10
|
+
const index = Math.floor(i * scale);
|
|
11
|
+
const value = Math.abs(channels[0][index]);
|
|
12
|
+
let x = i;
|
|
13
|
+
let y = value * height;
|
|
14
|
+
ctx.moveTo(x, 0);
|
|
15
|
+
ctx.lineTo(x, y);
|
|
16
|
+
ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true);
|
|
17
|
+
ctx.lineTo(x + step, 0);
|
|
18
|
+
x = x + step;
|
|
19
|
+
y = -y;
|
|
20
|
+
ctx.moveTo(x, 0);
|
|
21
|
+
ctx.lineTo(x, y);
|
|
22
|
+
ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false);
|
|
23
|
+
ctx.lineTo(x + step, 0);
|
|
24
|
+
}
|
|
25
|
+
ctx.stroke();
|
|
26
|
+
ctx.closePath();
|
|
27
|
+
}
|
package/dist/core/format.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;
|
package/dist/core/format.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Fragment } from "react";
|
|
3
|
-
const delimiterConfig = [
|
|
4
|
-
{ delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
|
|
5
|
-
{ delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
|
|
6
|
-
{ delimiter: "^^", render: (text, key) => _jsx("span", { className: "text-accent", children: text }, key) },
|
|
7
|
-
];
|
|
8
|
-
const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
|
9
|
-
const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
|
|
10
|
-
const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
|
|
11
|
-
export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }));
|
|
12
|
-
const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
|
|
13
|
-
export const formatText = (text) => {
|
|
14
|
-
const parts = text
|
|
15
|
-
.split(WRAPPED_TEXT_REGEX)
|
|
16
|
-
.filter(Boolean);
|
|
17
|
-
const formatted = parts.map((x, i) => {
|
|
18
|
-
if (isWrapped(x, "**")) {
|
|
19
|
-
// Remove only the first and last occurrence of the delimiter
|
|
20
|
-
const content = x.slice(2, -2);
|
|
21
|
-
return _jsx("span", { className: "font-bold", children: content }, i);
|
|
22
|
-
}
|
|
23
|
-
else if (isWrapped(x, "~~")) {
|
|
24
|
-
const content = x.slice(2, -2);
|
|
25
|
-
return _jsx("span", { className: "font-semibold", children: content }, i);
|
|
26
|
-
}
|
|
27
|
-
else if (isWrapped(x, "^^")) {
|
|
28
|
-
const content = x.slice(2, -2);
|
|
29
|
-
return _jsx("span", { className: "text-accent", children: content }, i);
|
|
30
|
-
}
|
|
31
|
-
return x;
|
|
32
|
-
});
|
|
33
|
-
return _jsx("span", { children: formatted });
|
|
34
|
-
};
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment } from "react";
|
|
3
|
+
const delimiterConfig = [
|
|
4
|
+
{ delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
|
|
5
|
+
{ delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
|
|
6
|
+
{ delimiter: "^^", render: (text, key) => _jsx("span", { className: "text-accent", children: text }, key) },
|
|
7
|
+
];
|
|
8
|
+
const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
|
9
|
+
const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
|
|
10
|
+
const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
|
|
11
|
+
export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }, void 0));
|
|
12
|
+
const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
|
|
13
|
+
export const formatText = (text) => {
|
|
14
|
+
const parts = text
|
|
15
|
+
.split(WRAPPED_TEXT_REGEX)
|
|
16
|
+
.filter(Boolean);
|
|
17
|
+
const formatted = parts.map((x, i) => {
|
|
18
|
+
if (isWrapped(x, "**")) {
|
|
19
|
+
// Remove only the first and last occurrence of the delimiter
|
|
20
|
+
const content = x.slice(2, -2);
|
|
21
|
+
return _jsx("span", { className: "font-bold", children: content }, i);
|
|
22
|
+
}
|
|
23
|
+
else if (isWrapped(x, "~~")) {
|
|
24
|
+
const content = x.slice(2, -2);
|
|
25
|
+
return _jsx("span", { className: "font-semibold", children: content }, i);
|
|
26
|
+
}
|
|
27
|
+
else if (isWrapped(x, "^^")) {
|
|
28
|
+
const content = x.slice(2, -2);
|
|
29
|
+
return _jsx("span", { className: "text-accent", children: content }, i);
|
|
30
|
+
}
|
|
31
|
+
return x;
|
|
32
|
+
});
|
|
33
|
+
return _jsx("span", { children: formatted }, void 0);
|
|
34
|
+
};
|
package/dist/core/functions.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export declare const getFilesData: (files: File[]) => Promise<{
|
|
2
|
-
filename: string;
|
|
3
|
-
mimetype: string;
|
|
4
|
-
data?: string;
|
|
5
|
-
}[]>;
|
|
6
|
-
export declare const getFileData: (file: File) => Promise<{
|
|
7
|
-
filename: string;
|
|
8
|
-
mimetype: string;
|
|
9
|
-
data?: string;
|
|
10
|
-
}>;
|
|
11
|
-
export declare const bufferToFile: (buffer: ArrayBuffer, name?: string) => Promise<File>;
|
|
12
|
-
export declare const getAudioDuration: (file: File) => Promise<number>;
|
|
13
|
-
export declare function getBase64(image: string): Promise<string>;
|
|
1
|
+
export declare const getFilesData: (files: File[]) => Promise<{
|
|
2
|
+
filename: string;
|
|
3
|
+
mimetype: string;
|
|
4
|
+
data?: string | undefined;
|
|
5
|
+
}[]>;
|
|
6
|
+
export declare const getFileData: (file: File) => Promise<{
|
|
7
|
+
filename: string;
|
|
8
|
+
mimetype: string;
|
|
9
|
+
data?: string | undefined;
|
|
10
|
+
}>;
|
|
11
|
+
export declare const bufferToFile: (buffer: ArrayBuffer, name?: string | undefined) => Promise<File>;
|
|
12
|
+
export declare const getAudioDuration: (file: File) => Promise<number>;
|
|
13
|
+
export declare function getBase64(image: string): Promise<string>;
|
package/dist/core/functions.js
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
import { fileTypeFromBuffer } from "file-type";
|
|
2
|
-
export const getFilesData = (files) => Promise.all(files.map((file) => {
|
|
3
|
-
return new Promise((resolve, reject) => {
|
|
4
|
-
const reader = new FileReader();
|
|
5
|
-
reader.onload = () => {
|
|
6
|
-
const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
|
|
7
|
-
return resolve({
|
|
8
|
-
filename: file.name,
|
|
9
|
-
mimetype: file.type,
|
|
10
|
-
data: base64,
|
|
11
|
-
});
|
|
12
|
-
};
|
|
13
|
-
reader.onerror = reject;
|
|
14
|
-
reader.readAsDataURL(file);
|
|
15
|
-
});
|
|
16
|
-
}));
|
|
17
|
-
export const getFileData = (file) => new Promise((resolve, reject) => {
|
|
18
|
-
const reader = new FileReader();
|
|
19
|
-
reader.onload = () => {
|
|
20
|
-
const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
|
|
21
|
-
return resolve({
|
|
22
|
-
filename: file.name,
|
|
23
|
-
mimetype: file.type,
|
|
24
|
-
data: base64,
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
reader.onerror = reject;
|
|
28
|
-
reader.readAsDataURL(file);
|
|
29
|
-
});
|
|
30
|
-
async function detectFileExtension(buffer) {
|
|
31
|
-
const type = await fileTypeFromBuffer(buffer);
|
|
32
|
-
if (!type)
|
|
33
|
-
return null;
|
|
34
|
-
return type;
|
|
35
|
-
}
|
|
36
|
-
export const bufferToFile = async (buffer, name) => {
|
|
37
|
-
const type = await detectFileExtension(buffer);
|
|
38
|
-
if (!type)
|
|
39
|
-
throw new Error("Couldn't get type from buffer");
|
|
40
|
-
return new File([buffer], `${name ?? "file"}.${type.ext}`, {
|
|
41
|
-
type: type.mime,
|
|
42
|
-
lastModified: Date.now()
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
export const getAudioDuration = (file) => {
|
|
46
|
-
return new Promise((resolve, reject) => {
|
|
47
|
-
const url = URL.createObjectURL(file);
|
|
48
|
-
const audio = new Audio(url);
|
|
49
|
-
audio.addEventListener("loadedmetadata", () => {
|
|
50
|
-
const durationMs = audio.duration * 1000;
|
|
51
|
-
URL.revokeObjectURL(url);
|
|
52
|
-
resolve(durationMs);
|
|
53
|
-
});
|
|
54
|
-
audio.addEventListener("error", (e) => {
|
|
55
|
-
URL.revokeObjectURL(url);
|
|
56
|
-
reject(new Error("Failed to load audio metadata"));
|
|
57
|
-
});
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
|
-
export async function getBase64(image) {
|
|
61
|
-
if (image.startsWith("data:")) {
|
|
62
|
-
return image; // already a base64 data URL
|
|
63
|
-
}
|
|
64
|
-
const res = await fetch(image);
|
|
65
|
-
const blob = await res.blob();
|
|
66
|
-
return new Promise((resolve, reject) => {
|
|
67
|
-
const reader = new FileReader();
|
|
68
|
-
reader.onloadend = () => {
|
|
69
|
-
if (typeof reader.result === "string") {
|
|
70
|
-
resolve(reader.result);
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
reject(new Error("Failed to read image as base64"));
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
reader.onerror = reject;
|
|
77
|
-
reader.readAsDataURL(blob);
|
|
78
|
-
});
|
|
79
|
-
}
|
|
1
|
+
import { fileTypeFromBuffer } from "file-type";
|
|
2
|
+
export const getFilesData = (files) => Promise.all(files.map((file) => {
|
|
3
|
+
return new Promise((resolve, reject) => {
|
|
4
|
+
const reader = new FileReader();
|
|
5
|
+
reader.onload = () => {
|
|
6
|
+
const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
|
|
7
|
+
return resolve({
|
|
8
|
+
filename: file.name,
|
|
9
|
+
mimetype: file.type,
|
|
10
|
+
data: base64,
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
reader.onerror = reject;
|
|
14
|
+
reader.readAsDataURL(file);
|
|
15
|
+
});
|
|
16
|
+
}));
|
|
17
|
+
export const getFileData = (file) => new Promise((resolve, reject) => {
|
|
18
|
+
const reader = new FileReader();
|
|
19
|
+
reader.onload = () => {
|
|
20
|
+
const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
|
|
21
|
+
return resolve({
|
|
22
|
+
filename: file.name,
|
|
23
|
+
mimetype: file.type,
|
|
24
|
+
data: base64,
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
reader.onerror = reject;
|
|
28
|
+
reader.readAsDataURL(file);
|
|
29
|
+
});
|
|
30
|
+
async function detectFileExtension(buffer) {
|
|
31
|
+
const type = await fileTypeFromBuffer(buffer);
|
|
32
|
+
if (!type)
|
|
33
|
+
return null;
|
|
34
|
+
return type;
|
|
35
|
+
}
|
|
36
|
+
export const bufferToFile = async (buffer, name) => {
|
|
37
|
+
const type = await detectFileExtension(buffer);
|
|
38
|
+
if (!type)
|
|
39
|
+
throw new Error("Couldn't get type from buffer");
|
|
40
|
+
return new File([buffer], `${name ?? "file"}.${type.ext}`, {
|
|
41
|
+
type: type.mime,
|
|
42
|
+
lastModified: Date.now()
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
export const getAudioDuration = (file) => {
|
|
46
|
+
return new Promise((resolve, reject) => {
|
|
47
|
+
const url = URL.createObjectURL(file);
|
|
48
|
+
const audio = new Audio(url);
|
|
49
|
+
audio.addEventListener("loadedmetadata", () => {
|
|
50
|
+
const durationMs = audio.duration * 1000;
|
|
51
|
+
URL.revokeObjectURL(url);
|
|
52
|
+
resolve(durationMs);
|
|
53
|
+
});
|
|
54
|
+
audio.addEventListener("error", (e) => {
|
|
55
|
+
URL.revokeObjectURL(url);
|
|
56
|
+
reject(new Error("Failed to load audio metadata"));
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
export async function getBase64(image) {
|
|
61
|
+
if (image.startsWith("data:")) {
|
|
62
|
+
return image; // already a base64 data URL
|
|
63
|
+
}
|
|
64
|
+
const res = await fetch(image);
|
|
65
|
+
const blob = await res.blob();
|
|
66
|
+
return new Promise((resolve, reject) => {
|
|
67
|
+
const reader = new FileReader();
|
|
68
|
+
reader.onloadend = () => {
|
|
69
|
+
if (typeof reader.result === "string") {
|
|
70
|
+
resolve(reader.result);
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
reject(new Error("Failed to read image as base64"));
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
reader.onerror = reject;
|
|
77
|
+
reader.readAsDataURL(blob);
|
|
78
|
+
});
|
|
79
|
+
}
|
package/dist/core/types.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import type { ReactNode } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Common props for React components.
|
|
4
|
-
*
|
|
5
|
-
* @property `Component` - Component with Tailwind style(s) and children.
|
|
6
|
-
* @property `Clickable` - Component that executes a callback when clicked.
|
|
7
|
-
**/
|
|
8
|
-
export type Component = {
|
|
9
|
-
style?: string;
|
|
10
|
-
children?: ReactNode;
|
|
11
|
-
};
|
|
12
|
-
export type Clickable = {
|
|
13
|
-
action: () => void;
|
|
14
|
-
};
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Common props for React components.
|
|
4
|
+
*
|
|
5
|
+
* @property `Component` - Component with Tailwind style(s) and children.
|
|
6
|
+
* @property `Clickable` - Component that executes a callback when clicked.
|
|
7
|
+
**/
|
|
8
|
+
export declare type Component = {
|
|
9
|
+
style?: string;
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
};
|
|
12
|
+
export declare type Clickable = {
|
|
13
|
+
action: () => void;
|
|
14
|
+
};
|
package/dist/core/types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
// clean
|
|
1
|
+
export {};
|
|
2
|
+
// clean
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
|
|
1
|
+
export default function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { default as base } from "use-sound";
|
|
2
|
-
export default function useSound(filename) {
|
|
3
|
-
if (!filename)
|
|
4
|
-
return;
|
|
5
|
-
return base(filename)[0];
|
|
6
|
-
}
|
|
1
|
+
import { default as base } from "use-sound";
|
|
2
|
+
export default function useSound(filename) {
|
|
3
|
+
if (!filename)
|
|
4
|
+
return;
|
|
5
|
+
return base(filename)[0];
|
|
6
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
type Props = {
|
|
2
|
-
action: () => Promise<boolean | void>;
|
|
3
|
-
duration: number;
|
|
4
|
-
deps: unknown[];
|
|
5
|
-
oops?: (x: string) => void;
|
|
6
|
-
};
|
|
7
|
-
export default function useInterval({ action, duration, deps, oops }: Props): void;
|
|
8
|
-
export {};
|
|
1
|
+
declare type Props = {
|
|
2
|
+
action: () => Promise<boolean | void>;
|
|
3
|
+
duration: number;
|
|
4
|
+
deps: unknown[];
|
|
5
|
+
oops?: (x: string) => void;
|
|
6
|
+
};
|
|
7
|
+
export default function useInterval({ action, duration, deps, oops }: Props): void;
|
|
8
|
+
export {};
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useEffect, useRef } from "react";
|
|
3
|
-
export default function useInterval({ action, duration, deps = [], oops }) {
|
|
4
|
-
const ref = useRef(async () => false);
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
ref.current = action;
|
|
7
|
-
}, [action]);
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
if (deps.some(v => v === undefined || v === null))
|
|
10
|
-
return;
|
|
11
|
-
const tick = async () => {
|
|
12
|
-
try {
|
|
13
|
-
const stop = await ref.current();
|
|
14
|
-
if (stop && id)
|
|
15
|
-
clearInterval(id);
|
|
16
|
-
}
|
|
17
|
-
catch (err) {
|
|
18
|
-
oops?.(err.message);
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
const id = setInterval(tick, duration);
|
|
22
|
-
tick();
|
|
23
|
-
return () => clearInterval(id);
|
|
24
|
-
}, [duration, ...deps]);
|
|
25
|
-
}
|
|
1
|
+
"use client";
|
|
2
|
+
import { useEffect, useRef } from "react";
|
|
3
|
+
export default function useInterval({ action, duration, deps = [], oops }) {
|
|
4
|
+
const ref = useRef(async () => false);
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
ref.current = action;
|
|
7
|
+
}, [action]);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (deps.some(v => v === undefined || v === null))
|
|
10
|
+
return;
|
|
11
|
+
const tick = async () => {
|
|
12
|
+
try {
|
|
13
|
+
const stop = await ref.current();
|
|
14
|
+
if (stop && id)
|
|
15
|
+
clearInterval(id);
|
|
16
|
+
}
|
|
17
|
+
catch (err) {
|
|
18
|
+
oops?.(err.message);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const id = setInterval(tick, duration);
|
|
22
|
+
tick();
|
|
23
|
+
return () => clearInterval(id);
|
|
24
|
+
}, [duration, ...deps]);
|
|
25
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export default function useContainer(): {
|
|
3
|
+
ref: import("react").RefObject<HTMLDivElement | null>;
|
|
4
|
+
container: HTMLElement | null | undefined;
|
|
5
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useRef } from "react";
|
|
3
|
-
export default function useContainer() {
|
|
4
|
-
const ref = useRef(null);
|
|
5
|
-
const container = ref.current?.parentElement;
|
|
6
|
-
return { ref, container };
|
|
7
|
-
}
|
|
1
|
+
"use client";
|
|
2
|
+
import { useRef } from "react";
|
|
3
|
+
export default function useContainer() {
|
|
4
|
+
const ref = useRef(null);
|
|
5
|
+
const container = ref.current?.parentElement;
|
|
6
|
+
return { ref, container };
|
|
7
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function useResizeObserver(element: HTMLElement | null | undefined, action: () => void): void;
|
|
1
|
+
export default function useResizeObserver(element: HTMLElement | null | undefined, action: () => void): void;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useEffect } from "react";
|
|
3
|
-
export default function useResizeObserver(element, action) {
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
if (!element)
|
|
6
|
-
return;
|
|
7
|
-
const observer = new ResizeObserver(action);
|
|
8
|
-
observer.observe(element);
|
|
9
|
-
action();
|
|
10
|
-
return () => observer.disconnect();
|
|
11
|
-
}, [element, action]);
|
|
12
|
-
}
|
|
1
|
+
"use client";
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
export default function useResizeObserver(element, action) {
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
if (!element)
|
|
6
|
+
return;
|
|
7
|
+
const observer = new ResizeObserver(action);
|
|
8
|
+
observer.observe(element);
|
|
9
|
+
action();
|
|
10
|
+
return () => observer.disconnect();
|
|
11
|
+
}, [element, action]);
|
|
12
|
+
}
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as useContainer } from "./element/container";
|
|
2
|
-
export { default as useResize } from "./element/resize";
|
|
3
|
-
export { default as useInterval } from "./clock/interval";
|
|
4
|
-
export { default as useSound } from "./audio/sound";
|
|
1
|
+
export { default as useContainer } from "./element/container";
|
|
2
|
+
export { default as useResize } from "./element/resize";
|
|
3
|
+
export { default as useInterval } from "./clock/interval";
|
|
4
|
+
export { default as useSound } from "./audio/sound";
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as useContainer } from "./element/container";
|
|
2
|
-
export { default as useResize } from "./element/resize";
|
|
3
|
-
export { default as useInterval } from "./clock/interval";
|
|
4
|
-
export { default as useSound } from "./audio/sound";
|
|
1
|
+
export { default as useContainer } from "./element/container";
|
|
2
|
+
export { default as useResize } from "./element/resize";
|
|
3
|
+
export { default as useInterval } from "./clock/interval";
|
|
4
|
+
export { default as useSound } from "./audio/sound";
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
export { default as Input } from "./components/input";
|
|
2
|
-
export { default as TextArea } from "./components/textarea";
|
|
3
|
-
export { default as Select } from "./components/select";
|
|
4
|
-
export { default as MultipleChoice } from "./components/multiple-choice";
|
|
5
|
-
export { default as Attachment } from "./components/attachment";
|
|
6
|
-
export { default as CheckBox } from "./components/checkbox";
|
|
7
|
-
export { default as FadeCarousel } from "./components/fade-carousel";
|
|
8
|
-
export * from "./components";
|
|
9
|
-
export * from "./components/search-bar";
|
|
10
|
-
export * from "./core/types";
|
|
11
|
-
export * from "./core/functions";
|
|
12
|
-
export * from "./core/format";
|
|
13
|
-
export * from "./components/form/functions";
|
|
14
|
-
export * from "./hooks";
|
|
1
|
+
export { default as Input } from "./components/input";
|
|
2
|
+
export { default as TextArea } from "./components/textarea";
|
|
3
|
+
export { default as Select } from "./components/select";
|
|
4
|
+
export { default as MultipleChoice } from "./components/multiple-choice";
|
|
5
|
+
export { default as Attachment } from "./components/attachment";
|
|
6
|
+
export { default as CheckBox } from "./components/checkbox";
|
|
7
|
+
export { default as FadeCarousel } from "./components/fade-carousel";
|
|
8
|
+
export * from "./components";
|
|
9
|
+
export * from "./components/search-bar";
|
|
10
|
+
export * from "./core/types";
|
|
11
|
+
export * from "./core/functions";
|
|
12
|
+
export * from "./core/format";
|
|
13
|
+
export * from "./components/form/functions";
|
|
14
|
+
export * from "./hooks";
|