Skip to content

Commit f52926f

Browse files
guoda-puidokaiteguoda-puidokaite
committed
undo example app test changes
1 parent e4b235d commit f52926f

1 file changed

Lines changed: 23 additions & 178 deletions

File tree

‎apps/example/src/components/peaks/list/PeaksListItem.tsx‎

Lines changed: 23 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,22 @@
44
*/
55

66
import React from "react"
7-
import {
8-
DataGridCell,
9-
DataGridRow,
10-
Badge,
11-
Stack,
12-
Button,
13-
CodeBlock,
14-
Checkbox,
15-
NativeSelect,
16-
NativeSelectOption,
17-
Radio,
18-
SearchInput,
19-
SecretText,
20-
JsonViewer,
21-
Switch,
22-
Textarea,
23-
TextInput,
24-
Pill,
25-
Icon,
26-
CheckboxGroup,
27-
ComboBoxOption,
28-
ComboBox,
29-
DateTimePicker,
30-
RadioGroup,
31-
Select,
32-
SelectOption,
33-
PopupMenu,
34-
PopupMenuOptions,
35-
Tooltip,
36-
TooltipTrigger,
37-
TooltipContent,
38-
PopupMenuToggle,
39-
PopupMenuItem,
40-
} from "@cloudoperators/juno-ui-components"
7+
import { DataGridCell, DataGridRow, Badge, Stack } from "@cloudoperators/juno-ui-components"
418

429
import { Peak } from "../../../mocks/db"
4310
import useUIStore from "../../../store/useUIStore"
4411
import usePeaksStore from "../../../store/usePeaksStore"
4512

4613
import { DEFAULT_SMALL_APP_MARGIN } from "../../constants"
4714

15+
import PeaksListItemActions from "./PeaksListItemActions"
16+
4817
export interface PeaksListItemProps {
4918
peak: Peak
5019
onSelect: (_peak: Peak) => void
5120
}
5221

