@kkcompany/app-ui 0.1.1 → 0.1.3

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 (5) hide show
  1. package/dist/index.cjs +50 -13
  2. package/dist/index.d.cts +9 -5
  3. package/dist/index.d.mts +9 -5
  4. package/dist/index.mjs +50 -13
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -28,7 +28,8 @@ var see_more_default = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdp
28
28
  //#endregion
29
29
  //#region src/SeeMore.tsx
30
30
  const containerStyle = {
31
- maxHeight: "2.5em",
31
+ position: "relative",
32
+ maxHeight: "2.7em",
32
33
  overflow: "hidden",
33
34
  display: "-webkit-box",
34
35
  WebkitBoxOrient: "vertical",
@@ -37,10 +38,18 @@ const containerStyle = {
37
38
  "+ button": {
38
39
  marginTop: "0.75em",
39
40
  padding: "0",
41
+ color: "inherit",
40
42
  fontSize: "inherit",
41
43
  fontWeight: "bold",
42
44
  background: "none",
43
45
  border: "none",
46
+ cursor: "pointer",
47
+ transition: "color 0.2s ease-out",
48
+ "@media (max-width: 600px)": {
49
+ width: "100%",
50
+ textAlign: "center"
51
+ },
52
+ "&:hover": { color: "#fff" },
44
53
  "&:disabled": { opacity: "0" },
45
54
  "> span": {
46
55
  marginLeft: "2px",
@@ -51,12 +60,21 @@ const containerStyle = {
51
60
  }
52
61
  }
53
62
  };
63
+ const maskStyle = {
64
+ position: "absolute",
65
+ top: 0,
66
+ height: "100%",
67
+ width: "100%",
68
+ background: "linear-gradient(180deg, rgba(26, 26, 26, 0.00) 0%, #1a1a1a 100%)",
69
+ "@media (min-width: 601px)": { display: "none" }
70
+ };
54
71
  const addonStyles = {
55
72
  "no-expand": { WebkitLineClamp: "var(--see-more-collapsed-lines, 2)" },
56
73
  collapsed: { WebkitLineClamp: "var(--see-more-collapsed-lines, 2)" },
57
74
  expanded: {
58
75
  maxHeight: "var(--see-more-max-height, 15em)",
59
- "+ button > span": { transform: "rotateX(180deg)" }
76
+ "+ button > span": { transform: "rotateX(180deg)" },
77
+ "div:last-of-type": { display: "none" }
60
78
  }
61
79
  };
62
80
  const onResize = (container, handler) => {
@@ -74,8 +92,9 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
74
92
  const containeRef = (0, react.useRef)();
75
93
  (0, react.useEffect)(() => {
76
94
  if (!containeRef.current) return;
95
+ const wrapHieght = Number.parseInt(getComputedStyle(containeRef.current).fontSize, 10) * 3 || 36;
77
96
  return onResize(containeRef.current, () => {
78
- const scrollable = containeRef.current?.scrollHeight > 36;
97
+ const scrollable = containeRef.current?.scrollHeight > wrapHieght;
79
98
  setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && !scrollable ? "no-expand" : current);
80
99
  setExpandedHeight(containeRef.current?.scrollHeight);
81
100
  });
@@ -83,7 +102,7 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
83
102
  const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
84
103
  return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
85
104
  ...rest,
86
- children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
105
+ children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
87
106
  css: [
88
107
  expandedHeight && { "--see-more-max-height": `${expandedHeight}px` },
89
108
  containerStyle,
@@ -92,7 +111,7 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
92
111
  ],
93
112
  ref: containeRef,
94
113
  onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
95
- children
114
+ children: [children, /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { css: maskStyle })]
96
115
  }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("button", {
97
116
  type: "button",
98
117
  disabled: status === "no-expand",
@@ -205,7 +224,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
205
224
  /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
206
225
  css: tagBaseStyles,
207
226
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
208
- css: tagBottomStyles,
227
+ css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
209
228
  children: bottomTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
210
229
  })]
211
230
  })
@@ -220,7 +239,10 @@ var VideoThumbnail_default = VideoThumbnail;
220
239
  const videoItemStyle = {
221
240
  padding: "0.75em 4%",
222
241
  display: "block",
223
- a: { textDecoration: "none" },
242
+ a: {
243
+ color: "#f5f5f5",
244
+ textDecoration: "none"
245
+ },
224
246
  "@media (max-width: 600px)": { "--desktop-description-display": "none" },
225
247
  "@media (min-width: 601px)": { "--description-display": "none" }
226
248
  };
