@kkcompany/app-ui 0.1.15 → 0.1.17

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/dist/index.cjs CHANGED
@@ -1,6 +1,55 @@
1
- let __emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
2
1
  let react = require("react");
2
+ let __emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
3
+
4
+ //#region src/HiddenToggle.tsx
5
+ const toggleStyle = {
6
+ "-webkit-tap-highlight-color": "transparent",
7
+ userSelect: "none",
8
+ "> span": {
9
+ margin: "0 0.5em",
10
+ transition: "opacity 0.2s ease"
11
+ }
12
+ };
13
+ const statusStyle = {};
14
+ const HiddenToggle = ({ defaultEnabled = false, children, onChange, ...rest }) => {
15
+ const [tapCount, setTapCount] = (0, react.useState)(() => defaultEnabled ? 7 : 0);
16
+ const resetTimer = (0, react.useRef)();
17
+ const onClick = (event) => {
18
+ clearTimeout(resetTimer.current);
19
+ setTapCount((current) => current + 1);
20
+ if (tapCount + 1 >= 7) onChange?.(event, { enabled: true });
21
+ else resetTimer.current = setTimeout(() => setTapCount(0), 7e3);
22
+ };
23
+ const onOptOut = (event) => {
24
+ event.stopPropagation();
25
+ setTapCount(0);
26
+ onChange?.(event, { enabled: false });
27
+ };
28
+ return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
29
+ css: toggleStyle,
30
+ onClick,
31
+ ...rest,
32
+ children: [
33
+ children,
34
+ tapCount >= 4 && tapCount < 7 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("span", {
35
+ style: { opacity: tapCount / 7 },
36
+ children: [7 - tapCount, " more tap(s) for feature toggle"]
37
+ }),
38
+ tapCount >= 7 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("span", {
39
+ css: statusStyle,
40
+ children: "feature toggle"
41
+ }),
42
+ tapCount >= 7 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
43
+ type: "button",
44
+ onClick: onOptOut,
45
+ children: "exit"
46
+ })
47
+ ]
48
+ });
49
+ };
50
+ var HiddenToggle_default = HiddenToggle;
3
51
 
52
+ //#endregion
4
53
  //#region src/Icon.tsx
5
54
  /** @jsxImportSource @emotion/react */