53-
const PeaksListItem: React.FC<PeaksListItemProps> = ({ peak }) => {
22+
const PeaksListItem: React.FC<PeaksListItemProps> = ({ peak, onSelect }) => {
5423
const { setCurrentPanel } = useUIStore()
5524
const { setSelectedPeakId } = usePeaksStore()
5625

@@ -59,9 +28,11 @@ const PeaksListItem: React.FC<PeaksListItemProps> = ({ peak }) => {
5928
setSelectedPeakId(peak.id)
6029
}
6130

31+
const hoverStyles = "p-6 group group-hover cursor-pointer group-hover:bg-theme-background-lvl-2 text-highest"
32+
6233
return (
63-
<DataGridRow onClick={openPanel}>
64-
<DataGridCell className="p-6 text-highest">
34+
<DataGridRow className={hoverStyles}>
35+
<DataGridCell className={hoverStyles} onClick={openPanel}>
6536
<Stack direction="horizontal" gap={DEFAULT_SMALL_APP_MARGIN} alignment="center">
6637
{peak.safety && (
6738
<Badge
@@ -73,149 +44,23 @@ const PeaksListItem: React.FC<PeaksListItemProps> = ({ peak }) => {
7344
)}
7445
</Stack>
7546
</DataGridCell>
76-
<DataGridCell>
47+
<DataGridCell className={hoverStyles} onClick={openPanel}>
7748
<strong className="cursor-pointer text-blue-600 hover:text-blue-800">{peak.name}</strong>
7849
</DataGridCell>
79-
<DataGridCell>{peak.height}</DataGridCell>
80-
<DataGridCell>{peak.mainrange}</DataGridCell>
81-
<DataGridCell>{peak.region}</DataGridCell>
82-
<DataGridCell>{peak.countries}</DataGridCell>
83-
<DataGridCell className={"pt-5 pb-5"}>
84-
{/* Pass in additional props (...props) */}
85-
<Button label="Double Click" onDoubleClick={() => alert("Button!")} />
86-
<Checkbox label="Double Click" onDoubleClick={() => alert("Double Clicked!")} />
87-
<CheckboxGroup onChange={() => alert("Checkbox Group!")}>
88-
<Checkbox label="Option 1" value="val-1" />
89-
<Checkbox label="Option 2" value="val-2" />
90-
<Checkbox label="Option 3" value="val-3" />
91-
</CheckboxGroup>
92-
<CodeBlock content="Some code goes here" />
93-
<ComboBox
94-
onBlur={function Ofe() {}}
95-
onChange={() => alert("ComboBox!")}
96-
onFocus={function Ofe() {}}
97-
onInputChange={function Ofe() {}}
98-
>
99-
<ComboBoxOption value="Rhubarb">Rhubarb</ComboBoxOption>
100-
<ComboBoxOption value="Carrots">Carrots</ComboBoxOption>
101-
<ComboBoxOption value="Spinach">Spinach</ComboBoxOption>
102-
<ComboBoxOption value="Tomatoes">Tomatoes</ComboBoxOption>
103-
<ComboBoxOption value="Cucumbers">Cucumbers</ComboBoxOption>
104-
<ComboBoxOption value="Cauliflower">Cauliflower</ComboBoxOption>
105-
<ComboBoxOption value="Eggplant">Eggplant</ComboBoxOption>
106-
<ComboBoxOption value="Zucchini">Zucchini</ComboBoxOption>
107-
<ComboBoxOption value="Brussels sprouts">Brussels Sprouts</ComboBoxOption>
108-
<ComboBoxOption value="Horseradish">Horseradish</ComboBoxOption>
109-
<ComboBoxOption value="Green beans">Green Beans</ComboBoxOption>
110-
<ComboBoxOption value="Mushrooms">Mushrooms</ComboBoxOption>
111-
<ComboBoxOption value="Leek">Leek</ComboBoxOption>
112-
<ComboBoxOption value="Artichokes">Artichokes</ComboBoxOption>
113-
<ComboBoxOption value="Peas">Peas</ComboBoxOption>
114-
<ComboBoxOption value="Potatoes">Potatoes</ComboBoxOption>
115-
</ComboBox>
116-
<DateTimePicker
117-
onBlur={function Ofe() {}}
118-
onChange={function Ofe() {}}
119-
onClear={function Ofe() {}}
120-
onClose={function Ofe() {}}
121-
onFocus={function Ofe() {}}
122-
onMonthChange={function Ofe() {}}
123-
onOpen={function Ofe() {}}
124-
onReady={function Ofe() {}}
125-
onYearChange={function Ofe() {}}
126-
/>
127-
<JsonViewer
128-
data={{
129-
array: [],
130-
available: true,
131-
brand: "Infinix",
132-
category: "laptops",
133-
date: new Date("2025-09-05T07:00:06.159Z"),
134-
description: "Infinix Inbook X1 Ci3 10th 8GB...",
135-
discountPercentage: 11.83,
136-
getPrice: function Ofe() {},
137-
id: 9,
138-
images: [
139-
"https://i.dummyjson.com/data/products/9/1.jpg",
140-
"https://i.dummyjson.com/data/products/9/2.png",
141-
"https://i.dummyjson.com/data/products/9/3.png",
142-
"https://i.dummyjson.com/data/products/9/4.jpg",
143-
"https://i.dummyjson.com/data/products/9/thumbnail.jpg",
144-
],
145-
nan: NaN,
146-
null: null,
147-
price: 1099,
148-
rating: 4.54,
149-
regex: /^(.+)$/,
150-
stock: 96,
151-
test: "https://i.dummyjson.com",
152-
test2: "Loremipsum",
153-
thumbnail: "https://i.dummyjson.com",
154-
title: "Infinix INBOOK",
155-
}}
156-
/>
157-
<NativeSelect onChange={function Ofe() {}} onClick={() => alert("Native Select!")}>
158-
<NativeSelectOption label="Option 1" value="o-1" />
159-
<NativeSelectOption label="Option 2" value="o-2" />
160-
<NativeSelectOption label="Option 3" value="o-3" />
161-
</NativeSelect>
162-
<Radio onChange={function Ofe() {}} onClick={() => alert("Radio!")} value="1" />
163-
<RadioGroup onChange={() => alert("Radio Group!")}>
164-
<Radio label="Option 1" value="default-1" />
165-
<Radio label="Option 2" value="default-2" />
166-
<Radio label="Option 3" value="default-3" />
167-
</RadioGroup>
168-
<SearchInput
169-
onChange={function Ofe() {}}
170-
onClear={function Ofe() {}}
171-
onClick={() => alert("Search Input!")}
172-
onKeyPress={function Ofe() {}}
173-
onSearch={function Ofe() {}}
174-
/>
175-
<SecretText
176-
onBlur={function Ofe() {}}
177-
onChange={function Ofe() {}}
178-
onClear={function Ofe() {}}
179-
onCopy={function Ofe() {}}
180-
onFocus={function Ofe() {}}
181-
onHide={function Ofe() {}}
182-
onPaste={function Ofe() {}}
183-
onReveal={function Ofe() {}}
184-
onToggle={function Ofe() {}}
185-
/>
186-
<Select onChange={function Ofe() {}} onValueChange={function Ofe() {}}>
187-
<SelectOption value="Option 1" />
188-
<SelectOption value="Option 2" />
189-
<SelectOption value="Option 3" />
190-
</Select>
191-
<Switch id="switch-default" label="Switch" onChange={function Ofe() {}} onClick={() => alert("Switch!")} />
192-
<Textarea onBlur={function Ofe() {}} onChange={function Ofe() {}} onFocus={function Ofe() {}} />
193-
<TextInput onBlur={function Ofe() {}} onChange={function Ofe() {}} onFocus={function Ofe() {}} />
194-
<Tooltip initialOpen>
195-
<TooltipTrigger>
196-
<span>click me</span>
197-
</TooltipTrigger>
198-
<TooltipContent>A default tooltip</TooltipContent>
199-
</Tooltip>
200-
<PopupMenu onClose={function Ofe() {}} onOpen={function Ofe() {}}>
201-
<PopupMenuToggle>Toggle Me</PopupMenuToggle>
202-
<PopupMenuOptions>
203-
<button>Menu goes here.</button>
204-
<PopupMenuItem label="Menu Item 1" />
205-
<PopupMenuItem icon="deleteForever" label="Menu Item 2" />
206-
<PopupMenuItem disabled label="Menu Item 3 Disabled" />
207-
</PopupMenuOptions>
208-
</PopupMenu>
209-
<Icon color="text-theme-success" icon="success" />
210-
<Pill
211-
closeable
212-
onClick={() => alert("Pill Clicked!")}
213-
onClose={() => alert("Pill Closed!")}
214-
pillKey="os"
215-
pillKeyLabel="OS"
216-
pillValue="mac_os"
217-
pillValueLabel="Mac OS"
218-
/>
50+
<DataGridCell className={hoverStyles} onClick={openPanel}>
51+
{peak.height}
52+
</DataGridCell>
53+
<DataGridCell className={hoverStyles} onClick={openPanel}>
54+
{peak.mainrange}
55+
</DataGridCell>
56+
<DataGridCell className={hoverStyles} onClick={openPanel}>
57+
{peak.region}
58+
</DataGridCell>
59+
<DataGridCell className={hoverStyles} onClick={openPanel}>
60+
{peak.countries}
61+
</DataGridCell>
62+
<DataGridCell className={`pt-5 pb-5 ${hoverStyles}`}>
63+
<PeaksListItemActions peak={peak} onSelect={onSelect} />
21964
</DataGridCell>
22065
</DataGridRow>
22166
)

0 commit comments

Comments
 (0)