linkup-lib 0.1.2 → 0.1.4

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.
@@ -0,0 +1,8 @@
1
+ export interface Props {
2
+ label: string;
3
+ checked: boolean;
4
+ primaryColor: string;
5
+ onChange: (checked: boolean) => void;
6
+ }
7
+ declare const Component: ({ label, checked, primaryColor, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
8
+ export default Component;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ "use client";
3
+ var __importDefault = (this && this.__importDefault) || function (mod) {
4
+ return (mod && mod.__esModule) ? mod : { "default": mod };
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = __importDefault(require("react"));
9
+ const im_1 = require("react-icons/im");
10
+ const Component = ({ label, checked, primaryColor, onChange }) => {
11
+ const [hovered, setHovered] = react_1.default.useState(false);
12
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
13
+ display: 'flex',
14
+ alignItems: 'center',
15
+ gap: 8,
16
+ cursor: 'pointer',
17
+ }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onClick: () => onChange(!checked), children: [(0, jsx_runtime_1.jsx)("div", { style: {
18
+ display: 'flex',
19
+ alignItems: 'center',
20
+ justifyContent: 'center',
21
+ width: 20,
22
+ height: 20,
23
+ border: hovered || checked ? "1px solid " + primaryColor : "1px solid #DCDDE2",
24
+ background: checked ? primaryColor : 'white',
25
+ transition: 'all 0.3s',
26
+ overflow: 'hidden',
27
+ }, children: (0, jsx_runtime_1.jsx)(im_1.ImCheckmark, { style: { fontSize: 12, color: "white", transition: 'all 0.3s', transform: checked ? 'translate(0, 0)' : 'translate(0px, -20px)' } }) }), (0, jsx_runtime_1.jsx)("p", { style: { marginTop: 2 }, children: label })] }));
28
+ };
29
+ exports.default = Component;
@@ -0,0 +1,56 @@
1
+ import { UseQueryResult } from "@tanstack/react-query";
2
+ import { ColumnsType } from "antd/es/table";
3
+ export declare const hideOptionAtom: import("jotai").PrimitiveAtom<boolean> & {
4
+ init: boolean;
5
+ };
6
+ interface SearchKeywordOption {
7
+ type: 'search';
8
+ title: string;
9
+ keywordType: string | undefined;
10
+ keywordTypeOption: {
11
+ label: string;
12
+ value: string;
13
+ }[];
14
+ onChangeKeywordType: (val: string) => void;
15
+ keyword: string;
16
+ onChangeKeyword: (val: string) => void;
17
+ }
18
+ interface CheckboxOption {
19
+ type: 'checkbox';
20
+ title: string;
21
+ options: {
22
+ label: string;
23
+ value: string;
24
+ color?: string;
25
+ }[];
26
+ value: string[];
27
+ onChange: (val: string[]) => void;
28
+ }
29
+ interface DateRangeOption {
30
+ type: 'dateRange';
31
+ title: string;
32
+ dateType: string | undefined;
33
+ dateTypeOption: {
34
+ label: string;
35
+ value: string;
36
+ }[];
37
+ onChangeDateType: (val: string | undefined) => void;
38
+ startDate: string | undefined;
39
+ endDate: string | undefined;
40
+ onChange: (startDate: string | undefined, endDate: string | undefined) => void;
41
+ }
42
+ type SearchFilterOption = CheckboxOption | DateRangeOption | SearchKeywordOption;
43
+ export interface Props<T> {
44
+ rowKey: keyof T;
45
+ primaryColor?: string;
46
+ searchParams: any;
47
+ fetch: UseQueryResult<any, Error>;
48
+ dataSet: T[];
49
+ columns: ColumnsType<T>;
50
+ searchFilter?: SearchFilterOption[];
51
+ onSearch: () => void;
52
+ onInitFilter: () => void;
53
+ onChangeGrid: (pagination: any, filters: any, sorter: any, extra: any) => void;
54
+ }
55
+ declare const Component: <T>({ rowKey, primaryColor, searchParams, fetch, dataSet, columns, searchFilter, onSearch, onInitFilter, onChangeGrid }: Props<T>) => import("react/jsx-runtime").JSX.Element;
56
+ export default Component;
@@ -0,0 +1,130 @@
1
+ "use strict";
2
+ "use client";
3
+ var __importDefault = (this && this.__importDefault) || function (mod) {
4
+ return (mod && mod.__esModule) ? mod : { "default": mod };
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.hideOptionAtom = void 0;
8
+ const jsx_runtime_1 = require("react/jsx-runtime");
9
+ const antd_1 = require("antd");
10
+ const Checkbox_1 = __importDefault(require("./Checkbox"));
11
+ const dayjs_1 = __importDefault(require("dayjs"));
12
+ const bs_1 = require("react-icons/bs");
13
+ const jotai_1 = require("jotai");
14
+ exports.hideOptionAtom = (0, jotai_1.atom)(false);
15
+ const comma = (target) => {
16
+ if (Number(target) === 0)
17
+ return 0;
18
+ else if (target)
19
+ return target.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
20
+ else
21
+ target;
22
+ };
23
+ const Component = ({ rowKey, primaryColor = '#3875F7', searchParams, fetch, dataSet, columns, searchFilter, onSearch, onInitFilter, onChangeGrid }) => {
24
+ var _a, _b;
25
+ // 상세 검색 열기/닫기
26
+ const [hideOption, setHideOption] = (0, jotai_1.useAtom)(exports.hideOptionAtom);
27
+ // 전체 데이터 수
28
+ const total = ((_a = fetch.data) === null || _a === void 0 ? void 0 : _a.total) || 0;
29
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
30
+ padding: '10px 25px'
31
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [!hideOption && (searchFilter === null || searchFilter === void 0 ? void 0 : searchFilter.map((r, i) => {
32
+ // 체크박스
33
+ if (r.type === 'checkbox') {
34
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
35
+ background: 'white',
36
+ border: '1px solid #E3E6ED',
37
+ padding: '20px 30px 16px',
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ gap: 16,
41
+ }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
42
+ display: 'flex',
43
+ flexWrap: 'wrap',
44
+ alignItems: 'center',
45
+ }, children: [(0, jsx_runtime_1.jsx)("p", { style: { fontSize: 15, flexBasis: '100px' }, children: r.title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', flexWrap: 'wrap', columnGap: 12, rowGap: 4 }, children: r.options.map((o) => {
46
+ return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { primaryColor: primaryColor, label: o.label, checked: r.value.includes(String(o.value)), onChange: (checked) => {
47
+ let newStatus = [...r.value];
48
+ if (newStatus.includes(String(o.value))) {
49
+ newStatus = newStatus.filter(item => item !== String(o.value));
50
+ }
51
+ else {
52
+ newStatus.push(String(o.value));
53
+ }
54
+ r.onChange(newStatus);
55
+ } }, `checkbox-${o.value}`));
56
+ }) })] }, `filter-${i}`) }, `filter-container-${i}`));
57
+ }
58
+ // 날짜 검색
59
+ else if (r.type === 'dateRange') {
60
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
61
+ background: 'white',
62
+ border: '1px solid #E3E6ED',
63
+ padding: '20px 30px 16px',
64
+ display: 'flex',
65
+ flexDirection: 'column',
66
+ gap: 16,
67
+ }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
68
+ display: 'flex',
69
+ flexWrap: 'wrap',
70
+ alignItems: 'center',
71
+ }, children: [(0, jsx_runtime_1.jsx)("p", { style: { fontSize: 15, flexBasis: '100px' }, children: r.title }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(antd_1.Space.Compact, { size: "middle", children: [(0, jsx_runtime_1.jsx)(antd_1.Select, { placeholder: "\uC120\uD0DD", allowClear: true, value: r.dateType, style: { width: 120 }, options: r.dateTypeOption, onChange: (val) => {
72
+ r.onChangeDateType(val);
73
+ } }), (0, jsx_runtime_1.jsx)(antd_1.Button, { disabled: !r.dateType, onClick: () => {
74
+ r.onChange((0, dayjs_1.default)().subtract(7, 'd').format('YYYYMMDD'), (0, dayjs_1.default)().format('YYYYMMDD'));
75
+ }, children: "\uC77C\uC8FC\uC77C" }), (0, jsx_runtime_1.jsx)(antd_1.Button, { disabled: !r.dateType, onClick: () => {
76
+ r.onChange((0, dayjs_1.default)().subtract(1, 'M').format('YYYYMMDD'), (0, dayjs_1.default)().format('YYYYMMDD'));
77
+ }, children: "1\uAC1C\uC6D4" }), (0, jsx_runtime_1.jsx)(antd_1.Button, { disabled: !r.dateType, onClick: () => {
78
+ r.onChange((0, dayjs_1.default)().subtract(3, 'M').format('YYYYMMDD'), (0, dayjs_1.default)().format('YYYYMMDD'));
79
+ }, children: "3\uAC1C\uC6D4" }), (0, jsx_runtime_1.jsx)(antd_1.Button, { disabled: !r.dateType, onClick: () => {
80
+ r.onChange((0, dayjs_1.default)().subtract(6, 'M').format('YYYYMMDD'), (0, dayjs_1.default)().format('YYYYMMDD'));
81
+ }, children: "6\uAC1C\uC6D4" }), (0, jsx_runtime_1.jsx)(antd_1.Button, { disabled: !r.dateType, onClick: () => {
82
+ r.onChange((0, dayjs_1.default)().subtract(1, 'y').format('YYYYMMDD'), (0, dayjs_1.default)().format('YYYYMMDD'));
83
+ }, children: "1\uB144" }), (0, jsx_runtime_1.jsx)(antd_1.DatePicker.RangePicker, { allowClear: true, allowEmpty: [true, true], disabled: !r.dateType, value: r.startDate && r.endDate ? [r.startDate ? (0, dayjs_1.default)(r.startDate) : null, r.endDate ? (0, dayjs_1.default)(r.endDate) : null] : [null, null], onChange: (dates, dateStrings) => {
84
+ if (dateStrings) {
85
+ r.onChange(dateStrings[0] ? dateStrings[0] : undefined, dateStrings[1] ? dateStrings[1] : undefined);
86
+ }
87
+ else
88
+ r.onChange(undefined, undefined);
89
+ } })] }) })] }, `filter-${i}`) }, `filter-container-${i}`));
90
+ }
91
+ // 키워드 검색
92
+ else if (r.type === 'search') {
93
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
94
+ background: 'white',
95
+ border: '1px solid #E3E6ED',
96
+ padding: '20px 30px 16px',
97
+ display: 'flex',
98
+ flexDirection: 'column',
99
+ gap: 16,
100
+ }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
101
+ display: 'flex',
102
+ flexWrap: 'wrap',
103
+ alignItems: 'center',
104
+ }, children: [(0, jsx_runtime_1.jsx)("p", { style: { fontSize: 15, flexBasis: '100px' }, children: r.title }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(antd_1.Space.Compact, { size: "middle", children: [(0, jsx_runtime_1.jsx)(antd_1.Select, { placeholder: "\uC120\uD0DD", allowClear: true, value: r.keywordType, style: { width: 120 }, options: r.keywordTypeOption, onChange: (val) => {
105
+ r.onChangeKeywordType(val);
106
+ } }), (0, jsx_runtime_1.jsx)(antd_1.Input, { placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD574\uC8FC\uC138\uC694.", value: r.keyword, onChange: (e) => {
107
+ r.onChangeKeyword(e.target.value);
108
+ }, style: { width: 250 }, onPressEnter: onSearch })] }) })] }, `filter-${i}`) }, `filter-container-${i}`));
109
+ }
110
+ })), (0, jsx_runtime_1.jsxs)("div", { style: {
111
+ width: '100%',
112
+ display: 'flex',
113
+ justifyContent: 'center',
114
+ background: 'white',
115
+ border: '1px solid #E3E6ED',
116
+ padding: '16px 30px 16px',
117
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(antd_1.Button, { disabled: fetch.isFetching, size: "middle", style: { width: 100 }, onClick: () => {
118
+ onInitFilter();
119
+ }, children: "\uCD08\uAE30\uD654" }), (0, jsx_runtime_1.jsx)(antd_1.Button, { loading: fetch.isFetching, type: "primary", size: "middle", style: { width: 100 }, onClick: onSearch, children: "\uAC80\uC0C9" }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsxs)(antd_1.Button, { size: "middle", onClick: () => setHideOption(!hideOption), children: [hideOption ? '상세 검색 펼치기' : '상세 검색 접기', (0, jsx_runtime_1.jsx)(bs_1.BsChevronDown, { style: { color: '#999', transform: hideOption ? 'rotate(0deg)' : 'rotate(180deg)', transition: 'transform 0.3s' } })] }) })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
120
+ background: 'white',
121
+ border: '1px solid #E3E6ED'
122
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { padding: '20px 30px 16px', borderBottom: '1px solid #E3E6ED' }, children: (0, jsx_runtime_1.jsxs)("p", { style: { fontSize: 16 }, children: ["\uBAA9\uB85D ( \uCD1D ", (0, jsx_runtime_1.jsx)("span", { style: { color: primaryColor, fontWeight: '600' }, children: ((_b = fetch.data) === null || _b === void 0 ? void 0 : _b.total) || 0 }), " \uAC1C )"] }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '20px 30px 16px' }, children: (0, jsx_runtime_1.jsx)(antd_1.Table, { rowKey: (r) => r[rowKey], bordered: true, loading: fetch.isFetching, dataSource: dataSet, columns: columns, scroll: { x: 1024, y: 500 }, showSorterTooltip: false, sortDirections: ['descend', 'ascend'], pagination: {
123
+ current: parseInt(searchParams.page || '1'),
124
+ pageSize: parseInt(searchParams.limit || '10'),
125
+ total: total,
126
+ showSizeChanger: true,
127
+ pageSizeOptions: ['10', '20', '50', '100'],
128
+ }, onChange: onChangeGrid }) })] })] }));
129
+ };
130
+ exports.default = Component;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import util from './util';
2
2
  import image from './image';
