@pisodev/test-component-library 1.0.0
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/README.md +146 -0
- package/dist/components/Button/Button.d.ts +11 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/Card/Card.d.ts +11 -0
- package/dist/components/Card/index.d.ts +2 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +68 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +71 -0
- package/dist/index.js.map +1 -0
- package/package.json +45 -0
package/README.md
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
# React SASS Component Library
|
|
2
|
+
|
|
3
|
+
SASS로 스타일링된 React 컴포넌트 라이브러리입니다. Next.js 및 React 프로젝트에서 바로 사용할 수 있습니다.
|
|
4
|
+
|
|
5
|
+
## 설치
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @yourname/react-sass-component-library
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
또는
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @yourname/react-sass-component-library
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 사용법
|
|
18
|
+
|
|
19
|
+
### Button 컴포넌트
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { Button } from '@yourname/react-sass-component-library';
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
return (
|
|
26
|
+
<div>
|
|
27
|
+
<Button variant="primary" size="medium" onClick={() => alert('클릭!')}>
|
|
28
|
+
Primary Button
|
|
29
|
+
</Button>
|
|
30
|
+
|
|
31
|
+
<Button variant="secondary" size="large">
|
|
32
|
+
Secondary Button
|
|
33
|
+
</Button>
|
|
34
|
+
|
|
35
|
+
<Button variant="outline" size="small" disabled>
|
|
36
|
+
Disabled Button
|
|
37
|
+
</Button>
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
#### Button Props
|
|
44
|
+
|
|
45
|
+
| Prop | Type | Default | Description |
|
|
46
|
+
|------|------|---------|-------------|
|
|
47
|
+
| `children` | `React.ReactNode` | - | 버튼 내용 |
|
|
48
|
+
| `variant` | `'primary' \| 'secondary' \| 'outline'` | `'primary'` | 버튼 스타일 |
|
|
49
|
+
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 버튼 크기 |
|
|
50
|
+
| `onClick` | `() => void` | - | 클릭 이벤트 핸들러 |
|
|
51
|
+
| `disabled` | `boolean` | `false` | 비활성화 여부 |
|
|
52
|
+
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | 버튼 타입 |
|
|
53
|
+
| `className` | `string` | `''` | 추가 CSS 클래스 |
|
|
54
|
+
|
|
55
|
+
### Card 컴포넌트
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { Card } from '@yourname/react-sass-component-library';
|
|
59
|
+
|
|
60
|
+
function App() {
|
|
61
|
+
return (
|
|
62
|
+
<div>
|
|
63
|
+
<Card
|
|
64
|
+
title="카드 제목"
|
|
65
|
+
subtitle="카드 부제목"
|
|
66
|
+
variant="elevated"
|
|
67
|
+
>
|
|
68
|
+
<p>카드 내용이 여기에 들어갑니다.</p>
|
|
69
|
+
</Card>
|
|
70
|
+
|
|
71
|
+
<Card
|
|
72
|
+
variant="outlined"
|
|
73
|
+
footer={<button>액션 버튼</button>}
|
|
74
|
+
>
|
|
75
|
+
<p>Footer가 있는 카드입니다.</p>
|
|
76
|
+
</Card>
|
|
77
|
+
|
|
78
|
+
<Card
|
|
79
|
+
variant="default"
|
|
80
|
+
onClick={() => console.log('카드 클릭됨')}
|
|
81
|
+
>
|
|
82
|
+
<p>클릭 가능한 카드입니다.</p>
|
|
83
|
+
</Card>
|
|
84
|
+
</div>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
#### Card Props
|
|
90
|
+
|
|
91
|
+
| Prop | Type | Default | Description |
|
|
92
|
+
|------|------|---------|-------------|
|
|
93
|
+
| `children` | `React.ReactNode` | - | 카드 내용 |
|
|
94
|
+
| `title` | `string` | - | 카드 제목 |
|
|
95
|
+
| `subtitle` | `string` | - | 카드 부제목 |
|
|
96
|
+
| `footer` | `React.ReactNode` | - | 카드 푸터 |
|
|
97
|
+
| `variant` | `'default' \| 'elevated' \| 'outlined'` | `'default'` | 카드 스타일 |
|
|
98
|
+
| `className` | `string` | `''` | 추가 CSS 클래스 |
|
|
99
|
+
| `onClick` | `() => void` | - | 클릭 이벤트 핸들러 |
|
|
100
|
+
|
|
101
|
+
## Next.js에서 사용하기
|
|
102
|
+
|
|
103
|
+
Next.js 프로젝트에서는 별도의 SASS 설정 없이 바로 사용할 수 있습니다. 스타일은 자동으로 번들에 포함됩니다.
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
// app/page.tsx 또는 pages/index.tsx
|
|
107
|
+
import { Button, Card } from '@yourname/react-sass-component-library';
|
|
108
|
+
|
|
109
|
+
export default function Home() {
|
|
110
|
+
return (
|
|
111
|
+
<main>
|
|
112
|
+
<Card title="환영합니다" variant="elevated">
|
|
113
|
+
<p>Next.js에서 컴포넌트 라이브러리를 사용하는 예시입니다.</p>
|
|
114
|
+
<Button variant="primary">시작하기</Button>
|
|
115
|
+
</Card>
|
|
116
|
+
</main>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## 개발
|
|
122
|
+
|
|
123
|
+
### 빌드
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
npm run build
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### 배포
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
npm publish --access public
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## 라이센스
|
|
136
|
+
|
|
137
|
+
MIT
|
|
138
|
+
|
|
139
|
+
## 특징
|
|
140
|
+
|
|
141
|
+
- TypeScript 지원
|
|
142
|
+
- SASS 기반 스타일링
|
|
143
|
+
- CSS Modules를 통한 스타일 캡슐화
|
|
144
|
+
- React 17, 18, 19 지원
|
|
145
|
+
- Next.js 완벽 호환
|
|
146
|
+
- Tree-shaking 지원 (ESM)
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ButtonProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
variant?: 'primary' | 'secondary' | 'outline';
|
|
5
|
+
size?: 'small' | 'medium' | 'large';
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
type?: 'button' | 'submit' | 'reset';
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const Button: React.FC<ButtonProps>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface CardProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
title?: string;
|
|
5
|
+
subtitle?: string;
|
|
6
|
+
footer?: React.ReactNode;
|
|
7
|
+
variant?: 'default' | 'elevated' | 'outlined';
|
|
8
|
+
className?: string;
|
|
9
|
+
onClick?: () => void;
|
|
10
|
+
}
|
|
11
|
+
export declare const Card: React.FC<CardProps>;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
function styleInject(css, ref) {
|
|
4
|
+
if ( ref === void 0 ) ref = {};
|
|
5
|
+
var insertAt = ref.insertAt;
|
|
6
|
+
|
|
7
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
8
|
+
|
|
9
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
10
|
+
var style = document.createElement('style');
|
|
11
|
+
style.type = 'text/css';
|
|
12
|
+
|
|
13
|
+
if (insertAt === 'top') {
|
|
14
|
+
if (head.firstChild) {
|
|
15
|
+
head.insertBefore(style, head.firstChild);
|
|
16
|
+
} else {
|
|
17
|
+
head.appendChild(style);
|
|
18
|
+
}
|
|
19
|
+
} else {
|
|
20
|
+
head.appendChild(style);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
if (style.styleSheet) {
|
|
24
|
+
style.styleSheet.cssText = css;
|
|
25
|
+
} else {
|
|
26
|
+
style.appendChild(document.createTextNode(css));
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
var css_248z$1 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:#007bff;color:#fff}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:#0062cc}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:#6c757d;color:#fff}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:#545b62}.Button-module_button__18Bed.Button-module_outline__TFr94{background-color:transparent;border:2px solid #007bff;color:#007bff}.Button-module_button__18Bed.Button-module_outline__TFr94:not(:disabled):hover{background-color:#007bff;color:#fff}";
|
|
31
|
+
var styles$1 = {"button":"Button-module_button__18Bed","small":"Button-module_small__zfmcP","medium":"Button-module_medium__HYxwi","large":"Button-module_large__iWceB","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","outline":"Button-module_outline__TFr94"};
|
|
32
|
+
styleInject(css_248z$1);
|
|
33
|
+
|
|
34
|
+
const Button = ({ children, variant = 'primary', size = 'medium', onClick, disabled = false, type = 'button', className = '', }) => {
|
|
35
|
+
const buttonClasses = [
|
|
36
|
+
styles$1.button,
|
|
37
|
+
styles$1[variant],
|
|
38
|
+
styles$1[size],
|
|
39
|
+
className,
|
|
40
|
+
]
|
|
41
|
+
.filter(Boolean)
|
|
42
|
+
.join(' ');
|
|
43
|
+
return (React.createElement("button", { className: buttonClasses, onClick: onClick, disabled: disabled, type: type }, children));
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
var css_248z = ".Card-module_card__LzN-3{border-radius:8px;overflow:hidden;transition:all .3s ease}.Card-module_card__LzN-3.Card-module_default__iGjRs{background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ{background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ:hover{box-shadow:0 8px 16px rgba(0,0,0,.2)}.Card-module_card__LzN-3.Card-module_outlined__SPAas{background-color:#fff;border:1px solid #e0e0e0;box-shadow:none}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx{cursor:pointer}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:hover{transform:translateY(-2px)}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:active{transform:translateY(0)}.Card-module_header__j-c-9{border-bottom:1px solid #e0e0e0;padding:16px}.Card-module_title__DzwNA{color:#333;font-size:20px;font-weight:600;margin:0}.Card-module_subtitle__RVMlO{color:#666;font-size:14px;margin:4px 0 0}.Card-module_content__vMtHg{padding:16px}.Card-module_footer__FjLbG{background-color:#f8f9fa;border-top:1px solid #e0e0e0;padding:16px}";
|
|
47
|
+
var styles = {"card":"Card-module_card__LzN-3","default":"Card-module_default__iGjRs","elevated":"Card-module_elevated__SpUsJ","outlined":"Card-module_outlined__SPAas","clickable":"Card-module_clickable__Lx4fx","header":"Card-module_header__j-c-9","title":"Card-module_title__DzwNA","subtitle":"Card-module_subtitle__RVMlO","content":"Card-module_content__vMtHg","footer":"Card-module_footer__FjLbG"};
|
|
48
|
+
styleInject(css_248z);
|
|
49
|
+
|
|
50
|
+
const Card = ({ children, title, subtitle, footer, variant = 'default', className = '', onClick, }) => {
|
|
51
|
+
const cardClasses = [
|
|
52
|
+
styles.card,
|
|
53
|
+
styles[variant],
|
|
54
|
+
onClick ? styles.clickable : '',
|
|
55
|
+
className,
|
|
56
|
+
]
|
|
57
|
+
.filter(Boolean)
|
|
58
|
+
.join(' ');
|
|
59
|
+
return (React.createElement("div", { className: cardClasses, onClick: onClick },
|
|
60
|
+
(title || subtitle) && (React.createElement("div", { className: styles.header },
|
|
61
|
+
title && React.createElement("h3", { className: styles.title }, title),
|
|
62
|
+
subtitle && React.createElement("p", { className: styles.subtitle }, subtitle))),
|
|
63
|
+
React.createElement("div", { className: styles.content }, children),
|
|
64
|
+
footer && React.createElement("div", { className: styles.footer }, footer)));
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export { Button, Card };
|
|
68
|
+
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function styleInject(css, ref) {
|
|
6
|
+
if ( ref === void 0 ) ref = {};
|
|
7
|
+
var insertAt = ref.insertAt;
|
|
8
|
+
|
|
9
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
10
|
+
|
|
11
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
12
|
+
var style = document.createElement('style');
|
|
13
|
+
style.type = 'text/css';
|
|
14
|
+
|
|
15
|
+
if (insertAt === 'top') {
|
|
16
|
+
if (head.firstChild) {
|
|
17
|
+
head.insertBefore(style, head.firstChild);
|
|
18
|
+
} else {
|
|
19
|
+
head.appendChild(style);
|
|
20
|
+
}
|
|
21
|
+
} else {
|
|
22
|
+
head.appendChild(style);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (style.styleSheet) {
|
|
26
|
+
style.styleSheet.cssText = css;
|
|
27
|
+
} else {
|
|
28
|
+
style.appendChild(document.createTextNode(css));
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
var css_248z$1 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:#007bff;color:#fff}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:#0062cc}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:#6c757d;color:#fff}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:#545b62}.Button-module_button__18Bed.Button-module_outline__TFr94{background-color:transparent;border:2px solid #007bff;color:#007bff}.Button-module_button__18Bed.Button-module_outline__TFr94:not(:disabled):hover{background-color:#007bff;color:#fff}";
|
|
33
|
+
var styles$1 = {"button":"Button-module_button__18Bed","small":"Button-module_small__zfmcP","medium":"Button-module_medium__HYxwi","large":"Button-module_large__iWceB","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","outline":"Button-module_outline__TFr94"};
|
|
34
|
+
styleInject(css_248z$1);
|
|
35
|
+
|
|
36
|
+
const Button = ({ children, variant = 'primary', size = 'medium', onClick, disabled = false, type = 'button', className = '', }) => {
|
|
37
|
+
const buttonClasses = [
|
|
38
|
+
styles$1.button,
|
|
39
|
+
styles$1[variant],
|
|
40
|
+
styles$1[size],
|
|
41
|
+
className,
|
|
42
|
+
]
|
|
43
|
+
.filter(Boolean)
|
|
44
|
+
.join(' ');
|
|
45
|
+
return (React.createElement("button", { className: buttonClasses, onClick: onClick, disabled: disabled, type: type }, children));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
var css_248z = ".Card-module_card__LzN-3{border-radius:8px;overflow:hidden;transition:all .3s ease}.Card-module_card__LzN-3.Card-module_default__iGjRs{background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ{background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ:hover{box-shadow:0 8px 16px rgba(0,0,0,.2)}.Card-module_card__LzN-3.Card-module_outlined__SPAas{background-color:#fff;border:1px solid #e0e0e0;box-shadow:none}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx{cursor:pointer}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:hover{transform:translateY(-2px)}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:active{transform:translateY(0)}.Card-module_header__j-c-9{border-bottom:1px solid #e0e0e0;padding:16px}.Card-module_title__DzwNA{color:#333;font-size:20px;font-weight:600;margin:0}.Card-module_subtitle__RVMlO{color:#666;font-size:14px;margin:4px 0 0}.Card-module_content__vMtHg{padding:16px}.Card-module_footer__FjLbG{background-color:#f8f9fa;border-top:1px solid #e0e0e0;padding:16px}";
|
|
49
|
+
var styles = {"card":"Card-module_card__LzN-3","default":"Card-module_default__iGjRs","elevated":"Card-module_elevated__SpUsJ","outlined":"Card-module_outlined__SPAas","clickable":"Card-module_clickable__Lx4fx","header":"Card-module_header__j-c-9","title":"Card-module_title__DzwNA","subtitle":"Card-module_subtitle__RVMlO","content":"Card-module_content__vMtHg","footer":"Card-module_footer__FjLbG"};
|
|
50
|
+
styleInject(css_248z);
|
|
51
|
+
|
|
52
|
+
const Card = ({ children, title, subtitle, footer, variant = 'default', className = '', onClick, }) => {
|
|
53
|
+
const cardClasses = [
|
|
54
|
+
styles.card,
|
|
55
|
+
styles[variant],
|
|
56
|
+
onClick ? styles.clickable : '',
|
|
57
|
+
className,
|
|
58
|
+
]
|
|
59
|
+
.filter(Boolean)
|
|
60
|
+
.join(' ');
|
|
61
|
+
return (React.createElement("div", { className: cardClasses, onClick: onClick },
|
|
62
|
+
(title || subtitle) && (React.createElement("div", { className: styles.header },
|
|
63
|
+
title && React.createElement("h3", { className: styles.title }, title),
|
|
64
|
+
subtitle && React.createElement("p", { className: styles.subtitle }, subtitle))),
|
|
65
|
+
React.createElement("div", { className: styles.content }, children),
|
|
66
|
+
footer && React.createElement("div", { className: styles.footer }, footer)));
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
exports.Button = Button;
|
|
70
|
+
exports.Card = Card;
|
|
71
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
|
package/package.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@pisodev/test-component-library",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "SCSS 기반 React 컴포넌트 라이브러리",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.esm.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "rollup -c",
|
|
14
|
+
"prepublishOnly": "npm run build"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"react",
|
|
18
|
+
"components",
|
|
19
|
+
"sass",
|
|
20
|
+
"ui",
|
|
21
|
+
"component-library",
|
|
22
|
+
"typescript"
|
|
23
|
+
],
|
|
24
|
+
"author": "",
|
|
25
|
+
"license": "MIT",
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
28
|
+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@rollup/plugin-commonjs": "^29.0.0",
|
|
32
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
33
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
34
|
+
"@types/react": "^19.2.7",
|
|
35
|
+
"@types/react-dom": "^19.2.3",
|
|
36
|
+
"react": "^19.2.3",
|
|
37
|
+
"react-dom": "^19.2.3",
|
|
38
|
+
"rollup": "^4.54.0",
|
|
39
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
40
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
41
|
+
"sass": "^1.97.1",
|
|
42
|
+
"tslib": "^2.8.1",
|
|
43
|
+
"typescript": "^5.9.3"
|
|
44
|
+
}
|
|
45
|
+
}
|