podo-ui 0.3.7 → 0.3.9
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/next.d.ts +16 -0
- package/dist/next.d.ts.map +1 -0
- package/dist/next.js +17 -0
- package/dist/react/atom/editor-view.d.ts +7 -0
- package/dist/react/atom/editor-view.d.ts.map +1 -0
- package/dist/react/atom/editor-view.js +6 -0
- package/dist/react/atom/editor.d.ts +15 -0
- package/dist/react/atom/editor.d.ts.map +1 -0
- package/dist/react/atom/editor.js +2224 -0
- package/dist/react/atom/input.d.ts +12 -0
- package/dist/react/atom/input.d.ts.map +1 -0
- package/dist/react/atom/input.js +29 -0
- package/dist/react/atom/textarea.d.ts +9 -0
- package/dist/react/atom/textarea.d.ts.map +1 -0
- package/dist/react/atom/textarea.js +26 -0
- package/dist/react/molecule/field.d.ts +16 -0
- package/dist/react/molecule/field.d.ts.map +1 -0
- package/dist/react/molecule/field.js +35 -0
- package/dist/react/molecule/pagination.d.ts +9 -0
- package/dist/react/molecule/pagination.d.ts.map +1 -0
- package/dist/react/molecule/pagination.js +28 -0
- package/dist/react/molecule/toast-provider.d.ts +22 -0
- package/dist/react/molecule/toast-provider.d.ts.map +1 -0
- package/dist/react/molecule/toast-provider.js +64 -0
- package/dist/react/molecule/toast.d.ts +16 -0
- package/dist/react/molecule/toast.d.ts.map +1 -0
- package/dist/react/molecule/toast.js +58 -0
- package/dist/react.d.ts +16 -0
- package/dist/react.d.ts.map +1 -0
- package/dist/react.js +15 -0
- package/package.json +19 -4
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
export interface InputWrapperProps extends React.ComponentProps<'input'> {
|
|
3
|
+
value?: string | number;
|
|
4
|
+
className?: string;
|
|
5
|
+
validator?: z.ZodType<unknown>;
|
|
6
|
+
withIcon?: string;
|
|
7
|
+
withRightIcon?: string;
|
|
8
|
+
unit?: string;
|
|
9
|
+
}
|
|
10
|
+
declare const Input: React.FC<InputWrapperProps>;
|
|
11
|
+
export default Input;
|
|
12
|
+
//# sourceMappingURL=input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../react/atom/input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmDtC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect, useCallback } from 'react';
|
|
3
|
+
import { z } from 'zod';
|
|
4
|
+
import styles from './input.module.scss';
|
|
5
|
+
const Input = ({ validator, value, className, withIcon, withRightIcon, unit, ...rest }) => {
|
|
6
|
+
const [message, setMessage] = useState('');
|
|
7
|
+
const [statusClass, setStatusClass] = useState('');
|
|
8
|
+
const validateHandler = useCallback(() => {
|
|
9
|
+
setMessage('');
|
|
10
|
+
setStatusClass('');
|
|
11
|
+
if (validator && value) {
|
|
12
|
+
try {
|
|
13
|
+
validator.parse(value);
|
|
14
|
+
setStatusClass('success');
|
|
15
|
+
}
|
|
16
|
+
catch (e) {
|
|
17
|
+
if (e instanceof z.ZodError) {
|
|
18
|
+
setMessage(e.errors[0].message);
|
|
19
|
+
setStatusClass('danger');
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}, [validator, value]);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
validateHandler();
|
|
26
|
+
}, [validateHandler, value]);
|
|
27
|
+
return (_jsxs("div", { className: `${styles.style} ${className || ''}`, children: [_jsxs("div", { className: `${className || ''} ${withIcon ? 'with-icon' : ''} ${withRightIcon ? 'with-right-icon' : ''}`, children: [withIcon && _jsx("i", { className: withIcon }), _jsx("input", { ...rest, value: value ?? '', className: `${statusClass} ${className || ''}` }), withRightIcon && _jsx("i", { className: withRightIcon }), unit && _jsx("span", { className: "unit", children: unit })] }), validator && message !== '' && (_jsx("div", { className: "validator", children: message }))] }));
|
|
28
|
+
};
|
|
29
|
+
export default Input;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
export interface TextareaWrapperProps extends React.ComponentProps<'textarea'> {
|
|
3
|
+
value: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
validator?: z.ZodType<unknown>;
|
|
6
|
+
}
|
|
7
|
+
declare const Textarea: React.FC<TextareaWrapperProps>;
|
|
8
|
+
export default Textarea;
|
|
9
|
+
//# sourceMappingURL=textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../react/atom/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;CAChC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsC5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { z } from 'zod';
|
|
4
|
+
import styles from './textarea.module.scss';
|
|
5
|
+
const Textarea = ({ validator, value, className, ...rest }) => {
|
|
6
|
+
const [message, setMessage] = useState('');
|
|
7
|
+
const [statusClass, setStatusClass] = useState('');
|
|
8
|
+
const validateHandler = () => {
|
|
9
|
+
setMessage('');
|
|
10
|
+
setStatusClass('');
|
|
11
|
+
if (validator && value.length > 0) {
|
|
12
|
+
try {
|
|
13
|
+
validator.parse(value);
|
|
14
|
+
setStatusClass('success');
|
|
15
|
+
}
|
|
16
|
+
catch (e) {
|
|
17
|
+
if (e instanceof z.ZodError) {
|
|
18
|
+
setMessage(e.errors[0].message);
|
|
19
|
+
setStatusClass('danger');
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
return (_jsxs("div", { className: `${styles.style} ${className}`, children: [_jsx("textarea", { ...rest, value: value, className: `${statusClass} ${className}`, onKeyUp: validateHandler }), validator && message !== '' && (_jsx("div", { className: "validator", children: message }))] }));
|
|
25
|
+
};
|
|
26
|
+
export default Textarea;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
export interface FieldProps {
|
|
3
|
+
label?: string;
|
|
4
|
+
labelClass?: string;
|
|
5
|
+
required?: boolean;
|
|
6
|
+
helper?: string;
|
|
7
|
+
helperClass?: string;
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
validator?: z.ZodType<unknown>;
|
|
10
|
+
value?: string;
|
|
11
|
+
setClassName?: React.Dispatch<React.SetStateAction<string>>;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
declare const Field: ({ label, labelClass, required, helper, helperClass, children, validator, value, setClassName, className, }: FieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export default Field;
|
|
16
|
+
//# sourceMappingURL=field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../react/molecule/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,+GAWR,UAAU,4CA+CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { z } from 'zod';
|
|
3
|
+
import styles from './field.module.scss';
|
|
4
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
5
|
+
const Field = ({ label, labelClass, required, helper, helperClass, children, validator, value, setClassName, className, }) => {
|
|
6
|
+
const [message, setMessage] = useState('');
|
|
7
|
+
const validateHandler = useCallback(() => {
|
|
8
|
+
setMessage('');
|
|
9
|
+
if (setClassName) {
|
|
10
|
+
setClassName('');
|
|
11
|
+
}
|
|
12
|
+
if (validator && value && value.length > 0) {
|
|
13
|
+
try {
|
|
14
|
+
validator.parse(value);
|
|
15
|
+
if (setClassName) {
|
|
16
|
+
setClassName('success');
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
catch (e) {
|
|
20
|
+
if (e instanceof z.ZodError) {
|
|
21
|
+
setMessage(e.errors[0].message);
|
|
22
|
+
if (setClassName) {
|
|
23
|
+
setClassName('danger');
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}, [validator, value, setClassName]);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
validateHandler();
|
|
31
|
+
}, [validateHandler]);
|
|
32
|
+
return (_jsxs("div", { className: `${styles.style} ${className || ''}`, children: [label && (_jsxs("label", { className: labelClass, children: [label, required && _jsx("span", { className: "required", children: "*" })] })), _jsx("div", { className: "child", children: children }), helper ||
|
|
33
|
+
(validator && message !== '' && (_jsx("div", { className: `helper ${helperClass || ''}`, children: message || helper })))] }));
|
|
34
|
+
};
|
|
35
|
+
export default Field;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface PaginationProps {
|
|
2
|
+
currentPage: number;
|
|
3
|
+
totalPages: number;
|
|
4
|
+
onPageChange: (page: number) => void;
|
|
5
|
+
maxVisiblePages?: number;
|
|
6
|
+
}
|
|
7
|
+
export default function Pagination({ currentPage, totalPages, onPageChange, maxVisiblePages, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=pagination.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../react/molecule/pagination.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,WAAW,EACX,UAAU,EACV,YAAY,EACZ,eAAmB,GACpB,EAAE,eAAe,kDAwEjB"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styles from './pagination.module.scss';
|
|
3
|
+
export default function Pagination({ currentPage, totalPages, onPageChange, maxVisiblePages = 5, }) {
|
|
4
|
+
const getPageNumbers = () => {
|
|
5
|
+
const pages = [];
|
|
6
|
+
const startPage = Math.floor((currentPage - 1) / maxVisiblePages) * maxVisiblePages + 1;
|
|
7
|
+
const endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);
|
|
8
|
+
for (let i = startPage; i <= endPage; i++) {
|
|
9
|
+
pages.push(i);
|
|
10
|
+
}
|
|
11
|
+
return pages;
|
|
12
|
+
};
|
|
13
|
+
const pageNumbers = getPageNumbers();
|
|
14
|
+
const handlePrevious = () => {
|
|
15
|
+
if (currentPage > 1) {
|
|
16
|
+
onPageChange(currentPage - 1);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
const handleNext = () => {
|
|
20
|
+
if (currentPage < totalPages) {
|
|
21
|
+
onPageChange(currentPage + 1);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
if (totalPages === 0) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
return (_jsxs("div", { className: styles.pagination, children: [currentPage > 1 ? (_jsx("button", { onClick: handlePrevious, className: styles.pageButton, "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0", children: _jsx("i", { className: "icon-arrow-left" }) })) : (_jsx("div", { className: styles.pageButtonPlaceholder })), pageNumbers.map((pageNum) => (_jsx("button", { onClick: () => onPageChange(pageNum), className: `${styles.pageButton} ${currentPage === pageNum ? styles.active : ''}`, "aria-label": `${pageNum}페이지`, "aria-current": currentPage === pageNum ? 'page' : undefined, children: pageNum }, pageNum))), currentPage < totalPages ? (_jsx("button", { onClick: handleNext, className: styles.pageButton, "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0", children: _jsx("i", { className: "icon-arrow-right" }) })) : (_jsx("div", { className: styles.pageButtonPlaceholder }))] }));
|
|
28
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ToastPosition, ToastVariant } from './toast';
|
|
3
|
+
interface ToastOptions {
|
|
4
|
+
header?: string;
|
|
5
|
+
message: string;
|
|
6
|
+
variant?: ToastVariant;
|
|
7
|
+
type?: 'type01' | 'type02';
|
|
8
|
+
long?: boolean;
|
|
9
|
+
duration?: number;
|
|
10
|
+
width?: string | number;
|
|
11
|
+
position?: ToastPosition;
|
|
12
|
+
}
|
|
13
|
+
interface ToastContextType {
|
|
14
|
+
showToast: (options: ToastOptions) => string;
|
|
15
|
+
hideToast: (id: string) => void;
|
|
16
|
+
}
|
|
17
|
+
export declare const useToast: () => ToastContextType;
|
|
18
|
+
export declare const ToastProvider: React.FC<{
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
}>;
|
|
21
|
+
export {};
|
|
22
|
+
//# sourceMappingURL=toast-provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast-provider.d.ts","sourceRoot":"","sources":["../../../react/molecule/toast-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAEhF,OAAc,EAAc,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQzE,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,UAAU,gBAAgB;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IAC7C,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAID,eAAO,MAAM,QAAQ,wBAMpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAoFjE,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React, { createContext, useContext, useState, useCallback } from 'react';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
5
|
+
import Toast from './toast';
|
|
6
|
+
import styles from './toast-container.module.scss';
|
|
7
|
+
const ToastContext = createContext(undefined);
|
|
8
|
+
export const useToast = () => {
|
|
9
|
+
const context = useContext(ToastContext);
|
|
10
|
+
if (!context) {
|
|
11
|
+
throw new Error('useToast must be used within ToastProvider');
|
|
12
|
+
}
|
|
13
|
+
return context;
|
|
14
|
+
};
|
|
15
|
+
export const ToastProvider = ({ children }) => {
|
|
16
|
+
const [toasts, setToasts] = useState([]);
|
|
17
|
+
const [isMounted, setIsMounted] = useState(false);
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
setIsMounted(true);
|
|
20
|
+
}, []);
|
|
21
|
+
const showToast = useCallback((options) => {
|
|
22
|
+
const id = `toast-${Date.now()}-${Math.random()}`;
|
|
23
|
+
const position = options.position || 'top-right';
|
|
24
|
+
setToasts((prev) => [
|
|
25
|
+
...prev,
|
|
26
|
+
{
|
|
27
|
+
id,
|
|
28
|
+
position,
|
|
29
|
+
header: options.header,
|
|
30
|
+
message: options.message,
|
|
31
|
+
variant: options.variant,
|
|
32
|
+
type: options.type,
|
|
33
|
+
long: options.long,
|
|
34
|
+
duration: options.duration,
|
|
35
|
+
width: options.width,
|
|
36
|
+
},
|
|
37
|
+
]);
|
|
38
|
+
return id;
|
|
39
|
+
}, []);
|
|
40
|
+
const hideToast = useCallback((id) => {
|
|
41
|
+
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
42
|
+
}, []);
|
|
43
|
+
const getToastsByPosition = (position) => {
|
|
44
|
+
return toasts.filter((toast) => toast.position === position);
|
|
45
|
+
};
|
|
46
|
+
const positions = [
|
|
47
|
+
'top-left',
|
|
48
|
+
'top-center',
|
|
49
|
+
'top-right',
|
|
50
|
+
'center-left',
|
|
51
|
+
'center',
|
|
52
|
+
'center-right',
|
|
53
|
+
'bottom-left',
|
|
54
|
+
'bottom-center',
|
|
55
|
+
'bottom-right',
|
|
56
|
+
];
|
|
57
|
+
return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [children, isMounted &&
|
|
58
|
+
createPortal(_jsx("div", { className: styles.toastPortal, children: positions.map((position) => {
|
|
59
|
+
const positionToasts = getToastsByPosition(position);
|
|
60
|
+
if (positionToasts.length === 0)
|
|
61
|
+
return null;
|
|
62
|
+
return (_jsx("div", { className: `${styles.toastContainer} ${styles[position]}`, children: positionToasts.map((toast) => (_jsx(Toast, { id: toast.id, header: toast.header, message: toast.message, variant: toast.variant, type: toast.type, long: toast.long, duration: toast.duration, width: toast.width, onClose: hideToast }, toast.id))) }, position));
|
|
63
|
+
}) }), document.body)] }));
|
|
64
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
2
|
+
export type ToastVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
|
|
3
|
+
export interface ToastProps {
|
|
4
|
+
id: string;
|
|
5
|
+
header?: string;
|
|
6
|
+
message: string;
|
|
7
|
+
variant?: ToastVariant;
|
|
8
|
+
type?: 'type01' | 'type02';
|
|
9
|
+
long?: boolean;
|
|
10
|
+
duration?: number;
|
|
11
|
+
width?: string | number;
|
|
12
|
+
onClose: (id: string) => void;
|
|
13
|
+
}
|
|
14
|
+
declare const Toast: React.FC<ToastProps>;
|
|
15
|
+
export default Toast;
|
|
16
|
+
//# sourceMappingURL=toast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../react/molecule/toast.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7F,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAmF/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import styles from './toast.module.scss';
|
|
5
|
+
const Toast = ({ id, header, message, variant = 'default', type = 'type01', long = false, duration = 3000, width, onClose, }) => {
|
|
6
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
7
|
+
const [isClosing, setIsClosing] = useState(false);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
// Fade in
|
|
10
|
+
requestAnimationFrame(() => {
|
|
11
|
+
setIsVisible(true);
|
|
12
|
+
});
|
|
13
|
+
// Auto close
|
|
14
|
+
if (duration > 0) {
|
|
15
|
+
const timer = setTimeout(() => {
|
|
16
|
+
handleClose();
|
|
17
|
+
}, duration);
|
|
18
|
+
return () => clearTimeout(timer);
|
|
19
|
+
}
|
|
20
|
+
}, [duration]);
|
|
21
|
+
const handleClose = () => {
|
|
22
|
+
setIsClosing(true);
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
onClose(id);
|
|
25
|
+
}, 200); // 0.2s fade out
|
|
26
|
+
};
|
|
27
|
+
const toastClasses = [
|
|
28
|
+
'toast',
|
|
29
|
+
variant,
|
|
30
|
+
type === 'type02' ? 'toast-border' : '',
|
|
31
|
+
long ? 'toast-long' : '',
|
|
32
|
+
styles.toastAnimation,
|
|
33
|
+
isVisible && !isClosing ? styles.fadeIn : '',
|
|
34
|
+
isClosing ? styles.fadeOut : '',
|
|
35
|
+
]
|
|
36
|
+
.filter(Boolean)
|
|
37
|
+
.join(' ');
|
|
38
|
+
const toastStyle = {
|
|
39
|
+
width: width ? (typeof width === 'number' ? `${width}px` : width) : 'auto',
|
|
40
|
+
};
|
|
41
|
+
const getIcon = () => {
|
|
42
|
+
switch (variant) {
|
|
43
|
+
case 'success':
|
|
44
|
+
return 'icon-check';
|
|
45
|
+
case 'warning':
|
|
46
|
+
return 'icon-warning';
|
|
47
|
+
case 'danger':
|
|
48
|
+
return 'icon-danger';
|
|
49
|
+
case 'primary':
|
|
50
|
+
case 'info':
|
|
51
|
+
case 'default':
|
|
52
|
+
default:
|
|
53
|
+
return 'icon-info';
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
return (_jsxs("div", { className: toastClasses, style: toastStyle, children: [_jsx("div", { className: "toast-icon", children: _jsx("i", { className: getIcon() }) }), _jsxs("div", { className: "toast-content", children: [header && !long && _jsx("div", { className: "toast-header", children: header }), _jsx("div", { className: "toast-body", children: message })] }), _jsx("button", { className: "toast-close", onClick: handleClose, children: _jsx("i", { className: "icon-close" }) })] }));
|
|
57
|
+
};
|
|
58
|
+
export default Toast;
|
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import Input from './react/atom/input';
|
|
2
|
+
import Textarea from './react/atom/textarea';
|
|
3
|
+
import Editor from './react/atom/editor';
|
|
4
|
+
import EditorView from './react/atom/editor-view';
|
|
5
|
+
import Pagination from './react/molecule/pagination';
|
|
6
|
+
import Field from './react/molecule/field';
|
|
7
|
+
declare const Form: {
|
|
8
|
+
Input: import("react").FC<import("./react/atom/input").InputWrapperProps>;
|
|
9
|
+
Textarea: import("react").FC<import("./react/atom/textarea").TextareaWrapperProps>;
|
|
10
|
+
Editor: ({ value, width, height, minHeight, maxHeight, resizable, onChange, validator, placeholder, }: import("./react/atom/editor").EditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
EditorView: ({ value, className }: import("./react/atom/editor-view").EditorViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
Field: ({ label, labelClass, required, helper, helperClass, children, validator, value, setClassName, className, }: import("./react/molecule/field").FieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
};
|
|
14
|
+
export default Form;
|
|
15
|
+
export { Input, Textarea, Editor, EditorView, Pagination, Field };
|
|
16
|
+
//# sourceMappingURL=react.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,QAAA,MAAM,IAAI;;;;;;CAMT,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}
|
package/dist/react.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import Input from './react/atom/input';
|
|
2
|
+
import Textarea from './react/atom/textarea';
|
|
3
|
+
import Editor from './react/atom/editor';
|
|
4
|
+
import EditorView from './react/atom/editor-view';
|
|
5
|
+
import Pagination from './react/molecule/pagination';
|
|
6
|
+
import Field from './react/molecule/field';
|
|
7
|
+
const Form = {
|
|
8
|
+
Input,
|
|
9
|
+
Textarea,
|
|
10
|
+
Editor,
|
|
11
|
+
EditorView,
|
|
12
|
+
Field,
|
|
13
|
+
};
|
|
14
|
+
export default Form;
|
|
15
|
+
export { Input, Textarea, Editor, EditorView, Pagination, Field };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "podo-ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "hada0127 <work@tarucy.net>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"url": "https://github.com/hada0127/podo-ui/issues"
|
|
13
13
|
},
|
|
14
14
|
"homepage": "https://podoui.com",
|
|
15
|
-
"main": "dist/react
|
|
16
|
-
"types": "dist/react
|
|
15
|
+
"main": "dist/react.js",
|
|
16
|
+
"types": "dist/react.d.ts",
|
|
17
17
|
"files": [
|
|
18
18
|
"dist",
|
|
19
19
|
"scss",
|
|
@@ -23,6 +23,21 @@
|
|
|
23
23
|
"README.md"
|
|
24
24
|
],
|
|
25
25
|
"exports": {
|
|
26
|
+
".": {
|
|
27
|
+
"types": "./dist/react.d.ts",
|
|
28
|
+
"import": "./dist/react.js",
|
|
29
|
+
"default": "./dist/react.js"
|
|
30
|
+
},
|
|
31
|
+
"./react": {
|
|
32
|
+
"types": "./dist/react.d.ts",
|
|
33
|
+
"import": "./dist/react.js",
|
|
34
|
+
"default": "./dist/react.js"
|
|
35
|
+
},
|
|
36
|
+
"./next": {
|
|
37
|
+
"types": "./dist/next.d.ts",
|
|
38
|
+
"import": "./dist/next.js",
|
|
39
|
+
"default": "./dist/next.js"
|
|
40
|
+
},
|
|
26
41
|
"./react/atom/*": {
|
|
27
42
|
"types": "./dist/react/atom/*.d.ts",
|
|
28
43
|
"import": "./dist/react/atom/*.js",
|
|
@@ -44,7 +59,7 @@
|
|
|
44
59
|
"build": "next build",
|
|
45
60
|
"build:lib": "npm run clean && tsc -p tsconfig.build.json && npm run copy:styles",
|
|
46
61
|
"copy:styles": "find react -name '*.scss' -exec sh -c 'mkdir -p \"dist/$(dirname \"{}\")\" && cp \"{}\" \"dist/{}\"' \\;",
|
|
47
|
-
"clean": "rm -rf dist",
|
|
62
|
+
"clean": "rm -rf dist && rm -f .tsbuildinfo",
|
|
48
63
|
"prepublishOnly": "npm run build:lib",
|
|
49
64
|
"start": "next start",
|
|
50
65
|
"lint": "next lint",
|