Skip to content

Commit 07c0f63

Browse files
agjsagjs
committed
chore: Bump package version to 1.0.222 and enhance Accordion component
- Update package version in package.json to 1.0.222 - Refactor Accordion component to manage selected section and item state - Update Accordion stories to utilize new selected state management - Enhance Accordion tests to cover new selection functionality - Add NONE variant to Badge component for improved styling options
1 parent 0d26c63 commit 07c0f63

File tree

11 files changed

+178
-60
lines changed

11 files changed

+178
-60
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@programmer_network/yail",
3-
"version": "1.0.221",
3+
"version": "1.0.222",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

‎src/Components/Accordion/Accordion.stories.tsx

Lines changed: 97 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ const dummySections = Array(5)
4343
export const Primary = () => {
4444
const [sections, setSections] = useState<ISection[]>([]);
4545
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
46+
const [selectedSection, setSelectedSection] = useState<number | null>(null);
47+
const [selectedItem, setSelectedItem] = useState<number | null>(null);
4648

4749
useEffect(() => {
4850
if (sections.length) {
@@ -61,6 +63,16 @@ export const Primary = () => {
6163
<Accordion
6264
className='yl:w-[500px]'
6365
sections={sections}
66+
selected={{
67+
sectionId: selectedSection ?? 0,
68+
itemId: selectedItem ?? 0
69+
}}
70+
setSelectedSection={sectionId => {
71+
setSelectedSection(sectionId);
72+
}}
73+
setSelectedItem={itemId => {
74+
setSelectedItem(itemId);
75+
}}
6476
onSorted={(_, data) => {
6577
setSections(data);
6678
}}
@@ -84,7 +96,8 @@ export const Primary = () => {
8496
export const Interactive = () => {
8597
const [sections, setSections] = useState<ISection[]>([]);
8698
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
87-
const [selectedSection, setSelectedSection] = useState<number>(2);
99+
const [selectedSection, setSelectedSection] = useState<number | null>(null);
100+
const [selectedItem, setSelectedItem] = useState<number | null>(null);
88101

89102
useEffect(() => {
90103
if (sections.length) {
@@ -104,7 +117,16 @@ export const Interactive = () => {
104117
className='yl:w-[500px]'
105118
sections={sections}
106119
expanded={expandedSections}
107-
selectedId={selectedSection}
120+
selected={{
121+
sectionId: selectedSection ?? 0,
122+
itemId: selectedItem ?? 0
123+
}}
124+
setSelectedSection={sectionId => {
125+
setSelectedSection(sectionId);
126+
}}
127+
setSelectedItem={itemId => {
128+
setSelectedItem(itemId);
129+
}}
108130
setExpanded={(expanded: number[]) => {
109131
setExpandedSections(expanded);
110132
}}
@@ -124,6 +146,8 @@ export const Interactive = () => {
124146
export const NonInteractiveItems = () => {
125147
const [sections, setSections] = useState<ISection[]>([]);
126148
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
149+
const [selectedSection, setSelectedSection] = useState<number | null>(null);
150+
const [selectedItem, setSelectedItem] = useState<number | null>(null);
127151

128152
useEffect(() => {
129153
if (sections.length) {
@@ -141,7 +165,16 @@ export const NonInteractiveItems = () => {
141165
<div>
142166
<Accordion
143167
className='yl:w-[500px]'
144-
selectedId={2}
168+
selected={{
169+
sectionId: selectedSection ?? 0,
170+
itemId: selectedItem ?? 0
171+
}}
172+
setSelectedSection={sectionId => {
173+
setSelectedSection(sectionId);
174+
}}
175+
setSelectedItem={itemId => {
176+
setSelectedItem(itemId);
177+
}}
145178
sections={sections}
146179
onSorted={(_, sections) => {
147180
setSections(sections);
@@ -161,6 +194,8 @@ export const NonInteractiveItems = () => {
161194
export const WithoutDragAndDrop = () => {
162195
const [sections, setSections] = useState<ISection[]>([]);
163196
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
197+
const [selectedSection, setSelectedSection] = useState<number | null>(null);
198+
const [selectedItem, setSelectedItem] = useState<number | null>(null);
164199

165200
useEffect(() => {
166201
if (sections.length) {
@@ -178,7 +213,16 @@ export const WithoutDragAndDrop = () => {
178213
<div>
179214
<Accordion
180215
className='yl:w-[500px]'
181-
selectedId={2}
216+
selected={{
217+
sectionId: selectedSection ?? 0,
218+
itemId: selectedItem ?? 0
219+
}}
220+
setSelectedSection={sectionId => {
221+
setSelectedSection(sectionId);
222+
}}
223+
setSelectedItem={itemId => {
224+
setSelectedItem(itemId);
225+
}}
182226
sections={sections}
183227
onSorted={(_, sections) => {
184228
setSections(sections);
@@ -214,6 +258,8 @@ export const AddSectionAndSectionItem = () => {
214258
]);
215259

216260
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
261+
const [selectedSection, setSelectedSection] = useState<number | null>(null);
262+
const [selectedItem, setSelectedItem] = useState<number | null>(null);
217263

218264
if (!sections.length) {
219265
return <div>Loading...</div>;
@@ -239,7 +285,16 @@ export const AddSectionAndSectionItem = () => {
239285
</Button>
240286
<Accordion
241287
className='yl:w-[500px]'
242-
selectedId={2}
288+
selected={{
289+
sectionId: selectedSection ?? 0,
290+
itemId: selectedItem ?? 0
291+
}}
292+
setSelectedSection={sectionId => {
293+
setSelectedSection(sectionId);
294+
}}
295+
setSelectedItem={itemId => {
296+
setSelectedItem(itemId);
297+
}}
243298
sections={sections}
244299
expanded={expandedSections}
245300
hasDraggableSectionItems={true}
@@ -277,6 +332,8 @@ export const AddSectionAndSectionItem = () => {
277332
export const WithAddLabels = () => {
278333
const [sections, setSections] = useState<ISection[]>([]);
279334
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
335+
const [selectedSection, setSelectedSection] = useState<number | null>(null);
336+
const [selectedItem, setSelectedItem] = useState<number | null>(null);
280337

281338
useEffect(() => {
282339
if (sections.length) {
@@ -294,7 +351,16 @@ export const WithAddLabels = () => {
294351
<div>
295352
<Accordion
296353
className='yl:w-[500px]'
297-
selectedId={2}
354+
selected={{
355+
sectionId: selectedSection ?? 0,
356+
itemId: selectedItem ?? 0
357+
}}
358+
setSelectedSection={sectionId => {
359+
setSelectedSection(sectionId);
360+
}}
361+
setSelectedItem={itemId => {
362+
setSelectedItem(itemId);
363+
}}
298364
sections={sections}
299365
expanded={expandedSections}
300366
onSorted={(_, sections) => {
@@ -321,7 +387,7 @@ export const WithAddLabels = () => {
321387
};
322388

323389
export const WithNoItems = () => {
324-
const [sections, setSections] = useState<ISection[]>([
390+
const [sections] = useState<ISection[]>([
325391
{
326392
id: 1,
327393
title: "velum constans brevis canis corrumpo magni attollo",
@@ -331,6 +397,8 @@ export const WithNoItems = () => {
331397
}
332398
]);
333399
const [expandedSections, setExpandedSections] = useState<number[]>([]);
400+
const [selectedSection, setSelectedSection] = useState<number | null>(null);
401+
const [selectedItem, setSelectedItem] = useState<number | null>(null);
334402

335403
if (!sections.length) {
336404
return <div>Loading...</div>;
@@ -340,11 +408,18 @@ export const WithNoItems = () => {
340408
<div>
341409
<Accordion
342410
className='yl:w-[500px]'
343-
sections={sections}
344411
expanded={expandedSections}
345-
onSorted={(_, sections) => {
346-
setSections(sections);
412+
selected={{
413+
sectionId: selectedSection ?? 0,
414+
itemId: selectedItem ?? 0
415+
}}
416+
setSelectedSection={sectionId => {
417+
setSelectedSection(sectionId);
347418
}}
419+
setSelectedItem={itemId => {
420+
setSelectedItem(itemId);
421+
}}
422+
sections={sections}
348423
onAddSection={() => {
349424
action("onAddSection")();
350425
}}
@@ -368,6 +443,8 @@ export const WithNoItems = () => {
368443
export const DefaultExpanded = () => {
369444
const [sections, setSections] = useState<ISection[]>([]);
370445
const [expandedSections, setExpandedSections] = useState<number[]>([]);
446+
const [selectedSection, setSelectedSection] = useState<number | null>(null);
447+
const [selectedItem, setSelectedItem] = useState<number | null>(null);
371448

372449
useEffect(() => {
373450
if (sections.length) {
@@ -385,10 +462,18 @@ export const DefaultExpanded = () => {
385462
<div>
386463
<Accordion
387464
className='yl:w-[500px]'
388-
selectedId={2}
465+
selected={{
466+
sectionId: selectedSection ?? 0,
467+
itemId: selectedItem ?? 0
468+
}}
469+
setSelectedSection={sectionId => {
470+
setSelectedSection(sectionId);
471+
}}
472+
setSelectedItem={itemId => {
473+
setSelectedItem(itemId);
474+
}}
389475
sections={sections}
390476
expanded={expandedSections}
391-
defaultExpanded={true}
392477
onSorted={(_, sections) => {
393478
setSections(sections);
394479
}}

‎src/Components/Accordion/Accordion.test.tsx

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ describe("Accordion component", () => {
3232
setExpanded={() => null}
3333
expanded={[1]}
3434
onSectionItemClick={vi.fn()}
35+
selected={{ sectionId: 0, itemId: 0 }}
36+
setSelectedSection={() => null}
37+
setSelectedItem={() => null}
3538
/>
3639
);
3740
expect(asFragment()).toMatchSnapshot();
@@ -46,6 +49,9 @@ describe("Accordion component", () => {
4649
setExpanded={setExpanded}
4750
expanded={[1]}
4851
onSectionItemClick={vi.fn()}
52+
selected={{ sectionId: 0, itemId: 0 }}
53+
setSelectedSection={() => null}
54+
setSelectedItem={() => null}
4955
/>
5056
);
5157

@@ -57,6 +63,8 @@ describe("Accordion component", () => {
5763

5864
test("expands and collapses sections on click", () => {
5965
const setExpanded = vi.fn();
66+
const setSelectedSection = vi.fn();
67+
const setSelectedItem = vi.fn();
6068

6169
render(
6270
<Accordion
@@ -65,6 +73,9 @@ describe("Accordion component", () => {
6573
setExpanded={setExpanded}
6674
expanded={[mockSections[0]!.id]}
6775
onSectionItemClick={vi.fn()}
76+
selected={{ sectionId: mockSections[0]!.id, itemId: 0 }}
77+
setSelectedSection={setSelectedSection}
78+
setSelectedItem={setSelectedItem}
6879
/>
6980
);
7081

@@ -74,18 +85,26 @@ describe("Accordion component", () => {
7485

7586
test("handles section item click events", () => {
7687
const onSectionItemClick = vi.fn();
88+
const setSelectedSection = vi.fn();
89+
const setSelectedItem = vi.fn();
90+
7791
render(
7892
<Accordion
7993
sections={mockSections}
8094
onSorted={vi.fn()}
8195
setExpanded={vi.fn()}
8296
onSectionItemClick={onSectionItemClick}
8397
expanded={[1]}
98+
selected={{ sectionId: 1, itemId: 0 }}
99+
setSelectedSection={setSelectedSection}
100+
setSelectedItem={setSelectedItem}
84101
/>
85102
);
86103

87104
fireEvent.click(screen.getByText("Item A"));
88-
expect(onSectionItemClick).toHaveBeenCalledWith(mockSections[0]!.items[0]);
105+
expect(onSectionItemClick).toHaveBeenCalledWith(mockSections[0]!.items[0]!);
106+
expect(setSelectedItem).toHaveBeenCalledWith(mockSections[0]!.items[0]!.id);
107+
expect(setSelectedSection).toHaveBeenCalledWith(mockSections[0]!.id);
89108
});
90109

91110
test("applies custom class names", () => {
@@ -98,6 +117,9 @@ describe("Accordion component", () => {
98117
setExpanded={vi.fn()}
99118
expanded={[]}
100119
onSectionItemClick={vi.fn()}
120+
selected={{ sectionId: 0, itemId: 0 }}
121+
setSelectedSection={() => null}
122+
setSelectedItem={() => null}
101123
/>
102124
);
103125

@@ -116,6 +138,9 @@ describe("Accordion component", () => {
116138
expanded={[]}
117139
defaultExpanded={true}
118140
onSectionItemClick={vi.fn()}
141+
selected={{ sectionId: 0, itemId: 0 }}
142+
setSelectedSection={() => null}
143+
setSelectedItem={() => null}
119144
/>
120145
);
121146

0 commit comments

Comments
 (0)