Skip to content

Commit a983f35

Browse files
amanabiyamanabiy
committed
feat: add permutation view from build-tools
1 parent 5e5e636 commit a983f35

File tree

4 files changed

+64
-127
lines changed

4 files changed

+64
-127
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
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",

‎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: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@
55
"rootDir": "../",
66
"types": ["vite/client"],
77
"tsBuildInfoFile": "../.cache/pages.tsbuildinfo",
8-
"moduleResolution": "node"
8+
"moduleResolution": "node",
9+
"paths": {
10+
"@cloudscape-design/build-tools/dev-pages-utils": [
11+
"../node_modules/@cloudscape-design/build-tools/lib/dev-pages-utils"
12+
]
13+
}
914
},
1015
"include": ["./**/*"]
1116
}

‎vite.config.dev-pages.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default defineConfig({
2424
},
2525
outDir: "lib/dev-pages/bundle",
2626
rollupOptions: {
27-
external: [/(?:\.\.\/)+?lib\/components/, /^@cloudscape-design\//, "react"],
27+
external: [/(?:\.\.\/)+?lib\/components/, /^@cloudscape-design\/(?!build-tools)/, "react"],
2828
},
2929
},
3030
});

0 commit comments

Comments
 (0)