@krrli/cm-designsystem 1.32.2 → 1.33.1
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/cm-designsystem.css +13 -1
- package/dist/components/accessible-button/AccessibleButton.d.ts +33 -0
- package/dist/components/accessible-button/AccessibleButton.d.ts.map +1 -0
- package/dist/components/avatar/Avatar.d.ts +119 -0
- package/dist/components/avatar/Avatar.d.ts.map +1 -0
- package/dist/components/branding/BrandingGallery.d.ts +2 -0
- package/dist/components/branding/BrandingGallery.d.ts.map +1 -0
- package/dist/components/button/Button.d.ts +67 -0
- package/dist/components/button/Button.d.ts.map +1 -0
- package/dist/components/color/ColorDoc.d.ts +5 -0
- package/dist/components/color/ColorDoc.d.ts.map +1 -0
- package/dist/components/file-upload/FileUpload.d.ts +84 -0
- package/dist/components/file-upload/FileUpload.d.ts.map +1 -0
- package/dist/components/form/Form.d.ts +55 -0
- package/dist/components/form/Form.d.ts.map +1 -0
- package/dist/components/icon-button/IconButton.d.ts +70 -0
- package/dist/components/icon-button/IconButton.d.ts.map +1 -0
- package/dist/components/icon-button/IconButton.js +1 -0
- package/dist/components/icons/IconBase.d.ts +6 -0
- package/dist/components/icons/IconBase.d.ts.map +1 -0
- package/dist/components/icons/generated/ArrowDown.d.ts +4 -0
- package/dist/components/icons/generated/ArrowDown.d.ts.map +1 -0
- package/dist/components/icons/generated/ArrowLeft.d.ts +4 -0
- package/dist/components/icons/generated/ArrowLeft.d.ts.map +1 -0
- package/dist/components/icons/generated/ArrowRight.d.ts +4 -0
- package/dist/components/icons/generated/ArrowRight.d.ts.map +1 -0
- package/dist/components/icons/generated/ArrowUp.d.ts +4 -0
- package/dist/components/icons/generated/ArrowUp.d.ts.map +1 -0
- package/dist/components/icons/generated/Calendar.d.ts +4 -0
- package/dist/components/icons/generated/Calendar.d.ts.map +1 -0
- package/dist/components/icons/generated/Cancel.d.ts +4 -0
- package/dist/components/icons/generated/Cancel.d.ts.map +1 -0
- package/dist/components/icons/generated/Checkmark.d.ts +4 -0
- package/dist/components/icons/generated/Checkmark.d.ts.map +1 -0
- package/dist/components/icons/generated/Edit.d.ts +4 -0
- package/dist/components/icons/generated/Edit.d.ts.map +1 -0
- package/dist/components/icons/generated/Eye.d.ts +4 -0
- package/dist/components/icons/generated/Eye.d.ts.map +1 -0
- package/dist/components/icons/generated/Fullscreen.d.ts +4 -0
- package/dist/components/icons/generated/Fullscreen.d.ts.map +1 -0
- package/dist/components/icons/generated/HeartFilled.d.ts +4 -0
- package/dist/components/icons/generated/HeartFilled.d.ts.map +1 -0
- package/dist/components/icons/generated/HeartOutline.d.ts +4 -0
- package/dist/components/icons/generated/HeartOutline.d.ts.map +1 -0
- package/dist/components/icons/generated/Location.d.ts +4 -0
- package/dist/components/icons/generated/Location.d.ts.map +1 -0
- package/dist/components/icons/generated/LogOut.d.ts +4 -0
- package/dist/components/icons/generated/LogOut.d.ts.map +1 -0
- package/dist/components/icons/generated/Mumble.d.ts +4 -0
- package/dist/components/icons/generated/Mumble.d.ts.map +1 -0
- package/dist/components/icons/generated/Profile.d.ts +4 -0
- package/dist/components/icons/generated/Profile.d.ts.map +1 -0
- package/dist/components/icons/generated/ReplyFilled.d.ts +4 -0
- package/dist/components/icons/generated/ReplyFilled.d.ts.map +1 -0
- package/dist/components/icons/generated/ReplyOutline.d.ts +4 -0
- package/dist/components/icons/generated/ReplyOutline.d.ts.map +1 -0
- package/dist/components/icons/generated/Repost.d.ts +4 -0
- package/dist/components/icons/generated/Repost.d.ts.map +1 -0
- package/dist/components/icons/generated/Send.d.ts +4 -0
- package/dist/components/icons/generated/Send.d.ts.map +1 -0
- package/dist/components/icons/generated/Settings.d.ts +4 -0
- package/dist/components/icons/generated/Settings.d.ts.map +1 -0
- package/dist/components/icons/generated/Share.d.ts +4 -0
- package/dist/components/icons/generated/Share.d.ts.map +1 -0
- package/dist/components/icons/generated/Time.d.ts +4 -0
- package/dist/components/icons/generated/Time.d.ts.map +1 -0
- package/dist/components/icons/generated/Upload.d.ts +4 -0
- package/dist/components/icons/generated/Upload.d.ts.map +1 -0
- package/dist/components/icons/generated/index.d.ts +25 -0
- package/dist/components/icons/generated/index.d.ts.map +1 -0
- package/dist/components/index.d.ts +28 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/input/Input.d.ts +62 -0
- package/dist/components/input/Input.d.ts.map +1 -0
- package/dist/components/like-toggle/LikeToggle.d.ts +98 -0
- package/dist/components/like-toggle/LikeToggle.d.ts.map +1 -0
- package/dist/components/logo-link/LogoLink.d.ts +12 -0
- package/dist/components/logo-link/LogoLink.d.ts.map +1 -0
- package/dist/components/modal/Modal.d.ts +76 -0
- package/dist/components/modal/Modal.d.ts.map +1 -0
- package/dist/components/navi-button/NaviButton.d.ts +50 -0
- package/dist/components/navi-button/NaviButton.d.ts.map +1 -0
- package/dist/components/navi-user-button/NaviUserButton.d.ts +45 -0
- package/dist/components/navi-user-button/NaviUserButton.d.ts.map +1 -0
- package/dist/components/round-button/RoundButton.d.ts +45 -0
- package/dist/components/round-button/RoundButton.d.ts.map +1 -0
- package/dist/components/tabs/TabItem.d.ts +12 -0
- package/dist/components/tabs/TabItem.d.ts.map +1 -0
- package/dist/components/tabs/Tabs.d.ts +68 -0
- package/dist/components/tabs/Tabs.d.ts.map +1 -0
- package/dist/components/text-link/TextLink.d.ts +10 -0
- package/dist/components/text-link/TextLink.d.ts.map +1 -0
- package/dist/components/textarea/Textarea.d.ts +49 -0
- package/dist/components/textarea/Textarea.d.ts.map +1 -0
- package/dist/components/timed-button/TimedButton.d.ts +80 -0
- package/dist/components/timed-button/TimedButton.d.ts.map +1 -0
- package/dist/components/toggle/Toggle.d.ts +63 -0
- package/dist/components/toggle/Toggle.d.ts.map +1 -0
- package/dist/components/typography/AccessibleTypography.d.ts +34 -0
- package/dist/components/typography/AccessibleTypography.d.ts.map +1 -0
- package/dist/components/typography/Heading.d.ts +25 -0
- package/dist/components/typography/Heading.d.ts.map +1 -0
- package/dist/components/typography/Label.d.ts +23 -0
- package/dist/components/typography/Label.d.ts.map +1 -0
- package/dist/components/typography/Paragraph.d.ts +23 -0
- package/dist/components/typography/Paragraph.d.ts.map +1 -0
- package/dist/components/typography/Placeholder.d.ts +18 -0
- package/dist/components/typography/Placeholder.d.ts.map +1 -0
- package/dist/components/typography/ValidationMessage.d.ts +23 -0
- package/dist/components/typography/ValidationMessage.d.ts.map +1 -0
- package/dist/components/typography/styles.d.ts +75 -0
- package/dist/components/typography/styles.d.ts.map +1 -0
- package/dist/compositions/image-banner/ImageBanner.d.ts +55 -0
- package/dist/compositions/image-banner/ImageBanner.d.ts.map +1 -0
- package/dist/compositions/image-banner/ImageBanner.js +1 -0
- package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts +16 -0
- package/dist/compositions/image-upload-modal/ImageUploadModal.d.ts.map +1 -0
- package/dist/compositions/image-upload-modal/ImageUploadModal.js +1 -0
- package/dist/compositions/index.d.ts +12 -0
- package/dist/compositions/index.d.ts.map +1 -0
- package/dist/compositions/keyword/Keyword.d.ts +40 -0
- package/dist/compositions/keyword/Keyword.d.ts.map +1 -0
- package/dist/compositions/keyword/Keyword.js +15 -0
- package/dist/compositions/post/Post.d.ts +80 -0
- package/dist/compositions/post/Post.d.ts.map +1 -0
- package/dist/compositions/post/Post.js +19 -5
- package/dist/compositions/post-base/PostBase.d.ts +42 -0
- package/dist/compositions/post-base/PostBase.d.ts.map +1 -0
- package/dist/compositions/post-creator/PostCreator.d.ts +70 -0
- package/dist/compositions/post-creator/PostCreator.d.ts.map +1 -0
- package/dist/compositions/post-creator/PostCreator.js +1 -0
- package/dist/compositions/profile-banner/ProfileBanner.d.ts +83 -0
- package/dist/compositions/profile-banner/ProfileBanner.d.ts.map +1 -0
- package/dist/compositions/profile-banner/ProfileBanner.js +1 -0
- package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts +55 -0
- package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts.map +1 -0
- package/dist/compositions/profile-banner-image/ProfileBannerImage.js +1 -0
- package/dist/compositions/profile-banner-info/ProfileBannerInfo.d.ts +93 -0
- package/dist/compositions/profile-banner-info/ProfileBannerInfo.d.ts.map +1 -0
- package/dist/compositions/profile-banner-info/ProfileBannerInfo.js +1 -0
- package/dist/compositions/response/Response.d.ts +80 -0
- package/dist/compositions/response/Response.d.ts.map +1 -0
- package/dist/compositions/response/Response.js +18 -4
- package/dist/compositions/response-creator/ResponseCreator.d.ts +64 -0
- package/dist/compositions/response-creator/ResponseCreator.d.ts.map +1 -0
- package/dist/compositions/response-creator/ResponseCreator.js +1 -0
- package/dist/compositions/user-info/UserInfo.d.ts +76 -0
- package/dist/compositions/user-info/UserInfo.d.ts.map +1 -0
- package/dist/compositions/user-info/UserInfo.js +11 -2
- package/dist/compositions/user-recommendation/UserRecommendation.d.ts +64 -0
- package/dist/compositions/user-recommendation/UserRecommendation.d.ts.map +1 -0
- package/dist/compositions/user-recommendation/UserRecommendation.js +1 -0
- package/dist/compositions/utils/keyword.utils.d.ts +13 -0
- package/dist/compositions/utils/keyword.utils.d.ts.map +1 -0
- package/dist/compositions/utils/keyword.utils.js +23 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/setupTests.d.ts +1 -0
- package/dist/setupTests.d.ts.map +1 -0
- package/package.json +22 -21
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { VariantProps } from 'tailwind-variants';
|
|
2
|
+
declare const ResponseStyles: import('tailwind-variants').TVReturnType<{
|
|
3
|
+
[key: string]: {
|
|
4
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
5
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
6
|
+
text?: import('tailwind-merge').ClassNameValue;
|
|
7
|
+
action?: import('tailwind-merge').ClassNameValue;
|
|
8
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
} | {
|
|
12
|
+
[x: string]: {
|
|
13
|
+
[x: string]: import('tailwind-merge').ClassNameValue | {
|
|
14
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
15
|
+
text?: import('tailwind-merge').ClassNameValue;
|
|
16
|
+
action?: import('tailwind-merge').ClassNameValue;
|
|
17
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
} | {}, {
|
|
21
|
+
base: never[];
|
|
22
|
+
content: string[];
|
|
23
|
+
text: string[];
|
|
24
|
+
action: string[];
|
|
25
|
+
}, undefined, {
|
|
26
|
+
[key: string]: {
|
|
27
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
28
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
29
|
+
text?: import('tailwind-merge').ClassNameValue;
|
|
30
|
+
action?: import('tailwind-merge').ClassNameValue;
|
|
31
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
} | {}, {
|
|
35
|
+
base: never[];
|
|
36
|
+
content: string[];
|
|
37
|
+
text: string[];
|
|
38
|
+
action: string[];
|
|
39
|
+
}, import('tailwind-variants').TVReturnType<unknown, {
|
|
40
|
+
base: never[];
|
|
41
|
+
content: string[];
|
|
42
|
+
text: string[];
|
|
43
|
+
action: string[];
|
|
44
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
45
|
+
type ResponseVariants = VariantProps<typeof ResponseStyles>;
|
|
46
|
+
interface ResponseProps extends ResponseVariants {
|
|
47
|
+
/** The display name of the user who created the Response. */
|
|
48
|
+
displayName: string;
|
|
49
|
+
/** The username or handle associated with the Response. */
|
|
50
|
+
userName: string;
|
|
51
|
+
/** The date and time when the Response was created. */
|
|
52
|
+
timestamp: Date;
|
|
53
|
+
/** The main text content of the Response. */
|
|
54
|
+
text: string;
|
|
55
|
+
/** Avatar image URL */
|
|
56
|
+
src: string;
|
|
57
|
+
/** Triggered when the avatar is clicked. */
|
|
58
|
+
onAvatarClick: () => void;
|
|
59
|
+
/** Number of likes the post has received. */
|
|
60
|
+
nbrOfLikes: number;
|
|
61
|
+
/** Number of comments the post has received. */
|
|
62
|
+
nbrOfComments: number;
|
|
63
|
+
/** Optional image source URL displayed within the Response. */
|
|
64
|
+
imageSrc?: string;
|
|
65
|
+
/** Optional alt text for the Response image, used for accessibility. */
|
|
66
|
+
imageAlt?: string;
|
|
67
|
+
/** Callback fired when the comment button is clicked. */
|
|
68
|
+
onCommentClick: () => void;
|
|
69
|
+
/** Callback fired when the like button is clicked. */
|
|
70
|
+
onLikeClick: () => void;
|
|
71
|
+
/** Callback fired when the share button is clicked. */
|
|
72
|
+
onShareClick: () => void;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Detailed Response component displaying user info, text content,
|
|
76
|
+
* optional image, and action buttons (comment, like, share).
|
|
77
|
+
*/
|
|
78
|
+
export declare const Response: React.FC<ResponseProps>;
|
|
79
|
+
export {};
|
|
80
|
+
//# sourceMappingURL=Response.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Response.d.ts","sourceRoot":"","sources":["../../../src/compositions/response/Response.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAYlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,6DAA6D;IAC7D,WAAW,EAAE,MAAM,CAAC;IAEpB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IAEjB,uDAAuD;IACvD,SAAS,EAAE,IAAI,CAAC;IAEhB,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;IAEb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,aAAa,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,yDAAyD;IACzD,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,sDAAsD;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,uDAAuD;IACvD,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmD5C,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { tv } from "tailwind-variants";
|
|
3
4
|
import { ImageBanner } from "../image-banner/ImageBanner.js";
|
|
4
5
|
import { PostBase } from "../post-base/PostBase.js";
|
|
5
6
|
import { UserInfo } from "../user-info/UserInfo.js";
|
|
7
|
+
import { renderWithHashtags } from "../utils/keyword.utils.js";
|
|
6
8
|
import { Paragraph } from "../../components/typography/Paragraph.js";
|
|
7
9
|
import { Toggle } from "../../components/toggle/Toggle.js";
|
|
8
10
|
import { LikeToggle } from "../../components/like-toggle/LikeToggle.js";
|
|
@@ -12,7 +14,12 @@ const ResponseStyles = tv({
|
|
|
12
14
|
slots: {
|
|
13
15
|
base: [],
|
|
14
16
|
content: ["flex", "flex-col", "gap-4"],
|
|
15
|
-
text: [
|
|
17
|
+
text: [
|
|
18
|
+
"text-slate-900",
|
|
19
|
+
"text-wrap",
|
|
20
|
+
"wrap-anywhere",
|
|
21
|
+
"whitespace-pre-wrap"
|
|
22
|
+
],
|
|
16
23
|
action: ["flex", "gap-10", "justify-start", "-ml-3"]
|
|
17
24
|
}
|
|
18
25
|
});
|
|
@@ -30,7 +37,7 @@ const Response = (props) => {
|
|
|
30
37
|
onClick: props.onAvatarClick
|
|
31
38
|
}
|
|
32
39
|
),
|
|
33
|
-
/* @__PURE__ */ jsx(Paragraph, { size: "md", className: text(), children: props.text }),
|
|
40
|
+
/* @__PURE__ */ jsx(Paragraph, { size: "md", className: text(), children: renderWithHashtags(props.text) }),
|
|
34
41
|
props.imageSrc && /* @__PURE__ */ jsx(
|
|
35
42
|
ImageBanner,
|
|
36
43
|
{
|
|
@@ -45,11 +52,18 @@ const Response = (props) => {
|
|
|
45
52
|
Toggle,
|
|
46
53
|
{
|
|
47
54
|
ariaLabel: "Comment",
|
|
48
|
-
labelText: "Comment"
|
|
55
|
+
labelText: props.nbrOfComments === 0 ? "Comment" : props.nbrOfComments === 1 ? "1 Comment" : `${props.nbrOfComments} Comments`,
|
|
56
|
+
pressed: props.nbrOfComments !== 0,
|
|
49
57
|
onToggle: props.onCommentClick
|
|
50
58
|
}
|
|
51
59
|
),
|
|
52
|
-
/* @__PURE__ */ jsx(
|
|
60
|
+
/* @__PURE__ */ jsx(
|
|
61
|
+
LikeToggle,
|
|
62
|
+
{
|
|
63
|
+
likes: props.nbrOfLikes,
|
|
64
|
+
onLikeChange: props.onLikeClick
|
|
65
|
+
}
|
|
66
|
+
),
|
|
53
67
|
/* @__PURE__ */ jsx(
|
|
54
68
|
TimedButton,
|
|
55
69
|
{
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { VariantProps } from 'tailwind-variants';
|
|
2
|
+
declare const ResponseCreatorStyles: import('tailwind-variants').TVReturnType<{
|
|
3
|
+
[key: string]: {
|
|
4
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
5
|
+
input?: import('tailwind-merge').ClassNameValue;
|
|
6
|
+
action?: import('tailwind-merge').ClassNameValue;
|
|
7
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
} | {
|
|
11
|
+
[x: string]: {
|
|
12
|
+
[x: string]: import('tailwind-merge').ClassNameValue | {
|
|
13
|
+
input?: import('tailwind-merge').ClassNameValue;
|
|
14
|
+
action?: import('tailwind-merge').ClassNameValue;
|
|
15
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
} | {}, {
|
|
19
|
+
content: string[];
|
|
20
|
+
input: string[];
|
|
21
|
+
action: string[];
|
|
22
|
+
}, undefined, {
|
|
23
|
+
[key: string]: {
|
|
24
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
25
|
+
input?: import('tailwind-merge').ClassNameValue;
|
|
26
|
+
action?: import('tailwind-merge').ClassNameValue;
|
|
27
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
} | {}, {
|
|
31
|
+
content: string[];
|
|
32
|
+
input: string[];
|
|
33
|
+
action: string[];
|
|
34
|
+
}, import('tailwind-variants').TVReturnType<unknown, {
|
|
35
|
+
content: string[];
|
|
36
|
+
input: string[];
|
|
37
|
+
action: string[];
|
|
38
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
39
|
+
type ResponseCreatorVariants = VariantProps<typeof ResponseCreatorStyles>;
|
|
40
|
+
interface ResponseCreatorProps extends ResponseCreatorVariants {
|
|
41
|
+
/** Avatar image URL */
|
|
42
|
+
src: string;
|
|
43
|
+
/** Display name of the user */
|
|
44
|
+
displayName: string;
|
|
45
|
+
/** Username of the user */
|
|
46
|
+
userName: string;
|
|
47
|
+
/**
|
|
48
|
+
* Callback fired when the "Send" button is clicked.
|
|
49
|
+
* Receives the textarea text and the optionally uploaded file.
|
|
50
|
+
*/
|
|
51
|
+
onSendClick: (text: string, file: File | null) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Triggered when the avatar is clicked.
|
|
54
|
+
*/
|
|
55
|
+
onAvatarClick: () => void;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* ResponseCreator component
|
|
59
|
+
*
|
|
60
|
+
* Renders a Response creation component.
|
|
61
|
+
*/
|
|
62
|
+
export declare const ResponseCreator: React.FC<ResponseCreatorProps>;
|
|
63
|
+
export {};
|
|
64
|
+
//# sourceMappingURL=ResponseCreator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ResponseCreator.d.ts","sourceRoot":"","sources":["../../../src/compositions/response-creator/ResponseCreator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAMzB,CAAC;AAEH,KAAK,uBAAuB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE1E,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IAEpB,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvD;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkD1D,CAAC"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { VariantProps } from 'tailwind-variants';
|
|
2
|
+
declare const userInfoStyles: import('tailwind-variants').TVReturnType<{
|
|
3
|
+
[key: string]: {
|
|
4
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
5
|
+
displayName?: import('tailwind-merge').ClassNameValue;
|
|
6
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
7
|
+
userInfo?: import('tailwind-merge').ClassNameValue;
|
|
8
|
+
detailInfo?: import('tailwind-merge').ClassNameValue;
|
|
9
|
+
timeInfo?: import('tailwind-merge').ClassNameValue;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
} | {
|
|
13
|
+
[x: string]: {
|
|
14
|
+
[x: string]: import('tailwind-merge').ClassNameValue | {
|
|
15
|
+
displayName?: import('tailwind-merge').ClassNameValue;
|
|
16
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
17
|
+
userInfo?: import('tailwind-merge').ClassNameValue;
|
|
18
|
+
detailInfo?: import('tailwind-merge').ClassNameValue;
|
|
19
|
+
timeInfo?: import('tailwind-merge').ClassNameValue;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
} | {}, {
|
|
23
|
+
base: string[];
|
|
24
|
+
userInfo: string[];
|
|
25
|
+
displayName: string[];
|
|
26
|
+
detailInfo: string[];
|
|
27
|
+
timeInfo: string[];
|
|
28
|
+
}, undefined, {
|
|
29
|
+
[key: string]: {
|
|
30
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
31
|
+
displayName?: import('tailwind-merge').ClassNameValue;
|
|
32
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
33
|
+
userInfo?: import('tailwind-merge').ClassNameValue;
|
|
34
|
+
detailInfo?: import('tailwind-merge').ClassNameValue;
|
|
35
|
+
timeInfo?: import('tailwind-merge').ClassNameValue;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
} | {}, {
|
|
39
|
+
base: string[];
|
|
40
|
+
userInfo: string[];
|
|
41
|
+
displayName: string[];
|
|
42
|
+
detailInfo: string[];
|
|
43
|
+
timeInfo: string[];
|
|
44
|
+
}, import('tailwind-variants').TVReturnType<unknown, {
|
|
45
|
+
base: string[];
|
|
46
|
+
userInfo: string[];
|
|
47
|
+
displayName: string[];
|
|
48
|
+
detailInfo: string[];
|
|
49
|
+
timeInfo: string[];
|
|
50
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
51
|
+
type UserInfoVariants = VariantProps<typeof userInfoStyles>;
|
|
52
|
+
type UserInfoSize = "sm" | "md" | "lg";
|
|
53
|
+
interface UserInfoProps extends UserInfoVariants {
|
|
54
|
+
/** Avatar image URL */
|
|
55
|
+
src?: string;
|
|
56
|
+
/** Size variant of the component */
|
|
57
|
+
size: UserInfoSize;
|
|
58
|
+
/** Display name of the user */
|
|
59
|
+
displayName: string | undefined;
|
|
60
|
+
/** Username of the user */
|
|
61
|
+
userName: string | undefined;
|
|
62
|
+
/** Timestamp for the user activity */
|
|
63
|
+
timestamp?: Date;
|
|
64
|
+
/** Click handler for the whole UserInfo component */
|
|
65
|
+
onClick: () => void;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* UserInfo Component
|
|
69
|
+
*
|
|
70
|
+
* Displays a user avatar, display name, username, and a timestamp indicating
|
|
71
|
+
* when an activity occurred. The entire component acts as an interactive button
|
|
72
|
+
* and includes keyboard accessibility using `Enter` and `Space`.
|
|
73
|
+
*/
|
|
74
|
+
export declare const UserInfo: React.FC<UserInfoProps>;
|
|
75
|
+
export {};
|
|
76
|
+
//# sourceMappingURL=UserInfo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UserInfo.d.ts","sourceRoot":"","sources":["../../../src/compositions/user-info/UserInfo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAQlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6C5C,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
3
|
import { tv } from "tailwind-variants";
|
|
3
4
|
import { Avatar } from "../../components/avatar/Avatar.js";
|
|
@@ -57,9 +58,17 @@ const UserInfo = (props) => {
|
|
|
57
58
|
}
|
|
58
59
|
),
|
|
59
60
|
/* @__PURE__ */ jsxs("div", { className: userInfo(), children: [
|
|
60
|
-
/* @__PURE__ */ jsx("button", { onClick: props.onClick, className: displayName(), children: /* @__PURE__ */ jsx(Label, { size: getLabelSize(props.size), children: props.displayName }) }),
|
|
61
|
+
/* @__PURE__ */ jsx("button", { onClick: props.onClick, className: displayName(), children: props.displayName && /* @__PURE__ */ jsx(Label, { size: getLabelSize(props.size), children: props.displayName }) }),
|
|
61
62
|
/* @__PURE__ */ jsxs("div", { className: detailInfo(), children: [
|
|
62
|
-
/* @__PURE__ */ jsx(
|
|
63
|
+
props.userName && /* @__PURE__ */ jsx(
|
|
64
|
+
IconButton,
|
|
65
|
+
{
|
|
66
|
+
intent: "secondary",
|
|
67
|
+
icon: Profile,
|
|
68
|
+
onClick: props.onClick,
|
|
69
|
+
children: props.userName
|
|
70
|
+
}
|
|
71
|
+
),
|
|
63
72
|
props.timestamp && /* @__PURE__ */ jsx(
|
|
64
73
|
IconButton,
|
|
65
74
|
{
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { VariantProps } from 'tailwind-variants';
|
|
2
|
+
declare const userRecommendationStyles: import('tailwind-variants').TVReturnType<{
|
|
3
|
+
[key: string]: {
|
|
4
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
5
|
+
displayName?: import('tailwind-merge').ClassNameValue;
|
|
6
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
7
|
+
userInfo?: import('tailwind-merge').ClassNameValue;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
} | {
|
|
11
|
+
[x: string]: {
|
|
12
|
+
[x: string]: import('tailwind-merge').ClassNameValue | {
|
|
13
|
+
displayName?: import('tailwind-merge').ClassNameValue;
|
|
14
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
15
|
+
userInfo?: import('tailwind-merge').ClassNameValue;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
} | {}, {
|
|
19
|
+
base: string[];
|
|
20
|
+
userInfo: string[];
|
|
21
|
+
displayName: string[];
|
|
22
|
+
}, undefined, {
|
|
23
|
+
[key: string]: {
|
|
24
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
25
|
+
displayName?: import('tailwind-merge').ClassNameValue;
|
|
26
|
+
base?: import('tailwind-merge').ClassNameValue;
|
|
27
|
+
userInfo?: import('tailwind-merge').ClassNameValue;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
} | {}, {
|
|
31
|
+
base: string[];
|
|
32
|
+
userInfo: string[];
|
|
33
|
+
displayName: string[];
|
|
34
|
+
}, import('tailwind-variants').TVReturnType<unknown, {
|
|
35
|
+
base: string[];
|
|
36
|
+
userInfo: string[];
|
|
37
|
+
displayName: string[];
|
|
38
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
39
|
+
type UserRecommendationVariants = VariantProps<typeof userRecommendationStyles>;
|
|
40
|
+
interface UserRecommendationProps extends UserRecommendationVariants {
|
|
41
|
+
/** URL of the user's avatar image. */
|
|
42
|
+
src: string;
|
|
43
|
+
/** Display name of the user (e.g., "Jane Doe"). */
|
|
44
|
+
displayName: string;
|
|
45
|
+
/** Username/handle of the user (e.g., "@jane"). */
|
|
46
|
+
userName: string;
|
|
47
|
+
/** Label shown on the follow button (e.g., "Follow"). */
|
|
48
|
+
label: string;
|
|
49
|
+
/** Handler invoked when the "Follow" button is clicked. */
|
|
50
|
+
onFollowClick: () => void;
|
|
51
|
+
/** Handler invoked when user profile elements (avatar or username) are clicked. */
|
|
52
|
+
onProfileClick: () => void;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* UserRecommendation Component
|
|
56
|
+
*
|
|
57
|
+
* Displays a recommended user with:
|
|
58
|
+
* - A clickable avatar
|
|
59
|
+
* - Display name and username
|
|
60
|
+
* - A follow button
|
|
61
|
+
*/
|
|
62
|
+
export declare const UserRecommendation: React.FC<UserRecommendationProps>;
|
|
63
|
+
export {};
|
|
64
|
+
//# sourceMappingURL=UserRecommendation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UserRecommendation.d.ts","sourceRoot":"","sources":["../../../src/compositions/user-recommendation/UserRecommendation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAO1D,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAc5B,CAAC;AAEH,KAAK,0BAA0B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEhF,UAAU,uBAAwB,SAAQ,0BAA0B;IAClE,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmChE,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Splits a text string into normal text and hashtag elements,
|
|
3
|
+
* replacing each hashtag (`#word`) with a `<Keyword>` component.
|
|
4
|
+
*
|
|
5
|
+
* This function preserves the original text layout and returns
|
|
6
|
+
* an array of strings and React nodes suitable for direct rendering.
|
|
7
|
+
*
|
|
8
|
+
* @function renderWithHashtags
|
|
9
|
+
* @param {string} text - The input text that may contain hashtags.
|
|
10
|
+
* @returns {(string | React.ReactNode)[]} A list of text segments and `<Keyword>` components.
|
|
11
|
+
*/
|
|
12
|
+
export declare function renderWithHashtags(text?: string): (string | import("react/jsx-runtime").JSX.Element)[];
|
|
13
|
+
//# sourceMappingURL=keyword.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"keyword.utils.d.ts","sourceRoot":"","sources":["../../../src/compositions/utils/keyword.utils.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,MAAW,wDA0BnD"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Keyword } from "../keyword/Keyword.js";
|
|
3
|
+
function renderWithHashtags(text = "") {
|
|
4
|
+
const regex = /#\w+/g;
|
|
5
|
+
const parts = [];
|
|
6
|
+
let lastIndex = 0;
|
|
7
|
+
let match;
|
|
8
|
+
while ((match = regex.exec(text)) !== null) {
|
|
9
|
+
const { index } = match;
|
|
10
|
+
if (index > lastIndex) {
|
|
11
|
+
parts.push(text.substring(lastIndex, index));
|
|
12
|
+
}
|
|
13
|
+
parts.push(/* @__PURE__ */ jsx(Keyword, { children: match[0] }, index));
|
|
14
|
+
lastIndex = index + match[0].length;
|
|
15
|
+
}
|
|
16
|
+
if (lastIndex < text.length) {
|
|
17
|
+
parts.push(text.substring(lastIndex));
|
|
18
|
+
}
|
|
19
|
+
return parts;
|
|
20
|
+
}
|
|
21
|
+
export {
|
|
22
|
+
renderWithHashtags
|
|
23
|
+
};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC;AAErB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=setupTests.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krrli/cm-designsystem",
|
|
3
|
-
"
|
|
3
|
+
"repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
|
|
4
|
+
"version": "1.33.1",
|
|
4
5
|
"type": "module",
|
|
5
6
|
"main": "dist/index.js",
|
|
6
7
|
"module": "dist/index.js",
|
|
@@ -41,53 +42,53 @@
|
|
|
41
42
|
"@radix-ui/react-form": "0.1.8",
|
|
42
43
|
"@radix-ui/react-tabs": "1.1.13",
|
|
43
44
|
"@radix-ui/react-toggle": "1.1.10",
|
|
44
|
-
"react": "19.2.
|
|
45
|
-
"react-dom": "19.2.
|
|
45
|
+
"react": "19.2.3",
|
|
46
|
+
"react-dom": "19.2.3"
|
|
46
47
|
},
|
|
47
48
|
"devDependencies": {
|
|
48
49
|
"@chromatic-com/storybook": "4.1.3",
|
|
49
|
-
"@eslint/js": "9.39.
|
|
50
|
+
"@eslint/js": "9.39.2",
|
|
50
51
|
"@playwright/test": "1.57.0",
|
|
51
|
-
"@storybook/addon-a11y": "10.1.
|
|
52
|
-
"@storybook/addon-docs": "10.1.
|
|
53
|
-
"@storybook/addon-vitest": "10.1.
|
|
54
|
-
"@storybook/react-vite": "10.1.
|
|
55
|
-
"@tailwindcss/vite": "4.1.
|
|
52
|
+
"@storybook/addon-a11y": "10.1.9",
|
|
53
|
+
"@storybook/addon-docs": "10.1.9",
|
|
54
|
+
"@storybook/addon-vitest": "10.1.9",
|
|
55
|
+
"@storybook/react-vite": "10.1.9",
|
|
56
|
+
"@tailwindcss/vite": "4.1.18",
|
|
56
57
|
"@testing-library/dom": "10.4.1",
|
|
57
58
|
"@testing-library/jest-dom": "6.9.1",
|
|
58
|
-
"@testing-library/react": "16.3.
|
|
59
|
+
"@testing-library/react": "16.3.1",
|
|
59
60
|
"@testing-library/user-event": "14.6.1",
|
|
60
|
-
"@types/node": "24.10.
|
|
61
|
+
"@types/node": "24.10.4",
|
|
61
62
|
"@types/react": "19.2.7",
|
|
62
63
|
"@types/react-dom": "19.2.3",
|
|
63
|
-
"@vitejs/plugin-react": "5.1.
|
|
64
|
+
"@vitejs/plugin-react": "5.1.2",
|
|
64
65
|
"@vitest/browser": "4.0.15",
|
|
65
66
|
"@vitest/browser-playwright": "4.0.15",
|
|
66
67
|
"@vitest/coverage-v8": "4.0.15",
|
|
67
|
-
"eslint": "9.39.
|
|
68
|
+
"eslint": "9.39.2",
|
|
68
69
|
"eslint-config-prettier": "10.1.8",
|
|
69
70
|
"eslint-import-resolver-typescript": "4.4.4",
|
|
70
71
|
"eslint-plugin-import": "2.32.0",
|
|
71
72
|
"eslint-plugin-jsx-a11y": "6.10.2",
|
|
72
73
|
"eslint-plugin-react": "7.37.5",
|
|
73
74
|
"eslint-plugin-react-hooks": "7.0.1",
|
|
74
|
-
"eslint-plugin-react-refresh": "0.4.
|
|
75
|
-
"eslint-plugin-storybook": "10.1.
|
|
75
|
+
"eslint-plugin-react-refresh": "0.4.25",
|
|
76
|
+
"eslint-plugin-storybook": "10.1.9",
|
|
76
77
|
"eslint-plugin-unused-imports": "4.3.0",
|
|
77
78
|
"globals": "16.5.0",
|
|
78
|
-
"jsdom": "27.
|
|
79
|
-
"knip": "5.
|
|
79
|
+
"jsdom": "27.3.0",
|
|
80
|
+
"knip": "5.74.0",
|
|
80
81
|
"playwright": "1.57.0",
|
|
81
82
|
"prettier": "3.7.4",
|
|
82
83
|
"prettier-plugin-tailwindcss": "0.7.2",
|
|
83
84
|
"rollup-preserve-directives": "1.1.3",
|
|
84
85
|
"semantic-release": "25.0.2",
|
|
85
|
-
"storybook": "10.1.
|
|
86
|
+
"storybook": "10.1.9",
|
|
86
87
|
"tailwind-merge": "3.4.0",
|
|
87
|
-
"tailwindcss": "4.1.
|
|
88
|
+
"tailwindcss": "4.1.18",
|
|
88
89
|
"typescript": "5.9.3",
|
|
89
|
-
"typescript-eslint": "8.
|
|
90
|
-
"vite": "7.
|
|
90
|
+
"typescript-eslint": "8.50.0",
|
|
91
|
+
"vite": "7.3.0",
|
|
91
92
|
"vite-plugin-dts": "4.5.4",
|
|
92
93
|
"vite-plugin-svgr": "^4.5.0",
|
|
93
94
|
"vitest": "4.0.15"
|