6
55
  const iconStyle = {
@@ -28,14 +77,18 @@ var see_more_default = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdp
28
77
  //#endregion
29
78
  //#region src/SeeMore.tsx
30
79
  const containerStyle = {
31
- position: "relative",
32
- maxHeight: "2.7em",
33
- overflow: "hidden",
34
- display: "-webkit-box",
35
- WebkitBoxOrient: "vertical",
36
- textOverflow: "ellipsis",
37
- transition: "max-height 0.2s ease-out",
38
- "+ button": {
80
+ "@media (max-width: 600px)": { textAlign: "center" },
81
+ "> div": {
82
+ position: "relative",
83
+ maxHeight: "2.7em",
84
+ overflow: "hidden",
85
+ display: "-webkit-box",
86
+ WebkitBoxOrient: "vertical",
87
+ textOverflow: "ellipsis",
88
+ textAlign: "left",
89
+ transition: "max-height 0.2s ease-out"
90
+ },
91
+ "> button": {
39
92
  marginTop: "0.75em",
40
93
  padding: "0",
41
94
  color: "inherit",
@@ -45,12 +98,11 @@ const containerStyle = {
45
98
  border: "none",
46
99
  cursor: "pointer",
47
100
  transition: "color 0.2s ease-out",
48
- "@media (max-width: 600px)": {
49
- width: "100%",
50
- textAlign: "center"
51
- },
52
101
  "&:hover": { color: "#fff" },
53
- "&:disabled": { opacity: "0" },
102
+ "&:disabled": {
103
+ opacity: "0",
104
+ "-webkit-tap-highlight-color": "transparent"
105
+ },
54
106
  "> span": {
55
107
  marginLeft: "2px",
56
108
  padding: "1px",
@@ -116,14 +168,10 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
116
168
  }, []);
117
169
  const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
118
170
  return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
171
+ css: [containerStyle, { div: addonStyles[status] }],
119
172
  ...rest,
120
173
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
121
- css: [
122
- expandedHeight && { "--see-more-max-height": `${expandedHeight}px` },
123
- containerStyle,
124
- addonStyles[status],
125
- style
126
- ],
174
+ css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],
127
175
  ref: containeRef,
128
176
  onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
129
177
  children: [children, /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { css: maskStyle })]
@@ -356,7 +404,7 @@ const descriptionStyle = {
356
404
  };
357
405
  const desktopDescriptionStyle = {
358
406
  display: "var(--desktop-description-display, -webkit-box)",
359
- padding: "0.75rem 0",
407
+ margin: "0.75rem 0",
360
408
  WebkitLineClamp: 3
361
409
  };
362
410
  const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(slots.Link, {
@@ -367,7 +415,8 @@ const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__
367
415
  ...rest,
368
416
  children
369
417
  });
370
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
418
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClick, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
419
+ onClick,
371
420
  css: [videoItemStyle, style],
372
421
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
373
422
  css: infoStyle,
@@ -405,6 +454,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
405
454
  var VideoItem_default = VideoItem;
406
455
 
407
456
  //#endregion
457
+ exports.HiddenToggle = HiddenToggle_default;
408
458
  exports.Icon = Icon_default;
409
459
  exports.SeeMore = SeeMore_default;
410
460
  exports.VideoItem = VideoItem_default;
package/dist/index.d.cts CHANGED
@@ -1,8 +1,24 @@
1
- import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
1
+ import * as _emotion_react_jsx_runtime0 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";
5
5
 
6
+ //#region src/HiddenToggle.d.ts
7
+ /** @jsxImportSource @emotion/react */
8
+ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: <explanation> */
9
+ /** biome-ignore-all lint/a11y/noStaticElementInteractions: <explanation> */
10
+ declare const HiddenToggle: ({
11
+ defaultEnabled,
12
+ children,
13
+ onChange,
14
+ ...rest
15
+ }: {
16
+ [x: string]: any;
17
+ defaultEnabled?: boolean;
18
+ children: any;
19
+ onChange: any;
20
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
21
+ //#endregion
6
22
  //#region src/Icon.d.ts
7
23
  declare const Icon: ({
8
24
  style,
@@ -10,7 +26,7 @@ declare const Icon: ({
10
26
  }: {
11
27
  style?: {};
12
28
  src: any;
13
- }) => _emotion_react_jsx_runtime1.JSX.Element;
29
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
14
30
  //#endregion
15
31
  //#region src/SeeMore.d.ts
16
32
  declare const defaultMessages: {
@@ -26,7 +42,7 @@ declare const SeeMore: ({
26
42
  style?: CSSObject;
27
43
  messages?: typeof defaultMessages;
28
44
  children?: ReactNode;
29
- }) => _emotion_react_jsx_runtime1.JSX.Element;
45
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
30
46
  //#endregion
31
47
  //#region src/VideoItem.d.ts
32
48
  type VideoDetail = {
@@ -45,6 +61,7 @@ declare const VideoItem: ({
45
61
  topTags,
46
62
  bottomTags,
47
63
  slots,
64
+ onClick,
48
65
  onClickThumbnail,
49
66
  thumbnailChildren
50
67
  }: {
@@ -60,6 +77,7 @@ declare const VideoItem: ({
60
77
  slots?: {
61
78
  Link?: ElementType | typeof Link;
62
79
  };
80
+ onClick?: MouseEventHandler<HTMLDivElement>;
63
81
  onClickThumbnail?: MouseEventHandler<HTMLAnchorElement>;
64
82
  thumbnailChildren?: ReactNode;
65
83
  }) => ReactElement;
@@ -88,6 +106,6 @@ declare const VideoThumbnail: ({
88
106
  Image?: ElementType;
89
107
  };
90
108
  onClick?: MouseEventHandler<HTMLAnchorElement>;
91
- }) => _emotion_react_jsx_runtime1.JSX.Element;
109
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
92
110
  //#endregion
93
- export { Icon, SeeMore, VideoItem, VideoThumbnail };
111
+ export { HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.d.mts CHANGED
@@ -1,8 +1,24 @@
1
- import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
2
1
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
2
+ import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
3
3
  import { CSSObject } from "@emotion/react";
4
4
  import Link from "next/link";
5
5
 
6
+ //#region src/HiddenToggle.d.ts
7
+ /** @jsxImportSource @emotion/react */
8
+ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: <explanation> */
9
+ /** biome-ignore-all lint/a11y/noStaticElementInteractions: <explanation> */
10
+ declare const HiddenToggle: ({
11
+ defaultEnabled,
12
+ children,
13
+ onChange,
14
+ ...rest
15
+ }: {
16
+ [x: string]: any;
17
+ defaultEnabled?: boolean;
18
+ children: any;
19
+ onChange: any;
20
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
21
+ //#endregion
6
22
  //#region src/Icon.d.ts
7
23
  declare const Icon: ({
8
24
  style,
@@ -45,6 +61,7 @@ declare const VideoItem: ({
45
61
  topTags,
46
62
  bottomTags,
47
63
  slots,
64
+ onClick,
48
65
  onClickThumbnail,
49
66
  thumbnailChildren
50
67
  }: {
@@ -60,6 +77,7 @@ declare const VideoItem: ({
60
77
  slots?: {
61
78
  Link?: ElementType | typeof Link;
62
79
  };
80
+ onClick?: MouseEventHandler<HTMLDivElement>;
63
81
  onClickThumbnail?: MouseEventHandler<HTMLAnchorElement>;
64
82
  thumbnailChildren?: ReactNode;
65
83
  }) => ReactElement;
@@ -90,4 +108,4 @@ declare const VideoThumbnail: ({
90
108
  onClick?: MouseEventHandler<HTMLAnchorElement>;
91
109
  }) => _emotion_react_jsx_runtime0.JSX.Element;
92
110
  //#endregion
93
- export { Icon, SeeMore, VideoItem, VideoThumbnail };
111
+ export { HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.mjs CHANGED
@@ -1,6 +1,55 @@
1
- import { jsx, jsxs } from "@emotion/react/jsx-runtime";
2
1
  import { useEffect, useRef, useState } from "react";
2
+ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
3
+
4
+ //#region src/HiddenToggle.tsx
5
+ const toggleStyle = {
6
+ "-webkit-tap-highlight-color": "transparent",
7
+ userSelect: "none",
8
+ "> span": {
9
+ margin: "0 0.5em",
10
+ transition: "opacity 0.2s ease"
11
+ }
12
+ };
13
+ const statusStyle = {};
14
+ const HiddenToggle = ({ defaultEnabled = false, children, onChange, ...rest }) => {
15
+ const [tapCount, setTapCount] = useState(() => defaultEnabled ? 7 : 0);
16
+ const resetTimer = useRef();
17
+ const onClick = (event) => {
18
+ clearTimeout(resetTimer.current);
19
+ setTapCount((current) => current + 1);
20
+ if (tapCount + 1 >= 7) onChange?.(event, { enabled: true });
21
+ else resetTimer.current = setTimeout(() => setTapCount(0), 7e3);
22
+ };
23
+ const onOptOut = (event) => {
24
+ event.stopPropagation();
25
+ setTapCount(0);
26
+ onChange?.(event, { enabled: false });
27
+ };
28
+ return /* @__PURE__ */ jsxs("div", {
29
+ css: toggleStyle,
30
+ onClick,
31
+ ...rest,
32
+ children: [
33
+ children,
34
+ tapCount >= 4 && tapCount < 7 && /* @__PURE__ */ jsxs("span", {
35
+ style: { opacity: tapCount / 7 },
36
+ children: [7 - tapCount, " more tap(s) for feature toggle"]
37
+ }),
38
+ tapCount >= 7 && /* @__PURE__ */ jsx("span", {
39
+ css: statusStyle,
40
+ children: "feature toggle"
41
+ }),
42
+ tapCount >= 7 && /* @__PURE__ */ jsx("button", {
43
+ type: "button",
44
+ onClick: onOptOut,
45
+ children: "exit"
46
+ })
47
+ ]
48
+ });
49
+ };
50
+ var HiddenToggle_default = HiddenToggle;
3
51
 
52
+ //#endregion
4
53
  //#region src/Icon.tsx
5
54
  /** @jsxImportSource @emotion/react */
6
55
  const iconStyle = {
@@ -28,14 +77,18 @@ var see_more_default = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdp
28
77
  //#endregion
29
78
  //#region src/SeeMore.tsx
30
79
  const containerStyle = {
31
- position: "relative",
32
- maxHeight: "2.7em",
33
- overflow: "hidden",
34
- display: "-webkit-box",
35
- WebkitBoxOrient: "vertical",
36
- textOverflow: "ellipsis",
37
- transition: "max-height 0.2s ease-out",
38
- "+ button": {
80
+ "@media (max-width: 600px)": { textAlign: "center" },
81
+ "> div": {
82
+ position: "relative",
83
+ maxHeight: "2.7em",
84
+ overflow: "hidden",
85
+ display: "-webkit-box",
86
+ WebkitBoxOrient: "vertical",
87
+ textOverflow: "ellipsis",
88
+ textAlign: "left",
89
+ transition: "max-height 0.2s ease-out"
90
+ },
91
+ "> button": {
39
92
  marginTop: "0.75em",
40
93
  padding: "0",
41
94
  color: "inherit",
@@ -45,12 +98,11 @@ const containerStyle = {
45
98
  border: "none",
46
99
  cursor: "pointer",
47
100
  transition: "color 0.2s ease-out",
48
- "@media (max-width: 600px)": {
49
- width: "100%",
50
- textAlign: "center"
51
- },
52
101
  "&:hover": { color: "#fff" },
53
- "&:disabled": { opacity: "0" },
102
+ "&:disabled": {
103
+ opacity: "0",
104
+ "-webkit-tap-highlight-color": "transparent"
105
+ },
54
106
  "> span": {
55
107
  marginLeft: "2px",
56
108
  padding: "1px",
@@ -116,14 +168,10 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
116
168
  }, []);
117
169
  const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
118
170
  return /* @__PURE__ */ jsxs("div", {
171
+ css: [containerStyle, { div: addonStyles[status] }],
119
172
  ...rest,
120
173
  children: [/* @__PURE__ */ jsxs("div", {
121
- css: [
122
- expandedHeight && { "--see-more-max-height": `${expandedHeight}px` },
123
- containerStyle,
124
- addonStyles[status],
125
- style
126
- ],
174
+ css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],
127
175
  ref: containeRef,
128
176
  onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
129
177
  children: [children, /* @__PURE__ */ jsx("div", { css: maskStyle })]
@@ -356,7 +404,7 @@ const descriptionStyle = {
356
404
  };
357
405
  const desktopDescriptionStyle = {
358
406
  display: "var(--desktop-description-display, -webkit-box)",
359
- padding: "0.75rem 0",
407
+ margin: "0.75rem 0",
360
408
  WebkitLineClamp: 3
361
409
  };
362
410
  const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx(slots.Link, {
@@ -367,7 +415,8 @@ const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__
367
415
  ...rest,
368
416
  children
369
417
  });
370
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
418
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClick, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
419
+ onClick,
371
420
  css: [videoItemStyle, style],
372
421
  children: [/* @__PURE__ */ jsxs("div", {
373
422
  css: infoStyle,
@@ -405,4 +454,4 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
405
454
  var VideoItem_default = VideoItem;
406
455
 
407
456
  //#endregion
408
- export { Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };
457
+ export { HiddenToggle_default as HiddenToggle, Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.15",
3
+ "version": "0.1.17",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",