Skip to content

Commit e210798

Browse files
amanabiyamanabiy
committed
feat: add permutation view from build-tools and upgrade typescript to
1 parent 5e5e636 commit e210798

File tree

5 files changed

+62
-130
lines changed

5 files changed

+62
-130
lines changed

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
},
6161
"devDependencies": {
6262
"@cloudscape-design/browser-test-tools": "^3.0.4",
63-
"@cloudscape-design/build-tools": "github:cloudscape-design/build-tools#main",
63+
"@cloudscape-design/build-tools": "github:cloudscape-design/build-tools#add-test-pages-util-permutation-view",
6464
"@cloudscape-design/code-view": "^3",
6565
"@cloudscape-design/components": "^3",
6666
"@cloudscape-design/design-tokens": "^3",
@@ -112,13 +112,12 @@
112112
"stylelint-config-recommended-scss": "^14.1.0",
113113
"stylelint-prettier": "^5.0.2",
114114
"stylelint-use-logical": "^2.1.2",
115-
"typescript": "^4.9.4",
115+
"typescript": "^5.0.0",
116116
"vite": "^6.4.1",
117117
"vitest": "^3.2.4"
118118
},
119119
"//": "ensure that typedoc uses latest typescript. It prints a warning, but works",
120120
"overrides": {
121-
"typescript": "^4.9.4",
122121
"glob": "^10.5.0"
123122
},
124123
"lint-staged": {

‎pages/chat-bubble/style-permutations.page.tsx‎

Lines changed: 56 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,61 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3-
import Box from "@cloudscape-design/components/box";
4-
5-
import { ChatBubble } from "../../lib/components";
6-
import { Page } from "../app/templates";
7-
import { TestBed } from "../app/test-bed";
8-
import { Actions, ChatBubbleAvatarGenAI, ChatBubbleAvatarUser, ChatContainer } from "./util-components";
9-
10-
export default function ChatBubblePage() {
3+
import { createPermutations, PermutationsView } from "@cloudscape-design/build-tools/dev-pages-utils";
4+
5+
import { ChatBubble, ChatBubbleProps } from "../../lib/components";
6+
import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "./util-components";
7+
8+
const style1 = {
9+
root: {
10+
columnGap: "32px",
11+
},
12+
bubble: {
13+
borderColor: "#f59e0b",
14+
borderWidth: "2px",
15+
borderRadius: "16px",
16+
backgroundColor: "#fde68a",
17+
boxShadow: "0 2px 8px rgba(245, 158, 11, 0.15)",
18+
color: "#78350f",
19+
},
20+
};
21+
22+
const style2 = {
23+
bubble: {
24+
background: "light-dark(#f0f8ff, #1a1a2e)",
25+
color: "light-dark(#333, #eee)",
26+
borderColor: "light-dark(#e74c3c, #ff6b6b)",
27+
borderWidth: "2px",
28+
borderRadius: "20px",
29+
boxShadow: "0 4px 12px rgba(76, 175, 80, 0.3)",
30+
fontSize: "16px",
31+
fontWeight: "bold",
32+
paddingBlock: "20px",
33+
paddingInline: "24px",
34+
},
35+
};
36+
37+
const permutations = createPermutations<ChatBubbleProps>([
38+
{
39+
type: ["incoming", "outgoing"],
40+
avatar: [<ChatBubbleAvatarGenAI key="genai" />, <ChatBubbleAvatarUser key="user" />],
41+
ariaLabel: ["Chat bubble permutation"],
42+
children: ["This is a test message", "A longer test message with more content to see how styles affect layout"],
43+
showLoadingBar: [undefined, true],
44+
hideAvatar: [undefined, true],
45+
style: [undefined, style1, style2],
46+
},
47+
]);
48+
49+
export default function ChatBubbleStylePermutations() {
1150
return (
12-
<Page title="Chat bubble">
13-
<TestBed>
14-
<ChatContainer>
15-
{/* Background Color with Dark Mode */}
16-
<ChatBubble
17-
style={{ bubble: { background: "light-dark(#f0f8ff, #1a1a2e)", color: "light-dark(#333, #eee)" } }}
18-
type="incoming"
19-
avatar={<ChatBubbleAvatarGenAI />}
20-
ariaLabel="Background test"
21-
>
22-
Light blue/dark purple background with adaptive text color
23-
</ChatBubble>
24-
25-
{/* Border Styles with Dark Mode */}
26-
<ChatBubble
27-
style={{
28-
bubble: { borderColor: "light-dark(#e74c3c, #ff6b6b)", borderWidth: "2px", borderRadius: "20px" },
29-
}}
30-
type="outgoing"
31-
avatar={<ChatBubbleAvatarUser />}
32-
ariaLabel="Border test"
33-
>
34-
Adaptive red border with rounded corners
35-
</ChatBubble>
36-
37-
{/* Typography with Dark Mode */}
38-
<ChatBubble
39-
style={{ bubble: { fontSize: "18px", fontWeight: "bold", color: "light-dark(#8e44ad, #bb86fc)" } }}
40-
type="incoming"
41-
avatar={<ChatBubbleAvatarGenAI />}
42-
ariaLabel="Typography test"
43-
>
44-
Large bold adaptive purple text
45-
</ChatBubble>
46-
47-
{/* Shadow Effect with Dark Mode */}
48-
<ChatBubble
49-
style={{
50-
bubble: { boxShadow: "10px 5px 5px red" },
51-
}}
52-
type="outgoing"
53-
avatar={<ChatBubbleAvatarUser />}
54-
ariaLabel="Shadow test"
55-
>
56-
Adaptive shadow for elevation
57-
</ChatBubble>
58-
59-
{/* Spacing */}
60-
<ChatBubble
61-
style={{ root: { columnGap: "32px" }, bubble: { paddingBlock: "20px", paddingInline: "24px" } }}
62-
type="incoming"
63-
avatar={<ChatBubbleAvatarGenAI />}
64-
ariaLabel="Spacing test"
65-
>
66-
Wide avatar spacing with generous padding
67-
</ChatBubble>
68-
69-
{/* Loading State with Dark Mode */}
70-
<ChatBubble
71-
style={{
72-
bubble: {
73-
background: "light-dark(#fff3cd, #3d3d00)",
74-
borderColor: "light-dark(#ffc107, #ffeb3b)",
75-
borderWidth: "1px",
76-
},
77-
}}
78-
avatar={<ChatBubbleAvatarGenAI loading={true} />}
79-
type="incoming"
80-
showLoadingBar={true}
81-
ariaLabel="Loading test"
82-
>
83-
<Box color="text-body-secondary">Generating response...</Box>
84-
</ChatBubble>
85-
86-
{/* With Actions and Dark Mode */}
87-
<ChatBubble
88-
style={{ bubble: { background: "light-dark(#e8f5e8, #1b2e1b)", borderRadius: "18px", rowGap: "25px" } }}
89-
avatar={<ChatBubbleAvatarGenAI />}
90-
type="incoming"
91-
actions={<Actions />}
92-
ariaLabel="Actions test"
93-
>
94-
Message with action buttons
95-
</ChatBubble>
96-
97-
{/* All Properties Combined with Dark Mode */}
98-
<ChatBubble
99-
style={{
100-
root: {
101-
columnGap: "25px",
102-
},
103-
bubble: {
104-
background: "light-dark(#ffffff, #2d2d2d)",
105-
color: "light-dark(#1b5e20, #81c784)",
106-
borderColor: "light-dark(#4caf50, #66bb6a)",
107-
borderWidth: "2px",
108-
borderRadius: "24px",
109-
boxShadow: "0 4px 12px rgb(29, 130, 118)",
110-
fontSize: "16px",
111-
fontWeight: "bold",
112-
paddingBlock: "20px",
113-
paddingInline: "30px",
114-
rowGap: "20px",
115-
},
116-
}}
117-
type="outgoing"
118-
avatar={<ChatBubbleAvatarUser />}
119-
actions={<Actions />}
120-
ariaLabel="All properties test"
121-
showLoadingBar={true}
122-
>
123-
All style properties combined
124-
</ChatBubble>
125-
</ChatContainer>
126-
</TestBed>
127-
</Page>
51+
<>
52+
<h1>ChatBubble Style permutations</h1>
53+
<div>
54+
<PermutationsView
55+
permutations={permutations}
56+
render={(permutation: ChatBubbleProps) => <ChatBubble {...permutation} />}
57+
/>
58+
</div>
59+
</>
12860
);
12961
}

‎pages/tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"rootDir": "../",
66
"types": ["vite/client"],
77
"tsBuildInfoFile": "../.cache/pages.tsbuildinfo",
8-
"moduleResolution": "node"
8+
"module": "ESNext",
9+
"moduleResolution": "bundler"
910
},
1011
"include": ["./**/*"]
1112
}

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"types": [],
88
"lib": ["es2019", "dom", "dom.iterable"],
99
"module": "ESNext",
10-
"moduleResolution": "nodenext",
10+
"moduleResolution": "bundler",
1111
"esModuleInterop": true,
1212
"forceConsistentCasingInFileNames": true,
1313
"isolatedModules": true,

‎tsconfig.src-themeable.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"lib": ["es2019", "dom", "dom.iterable"],
44
"target": "ES2019",
55
"module": "ESNext",
6-
"moduleResolution": "nodenext",
6+
"moduleResolution": "bundler",
77
"rootDir": "src-themeable",
88
"declaration": true,
99
"incremental": true,

0 commit comments

Comments
 (0)