@@ -230,10 +252,23 @@ const infoStyle = {
230
252
  alignItems: "center",
231
253
  justifyContent: "space-between",
232
254
  "> div:first-of-type": { flex: "0 0 calc( 100% * 3 / 7 - 0.5em)" },
233
- "> a": { flex: "0 0 calc( 100% * 4 / 7 - 0.5em)" },
255
+ "> a": {
256
+ flex: "0 0 calc( 100% * 4 / 7 - 0.5em)",
257
+ overflow: "hidden",
258
+ textOverflow: "ellipsis",
259
+ whiteSpace: "nowrap"
260
+ },
234
261
  "@media (min-width: 601px)": {
235
- "> div:first-of-type": { flex: "0 0 16.25em" },
236
- "> a": { flex: "0 0 calc(100% - 19em)" }
262
+ "> div:first-of-type": {
263
+ flex: "0 auto",
264
+ minWidth: "0",
265
+ maxWidth: "16.25em"
266
+ },
267
+ "> a": {
268
+ marginLeft: "2.8125em",
269
+ flex: "1",
270
+ minWidth: "0"
271
+ }
237
272
  }
238
273
  };
239
274
  const descriptionStyle = {
@@ -247,10 +282,10 @@ const descriptionStyle = {
247
282
  };
248
283
  const desktopDescriptionStyle = {
249
284
  display: "var(--desktop-description-display, -webkit-box)",
250
- margin: "0.5em 0",
285
+ marginTop: "0.75rem",
251
286
  WebkitLineClamp: 3
252
287
  };
253
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
288
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
254
289
  css: [videoItemStyle, style],
255
290
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
256
291
  css: infoStyle,
@@ -259,8 +294,10 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
259
294
  imageUrl,
260
295
  topTags,
261
296
  bottomTags,
297
+ progress,
262
298
  slots,
263
- onClick: onClickThumbnail
299
+ onClick: onClickThumbnail,
300
+ children: thumbnailChildren
264
301
  }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)(slots.Link, {
265
302
  href,
266
303
  children: [data.title || data.display_text, /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
package/dist/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
1
+ import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
2
2
  import { CSSObject } from "@emotion/react";
3
3
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
4
4
  import Link from "next/link";
@@ -10,7 +10,7 @@ declare const Icon: ({
10
10
  }: {
11
11
  style?: {};
12
12
  src: any;
13
- }) => _emotion_react_jsx_runtime0.JSX.Element;
13
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
14
14
  //#endregion
15
15
  //#region src/SeeMore.d.ts
16
16
  declare const defaultMessages: {
@@ -26,7 +26,7 @@ declare const SeeMore: ({
26
26
  style?: CSSObject;
27
27
  messages?: typeof defaultMessages;
28
28
  children?: ReactNode;
29
- }) => _emotion_react_jsx_runtime0.JSX.Element;
29
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
30
30
  //#endregion
31
31
  //#region src/VideoItem.d.ts
32
32
  type VideoDetail = {
@@ -40,22 +40,26 @@ declare const VideoItem: ({
40
40
  thumbnailHref,
41
41
  imageUrl,
42
42
  data,
43
+ progress,
43
44
  topTags,
44
45
  bottomTags,
45
46
  slots,
46
- onClickThumbnail
47
+ onClickThumbnail,
48
+ thumbnailChildren
47
49
  }: {
48
50
  style?: CSSObject;
49
51
  href?: string;
50
52
  thumbnailHref?: string;
51
53
  imageUrl?: string;
52
54
  data?: VideoDetail;
55
+ progress?: number;
53
56
  topTags?: string[];
54
57
  bottomTags?: string[];
55
58
  slots?: {
56
59
  Link?: ElementType | typeof Link;
57
60
  };
58
61
  onClickThumbnail?: MouseEventHandler<HTMLAnchorElement>;
62
+ thumbnailChildren?: ReactNode;
59
63
  }) => ReactElement;
60
64
  //#endregion
61
65
  //#region src/VideoThumbnail.d.ts
@@ -82,6 +86,6 @@ declare const VideoThumbnail: ({
82
86
  Image?: ElementType;
83
87
  };
84
88
  onClick?: MouseEventHandler<HTMLAnchorElement>;
85
- }) => _emotion_react_jsx_runtime0.JSX.Element;
89
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
86
90
  //#endregion
87
91
  export { Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
1
+ import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
2
2
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
3
3
  import { CSSObject } from "@emotion/react";
4
4
  import Link from "next/link";
@@ -10,7 +10,7 @@ declare const Icon: ({
10
10
  }: {
11
11
  style?: {};
12
12
  src: any;
13
- }) => _emotion_react_jsx_runtime0.JSX.Element;
13
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
14
14
  //#endregion
15
15
  //#region src/SeeMore.d.ts
16
16
  declare const defaultMessages: {
@@ -26,7 +26,7 @@ declare const SeeMore: ({
26
26
  style?: CSSObject;
27
27
  messages?: typeof defaultMessages;
28
28
  children?: ReactNode;
29
- }) => _emotion_react_jsx_runtime0.JSX.Element;
29
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
30
30
  //#endregion
31
31
  //#region src/VideoItem.d.ts
32
32
  type VideoDetail = {
@@ -40,22 +40,26 @@ declare const VideoItem: ({
40
40
  thumbnailHref,
41
41
  imageUrl,
42
42
  data,
43
+ progress,
43
44
  topTags,
44
45
  bottomTags,
45
46
  slots,
46
- onClickThumbnail
47
+ onClickThumbnail,
48
+ thumbnailChildren
47
49
  }: {
48
50
  style?: CSSObject;
49
51
  href?: string;
50
52
  thumbnailHref?: string;
51
53
  imageUrl?: string;
52
54
  data?: VideoDetail;
55
+ progress?: number;
53
56
  topTags?: string[];
54
57
  bottomTags?: string[];
55
58
  slots?: {
56
59
  Link?: ElementType | typeof Link;
57
60
  };
58
61
  onClickThumbnail?: MouseEventHandler<HTMLAnchorElement>;
62
+ thumbnailChildren?: ReactNode;
59
63
  }) => ReactElement;
60
64
  //#endregion
61
65
  //#region src/VideoThumbnail.d.ts
@@ -82,6 +86,6 @@ declare const VideoThumbnail: ({
82
86
  Image?: ElementType;
83
87
  };
84
88
  onClick?: MouseEventHandler<HTMLAnchorElement>;
85
- }) => _emotion_react_jsx_runtime0.JSX.Element;
89
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
86
90
  //#endregion
87
91
  export { Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.mjs CHANGED
@@ -28,7 +28,8 @@ var see_more_default = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdp
28
28
  //#endregion
29
29
  //#region src/SeeMore.tsx
30
30
  const containerStyle = {
31
- maxHeight: "2.5em",
31
+ position: "relative",
32
+ maxHeight: "2.7em",
32
33
  overflow: "hidden",
33
34
  display: "-webkit-box",
34
35
  WebkitBoxOrient: "vertical",
@@ -37,10 +38,18 @@ const containerStyle = {
37
38
  "+ button": {
38
39
  marginTop: "0.75em",
39
40
  padding: "0",
41
+ color: "inherit",
40
42
  fontSize: "inherit",
41
43
  fontWeight: "bold",
42
44
  background: "none",
43
45
  border: "none",
46
+ cursor: "pointer",
47
+ transition: "color 0.2s ease-out",
48
+ "@media (max-width: 600px)": {
49
+ width: "100%",
50
+ textAlign: "center"
51
+ },
52
+ "&:hover": { color: "#fff" },
44
53
  "&:disabled": { opacity: "0" },
45
54
  "> span": {
46
55
  marginLeft: "2px",
@@ -51,12 +60,21 @@ const containerStyle = {
51
60
  }
52
61
  }
53
62
  };
63
+ const maskStyle = {
64
+ position: "absolute",
65
+ top: 0,
66
+ height: "100%",
67
+ width: "100%",
68
+ background: "linear-gradient(180deg, rgba(26, 26, 26, 0.00) 0%, #1a1a1a 100%)",
69
+ "@media (min-width: 601px)": { display: "none" }
70
+ };
54
71
  const addonStyles = {
55
72
  "no-expand": { WebkitLineClamp: "var(--see-more-collapsed-lines, 2)" },
56
73
  collapsed: { WebkitLineClamp: "var(--see-more-collapsed-lines, 2)" },
57
74
  expanded: {
58
75
  maxHeight: "var(--see-more-max-height, 15em)",
59
- "+ button > span": { transform: "rotateX(180deg)" }
76
+ "+ button > span": { transform: "rotateX(180deg)" },
77
+ "div:last-of-type": { display: "none" }
60
78
  }
61
79
  };
62
80
  const onResize = (container, handler) => {
@@ -74,8 +92,9 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
74
92
  const containeRef = useRef();
75
93
  useEffect(() => {
76
94
  if (!containeRef.current) return;
95
+ const wrapHieght = Number.parseInt(getComputedStyle(containeRef.current).fontSize, 10) * 3 || 36;
77
96
  return onResize(containeRef.current, () => {
78
- const scrollable = containeRef.current?.scrollHeight > 36;
97
+ const scrollable = containeRef.current?.scrollHeight > wrapHieght;
79
98
  setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && !scrollable ? "no-expand" : current);
80
99
  setExpandedHeight(containeRef.current?.scrollHeight);
81
100
  });
@@ -83,7 +102,7 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
83
102
  const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
84
103
  return /* @__PURE__ */ jsxs("div", {
85
104
  ...rest,
86
- children: [/* @__PURE__ */ jsx("div", {
105
+ children: [/* @__PURE__ */ jsxs("div", {
87
106
  css: [
88
107
  expandedHeight && { "--see-more-max-height": `${expandedHeight}px` },
89
108
  containerStyle,
@@ -92,7 +111,7 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
92
111
  ],
93
112
  ref: containeRef,
94
113
  onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
95
- children
114
+ children: [children, /* @__PURE__ */ jsx("div", { css: maskStyle })]
96
115
  }), /* @__PURE__ */ jsxs("button", {
97
116
  type: "button",
98
117
  disabled: status === "no-expand",
@@ -205,7 +224,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
205
224
  /* @__PURE__ */ jsxs("div", {
206
225
  css: tagBaseStyles,
207
226
  children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
208
- css: tagBottomStyles,
227
+ css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
209
228
  children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
210
229
  })]
211
230
  })
@@ -220,7 +239,10 @@ var VideoThumbnail_default = VideoThumbnail;
220
239
  const videoItemStyle = {
221
240
  padding: "0.75em 4%",
222
241
  display: "block",
223
- a: { textDecoration: "none" },
242
+ a: {
243
+ color: "#f5f5f5",
244
+ textDecoration: "none"
245
+ },
224
246
  "@media (max-width: 600px)": { "--desktop-description-display": "none" },
225
247
  "@media (min-width: 601px)": { "--description-display": "none" }
226
248
  };
@@ -230,10 +252,23 @@ const infoStyle = {
230
252
  alignItems: "center",
231
253
  justifyContent: "space-between",
232
254
  "> div:first-of-type": { flex: "0 0 calc( 100% * 3 / 7 - 0.5em)" },
233
- "> a": { flex: "0 0 calc( 100% * 4 / 7 - 0.5em)" },
255
+ "> a": {
256
+ flex: "0 0 calc( 100% * 4 / 7 - 0.5em)",
257
+ overflow: "hidden",
258
+ textOverflow: "ellipsis",
259
+ whiteSpace: "nowrap"
260
+ },
234
261
  "@media (min-width: 601px)": {
235
- "> div:first-of-type": { flex: "0 0 16.25em" },
236
- "> a": { flex: "0 0 calc(100% - 19em)" }
262
+ "> div:first-of-type": {
263
+ flex: "0 auto",
264
+ minWidth: "0",
265
+ maxWidth: "16.25em"
266
+ },
267
+ "> a": {
268
+ marginLeft: "2.8125em",
269
+ flex: "1",
270
+ minWidth: "0"
271
+ }
237
272
  }
238
273
  };
239
274
  const descriptionStyle = {
@@ -247,10 +282,10 @@ const descriptionStyle = {
247
282
  };
248
283
  const desktopDescriptionStyle = {
249
284
  display: "var(--desktop-description-display, -webkit-box)",
250
- margin: "0.5em 0",
285
+ marginTop: "0.75rem",
251
286
  WebkitLineClamp: 3
252
287
  };
253
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail }) => /* @__PURE__ */ jsxs("div", {
288
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
254
289
  css: [videoItemStyle, style],
255
290
  children: [/* @__PURE__ */ jsxs("div", {
256
291
  css: infoStyle,
@@ -259,8 +294,10 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
259
294
  imageUrl,
260
295
  topTags,
261
296
  bottomTags,
297
+ progress,
262
298
  slots,
263
- onClick: onClickThumbnail
299
+ onClick: onClickThumbnail,
300
+ children: thumbnailChildren
264
301
  }), /* @__PURE__ */ jsxs(slots.Link, {
265
302
  href,
266
303
  children: [data.title || data.display_text, /* @__PURE__ */ jsx("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",