@pop-ui/core 0.0.10 → 0.0.11

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.
Files changed (36) hide show
  1. package/README.md +184 -0
  2. package/dist/components/Alert/index.js +1 -8
  3. package/dist/components/Button/index.js +1 -6
  4. package/dist/components/Checkbox/index.js +1 -5
  5. package/dist/components/DatePicker/index.js +1 -7
  6. package/dist/components/Dropdown/index.js +1 -11
  7. package/dist/components/ImageUploader/index.js +1 -10
  8. package/dist/components/Modal/index.js +1 -6
  9. package/dist/components/Pagination/index.js +1 -8
  10. package/dist/components/Radio/index.js +1 -5
  11. package/dist/components/SearchBar/index.js +1 -13
  12. package/dist/components/SegmentButton/index.js +1 -6
  13. package/dist/components/Tab/index.js +1 -11
  14. package/dist/components/Table/index.js +1 -18
  15. package/dist/components/TextField/index.js +1 -17
  16. package/dist/components/TimePicker/index.js +1 -5
  17. package/dist/components/Toggle/index.js +1 -8
  18. package/dist/components/Tooltip/index.js +1 -6
  19. package/dist/types/components/Alert/index.d.ts +0 -8
  20. package/dist/types/components/Button/index.d.ts +0 -6
  21. package/dist/types/components/Checkbox/index.d.ts +0 -5
  22. package/dist/types/components/DatePicker/index.d.ts +0 -7
  23. package/dist/types/components/Dropdown/index.d.ts +0 -11
  24. package/dist/types/components/ImageUploader/index.d.ts +0 -10
  25. package/dist/types/components/Modal/index.d.ts +0 -6
  26. package/dist/types/components/Pagination/index.d.ts +0 -8
  27. package/dist/types/components/Radio/index.d.ts +0 -5
  28. package/dist/types/components/SearchBar/index.d.ts +0 -13
  29. package/dist/types/components/SegmentButton/index.d.ts +0 -6
  30. package/dist/types/components/Tab/index.d.ts +0 -11
  31. package/dist/types/components/Table/index.d.ts +0 -18
  32. package/dist/types/components/TextField/index.d.ts +0 -17
  33. package/dist/types/components/TimePicker/index.d.ts +0 -5
  34. package/dist/types/components/Toggle/index.d.ts +0 -8
  35. package/dist/types/components/Tooltip/index.d.ts +0 -6
  36. package/package.json +94 -12
package/README.md ADDED
@@ -0,0 +1,184 @@
1
+ # @pop-ui/core
2
+
3
+ 사내 디자인 시스템을 위한 React UI 컴포넌트 라이브러리입니다.
4
+
5
+ ## 설치
6
+
7
+ ### 기본 설치
8
+
9
+ 모든 컴포넌트를 사용하기 위한 필수 패키지를 설치합니다.
10
+
11
+ ```bash
12
+ yarn add @pop-ui/core react react-dom @mantine/core @mantine/hooks
13
+ ```
14
+
15
+ ### 컴포넌트별 추가 패키지
16
+
17
+ 일부 컴포넌트는 추가 패키지가 필요합니다. 사용하는 컴포넌트에 따라 필요한 패키지를 설치하세요.
18
+
19
+ #### Button, TextField, SearchBar, Dropdown, Checkbox, Radio, Toggle
20
+
21
+ 추가 패키지 불필요 (기본 설치만으로 사용 가능)
22
+
23
+ #### DatePicker, TimePicker
24
+
25
+ ```bash
26
+ yarn add @mantine/dates dayjs
27
+ ```
28
+
29
+ #### ImageUploader
30
+
31
+ ```bash
32
+ yarn add @mantine/dropzone
33
+ ```
34
+
35
+ #### Table
36
+
37
+ ```bash
38
+ yarn add react-beautiful-dnd @tabler/icons-react
39
+ ```
40
+
41
+ #### Pagination
42
+
43
+ ```bash
44
+ yarn add @tabler/icons-react
45
+ ```
46
+
47
+ #### Modal
48
+
49
+ ```bash
50
+ yarn add @mantine/modals
51
+ ```
52
+
53
+ #### Alert, Tooltip
54
+
55
+ ```bash
56
+ yarn add @mantine/notifications
57
+ ```
58
+
59
+ #### 에디터 컴포넌트
60
+
61
+ ```bash
62
+ yarn add @mantine/tiptap @tiptap/react @tiptap/starter-kit @tiptap/extension-link
63
+ ```
64
+
65
+ ## 사용 방법
66
+
67
+ ### React (Vite)
68
+
69
+ ```tsx
70
+ import { Button, TextField } from '@pop-ui/core';
71
+
72
+ function App() {
73
+ return (
74
+ <div>
75
+ <Button styleType="primary" size="md">
76
+ 클릭하세요
77
+ </Button>
78
+ <TextField placeholder="텍스트를 입력하세요" />
79
+ </div>
80
+ );
81
+ }
82
+ ```
83
+
84
+ ### Next.js
85
+
86
+ Next.js에서 사용하려면 Mantine Provider 설정이 필요합니다.
87
+
88
+ #### App Router (Next.js 13+)
89
+
90
+ 1. Providers 컴포넌트 생성:
91
+
92
+ ```tsx
93
+ // app/providers.tsx
94
+ 'use client'
95
+
96
+ import { MantineProvider } from '@mantine/core'
97
+ import '@mantine/core/styles.css'
98
+
99
+ export function Providers({ children }: { children: React.ReactNode }) {
100
+ return <MantineProvider>{children}</MantineProvider>
101
+ }
102
+ ```
103
+
104
+ 2. Layout에서 사용:
105
+
106
+ ```tsx
107
+ // app/layout.tsx
108
+ import { Providers } from './providers'
109
+
110
+ export default function RootLayout({
111
+ children,
112
+ }: {
113
+ children: React.ReactNode
114
+ }) {
115
+ return (
116
+ <html lang="ko">
117
+ <body>
118
+ <Providers>{children}</Providers>
119
+ </body>
120
+ </html>
121
+ )
122
+ }
123
+ ```
124
+
125
+ 3. 컴포넌트 사용:
126
+
127
+ ```tsx
128
+ // app/page.tsx
129
+ 'use client'
130
+
131
+ import { Button } from '@pop-ui/core'
132
+
133
+ export default function Page() {
134
+ return <Button onClick={() => alert('클릭!')}>클릭하세요</Button>
135
+ }
136
+ ```
137
+
138
+ #### Pages Router (Next.js 12 이하)
139
+
140
+ ```tsx
141
+ // pages/_app.tsx
142
+ import { MantineProvider } from '@mantine/core'
143
+ import '@mantine/core/styles.css'
144
+ import type { AppProps } from 'next/app'
145
+
146
+ export default function App({ Component, pageProps }: AppProps) {
147
+ return (
148
+ <MantineProvider>
149
+ <Component {...pageProps} />
150
+ </MantineProvider>
151
+ )
152
+ }
153
+ ```
154
+
155
+ ## 제공 컴포넌트
156
+
157
+ - **Button** - 다양한 스타일의 버튼
158
+ - **TextField** - 텍스트 입력 필드
159
+ - **SearchBar** - 검색 입력 필드
160
+ - **Dropdown** - 드롭다운 선택
161
+ - **Checkbox** - 체크박스
162
+ - **Radio** - 라디오 버튼
163
+ - **Toggle** - 토글 스위치
164
+ - **DatePicker** - 날짜 선택
165
+ - **TimePicker** - 시간 선택
166
+ - **Pagination** - 페이지네이션
167
+ - **Tab** - 탭 메뉴
168
+ - **SegmentButton** - 세그먼트 버튼
169
+ - **Alert** - 알림 메시지
170
+ - **Tooltip** - 툴팁
171
+ - **Table** - 데이터 테이블
172
+ - **Modal** - 모달 다이얼로그
173
+ - **ImageUploader** - 이미지 업로드
174
+
175
+ ## 기술 스택
176
+
177
+ - React 18
178
+ - TypeScript
179
+ - Mantine UI 6.x
180
+ - SCSS Modules
181
+
182
+ ## 라이센스
183
+
184
+ MIT
package/dist/components/Alert/index.js CHANGED
@@ -1,16 +1,9 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { Alert as MantineAlert, } from "@mantine/core";
3
4
  import ic_success from "../../assets/icons/ic_success.svg";
