Skip to content

Commit 45c6d79

Browse files
agjsagjs
committed
chore: Bump package version to 1.0.223 and enhance Accordion and Badge components
- Update package version in package.json to 1.0.223 - Refactor Accordion component to support optional selected section and item management - Update Accordion stories to reflect changes in state handling - Introduce new Badge variants (FILLED and OUTLINE) and update related stories and tests - Adjust Badge component styling for improved variant management
1 parent 07c0f63 commit 45c6d79

File tree

9 files changed

+54
-154
lines changed

9 files changed

+54
-154
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.222",
3+
"version": "1.0.223",
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: 2 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { action } from "@storybook/addon-actions";
33
import { Meta } from "@storybook/react";
44
import { useEffect, useState } from "react";
55

6-
import Button from "Components/Button";
7-
86
import Accordion from ".";
97
import { ISection } from "./types";
108

@@ -239,96 +237,6 @@ export const WithoutDragAndDrop = () => {
239237
);
240238
};
241239

242-
export const AddSectionAndSectionItem = () => {
243-
const [sections, setSections] = useState<ISection[]>([
244-
{
245-
id: 1,
246-
title: "velum constans brevis canis corrumpo magni attollo",
247-
description:
248-
"Creber aeneus versus itaque alioqui abeo crux sperno. Atrox subseco ater tenetur libero absum quidem thymum degusto allatus. Venia in carbo cibus desolo contego suffragium. Vero civitas tredecim ventosus dapifer quas. Animadverto spiculum velut.",
249-
order: 0,
250-
items: [
251-
{
252-
id: 597358,
253-
title: "officia",
254-
order: 0
255-
}
256-
]
257-
}
258-
]);
259-
260-
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
261-
const [selectedSection, setSelectedSection] = useState<number | null>(null);
262-
const [selectedItem, setSelectedItem] = useState<number | null>(null);
263-
264-
if (!sections.length) {
265-
return <div>Loading...</div>;
266-
}
267-
268-
return (
269-
<div>
270-
<Button
271-
onClick={() => {
272-
const newSection = sections[0];
273-
if (newSection) {
274-
newSection.items.push({
275-
id: Math.floor(Math.random() * 1000000),
276-
title: faker.lorem.words(Math.floor(Math.random() * 10) + 1),
277-
order: newSection.items.length
278-
});
279-
}
280-
281-
setSections([newSection as ISection]);
282-
}}
283-
>
284-
Add Section
285-
</Button>
286-
<Accordion
287-
className='yl:w-[500px]'
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-
}}
298-
sections={sections}
299-
expanded={expandedSections}
300-
hasDraggableSectionItems={true}
301-
onSectionItemClick={sectionItem => {
302-
const newSection = sections[0];
303-
if (newSection) {
304-
newSection.items = newSection.items.filter(
305-
item => item.id !== sectionItem.id
306-
);
307-
}
308-
309-
setSections([newSection as ISection]);
310-
}}
311-
onSorted={(_, sections) => {
312-
setSections(sections);
313-
}}
314-
onAddSection={() => {
315-
action("onAddSection")();
316-
}}
317-
onAddSectionItem={section => {
318-
action("onAddSectionItem")(section);
319-
}}
320-
setExpanded={(expanded: number[]) => {
321-
setExpandedSections(expanded);
322-
action("setExpanded")(expanded);
323-
}}
324-
onSelected={item => {
325-
action("onSelected")(item);
326-
}}
327-
/>
328-
</div>
329-
);
330-
};
331-
332240
export const WithAddLabels = () => {
333241
const [sections, setSections] = useState<ISection[]>([]);
334242
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
@@ -440,7 +348,7 @@ export const WithNoItems = () => {
440348
);
441349
};
442350

