From b864c7abaa8d1eb8ee89f88fcfee0fb5d6048b96 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 17 Mar 2025 14:46:16 +0530 Subject: [PATCH 1/4] chore: pagination-standard-and-compact-migration --- src/lib/pagination/compact.tsx | 128 ++++++++++--------------- src/lib/pagination/standard.tsx | 164 +++++++++++++------------------- 2 files changed, 114 insertions(+), 178 deletions(-) diff --git a/src/lib/pagination/compact.tsx b/src/lib/pagination/compact.tsx index 1536be5..a3c32f0 100644 --- a/src/lib/pagination/compact.tsx +++ b/src/lib/pagination/compact.tsx @@ -1,76 +1,29 @@ import React, { ReactNode } from "react"; -import styled from "styled-components"; import usePagination from "../../hooks/pagination/use-pagination"; import Arrow from "../../assets/svgs/arrows/circle-left.svg"; import SolidErrorIcon from "../../assets/svgs/status-icons/solid-error.svg"; -import { borderBox, button, small, svg } from "../../styles/common-style"; +import { cn } from "../../utils"; +import { Button, type ButtonProps } from "react-aria-components"; +import clsx from "clsx"; -const Wrapper = styled.div` - ${borderBox} - display: flex; - align-items: center; - justify-content: end; -`; - -const StyledSVG = styled.svg``; - -const ArrowButton = styled.button` - ${button} - height: 24px; - width: 24px; - background: none; - padding: 0; - border-radius: 50%; - - & ${StyledSVG} { - ${svg} - height: 24px; - width: 24px; - fill: ${(props) => - props.disabled - ? props.theme.klerosUIComponentsStroke - : props.theme.klerosUIComponentsPrimaryBlue}; - transition: fill ease - ${({ theme }) => theme.klerosUIComponentsTransitionSpeed}; - } - - :hover:enabled { - & ${StyledSVG} { - fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue}; - } - } -`; - -const StyledLabel = styled.small` - ${small} - color: ${(props) => props.theme.klerosUIComponentsPrimaryText}; -`; - -const LeftArrow = styled(ArrowButton)` - margin-left: 16px; -`; - -const RightArrow = styled(ArrowButton)` - margin-left: 8px; - - & ${StyledSVG} { - transform: rotate(180deg); - } -`; - -const CloseButton = styled(ArrowButton)` - margin-left: 8px; - - & ${StyledSVG} { - fill: ${(props) => props.theme.klerosUIComponentsPrimaryBlue}; - } - - :hover:enabled { - & ${StyledSVG} { - fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue}; - } - } -`; +const ArrowButton: React.FC = ({ className, ...props }) => { + return ( + + ); +}; interface CompactPaginationProps { currentPage: number; @@ -93,21 +46,36 @@ const CompactPagination: React.FC = ({ usePagination(currentPage, numPages, callback, onCloseOnLastPage); return ( - - {label} - - - +
+ + {label} + + + + {currentPage === numPages && onCloseOnLastPage ? ( - - - + + + ) : ( - - - + + + )} - +
); }; diff --git a/src/lib/pagination/standard.tsx b/src/lib/pagination/standard.tsx index 59d9440..f34965a 100644 --- a/src/lib/pagination/standard.tsx +++ b/src/lib/pagination/standard.tsx @@ -1,95 +1,39 @@ import React from "react"; -import styled from "styled-components"; import usePagination from "../../hooks/pagination/use-pagination"; import Arrow from "../../assets/svgs/arrows/light-left.svg"; -import { borderBox, button, svg } from "../../styles/common-style"; - -const Wrapper = styled.div` - ${borderBox} - display: flex; - align-items: center; - justify-content: center; -`; - -const PageButton = styled.button<{ selected?: boolean }>` - ${button} - height: 32px; - width: 32px; - margin: 4px; - background: ${(props) => - props.selected - ? props.theme.klerosUIComponentsLightBlue - : props.theme.klerosUIComponentsWhiteBackground}; - border: 1px solid - ${(props) => - props.selected - ? props.theme.klerosUIComponentsPrimaryBlue - : props.theme.klerosUIComponentsStroke}; - border-radius: 3px; - display: flex; - align-items: center; - justify-content: center; - - font-size: 14px; - color: ${(props) => - props.selected - ? props.theme.klerosUIComponentsPrimaryBlue - : props.theme.klerosUIComponentsPrimaryText}; - - :hover:enabled { - background: ${(props) => - props.selected - ? props.theme.klerosUIComponentsWhiteBackground - : props.theme.klerosUIComponentsLightBlue}; - border: 1px solid - ${(props) => - props.selected - ? props.theme.klerosUIComponentsPrimaryBlue - : props.theme.klerosUIComponentsSecondaryBlue}; - color: ${(props) => - props.selected - ? props.theme.klerosUIComponentsPrimaryBlue - : props.theme.klerosUIComponentsSecondaryBlue}; - } - - :hover:disabled { - cursor: default; - } -`; - -const StyledArrow = styled.svg``; - -const ArrowButton = styled(PageButton)` - & ${StyledArrow} { - ${svg} - fill: ${(props) => - props.disabled - ? props.theme.klerosUIComponentsStroke - : props.theme.klerosUIComponentsPrimaryText}; - transition: fill ease - ${({ theme }) => theme.klerosUIComponentsTransitionSpeed}; - } - - :hover:enabled { - & ${StyledArrow} { - fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue}; - } - } -`; - -const LeftArrow = styled(ArrowButton)` - & ${StyledArrow} { - padding-right: 1px; - } -`; - -const RightArrow = styled(ArrowButton)` - & ${StyledArrow} { - padding-left: 1px; - transform: rotate(180deg); - } -`; +import { cn } from "../../utils"; +import { Button, type ButtonProps } from "react-aria-components"; +import clsx from "clsx"; +const PageButton: React.FC = ({ + children, + selected, + className, + ...props +}) => ( + +); interface StandardPaginationProps { currentPage: number; numPages: number; @@ -119,25 +63,49 @@ const StandardPagination: React.FC = ({ ] = usePagination(currentPage, numPages, callback); return ( - - - - +
+ + + {!hideNumbers && getPageRange().map((i) => ( goToPage(i)} - disabled={disableNumbers} + onPress={() => goToPage(i)} + isDisabled={disableNumbers} > {i} ))} - - - - + + + +
); }; From bce8242de5ace244d00a51d16d2518fbeb959829 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 17 Mar 2025 18:17:39 +0530 Subject: [PATCH 2/4] chore: tabs-migration-with-new-implementation --- src/App.tsx | 141 ++++++++++++++++---------- src/examples/pagination.tsx | 19 ++-- src/lib/pagination/tabs.tsx | 190 +++++++++++++++++++++--------------- 3 files changed, 213 insertions(+), 137 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index dc3fb29..ecd2488 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,6 @@ import { GlobalStyle } from "./styles/global-style"; import { lightTheme, darkTheme } from "./styles/themes"; import Button from "./lib/button"; import Tabs from "./lib/pagination/tabs"; -import Card from "./lib/container/card"; import Buttons from "./examples/buttons"; import Pagination from "./examples/pagination"; import Containers from "./examples/containers"; @@ -19,6 +18,7 @@ import TimelineProgress from "./examples/timeline"; import Input from "./examples/input"; import Tooltips from "./examples/tooltip"; import Copiable from "./examples/copiable"; +import clsx from "clsx"; const StyledDiv = styled.div` position: fixed; @@ -38,29 +38,9 @@ const StyledDiv = styled.div` ${(props) => props.theme.klerosUIComponentsTransitionSpeed}; `; -const StyledCard = styled(Card)` - height: 500px; - width: 1000px; - display: flex; - justify-content: space-around; - align-items: center; - gap: 24px; - overflow: auto; - flex-wrap: wrap; - padding: 36px 36px; - background: ${(props) => props.theme.klerosUIComponentsLightBackground}; - transition: background ease - ${(props) => props.theme.klerosUIComponentsTransitionSpeed}; -`; - -const StyledTabs = styled(Tabs)` - width: 995px; -`; - const App = () => { const [theme, setTheme] = useState(lightTheme); const [tailwindTheme, setTailwindTheme] = useState("light"); - const [example, setExample] = useState("buttons"); // temporary const changeTheme = () => { @@ -80,40 +60,97 @@ const App = () => { - , + }, + { + text: "Pagination", + value: "pagination", + id: "pagination", + content: , + }, + { + text: "Containers", + value: "containers", + id: "containers", + content: , + }, + { + text: "Accordion", + value: "accordion", + id: "accordion", + content: , + }, + { + text: "Form", + value: "form", + id: "content", + content:
, + }, + { + text: "Dropdowns", + value: "dropdowns", + id: "dropdowns", + content: , + }, + { + text: "Displays", + value: "displays", + id: "displays", + content: , + }, + { + text: "Messages", + value: "messages", + id: "messages", + content: , + }, + { + text: "Timeline", + value: "timeline", + id: "timeline", + content: , + }, + { + text: "Progress", + value: "progress", + id: "progress", + content: , + }, + { + text: "Input", + value: "input", + id: "input", + content: , + }, + { + text: "Tooltip", + value: "tooltip", + id: "tooltip", + content: , + }, + { + text: "Copiable", + value: "copiable", + id: "copiable", + content: , + }, ]} - callback={setExample} - currentValue={example} /> - - {example === "buttons" && } - {example === "pagination" && } - {example === "containers" && } - {example === "accordion" && } - {example === "form" && } - {example === "dropdowns" && } - {example === "displays" && } - {example === "messages" && } - {example === "timeline" && } - {example === "progress" && } - {example === "input" && } - {example === "tooltip" && } - {example === "copiable" && } - ); }; diff --git a/src/lib/pagination/standard.tsx b/src/lib/pagination/standard.tsx index fd68a03..efcc67d 100644 --- a/src/lib/pagination/standard.tsx +++ b/src/lib/pagination/standard.tsx @@ -14,7 +14,7 @@ const PageButton: React.FC = ({