4
5
  import ic_error from "../../assets/icons/ic_error.svg";
5
6
  import styles from "./styles.module.scss";
6
- /**
7
- * ----- alert props -----
8
- ** visible: 노출 여부
9
- ** type: 'success' | 'error'
10
- ** variant: 'fill' | 'light'
11
- ** title: alert 타이틀
12
- ** 기타 props는 mantine alert props 사용: https://v6.mantine.dev/core/alert/?t=props
13
- */
14
7
  export const Alert = ({ visible = false, type = "success", variant = "light", top = 48, right = 48, ...props }) => {
15
8
  let typeStyle = styles.light_success;
16
9
  if (variant === "fill") {
package/dist/components/Button/index.js CHANGED
@@ -1,12 +1,7 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { Button as MantineButton, } from "@mantine/core";
3
4
  import styles from "./styles.module.scss";
4
- /**
5
- * ----- button props -----
6
- ** size: 'sm' | 'md' | 'lg'
7
- ** styleType: 'primary' | 'primaryline' | 'basic' | 'danger' | 'setting'
8
- ** 기타 props는 mantine button props 사용: https://v6.mantine.dev/core/button/?t=props
9
- */
10
5
  export const Button = ({ children, size = "md", styleType = "primary", ...props }) => {
11
6
  let sizeStyle = styles.md_button;
12
7
  if (size === "sm") {
package/dist/components/Checkbox/index.js CHANGED
@@ -1,11 +1,7 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { Checkbox as MantineCheckbox, } from "@mantine/core";
3
4
  import styles from "./styles.module.scss";
4
- /**
5
- * ----- checkbox props -----
6
- ** size: 'sm' | 'md' | 'lg'
7
- ** 기타 props는 mantine checkbox props 사용: https://v6.mantine.dev/core/checkbox/?t=props
8
- */
9
5
  export const Checkbox = ({ size = "md", ...props }) => {
10
6
  let sizeStyle = styles.md_checkbox;
11
7
  let sizeNumber = 24;
package/dist/components/DatePicker/index.js CHANGED
@@ -1,15 +1,9 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import "dayjs/locale/ko";
3
4
  import { DatePickerInput, DateTimePicker, } from "@mantine/dates";
4
5
  import ic_calendar from "../../assets/icons/ic_calendar.svg";
5
6
  import styles from "./styles.module.scss";
6
- /**
7
- * ----- datepicker props -----
8
- ** size: 'sm' | 'md' | 'lg'
9
- ** type: 'default' | 'multiple' | 'range'
10
- ** withTime: 시간 포함 여부
11
- ** 기타 props는 mantine datepicker props 사용: https://v6.mantine.dev/dates/date-picker-input/?t=props
12
- */
13
7
  export const DatePicker = ({ size = "md", type = "default", withTime, ...props }) => {
14
8
  let sizeStyle = styles.md_textfield;
15
9
  let iconSize = 18;
package/dist/components/Dropdown/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { Input, Select, Tooltip } from "@mantine/core";
3
4
  import ic_tooltip from "../../assets/icons/ic_tooltip.svg";
@@ -5,17 +6,6 @@ import ic_chevron_up from "../../assets/icons/ic_chevron_up.svg";
5
6
  import ic_chevron_down from "../../assets/icons/ic_chevron_down.svg";
6
7
  import styles from "./styles.module.scss";
7
8
  import { useState } from "react";
8
- /**
9
- * ----- dropdown props -----
10
- ** label: string, 라벨
11
- ** labelPosition: 'top' | 'left', 라벨위치
12
- ** size: 'sm' | 'md' | 'lg'
13
- ** tooltip: string, 툴팁
14
- ** tooltipPosition: 'top' | 'bottom' | 'left' | 'right', 툴팁 위치
15
- ** description: string, 상세 설명
16
- ** errorMsg: string, 에러 메시지
17
- ** 기타 props는 mantine select props 사용: https://v6.mantine.dev/core/select/?t=props
18
- */
19
9
  export const Dropdown = ({ label, labelPosition = "top", size = "md", required, tooltip, tooltipPosition = "top", errorMsg, description, ...props }) => {
20
10
  const [isOpen, setIsOpen] = useState(false);
21
11
  let labelStyle = styles.md_label;
package/dist/components/ImageUploader/index.js CHANGED
@@ -1,19 +1,10 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
3
  import { useCallback, useState } from "react";
3
4
  import { Dropzone, IMAGE_MIME_TYPE, } from "@mantine/dropzone";
4
5
  import styles from "./styles.module.scss";
5
6
  import ic_image_colored from "../../assets/icons/ic_image_colored.svg";
6
7
  import ic_cancel_circle from "../../assets/icons/ic_cancel_circle.svg";
7
- /**
8
- * ----- image uploader props -----
9
- ** width: number
10
- ** height: number
11
- ** defaultMsg: ReactNode, placeholder 대체
12
- ** file: string | FileWithPath
13
- ** showClearButton: boolean, 업로드 파일 clear 버튼 노출 여부
14
- ** onClear: () => void, 업로드 파일 clear시 실행될 함수
15
- ** 기타 props는 mantine dropzone props 사용: https://v6.mantine.dev/others/dropzone/?t=props
16
- */
17
8
  export const ImageUploader = ({ width, height, defaultMsg = "이미지 업로드", file, onDrop, showClearButton, onClear, ...props }) => {
18
9
  const [fileData, setFileData] = useState(file);
19
10
  const handleFileDataClear = useCallback(() => {
package/dist/components/Modal/index.js CHANGED
@@ -1,11 +1,6 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { Modal as MantineModal, } from "@mantine/core";
3
- /**
4
- * ----- modal props -----
5
- ** size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
6
- ** width: number
7
- ** 기타 props는 mantine modal props 사용: https://v6.mantine.dev/core/modal/?t=props
8
- */
9
4
  export const Modal = ({ size = "md", width, withCloseButton = false, ...props }) => {
10
5
  let sizeNumber = 768;
11
6
  if (size === "xs") {
package/dist/components/Pagination/index.js CHANGED
@@ -1,16 +1,9 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { useMemo, useState } from "react";
3
4
  import chevron_left from "../../assets/icons/ic_chevron_left.svg";
4
5
  import chevron_right from "../../assets/icons/ic_chevron_right.svg";
5
6
  import style from "./style.module.scss";
6
- /**
7
- * ----- pagination props -----
8
- ** currentPageIdx: 0부터 시작, 현재 page index
9
- ** rowsPerPage: 한 페이지에 보이는 아이템 개수
10
- ** totalLength: 페이지네이션 사용할 data의 총 개수
11
- ** paginationSize: 페이지네이션 숫자 노출 수 default: 5 (1~5)
12
- ** onPageChange: (page: number) => void
13
- */
14
7
  export const Pagination = ({ currentPageIdx, rowsPerPage, totalLength, paginationSize, onPageChange, ...props }) => {
15
8
  const [currentIdx, setCurrentIdx] = useState(currentPageIdx);
16
9
  const [maxPageRows, setMaxPageRows] = useState(50);
package/dist/components/Radio/index.js CHANGED
@@ -1,11 +1,7 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { Radio as MantineRadio, } from "@mantine/core";
3
4
  import styles from "./styles.module.scss";
4
- /**
5
- * ----- radio props -----
6
- ** size: 'sm' | 'md' | 'lg'
7
- ** 기타 props는 mantine radio props 사용: https://v6.mantine.dev/core/radio/?t=props
8
- */
9
5
  export const Radio = ({ size = "md", ...props }) => {
10
6
  let sizeStyle = styles.md_radio;
11
7
  if (size === "sm") {
package/dist/components/SearchBar/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { Autocomplete, Input, Tooltip } from "@mantine/core";
3
4
  import ic_tooltip from "../../assets/icons/ic_tooltip.svg";
@@ -5,19 +6,6 @@ import ic_input_clear from "../../assets/icons/ic_input_clear.svg";
5
6
  import ic_search from "../../assets/icons/ic_search.svg";
6
7
  import styles from "./styles.module.scss";
7
8
  import { useCallback, useState } from "react";
8
- /**
9
- * ----- search bar props -----
10
- ** label?: string, 라벨
11
- ** labelPosition?: "top" | "left", 라벨 위치
12
- ** size?: "sm" | "md" | "lg"
13
- ** tooltip?: string, 툴팁
14
- ** tooltipPosition?: "top" | "bottom" | "left" | "right", 툴팁 위치
15
- ** description?: string, 상세 텍스트
16
- ** errorMsg?: string, 에러 메시지
17
- ** onChange?: (event: any) => void
18
- ** onClear?: () => void, clear button 노출시 필요
19
- ** 기타 props는 mantine autocomplete props 사용: https://v6.mantine.dev/core/autocomplete/?t=props
20
- */
21
9
  export const SearchBar = ({ label, labelPosition = "top", size = "md", required, tooltip, tooltipPosition = "top", errorMsg, description, onChange, onClear, ...props }) => {
22
10
  const [textCount, setTextCount] = useState(0);
23
11
  let labelStyle = styles.md_label;
package/dist/components/SegmentButton/index.js CHANGED
@@ -1,12 +1,7 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { SegmentedControl } from "@mantine/core";
3
4
  import styles from "./styles.module.scss";
4
- /**
5
- * ----- segment button props -----
6
- ** size: 'sm' | 'md' | 'lg'
7
- ** radius: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
8
- ** 기타 props는 mantine segmented control props 사용: https://v6.mantine.dev/core/segmented-control/?t=props
9
- */
10
5
  export const SegmentButton = ({ size = "md", radius = 6, ...props }) => {
11
6
  let sizeStyle = styles.md_segment_button;
12
7
  if (size === "sm") {
package/dist/components/Tab/index.js CHANGED
@@ -1,17 +1,7 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { Tabs } from "@mantine/core";
3
4
  import styles from "./styles.module.scss";
4
- /**
5
- * ----- tab props -----
6
- ** tabList: {
7
- title: string;
8
- value: string;
9
- body: ReactNode;
10
- icon?: ReactNode;
11
- }[];
12
- ** containerPaddingTop?: "xs" | "sm" | "md" | "lg" | "xl";
13
- ** 기타 props는 mantine tabs props 사용: https://v6.mantine.dev/core/tabs/?t=props
14
- */
15
5
  export const Tab = ({ tabList = [], containerPaddingTop, ...props }) => {
16
6
  return (_jsxs(Tabs, { ...props, children: [_jsx(Tabs.List, { className: styles.tab_title_list, children: tabList?.map((tab, index) => (_jsxs(Tabs.Tab, { value: tab.value, icon: tab.icon, children: [tab.title, _jsx("div", { className: styles.border_bottom })] }, `tab_${index}`))) }), tabList?.map((tab, index) => (_jsx(Tabs.Panel, { value: tab.value, pt: containerPaddingTop, children: tab.body }, `tab_panel_${index}`)))] }));
17
7
  };
package/dist/components/Table/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { createElement as _createElement } from "react";
2
3
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
4
  import styles from "./styles.module.scss";
@@ -7,24 +8,6 @@ import ic_sortable from "../../assets/icons/ic_sortable.svg";
7
8
  import ic_chevron_up from "../../assets/icons/ic_chevron_up.svg";
8
9
  import ic_chevron_down from "../../assets/icons/ic_chevron_down.svg";
9
10
  import ic_drag from "../../assets/icons/ic_drag.svg";
10
- /**
11
- * ----- table props -----
12
- ** tableId: 드래그앤드롭에 사용하는 고유한 id
13
- ** headerList: ReactNode[]인 헤더 리스트
14
- ** tableData: {
15
- [key:string]: {
16
- cell:ReactNode;
17
- sortTarget: string | number | boolean;
18
- dndId:(사용시, 첫번째 key value에선 필수) string | number;
19
- trClassName:(사용시, 첫번째 key value에선 필수) string;
20
- }
21
- }[]
22
- ** sortable: 정렬 가능여부
23
- ** draggable: 드래그앤드롭 가능여부
24
- ** striped: stripe 스타일 적용 여부
25
- ** onDragEnd: 드래그앤드롭 이후, 새로 정렬된 dndId list return
26
- ** className: table custom style 적용 필요시 사용
27
- */
28
11
  export const Table = ({ tableId, headerList, tableData, sortable, draggable = false, striped, onDragEnd, className, }) => {
29
12
  const [rows, setRows] = useState();
30
13
  const [sortedColIndex, setSortedColIndex] = useState();
package/dist/components/TextField/index.js CHANGED
@@ -1,26 +1,10 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { Input, Textarea, Tooltip } from "@mantine/core";
3
4
  import ic_tooltip from "../../assets/icons/ic_tooltip.svg";
4
5
  import ic_input_clear from "../../assets/icons/ic_input_clear.svg";
5
6
  import styles from "./styles.module.scss";
6
7
  import { useCallback, useState } from "react";
7
- /**
8
- * ----- textfield props -----
9
- ** label: string, 라벨
10
- ** labelPosition: "top" | "left", 라벨 위치
11
- ** size: "sm" | "md" | "lg"
12
- ** required: boolean, 필수 입력여부
13
- ** tooltip: string, 툴팁
14
- ** tooltipPosition: "top" | "bottom" | "left" | "right", 툴팁 위치
15
- ** description: string, 상세 텍스트
16
- ** errorMsg: string, 에러 메시지
17
- ** textarea: boolean, textarea element로 사용할지 여부
18
- ** minRows: number, textarea element 사용시, height 대신 사용
19
- ** maxTextCount: number, 최대 텍스트 제한
20
- ** onChange: (event: any) => void
21
- ** onClear: () => void
22
- ** 기타 props는 mantine input props 사용: https://v6.mantine.dev/core/input/?t=props
23
- */
24
8
  export const TextField = ({ label, labelPosition = "top", size = "md", required, tooltip, tooltipPosition = "top", errorMsg, description, textarea = false, minRows, maxTextCount, onChange, onClear, ...props }) => {
25
9
  const [textCount, setTextCount] = useState(0);
26
10
  let labelStyle = styles.md_label;
package/dist/components/TimePicker/index.js CHANGED
@@ -1,14 +1,10 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { useRef } from "react";
3
4
  import { ActionIcon } from "@mantine/core";
4
5
  import { TimeInput } from "@mantine/dates";
5
6
  import ic_clock from "../../assets/icons/ic_clock.svg";
6
7
  import styles from "./styles.module.scss";
7
- /**
8
- * ----- time picker props -----
9
- ** size: 'sm' | 'md' | 'lg'
10
- ** 기타 props는 mantine time input props 사용: https://v6.mantine.dev/dates/time-input/?t=props
11
- */
12
8
  export const TimePicker = ({ size = "md", ...props }) => {
13
9
  const timeInputRef = useRef(null);
14
10
  let sizeStyle = styles.md_textfield;
package/dist/components/Toggle/index.js CHANGED
@@ -1,15 +1,8 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { Switch } from "@mantine/core";
3
4
  import styles from "./styles.module.scss";
4
5
  import { useCallback, useState } from "react";
5
- /**
6
- * ----- toggle props -----
7
- ** size: 'sm' | 'md' | 'lg'
8
- ** labelPosition: 'left' | 'right', 라벨 위치
9
- ** disabled: boolean
10
- ** onChange: (event) => void
11
- ** 기타 props는 mantine switch props 사용: https://v6.mantine.dev/core/switch/?t=props
12
- */
13
6
  export const Toggle = ({ size = "md", labelPosition = "right", disabled, onChange, ...props }) => {
14
7
  const [isChecked, setIsChecked] = useState(props?.checked || false);
15
8
  let sizeStyle = styles.md_toggle;
package/dist/components/Tooltip/index.js CHANGED
@@ -1,12 +1,7 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { Tooltip as MantineTooltip, } from "@mantine/core";
3
4
  import styles from "./styles.module.scss";
4
- /**
5
- * ----- tooltip props -----
6
- ** title: string
7
- ** content: string
8
- ** 기타 props는 mantine tooltip props 사용: https://v6.mantine.dev/core/tooltip/?t=props
9
- */
10
5
  export const Tooltip = ({ title, content, maw = 280, multiline = true, ...props }) => {
11
6
  return (_jsx(MantineTooltip, { ...props, maw: maw, multiline: multiline, label: _jsxs("div", { className: styles.tooltip_body, children: [title && _jsx("span", { className: styles.tooltip_title, children: title }), _jsx("span", { className: styles.tooltip_content, children: content })] }) }));
12
7
  };
package/dist/types/components/Alert/index.d.ts CHANGED
@@ -5,13 +5,5 @@ export interface AlertProps extends MatineAlertProps {
5
5
  variant?: "fill" | "light";
6
6
  title?: string;
7
7
  }
8
- /**
9
- * ----- alert props -----
10
- ** visible: 노출 여부
11
- ** type: 'success' | 'error'
12
- ** variant: 'fill' | 'light'
13
- ** title: alert 타이틀
14
- ** 기타 props는 mantine alert props 사용: https://v6.mantine.dev/core/alert/?t=props
15
- */
16
8
  export declare const Alert: ({ visible, type, variant, top, right, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
17
9
  export default Alert;
package/dist/types/components/Button/index.d.ts CHANGED
@@ -4,11 +4,5 @@ export interface ButtonProps extends MantineButtonProps {
4
4
  size?: "sm" | "md" | "lg";
5
5
  styleType?: "primary" | "primaryline" | "basic" | "danger" | "setting";
6
6
  }
7
- /**
8
- * ----- button props -----
9
- ** size: 'sm' | 'md' | 'lg'
10
- ** styleType: 'primary' | 'primaryline' | 'basic' | 'danger' | 'setting'
11
- ** 기타 props는 mantine button props 사용: https://v6.mantine.dev/core/button/?t=props
12
- */
13
7
  export declare const Button: ({ children, size, styleType, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
14
8
  export default Button;
package/dist/types/components/Checkbox/index.d.ts CHANGED
@@ -2,10 +2,5 @@ import { CheckboxProps as MantineCheckboxProps } from "@mantine/core";
2
2
  export interface CheckboxProps extends MantineCheckboxProps {
3
3
  size?: "sm" | "md" | "lg";
4
4
  }
5
- /**
6
- * ----- checkbox props -----
7
- ** size: 'sm' | 'md' | 'lg'
8
- ** 기타 props는 mantine checkbox props 사용: https://v6.mantine.dev/core/checkbox/?t=props
9
- */
10
5
  export declare const Checkbox: ({ size, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
11
6
  export default Checkbox;
package/dist/types/components/DatePicker/index.d.ts CHANGED
@@ -5,12 +5,5 @@ export interface DatePickerProps extends DatePickerInputProps {
5
5
  type?: "default" | "multiple" | "range";
6
6
  withTime?: boolean;
7
7
  }
8
- /**
9
- * ----- datepicker props -----
10
- ** size: 'sm' | 'md' | 'lg'
11
- ** type: 'default' | 'multiple' | 'range'
12
- ** withTime: 시간 포함 여부
13
- ** 기타 props는 mantine datepicker props 사용: https://v6.mantine.dev/dates/date-picker-input/?t=props
14
- */
15
8
  export declare const DatePicker: ({ size, type, withTime, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
16
9
  export default DatePicker;
package/dist/types/components/Dropdown/index.d.ts CHANGED
@@ -8,16 +8,5 @@ export interface SearchBarProps extends SelectProps {
8
8
  description?: string;
9
9
  errorMsg?: string;
10
10
  }
11
- /**
12
- * ----- dropdown props -----
13
- ** label: string, 라벨
14
- ** labelPosition: 'top' | 'left', 라벨위치
15
- ** size: 'sm' | 'md' | 'lg'
16
- ** tooltip: string, 툴팁
17
- ** tooltipPosition: 'top' | 'bottom' | 'left' | 'right', 툴팁 위치
18
- ** description: string, 상세 설명
19
- ** errorMsg: string, 에러 메시지
20
- ** 기타 props는 mantine select props 사용: https://v6.mantine.dev/core/select/?t=props
21
- */
22
11
  export declare const Dropdown: ({ label, labelPosition, size, required, tooltip, tooltipPosition, errorMsg, description, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
23
12
  export default Dropdown;
package/dist/types/components/ImageUploader/index.d.ts CHANGED
@@ -8,15 +8,5 @@ export interface ImageUploaderProps extends DropzoneProps {
8
8
  showClearButton?: boolean;
9
9
  onClear?: () => void;
10
10
  }
11
- /**
12
- * ----- image uploader props -----
13
- ** width: number
14
- ** height: number
15
- ** defaultMsg: ReactNode, placeholder 대체
16
- ** file: string | FileWithPath
17
- ** showClearButton: boolean, 업로드 파일 clear 버튼 노출 여부
18
- ** onClear: () => void, 업로드 파일 clear시 실행될 함수
19
- ** 기타 props는 mantine dropzone props 사용: https://v6.mantine.dev/others/dropzone/?t=props
20
- */
21
11
  export declare const ImageUploader: ({ width, height, defaultMsg, file, onDrop, showClearButton, onClear, ...props }: ImageUploaderProps) => import("react/jsx-runtime").JSX.Element;
22
12
  export default ImageUploader;
package/dist/types/components/Modal/index.d.ts CHANGED
@@ -3,11 +3,5 @@ export interface ModalProps extends MantineModalProps {
3
3
  size?: "xs" | "sm" | "md" | "lg" | "xl";
4
4
  width?: number;
5
5
  }
6
- /**
7
- * ----- modal props -----
8
- ** size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
9
- ** width: number
10
- ** 기타 props는 mantine modal props 사용: https://v6.mantine.dev/core/modal/?t=props
11
- */
12
6
  export declare const Modal: ({ size, width, withCloseButton, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
13
7
  export default Modal;
package/dist/types/components/Pagination/index.d.ts CHANGED
@@ -6,13 +6,5 @@ export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
6
6
  paginationSize?: number;
7
7
  onPageChange?: (e: number) => void;
8
8
  }
9
- /**
10
- * ----- pagination props -----
11
- ** currentPageIdx: 0부터 시작, 현재 page index
12
- ** rowsPerPage: 한 페이지에 보이는 아이템 개수
13
- ** totalLength: 페이지네이션 사용할 data의 총 개수
14
- ** paginationSize: 페이지네이션 숫자 노출 수 default: 5 (1~5)
15
- ** onPageChange: (page: number) => void
16
- */
17
9
  export declare const Pagination: ({ currentPageIdx, rowsPerPage, totalLength, paginationSize, onPageChange, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
18
10
  export default Pagination;
package/dist/types/components/Radio/index.d.ts CHANGED
@@ -2,10 +2,5 @@ import { RadioProps as MantineRadioProps } from "@mantine/core";
2
2
  export interface RadioProps extends MantineRadioProps {
3
3
  size?: "sm" | "md" | "lg";
4
4
  }
5
- /**
6
- * ----- radio props -----
7
- ** size: 'sm' | 'md' | 'lg'
8
- ** 기타 props는 mantine radio props 사용: https://v6.mantine.dev/core/radio/?t=props
9
- */
10
5
  export declare const Radio: ({ size, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
11
6
  export default Radio;
package/dist/types/components/SearchBar/index.d.ts CHANGED
@@ -10,18 +10,5 @@ export interface SearchBarProps extends AutocompleteProps {
10
10
  onChange?: (event: any) => void;
11
11
  onClear?: () => void;
12
12
  }
13
- /**
14
- * ----- search bar props -----
15
- ** label?: string, 라벨
16
- ** labelPosition?: "top" | "left", 라벨 위치
17
- ** size?: "sm" | "md" | "lg"
18
- ** tooltip?: string, 툴팁
19
- ** tooltipPosition?: "top" | "bottom" | "left" | "right", 툴팁 위치
20
- ** description?: string, 상세 텍스트
21
- ** errorMsg?: string, 에러 메시지
22
- ** onChange?: (event: any) => void
23
- ** onClear?: () => void, clear button 노출시 필요
24
- ** 기타 props는 mantine autocomplete props 사용: https://v6.mantine.dev/core/autocomplete/?t=props
25
- */
26
13
  export declare const SearchBar: ({ label, labelPosition, size, required, tooltip, tooltipPosition, errorMsg, description, onChange, onClear, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
27
14
  export default SearchBar;
package/dist/types/components/SegmentButton/index.d.ts CHANGED
@@ -3,11 +3,5 @@ export interface SegmentButtonProps extends SegmentedControlProps {
3
3
  size?: "sm" | "md" | "lg";
4
4
  radius?: number | "xs" | "sm" | "md" | "lg" | "xl";
5
5
  }
6
- /**
7
- * ----- segment button props -----
8
- ** size: 'sm' | 'md' | 'lg'
9
- ** radius: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
10
- ** 기타 props는 mantine segmented control props 사용: https://v6.mantine.dev/core/segmented-control/?t=props
11
- */
12
6
  export declare const SegmentButton: ({ size, radius, ...props }: SegmentButtonProps) => import("react/jsx-runtime").JSX.Element;
13
7
  export default SegmentButton;
package/dist/types/components/Tab/index.d.ts CHANGED
@@ -9,16 +9,5 @@ export interface TabProps extends TabsProps {
9
9
  }[];
10
10
  containerPaddingTop?: "xs" | "sm" | "md" | "lg" | "xl";
11
11
  }
12
- /**
13
- * ----- tab props -----
14
- ** tabList: {
15
- title: string;
16
- value: string;
17
- body: ReactNode;
18
- icon?: ReactNode;
19
- }[];
20
- ** containerPaddingTop?: "xs" | "sm" | "md" | "lg" | "xl";
21
- ** 기타 props는 mantine tabs props 사용: https://v6.mantine.dev/core/tabs/?t=props
22
- */
23
12
  export declare const Tab: ({ tabList, containerPaddingTop, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;
24
13
  export default Tab;
package/dist/types/components/Table/index.d.ts CHANGED
@@ -19,23 +19,5 @@ export interface TableProps {
19
19
  }[]) => void;
20
20
  className?: string;
21
21
  }
22
- /**
23
- * ----- table props -----
24
- ** tableId: 드래그앤드롭에 사용하는 고유한 id
25
- ** headerList: ReactNode[]인 헤더 리스트
26
- ** tableData: {
27
- [key:string]: {
28
- cell:ReactNode;
29
- sortTarget: string | number | boolean;
30
- dndId:(사용시, 첫번째 key value에선 필수) string | number;
31
- trClassName:(사용시, 첫번째 key value에선 필수) string;
32
- }
33
- }[]
34
- ** sortable: 정렬 가능여부
35
- ** draggable: 드래그앤드롭 가능여부
36
- ** striped: stripe 스타일 적용 여부
37
- ** onDragEnd: 드래그앤드롭 이후, 새로 정렬된 dndId list return
38
- ** className: table custom style 적용 필요시 사용
39
- */
40
22
  export declare const Table: ({ tableId, headerList, tableData, sortable, draggable, striped, onDragEnd, className, }: TableProps) => import("react/jsx-runtime").JSX.Element;
41
23
  export default Table;
package/dist/types/components/TextField/index.d.ts CHANGED
@@ -14,22 +14,5 @@ export interface TextFieldProps extends InputProps {
14
14
  onChange?: (event: any) => void;
15
15
  onClear?: () => void;
16
16
  }
17
- /**
18
- * ----- textfield props -----
19
- ** label: string, 라벨
20
- ** labelPosition: "top" | "left", 라벨 위치
21
- ** size: "sm" | "md" | "lg"
22
- ** required: boolean, 필수 입력여부
23
- ** tooltip: string, 툴팁
24
- ** tooltipPosition: "top" | "bottom" | "left" | "right", 툴팁 위치
25
- ** description: string, 상세 텍스트
26
- ** errorMsg: string, 에러 메시지
27
- ** textarea: boolean, textarea element로 사용할지 여부
28
- ** minRows: number, textarea element 사용시, height 대신 사용
29
- ** maxTextCount: number, 최대 텍스트 제한
30
- ** onChange: (event: any) => void
31
- ** onClear: () => void
32
- ** 기타 props는 mantine input props 사용: https://v6.mantine.dev/core/input/?t=props
33
- */
34
17
  export declare const TextField: ({ label, labelPosition, size, required, tooltip, tooltipPosition, errorMsg, description, textarea, minRows, maxTextCount, onChange, onClear, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
35
18
  export default TextField;
package/dist/types/components/TimePicker/index.d.ts CHANGED
@@ -2,10 +2,5 @@ import { TimeInputProps } from "@mantine/dates";
2
2
  export interface TimePickerProps extends TimeInputProps {
3
3
  size?: "sm" | "md" | "lg";
4
4
  }
5
- /**
6
- * ----- time picker props -----
7
- ** size: 'sm' | 'md' | 'lg'
8
- ** 기타 props는 mantine time input props 사용: https://v6.mantine.dev/dates/time-input/?t=props
9
- */
10
5
  export declare const TimePicker: ({ size, ...props }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
11
6
  export default TimePicker;
package/dist/types/components/Toggle/index.d.ts CHANGED
@@ -5,13 +5,5 @@ export interface ToggleProps extends SwitchProps {
5
5
  disabled?: boolean;
6
6
  onChange?: (event: any) => void;
7
7
  }
8
- /**
9
- * ----- toggle props -----
10
- ** size: 'sm' | 'md' | 'lg'
11
- ** labelPosition: 'left' | 'right', 라벨 위치
12
- ** disabled: boolean
13
- ** onChange: (event) => void
14
- ** 기타 props는 mantine switch props 사용: https://v6.mantine.dev/core/switch/?t=props
15
- */
16
8
  export declare const Toggle: ({ size, labelPosition, disabled, onChange, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
17
9
  export default Toggle;
package/dist/types/components/Tooltip/index.d.ts CHANGED
@@ -3,11 +3,5 @@ export interface TooltipProps extends MantineTooltipProps {
3
3
  title?: string;
4
4
  content: string;
5
5
  }
6
- /**
7
- * ----- tooltip props -----
8
- ** title: string
9
- ** content: string
10
- ** 기타 props는 mantine tooltip props 사용: https://v6.mantine.dev/core/tooltip/?t=props
11
- */
12
6
  export declare const Tooltip: ({ title, content, maw, multiline, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
13
7
  export default Tooltip;
package/package.json CHANGED
@@ -1,16 +1,30 @@
1
1
  {
2
2
  "name": "@pop-ui/core",
3
3
  "type": "module",
4
- "version": "0.0.10",
4
+ "version": "0.0.11",
5
5
  "main": "./dist/core.umd.cjs",
6
6
  "module": "./dist/core.js",
7
- "types": "dist/types/index.d.ts",
7
+ "types": "./dist/types/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": {
11
+ "types": "./dist/types/index.d.ts",
12
+ "default": "./dist/core.js"
13
+ },
14
+ "require": {
15
+ "types": "./dist/types/index.d.ts",
16
+ "default": "./dist/core.umd.cjs"
17
+ }
18
+ }
19
+ },
20
+ "sideEffects": false,
8
21
  "repository": {
9
22
  "type": "git",
10
23
  "url": "https://github.com/datepop/pop-ui"
11
24
  },
12
25
  "files": [
13
- "dist"
26
+ "dist",
27
+ "README.md"
14
28
  ],
15
29
  "license": "MIT",
16
30
  "publishConfig": {
@@ -22,12 +36,14 @@
22
36
  "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
23
37
  "preview": "vite preview"
24
38
  },
25
- "dependencies": {
39
+ "peerDependencies": {
26
40
  "@emotion/react": "^11.11.1",
27
41
  "@mantine/carousel": "^6.0.22",
42
+ "@mantine/core": "^6.0.22",
28
43
  "@mantine/dates": "^6.0.22",
29
44
  "@mantine/dropzone": "^6.0.22",
30
45
  "@mantine/form": "^6.0.22",
46
+ "@mantine/hooks": "^6.0.22",
31
47
  "@mantine/modals": "^6.0.22",
32
48
  "@mantine/notifications": "^6.0.22",
33
49
  "@mantine/nprogress": "^6.0.22",
@@ -36,31 +52,93 @@
36
52
  "@mantine/tiptap": "^6.0.22",
37
53
  "@tabler/icons-react": "^2.47.0",
38
54
  "@tiptap/extension-link": "^2.11.7",
55
+ "@tiptap/react": "^2.11.7",
39
56
  "@tiptap/starter-kit": "^2.11.7",
40
57
  "dayjs": "^1.11.13",
41
58
  "embla-carousel-react": "^7.1.0",
42
- "react-beautiful-dnd": "^13.1.1",
43
- "sass": "^1.86.3"
44
- },
45
- "peerDependencies": {
46
- "@mantine/core": "^6.0.22",
47
- "@mantine/hooks": "^6.0.22",
48
- "@tiptap/react": "^2.11.7",
49
59
  "react": "^18.3.1",
60
+ "react-beautiful-dnd": "^13.1.1",
50
61
  "react-dom": "^18.3.1"
51
62
  },
63
+ "peerDependenciesMeta": {
64
+ "@emotion/react": {
65
+ "optional": true
66
+ },
67
+ "@mantine/carousel": {
68
+ "optional": true
69
+ },
70
+ "@mantine/dates": {
71
+ "optional": true
72
+ },
73
+ "@mantine/dropzone": {
74
+ "optional": true
75
+ },
76
+ "@mantine/form": {
77
+ "optional": true
78
+ },
79
+ "@mantine/modals": {
80
+ "optional": true
81
+ },
82
+ "@mantine/notifications": {
83
+ "optional": true
84
+ },
85
+ "@mantine/nprogress": {
86
+ "optional": true
87
+ },
88
+ "@mantine/prism": {
89
+ "optional": true
90
+ },
91
+ "@mantine/spotlight": {
92
+ "optional": true
93
+ },
94
+ "@mantine/tiptap": {
95
+ "optional": true
96
+ },
97
+ "@tabler/icons-react": {
98
+ "optional": true
99
+ },
100
+ "@tiptap/extension-link": {
101
+ "optional": true
102
+ },
103
+ "@tiptap/starter-kit": {
104
+ "optional": true
105
+ },
106
+ "dayjs": {
107
+ "optional": true
108
+ },
109
+ "embla-carousel-react": {
110
+ "optional": true
111
+ },
112
+ "react-beautiful-dnd": {
113
+ "optional": true
114
+ }
115
+ },
52
116
  "devDependencies": {
53
117
  "@babel/core": "^7.22.11",
54
118
  "@babel/preset-env": "^7.22.10",
55
119
  "@babel/preset-react": "^7.22.5",
56
120
  "@babel/preset-typescript": "^7.22.11",
121
+ "@emotion/react": "^11.11.1",
122
+ "@mantine/carousel": "^6.0.22",
57
123
  "@mantine/core": "^6.0.22",
124
+ "@mantine/dates": "^6.0.22",
125
+ "@mantine/dropzone": "^6.0.22",
126
+ "@mantine/form": "^6.0.22",
58
127
  "@mantine/hooks": "^6.0.22",
128
+ "@mantine/modals": "^6.0.22",
129
+ "@mantine/notifications": "^6.0.22",
130
+ "@mantine/nprogress": "^6.0.22",
131
+ "@mantine/prism": "^6.0.22",
132
+ "@mantine/spotlight": "^6.0.22",
133
+ "@mantine/tiptap": "^6.0.22",
134
+ "@tabler/icons-react": "^2.47.0",
59
135
  "@testing-library/jest-dom": "^6.1.2",
60
136
  "@testing-library/react": "^14.3.1",
61
137
  "@tiptap/core": "^2.1.7",
138
+ "@tiptap/extension-link": "^2.11.7",
62
139
  "@tiptap/pm": "^2.1.7",
63
140
  "@tiptap/react": "^2.11.7",
141
+ "@tiptap/starter-kit": "^2.11.7",
64
142
  "@types/jest": "^29.5.4",
65
143
  "@types/node": "^20.17.30",
66
144
  "@types/react": "^18.3.20",
@@ -72,6 +150,8 @@
72
150
  "babel-jest": "^29.6.4",
73
151
  "babel-loader": "^9.2.1",
74
152
  "css-loader": "^6.11.0",
153
+ "dayjs": "^1.11.13",
154
+ "embla-carousel-react": "^7.1.0",
75
155
  "eslint": "^8.57.1",
76
156
  "eslint-plugin-react-hooks": "^4.6.2",
77
157
  "eslint-plugin-react-refresh": "^0.4.3",
@@ -83,7 +163,9 @@
83
163
  "prettier": "^3.0.2",
84
164
  "prop-types": "^15.8.1",
85
165
  "react": "^18.3.1",
166
+ "react-beautiful-dnd": "^13.1.1",
86
167
  "react-dom": "^18.3.1",
168
+ "sass": "^1.86.3",
87
169
  "sass-loader": "^14.2.1",
88
170
  "style-loader": "^3.3.4",
89
171
  "ts-node": "^10.9.1",
@@ -91,5 +173,5 @@
91
173
  "vite": "^6.2.5",
92
174
  "webpack": "^5.99.1"
93
175
  },
94
- "gitHead": "d3d6fbec1d0272906fbfb6fe9c718c0f7fee2033"
176
+ "gitHead": "d1d318f6ff13144b6bd88bd1fda2ea0cad71a218"
95
177
  }