3
- import Registry from './Registry';
4
3
  import ReactQueryRegistry from './components/registry/ReactQueryRegistry';
5
4
  import AntdRegistry from "./components/registry/AntdRegistry";
6
5
  import NextAuthRegistry from './components/registry/NextAuthRegistry';
@@ -10,6 +9,8 @@ import Header from './components/ui/Header';
10
9
  import Header2 from './components/ui/Header2';
11
10
  import Aside from './components/ui/Aside';
12
11
  import Page from './components/ui/Page';
12
+ import Checkbox from './components/ui/Checkbox';
13
+ import Grid from './components/ui/Grid';
13
14
  declare const _default: {
14
15
  util: {
15
16
  format: {
@@ -118,7 +119,6 @@ declare const _default: {
118
119
  $metadata: import("@smithy/types").ResponseMetadata;
119
120
  }>;
120
121
  };
121
- Registry: ({ size, theme, children }: import("./Registry").RegistryProps) => import("react/jsx-runtime").JSX.Element;
122
122
  Header: ({ logo }: import("./components/ui/Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
123
123
  Header2: ({ logo }: import("./components/ui/Header2").Header2Props) => import("react/jsx-runtime").JSX.Element;
124
124
  Aside: ({ primaryColor, menus }: import("./components/ui/Aside").AsideProps) => import("react/jsx-runtime").JSX.Element;
@@ -128,6 +128,8 @@ declare const _default: {
128
128
  AntdRegistry: ({ size, theme, children }: import("./components/registry/AntdRegistry").RootLayoutProps) => import("react/jsx-runtime").JSX.Element;
129
129
  NextAuthRegistry: import("react").MemoExoticComponent<({ children }: import("./components/registry/NextAuthRegistry").Props) => import("react/jsx-runtime").JSX.Element>;
130
130
  ErrorRegistry: ({ children }: import("./components/registry/ErrorRegistry").Props) => import("react/jsx-runtime").JSX.Element;
131
+ Checkbox: ({ label, checked, primaryColor, onChange }: import("./components/ui/Checkbox").Props) => import("react/jsx-runtime").JSX.Element;
132
+ Grid: <T>({ rowKey, primaryColor, searchParams, fetch, dataSet, columns, searchFilter, onSearch, onInitFilter, onChangeGrid }: import("./components/ui/Grid").Props<T>) => import("react/jsx-runtime").JSX.Element;
131
133
  };
132
134
  export default _default;
133
- export { util, image, Registry, Header, Header2, Aside, Page, PageTitle, ReactQueryRegistry, AntdRegistry, NextAuthRegistry, ErrorRegistry };
135
+ export { util, image, Header, Header2, Aside, Page, PageTitle, ReactQueryRegistry, AntdRegistry, NextAuthRegistry, ErrorRegistry, Checkbox, Grid };
package/dist/index.js CHANGED
@@ -3,13 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ErrorRegistry = exports.NextAuthRegistry = exports.AntdRegistry = exports.ReactQueryRegistry = exports.PageTitle = exports.Page = exports.Aside = exports.Header2 = exports.Header = exports.Registry = exports.image = exports.util = void 0;
6
+ exports.Grid = exports.Checkbox = exports.ErrorRegistry = exports.NextAuthRegistry = exports.AntdRegistry = exports.ReactQueryRegistry = exports.PageTitle = exports.Page = exports.Aside = exports.Header2 = exports.Header = exports.image = exports.util = void 0;
7
7
  const util_1 = __importDefault(require("./util"));
8
8
  exports.util = util_1.default;
9
9
  const image_1 = __importDefault(require("./image"));
10
10
  exports.image = image_1.default;
11
- const Registry_1 = __importDefault(require("./Registry"));
12
- exports.Registry = Registry_1.default;
13
11
  const ReactQueryRegistry_1 = __importDefault(require("./components/registry/ReactQueryRegistry"));
14
12
  exports.ReactQueryRegistry = ReactQueryRegistry_1.default;
15
13
  const AntdRegistry_1 = __importDefault(require("./components/registry/AntdRegistry"));
@@ -28,4 +26,8 @@ const Aside_1 = __importDefault(require("./components/ui/Aside"));
28
26
  exports.Aside = Aside_1.default;
29
27
  const Page_1 = __importDefault(require("./components/ui/Page"));
30
28
  exports.Page = Page_1.default;
31
- exports.default = { util: util_1.default, image: image_1.default, Registry: Registry_1.default, Header: Header_1.default, Header2: Header2_1.default, Aside: Aside_1.default, Page: Page_1.default, PageTitle: PageTitle_1.default, ReactQueryRegistry: ReactQueryRegistry_1.default, AntdRegistry: AntdRegistry_1.default, NextAuthRegistry: NextAuthRegistry_1.default, ErrorRegistry: ErrorRegistry_1.default };
29
+ const Checkbox_1 = __importDefault(require("./components/ui/Checkbox"));
30
+ exports.Checkbox = Checkbox_1.default;
31
+ const Grid_1 = __importDefault(require("./components/ui/Grid"));
32
+ exports.Grid = Grid_1.default;
33
+ exports.default = { util: util_1.default, image: image_1.default, Header: Header_1.default, Header2: Header2_1.default, Aside: Aside_1.default, Page: Page_1.default, PageTitle: PageTitle_1.default, ReactQueryRegistry: ReactQueryRegistry_1.default, AntdRegistry: AntdRegistry_1.default, NextAuthRegistry: NextAuthRegistry_1.default, ErrorRegistry: ErrorRegistry_1.default, Checkbox: Checkbox_1.default, Grid: Grid_1.default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "linkup-lib",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "링크업 패키지",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",