Skip to content

Commit 953def3

Browse files
alcercualcercu
authored
Merge pull request #72 from kleros/chore/pagination-migration
Chore/pagination migration
2 parents 9cce1a7 + 481217f commit 953def3

File tree

8 files changed

+534
-322
lines changed

8 files changed

+534
-322
lines changed

‎src/App.tsx‎

Lines changed: 89 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { GlobalStyle } from "./styles/global-style";
55
import { lightTheme, darkTheme } from "./styles/themes";
66
import Button from "./lib/button";
77
import Tabs from "./lib/pagination/tabs";
8-
import Card from "./lib/container/card";
98
import Buttons from "./examples/buttons";
109
import Pagination from "./examples/pagination";
1110
import Containers from "./examples/containers";
@@ -19,6 +18,7 @@ import TimelineProgress from "./examples/timeline";
1918
import Input from "./examples/input";
2019
import Tooltips from "./examples/tooltip";
2120
import Copiable from "./examples/copiable";
21+
import clsx from "clsx";
2222

2323
const StyledDiv = styled.div`
2424
position: fixed;
@@ -38,29 +38,9 @@ const StyledDiv = styled.div`
3838
${(props) => props.theme.klerosUIComponentsTransitionSpeed};
3939
`;
4040

41-
const StyledCard = styled(Card)`
42-
height: 500px;
43-
width: 1000px;
44-
display: flex;
45-
justify-content: space-around;
46-
align-items: center;
47-
gap: 24px;
48-
overflow: auto;
49-
flex-wrap: wrap;
50-
padding: 36px 36px;
51-
background: ${(props) => props.theme.klerosUIComponentsLightBackground};
52-
transition: background ease
53-
${(props) => props.theme.klerosUIComponentsTransitionSpeed};
54-
`;
55-
56-
const StyledTabs = styled(Tabs)`
57-
width: 995px;
58-
`;
59-
6041
const App = () => {
6142
const [theme, setTheme] = useState(lightTheme);
6243
const [tailwindTheme, setTailwindTheme] = useState("light");
63-
const [example, setExample] = useState("buttons");
6444

6545
// temporary
6646
const changeTheme = () => {
@@ -80,40 +60,97 @@ const App = () => {
8060
<ThemeProvider theme={theme}>
8161
<GlobalStyle />
8262
<StyledDiv>
83-
<StyledTabs
63+
<Tabs
64+
className="w-[995px]"
65+
defaultSelectedKey={"buttons"}
66+
panelClassName={clsx(
67+
"h-[500px] w-[1000px] bg-klerosUIComponentsLightBackground",
68+
"transition-[background] ease-ease",
69+
"border border-klerosUIComponentsStroke box-border",
70+
"flex justify-around items-center gap-6 flex-wrap p-9",
71+
"overflow-auto rounded-base shadow-sm shadow-klerosUIComponentsDefaultShadow-400",
72+
)}
8473
items={[
85-
{ text: "Buttons", value: "buttons" },
86-
{ text: "Pagination", value: "pagination" },
87-
{ text: "Containers", value: "containers" },
88-
{ text: "Accordion", value: "accordion" },
89-
{ text: "Form", value: "form" },
90-
{ text: "Dropdowns", value: "dropdowns" },
91-
{ text: "Displays", value: "displays" },
92-
{ text: "Messages", value: "messages" },
93-
{ text: "Timeline", value: "timeline" },
94-
{ text: "Progress", value: "progress" },
95-
{ text: "Input", value: "input" },
96-
{ text: "Tooltip", value: "tooltip" },
97-
{ text: "Copiable", value: "copiable" },
74+
{
75+
text: "Buttons",
76+
value: "buttons",
77+
id: "buttons",
78+
content: <Buttons />,
79+
},
80+
{
81+
text: "Pagination",
82+
value: "pagination",
83+
id: "pagination",
84+
content: <Pagination />,
85+
},
86+
{
87+
text: "Containers",
88+
value: "containers",
89+
id: "containers",
90+
content: <Containers />,
91+
},
92+
{
93+
text: "Accordion",
94+
value: "accordion",
95+
id: "accordion",
96+
content: <Accordion />,
97+
},
98+
{
99+
text: "Form",
100+
value: "form",
101+
id: "content",
102+
content: <Form />,
103+
},
104+
{
105+
text: "Dropdowns",
106+
value: "dropdowns",
107+
id: "dropdowns",
108+
content: <Dropdowns />,
109+
},
110+
{
111+
text: "Displays",
112+
value: "displays",
113+
id: "displays",
114+
content: <Displays />,
115+
},
116+
{
117+
text: "Messages",
118+
value: "messages",
119+
id: "messages",
120+
content: <Messages />,
121+
},
122+
{
123+
text: "Timeline",
124+
value: "timeline",
125+
id: "timeline",
126+
content: <TimelineProgress />,
127+
},
128+
{
129+
text: "Progress",
130+
value: "progress",
131+
id: "progress",
132+
content: <Progress />,
133+
},
134+
{
135+
text: "Input",
136+
value: "input",
137+
id: "input",
138+
content: <Input />,
139+
},
140+
{
141+
text: "Tooltip",
142+
value: "tooltip",
143+
id: "tooltip",
144+
content: <Tooltips />,
145+
},
146+
{
147+
text: "Copiable",
148+
value: "copiable",
149+
id: "copiable",
150+
content: <Copiable />,
151+
},
98152
]}
99-
callback={setExample}
100-
currentValue={example}
101153
/>
102-
<StyledCard>
103-
{example === "buttons" && <Buttons />}
104-
{example === "pagination" && <Pagination />}
105-
{example === "containers" && <Containers />}
106-
{example === "accordion" && <Accordion />}
107-
{example === "form" && <Form />}
108-
{example === "dropdowns" && <Dropdowns />}
109-
{example === "displays" && <Displays />}
110-
{example === "messages" && <Messages />}
111-
{example === "timeline" && <TimelineProgress />}
112-
{example === "progress" && <Progress />}
113-
{example === "input" && <Input />}
114-
{example === "tooltip" && <Tooltips />}
115-
{example === "copiable" && <Copiable />}
116-
</StyledCard>
117154
<Button
118155
variant="primary"
119156
className="mt-16"

‎src/examples/pagination.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,26 @@ const Pagination = () => {
2121
numPages={6}
2222
/>
2323
<Tabs
24+
className="w-[500px]"
25+
defaultSelectedKey={"hello"}
26+
panelClassName="bg-klerosUIComponentsLightBlue p-4"
2427
items={[
25-
{ text: "hello", value: 0 },
28+
{ text: "hello", value: 0, id: "hello", content: <p>hello</p> },
2629
{
2730
text: "Telegram",
2831
value: 1,
2932
Icon: Telegram,
33+
id: "telegram",
34+
content: <p>Telegram</p>,
35+
},
36+
{
37+
text: "disabled",
38+
value: 2,
39+
disabled: true,
40+
id: "disabled",
41+
content: <p>Disabled</p>,
3042
},
31-
{ text: "hello1", value: 2, disabled: true },
3243
]}
33-
callback={() => {
34-
// function called when a tab is clicked
35-
}}
36-
currentValue={0}
3744
/>
3845
<Breadcrumb
3946
items={[

‎src/lib/pagination/compact.tsx‎

Lines changed: 57 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,88 @@
11
import React, { ReactNode } from "react";
2-
import styled from "styled-components";
32
import usePagination from "../../hooks/pagination/use-pagination";
43
import Arrow from "../../assets/svgs/arrows/circle-left.svg";
54
import SolidErrorIcon from "../../assets/svgs/status-icons/solid-error.svg";
6-
import { borderBox, button, small, svg } from "../../styles/common-style";
5+
import { cn } from "../../utils";
6+
import { Button, type ButtonProps } from "react-aria-components";
7+
import clsx from "clsx";
78

8-
const Wrapper = styled.div`
9-
${borderBox}
10-
display: flex;
11-
align-items: center;
12-
justify-content: end;
13-
`;
14-
15-
const StyledSVG = styled.svg``;
16-
17-
const ArrowButton = styled.button`
18-
${button}
19-
height: 24px;
20-
width: 24px;
21-
background: none;
22-
padding: 0;
23-
border-radius: 50%;
24-
25-
& ${StyledSVG} {
26-
${svg}
27-
height: 24px;
28-
width: 24px;
29-
fill: ${(props) =>
30-
props.disabled
31-
? props.theme.klerosUIComponentsStroke
32-
: props.theme.klerosUIComponentsPrimaryBlue};
33-
transition: fill ease
34-
${({ theme }) => theme.klerosUIComponentsTransitionSpeed};
35-
}
36-
37-
:hover:enabled {
38-
& ${StyledSVG} {
39-
fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
40-
}
41-
}
42-
`;
43-
44-
const StyledLabel = styled.small`
45-
${small}
46-
color: ${(props) => props.theme.klerosUIComponentsPrimaryText};
47-
`;
48-
49-
const LeftArrow = styled(ArrowButton)`
50-
margin-left: 16px;
51-
`;
52-
53-
const RightArrow = styled(ArrowButton)`
54-
margin-left: 8px;
55-
56-
& ${StyledSVG} {
57-
transform: rotate(180deg);
58-
}
59-
`;
60-
61-
const CloseButton = styled(ArrowButton)`
62-
margin-left: 8px;
63-
64-
& ${StyledSVG} {
65-
fill: ${(props) => props.theme.klerosUIComponentsPrimaryBlue};
66-
}
67-
68-
:hover:enabled {
69-
& ${StyledSVG} {
70-
fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
71-
}
72-
}
73-
`;
9+
const ArrowButton: React.FC<ButtonProps> = ({
10+
children,
11+
isDisabled,
12+
className,
13+
...props
14+
}) => {
15+
return (
16+
<Button
17+
className={cn(
18+
"size-6 rounded-full bg-none hover:enabled:cursor-pointer hover:disabled:cursor-default",
19+
"[&>svg]:ease-ease [&>svg]:size-6 [&>svg]:transition-[fill]",
20+
":hover:enabled:[&>svg]:fill-klerosUIComponentsSecondaryBlue",
21+
isDisabled
22+
? ["[&>svg]:fill-klerosUIComponentsStroke"]
23+
: ["[&>svg]:fill-klerosUIComponentsPrimaryBlue"],
24+
className,
25+
)}
26+
{...props}
27+
>
28+
{children}
29+
</Button>
30+
);
31+
};
7432

7533
interface CompactPaginationProps {
7634
currentPage: number;
7735
numPages: number;
7836
callback: (newPage: number) => void;
37+
/** Callback function called when end of pages has been reached */
7938
onCloseOnLastPage?: () => void;
8039
label?: ReactNode;
8140
className?: string;
8241
}
8342

84-
const CompactPagination: React.FC<CompactPaginationProps> = ({
43+
function CompactPagination({
8544
currentPage,
8645
numPages,
8746
callback,
8847
onCloseOnLastPage,
8948
label,
9049
className,
91-
}) => {
50+
}: Readonly<CompactPaginationProps>) {
9251
const [{ incrementPage, decrementPage, minPageReached, maxPageReached }] =
9352
usePagination(currentPage, numPages, callback, onCloseOnLastPage);
9453

9554
return (
96-
<Wrapper {...{ className }}>
97-
<StyledLabel>{label}</StyledLabel>
98-
<LeftArrow disabled={minPageReached} onClick={decrementPage}>
99-
<Arrow className={StyledSVG.styledComponentId} />
100-
</LeftArrow>
55+
<div className={cn("box-border flex items-center justify-end", className)}>
56+
<small className="text-klerosUIComponentsPrimaryText text-sm">
57+
{label}
58+
</small>
59+
<ArrowButton
60+
className={clsx(label && "ml-4")}
61+
isDisabled={minPageReached}
62+
onPress={decrementPage}
63+
>
64+
<Arrow />
65+
</ArrowButton>
10166
{currentPage === numPages && onCloseOnLastPage ? (
102-
<CloseButton onClick={onCloseOnLastPage}>
103-
<SolidErrorIcon className={StyledSVG.styledComponentId} />
104-
</CloseButton>
67+
<ArrowButton className="ml-2" onPress={onCloseOnLastPage}>
68+
<SolidErrorIcon
69+
className={clsx(
70+
"fill-klerosUIComponentsPrimaryBlue",
71+
"hover:enabled:fill-klerosUIComponentsSecondaryBlue",
72+
)}
73+
/>
74+
</ArrowButton>
10575
) : (
106-
<RightArrow disabled={maxPageReached} onClick={incrementPage}>
107-
<Arrow className={StyledSVG.styledComponentId} />
108-
</RightArrow>
76+
<ArrowButton
77+
className={"ml-2"}
78+
isDisabled={maxPageReached}
79+
onPress={incrementPage}
80+
>
81+
<Arrow className="rotate-180" />
82+
</ArrowButton>
10983
)}
110-
</Wrapper>
84+
</div>
11185
);
112-
};
86+
}
11387

11488
export default CompactPagination;

0 commit comments

Comments
 (0)