@ceed/ads 0.0.26 → 0.0.28
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/framer-components.js +34296 -0
- package/package.json +2 -2
- package/framer-components.tsx +0 -115
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ceed/ads",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.28",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "UI tool for Ecube Labs front-end developers",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"files": [
|
|
14
14
|
"dist",
|
|
15
15
|
"framer",
|
|
16
|
-
"framer-components.
|
|
16
|
+
"framer-components.js"
|
|
17
17
|
],
|
|
18
18
|
"author": "Ecube Labs",
|
|
19
19
|
"sideEffects": false,
|
package/framer-components.tsx
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
import { addPropertyControls, ControlType } from "framer";
|
|
2
|
-
import { ComponentType, useState } from "react";
|
|
3
|
-
import * as ADS from "https://www.unpkg.com/@ceed/ads@latest/framer";
|
|
4
|
-
|
|
5
|
-
export function Accordions(props) {
|
|
6
|
-
const { summaries, details, ...innerProps } = props;
|
|
7
|
-
|
|
8
|
-
return (
|
|
9
|
-
<ADS.ThemeProvider>
|
|
10
|
-
<ADS.Accordions
|
|
11
|
-
{...innerProps}
|
|
12
|
-
items={summaries?.map((summary, i) => ({
|
|
13
|
-
summary,
|
|
14
|
-
details: details[i],
|
|
15
|
-
}))}
|
|
16
|
-
/>
|
|
17
|
-
</ADS.ThemeProvider>
|
|
18
|
-
);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
addPropertyControls(Accordions, ADS.accordionsPropertyControls);
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* These annotations control how your component sizes
|
|
25
|
-
* Learn more: https://www.framer.com/docs/guides/auto-sizing
|
|
26
|
-
*
|
|
27
|
-
* @framerSupportedLayoutWidth auto
|
|
28
|
-
* @framerSupportedLayoutHeight auto
|
|
29
|
-
*/
|
|
30
|
-
export function Avatar(props) {
|
|
31
|
-
const { text, image, ...innerProps } = props;
|
|
32
|
-
return (
|
|
33
|
-
<ADS.ThemeProvider>
|
|
34
|
-
<ADS.Avatar src={image?.src || image?.srcSet} {...innerProps}>
|
|
35
|
-
{text}
|
|
36
|
-
</ADS.Avatar>
|
|
37
|
-
</ADS.ThemeProvider>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
addPropertyControls(Avatar, ADS.avatarPropertyControls);
|
|
41
|
-
|
|
42
|
-
export function Badge(props) {
|
|
43
|
-
return <ADS.Badge {...props} />;
|
|
44
|
-
}
|
|
45
|
-
addPropertyControls(Badge, ADS.badgePropertyControls);
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* These annotations control how your component sizes
|
|
49
|
-
* Learn more: https://www.framer.com/docs/guides/auto-sizing
|
|
50
|
-
*
|
|
51
|
-
*/
|
|
52
|
-
export function Button(props) {
|
|
53
|
-
const { text, startDecorator, endDecorator, ...innerProps } = props;
|
|
54
|
-
|
|
55
|
-
return (
|
|
56
|
-
<ADS.ThemeProvider>
|
|
57
|
-
<ADS.Button
|
|
58
|
-
startDecorator={startDecorator[0]}
|
|
59
|
-
endDecorator={endDecorator[0]}
|
|
60
|
-
{...innerProps}
|
|
61
|
-
>
|
|
62
|
-
{text}
|
|
63
|
-
</ADS.Button>
|
|
64
|
-
</ADS.ThemeProvider>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
addPropertyControls(Button, { ...ADS.buttonPropertyControls });
|
|
69
|
-
|
|
70
|
-
export function withModal(Component): ComponentType {
|
|
71
|
-
return (props) => {
|
|
72
|
-
const { modalContents, ...innerProps } = props;
|
|
73
|
-
const [open, setOpen] = useState(false);
|
|
74
|
-
return (
|
|
75
|
-
<>
|
|
76
|
-
<Component {...innerProps} onClick={() => setOpen(true)} />
|
|
77
|
-
{open && (
|
|
78
|
-
<ADS.Modal
|
|
79
|
-
open={open}
|
|
80
|
-
onClose={() => setOpen(false)}
|
|
81
|
-
// NOTE: Portal로 열면 framer 고유 컴포넌트 스타일이 적용 안됨
|
|
82
|
-
disablePortal
|
|
83
|
-
sx={{
|
|
84
|
-
display: "flex",
|
|
85
|
-
justifyContent: "center",
|
|
86
|
-
alignItems: "center",
|
|
87
|
-
}}
|
|
88
|
-
>
|
|
89
|
-
<div>{modalContents}</div>
|
|
90
|
-
</ADS.Modal>
|
|
91
|
-
)}
|
|
92
|
-
</>
|
|
93
|
-
);
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
export function withDrawer(Component): ComponentType {
|
|
98
|
-
return (props) => {
|
|
99
|
-
const { modalContents, ...innerProps } = props;
|
|
100
|
-
const [open, setOpen] = useState(false);
|
|
101
|
-
return (
|
|
102
|
-
<>
|
|
103
|
-
<Component {...innerProps} onClick={() => setOpen(true)} />
|
|
104
|
-
<ADS.InsetDrawer
|
|
105
|
-
open={open}
|
|
106
|
-
onClose={() => setOpen(false)}
|
|
107
|
-
// NOTE: Portal로 열면 framer 고유 컴포넌트 스타일이 적용 안됨
|
|
108
|
-
disablePortal
|
|
109
|
-
>
|
|
110
|
-
{modalContents}
|
|
111
|
-
</ADS.InsetDrawer>
|
|
112
|
-
</>
|
|
113
|
-
);
|
|
114
|
-
};
|
|
115
|
-
}
|