443-
export const DefaultExpanded = () => {
351+
export const ExpandedByDefault = () => {
444352
const [sections, setSections] = useState<ISection[]>([]);
445353
const [expandedSections, setExpandedSections] = useState<number[]>([]);
446354
const [selectedSection, setSelectedSection] = useState<number | null>(null);
@@ -461,6 +369,7 @@ export const DefaultExpanded = () => {
461369
return (
462370
<div>
463371
<Accordion
372+
defaultExpanded={true}
464373
className='yl:w-[500px]'
465374
selected={{
466375
sectionId: selectedSection ?? 0,

‎src/Components/Accordion/index.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ const Accordion: FC<IAccordionProps> = ({
3232
setSelectedItem
3333
}) => {
3434
const hasInitialized = useRef(false);
35-
3635
const [draggedId, setDraggedId] = useState<number | null>(null);
3736
const [draggedOverId, setDraggedOverId] = useState<number | null>(null);
3837

@@ -108,8 +107,8 @@ const Accordion: FC<IAccordionProps> = ({
108107
e.stopPropagation();
109108
e.preventDefault();
110109
onSectionClick?.(section);
111-
setSelectedSection(section.id);
112-
setSelectedItem(null);
110+
setSelectedSection?.(section.id);
111+
setSelectedItem?.(null);
113112
toggleExpand(section.id);
114113
}}
115114
className={classNames(
@@ -119,9 +118,9 @@ const Accordion: FC<IAccordionProps> = ({
119118
"yl:bg-text/2": expanded.includes(section.id),
120119
"yl:cursor-pointer": onSectionItemClick,
121120
"yl:text-text":
122-
selected.sectionId !== section.id || !onSectionItemClick,
121+
selected?.sectionId !== section.id || !onSectionItemClick,
123122
"yl:text-primary":
124-
onSectionItemClick && selected.sectionId === section.id
123+
onSectionItemClick && selected?.sectionId === section.id
125124
}
126125
)}
127126
onKeyDown={e =>
@@ -171,8 +170,8 @@ const Accordion: FC<IAccordionProps> = ({
171170
onClick={(item: IDraggableListItem) => {
172171
onSectionItemClick?.(item);
173172
onSelected?.(item);
174-
setSelectedItem(item.id);
175-
setSelectedSection(
173+
setSelectedItem?.(item.id);
174+
setSelectedSection?.(
176175
sections.find(s => s.items.includes(item))?.id ?? null
177176
);
178177
}}
@@ -199,7 +198,7 @@ const Accordion: FC<IAccordionProps> = ({
199198
"yl:hover:cursor-pointer yl:hover:text-primary":
200199
onSectionItemClick,
201200
"yl:text-primary":
202-
onSectionItemClick && selected.itemId === item.id,
201+
onSectionItemClick && selected?.itemId === item.id,
203202
"yl:pl-5": section.items.length === 1
204203
}
205204
)

‎src/Components/Accordion/types.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,13 @@ export interface IAccordionProps {
3737
addSectionLabel?: string;
3838
expanded: number[];
3939
setExpanded: (sections: number[]) => void;
40-
selectedId?: number;
4140
hasDraggableSections?: boolean;
4241
hasDraggableSectionItems?: boolean;
4342
defaultExpanded?: boolean;
44-
selected: {
45-
sectionId: number;
46-
itemId: number;
43+
selected?: {
44+
sectionId: number | null;
45+
itemId: number | null;
4746
};
48-
setSelectedSection: (sectionId: number | null) => void;
49-
setSelectedItem: (itemId: number | null) => void;
47+
setSelectedSection?: (sectionId: number | null) => void;
48+
setSelectedItem?: (itemId: number | null) => void;
5049
}

‎src/Components/Badge/Badge.stories.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,36 +10,35 @@ const meta = {
1010
layout: "centered"
1111
},
1212
tags: ["autodocs"],
13-
argTypes: {}
13+
argTypes: {
14+
variant: {
15+
control: "select",
16+
options: Object.values(BadgeVariantEnum)
17+
}
18+
}
1419
} satisfies Meta<typeof Badge>;
1520

1621
export default meta;
1722
type Story = StoryObj<typeof meta>;
1823

19-
export const Empty: Story = {
20-
args: {
21-
title: "Badge",
22-
variant: BadgeVariantEnum.PRIMARY
23-
}
24-
};
25-
2624
export const Filled: Story = {
2725
args: {
2826
title: "Badge",
29-
variant: BadgeVariantEnum.PRIMARY
27+
variant: BadgeVariantEnum.FILLED
3028
}
3129
};
3230

33-
export const Beta: Story = {
31+
export const Outline: Story = {
3432
args: {
35-
title: "Beta",
36-
variant: BadgeVariantEnum.BETA
33+
title: "Badge",
34+
variant: BadgeVariantEnum.OUTLINE,
35+
className: "yl:text-secondary"
3736
}
3837
};
3938

40-
export const New: Story = {
39+
export const Custom: Story = {
4140
args: {
42-
title: "New",
43-
variant: BadgeVariantEnum.NEW
41+
title: "Badge",
42+
className: "yl:text-bg yl:bg-red-500"
4443
}
4544
};

‎src/Components/Badge/Badge.test.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,39 @@ describe("Badge component", () => {
88

99
test("renders correctly - snapshot test", () => {
1010
const { asFragment } = render(
11-
<Badge title={testTitle} variant={BadgeVariantEnum.PRIMARY} />
11+
<Badge title={testTitle} variant={BadgeVariantEnum.FILLED} />
1212
);
1313
expect(asFragment()).toMatchSnapshot();
1414
});
1515

1616
test("renders the title correctly", () => {
17-
render(<Badge title={testTitle} variant={BadgeVariantEnum.PRIMARY} />);
17+
render(<Badge title={testTitle} variant={BadgeVariantEnum.FILLED} />);
1818
const badgeElement = screen.getByText(testTitle);
1919
expect(badgeElement).toBeInTheDocument();
2020
});
2121

22+
test("applies filled variant", () => {
23+
render(<Badge title={testTitle} variant={BadgeVariantEnum.FILLED} />);
24+
const badgeElement = screen.getByText(testTitle);
25+
expect(badgeElement).toHaveClass("yl:bg-primary");
26+
});
27+
2228
test("applies custom class name", () => {
2329
const customClass = "custom-class";
2430
render(
2531
<Badge
2632
title={testTitle}
27-
variant={BadgeVariantEnum.PRIMARY}
33+
variant={BadgeVariantEnum.FILLED}
2834
className={customClass}
2935
/>
3036
);
3137
const badgeElement = screen.getByText(testTitle);
3238
expect(badgeElement).toHaveClass(customClass);
3339
});
40+
41+
test("applies outline variant", () => {
42+
render(<Badge title={testTitle} variant={BadgeVariantEnum.OUTLINE} />);
43+
const badgeElement = screen.getByText(testTitle);
44+
expect(badgeElement).toHaveClass("yl:bg-transparent");
45+
});
3446
});

‎src/Components/Badge/__snapshots__/Badge.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`Badge component > renders correctly - snapshot test 1`] = `
44
<DocumentFragment>
55
<span
6-
class="yl:rounded yl:border yl:border-border yl:px-2 yl:py-1 yl:text-[10px] yl:bg-primary"
6+
class="yl:rounded yl:border yl:border-border yl:px-[3px] yl:py-[1px] yl:text-[10px] yl:text-inherit yl:bg-primary"
77
>
88
Test Badge
99
</span>

‎src/Components/Badge/index.tsx‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,17 @@ import { BadgeVariantEnum, IBadgeProps } from "./types";
55

66
const Badge: FC<IBadgeProps> = ({ title, className, variant }) => {
77
const variants = {
8-
[BadgeVariantEnum.PRIMARY]: "yl:bg-primary",
9-
[BadgeVariantEnum.SECONDARY]: "yl:bg-secondary",
10-
[BadgeVariantEnum.SUCCESS]: "yl:bg-success",
11-
[BadgeVariantEnum.WARNING]: "yl:bg-warning",
12-
[BadgeVariantEnum.ERROR]: "yl:bg-error",
13-
[BadgeVariantEnum.BETA]: "yl:bg-violet-500",
14-
[BadgeVariantEnum.NEW]: "yl:bg-blue-500",
15-
[BadgeVariantEnum.NONE]: ""
8+
[BadgeVariantEnum.FILLED]: "yl:bg-primary",
9+
[BadgeVariantEnum.OUTLINE]: "yl:bg-transparent"
1610
};
1711

1812
const baseClassNames =
19-
"yl:rounded yl:border yl:border-border yl:px-2 yl:py-1 yl:text-[10px]";
13+
"yl:rounded yl:border yl:border-border yl:px-[3px] yl:py-[1px] yl:text-[10px] yl:text-inherit";
14+
15+
const variantClassNames = variant ? variants[variant] : "";
2016

2117
return (
22-
<span
23-
className={classNames(
24-
baseClassNames,
25-
{
26-
[variants[variant]]: variant
27-
},
28-
className
29-
)}
30-
>
18+
<span className={classNames(baseClassNames, variantClassNames, className)}>
3119
{title}
3220
</span>
3321
);

‎src/Components/Badge/types.ts‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
export enum BadgeVariantEnum {
2-
PRIMARY = "primary",
3-
SECONDARY = "secondary",
4-
SUCCESS = "success",
5-
WARNING = "warning",
6-
ERROR = "error",
7-
BETA = "beta",
8-
NEW = "new",
9-
NONE = "none"
2+
FILLED = "filled",
3+
OUTLINE = "outline"
104
}
115

126
export interface IBadgeProps {
137
title: string;
148
className?: string;
15-
variant: BadgeVariantEnum;
9+
variant?: BadgeVariantEnum;
1610
}

0 commit comments

Comments
 (0)