From 8fd4b727e6f3e75a9d86d171bd52b13b868f32bc Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 10 Mar 2025 20:51:39 +0530 Subject: [PATCH 1/5] chore: accordion-migration --- eslint.config.mjs | 2 +- src/App.tsx | 19 +++- src/lib/accordion/accordion-item.tsx | 81 ++++++---------- src/lib/accordion/custom.tsx | 13 +-- src/lib/accordion/index.tsx | 31 +++--- src/styles/global.css | 136 +++++++++++++++++---------- 6 files changed, 145 insertions(+), 137 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 9f17de4..0abd910 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -80,7 +80,7 @@ export default [ "max-len": [ "warn", { - code: 80, + code: 120, }, ], diff --git a/src/App.tsx b/src/App.tsx index 3424c94..db459dd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -63,7 +63,22 @@ const StyledButton = styled(Button)` const App = () => { const [theme, setTheme] = useState(lightTheme); + const [tailwindTheme, setTailwindTheme] = useState("light"); const [example, setExample] = useState("buttons"); + + // temporary + const changeTheme = () => { + if (tailwindTheme === "dark") { + document.documentElement.classList.remove("dark"); + setTailwindTheme("light"); + } else { + document.documentElement.classList.add("dark"); + setTailwindTheme("dark"); + } + if (theme === lightTheme) setTheme(darkTheme); + else setTheme(lightTheme); + }; + return ( @@ -106,9 +121,7 @@ const App = () => { - theme === lightTheme ? setTheme(darkTheme) : setTheme(lightTheme) - } + onClick={changeTheme} /> diff --git a/src/lib/accordion/accordion-item.tsx b/src/lib/accordion/accordion-item.tsx index 5a8d96e..018ec9b 100644 --- a/src/lib/accordion/accordion-item.tsx +++ b/src/lib/accordion/accordion-item.tsx @@ -1,54 +1,9 @@ import React, { ReactNode } from "react"; -import styled from "styled-components"; import { useElementSize } from "../../hooks/useElementSize"; import Plus from "../../assets/svgs/accordion/plus.svg"; import Minus from "../../assets/svgs/accordion/minus.svg"; -import { - svg, - button, - hoverMediumBlue, - hoverShortTransitionTiming, -} from "../../styles/common-style"; -const StyledDiv = styled.div` - margin: 8px 0px; - .accordion-button { - ${button} - ${hoverMediumBlue} - ${hoverShortTransitionTiming} - width: 100%; - background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground}; - border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke}; - border-radius: 3px; - padding: 11.5px 32px; - display: flex; - justify-content: space-between; - align-items: center; - - .accordion-svg { - ${svg} - height: 16px; - width: 16px; - fill: ${({ theme }) => theme.klerosUIComponentsPrimaryText}; - } - } -`; - -interface CollapsibleProps { - expanded?: boolean; - totalHeight: number; -} - -const Collapsible = styled.div` - height: ${(props) => (props.expanded ? props.totalHeight.toString() : "0")}px; - overflow: ${(props) => (props.expanded ? "visible" : "hidden")}; - transition: height ease - ${({ theme }) => theme.klerosUIComponentsTransitionSpeed}; -`; - -const Body = styled.div` - padding: 32px; -`; +import clsx from "clsx"; interface AccordionItemProps { setExpanded: React.Dispatch>; @@ -67,22 +22,40 @@ const AccordionItem: React.FC = ({ }) => { const [ref, { height }] = useElementSize(); return ( - +
- - {body} - - +
+
+ {body} +
+
+
); }; diff --git a/src/lib/accordion/custom.tsx b/src/lib/accordion/custom.tsx index 83731de..162d99e 100644 --- a/src/lib/accordion/custom.tsx +++ b/src/lib/accordion/custom.tsx @@ -1,14 +1,5 @@ import React, { ReactNode, useState } from "react"; -import styled from "styled-components"; import AccordionItem from "./accordion-item"; -import { borderBox } from "../../styles/common-style"; - -const Wrapper = styled.div` - ${borderBox} - display: flex; - flex-direction: column; - width: 1000px; -`; interface AccordionItem { title: ReactNode; @@ -22,7 +13,7 @@ interface AccordionProps { const CustomAccordion: React.FC = ({ items, ...props }) => { const [expanded, setExpanded] = useState(-1); return ( - +
{items.map((item, index) => ( = ({ items, ...props }) => { expanded={expanded === index} /> ))} - +
); }; diff --git a/src/lib/accordion/index.tsx b/src/lib/accordion/index.tsx index 33ede0c..c969198 100644 --- a/src/lib/accordion/index.tsx +++ b/src/lib/accordion/index.tsx @@ -1,14 +1,6 @@ import React, { ReactNode, useState } from "react"; -import styled from "styled-components"; import AccordionItem from "./accordion-item"; -import { p, borderBox } from "../../styles/common-style"; - -const Wrapper = styled.div` - ${borderBox} - display: flex; - flex-direction: column; - width: 1000px; -`; +import clsx from "clsx"; interface AccordionItem { title: string; @@ -22,18 +14,17 @@ interface AccordionProps { defaultExpanded?: number; } -const AccordionTitle = styled.p` - ${p} - width: fit-content; - font-weight: 600; - text-align: center; - color: ${({ theme }) => theme.klerosUIComponentsPrimaryText}; -`; - const DefaultTitle: React.FC<{ item: AccordionItem }> = ({ item }) => ( <> {item.icon ?? (item.Icon && )} - {item.title} +

+ {item.title} +

); @@ -44,7 +35,7 @@ const Accordion: React.FC = ({ }) => { const [expanded, setExpanded] = useState(defaultExpanded ?? -1); return ( - +
{items.map((item, index) => ( = ({ expanded={expanded === index} /> ))} - +
); }; diff --git a/src/styles/global.css b/src/styles/global.css index d388fe4..c9ab80d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -26,7 +26,7 @@ --klerosUIComponentsWarning: #ff9900; --klerosUIComponentsWarningLight: #fff9f0; --klerosUIComponentsError: #f60c36; - --klerosUIComponentsErrorLight: #FEF0F3; + --klerosUIComponentsErrorLight: #fef0f3; --klerosUIComponentsTint: #d14eff; --klerosUIComponentsTintMedium: #401d6c; --klerosUIComponentsTintPurple: #f4f0fa; @@ -67,68 +67,125 @@ --klerosUIComponentsTransitionSpeed: 0.25s; } +} +@layer components { /* Typography styles */ - h1 { - @apply text-2xl font-semibold leading-[33px] m-0; + .h1 { + font-size: 24px; + font-weight: 600; + line-height: 33px; + margin: 0; color: var(--klerosUIComponentsPrimaryText); } - h2 { - @apply text-base font-semibold leading-[22px] m-0; + .h2 { + font-size: 16px; + font-weight: 600; + line-height: 22px; + margin: 0; color: var(--klerosUIComponentsPrimaryText); } - p { - @apply text-base font-normal leading-[22px] m-0 break-words; + .p { + font-size: 16px; + font-weight: 400; + line-height: 22px; + margin: 0; + overflow-wrap: break-word; color: var(--klerosUIComponentsPrimaryText); } - small { - @apply text-sm font-normal leading-[19px] m-0 break-words; + .small { + font-size: 14px; + font-weight: 400; + line-height: 19px; + margin: 0; + overflow-wrap: break-word; color: var(--klerosUIComponentsSecondaryText); } /* Element styles */ - hr { - @apply opacity-100; + .hr { + opacity: 1; } - svg { - @apply inline-block align-middle; + .svg { + display: inline-block; + vertical-align: middle; } - img { - @apply inline-block align-middle; + .img { + display: inline-block; + vertical-align: middle; } - button { - @apply text-base m-0 border-none overflow-visible normal-case; + .button { + font-family: inherit; + font-size: 100%; + margin: 0; + border: none; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + + &:hover:enabled { + cursor: pointer; + } } - button:hover:enabled { - @apply cursor-pointer; + .input { + font-family: inherit; + font-size: 100%; + margin: 0; + border: none; + overflow: visible; } - input { - @apply text-base m-0 border-none overflow-visible; + .optgroup { + font-family: inherit; + font-size: 100%; + margin: 0; + border: none; } - optgroup { - @apply text-base m-0 border-none; + .select { + font-family: inherit; + font-size: 100%; + margin: 0; + border: none; + text-transform: none; } - select { - @apply text-base m-0 border-none normal-case; + .textarea { + font-family: inherit; + font-size: 100%; + margin: 0; + border: none; } - textarea { - @apply text-base m-0 border-none; + /* Animations */ + @keyframes fadeIn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } } + .fade-in { + animation: fadeIn 0.3s ease-in-out; + } /* Box sizing */ - .border-box, .border-box *, .border-box *:before, .border-box *:after { - @apply box-border; + .border-box, + .border-box *, + .border-box *:before, + .border-box *:after { + box-sizing: border-box; } /* Transitions */ @@ -142,28 +199,11 @@ /* Hover effects */ .hover-medium-blue:hover { - background-color: var(--klerosUIComponentsMediumBlue); + background-color: var(--klerosUIComponentsMediumBlue) !important; } .hover-white-background:hover { - background-color: var(--klerosUIComponentsWhiteBackground); - } - - /* Animations */ - @keyframes fadeIn { - 0% { - opacity: 0; - } - 50% { - opacity: 0.5; - } - 100% { - opacity: 1; - } - } - - .fade-in { - animation: fadeIn 0.3s ease-in-out; + background-color: var(--klerosUIComponentsWhiteBackground) !important; } } From 117885e0d781dc6cc11e3d4d2585b06263905bbe Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 11 Mar 2025 11:26:22 +0530 Subject: [PATCH 2/5] chore: remove-base-styles --- src/lib/accordion/accordion-item.tsx | 7 +- src/lib/accordion/custom.tsx | 2 +- src/lib/accordion/index.tsx | 4 +- src/styles/global.css | 96 ++-------------------------- 4 files changed, 12 insertions(+), 97 deletions(-) diff --git a/src/lib/accordion/accordion-item.tsx b/src/lib/accordion/accordion-item.tsx index 018ec9b..ff4e0bc 100644 --- a/src/lib/accordion/accordion-item.tsx +++ b/src/lib/accordion/accordion-item.tsx @@ -25,9 +25,8 @@ const AccordionItem: React.FC = ({
diff --git a/src/lib/accordion/custom.tsx b/src/lib/accordion/custom.tsx index 162d99e..2803796 100644 --- a/src/lib/accordion/custom.tsx +++ b/src/lib/accordion/custom.tsx @@ -13,7 +13,7 @@ interface AccordionProps { const CustomAccordion: React.FC = ({ items, ...props }) => { const [expanded, setExpanded] = useState(-1); return ( -
+
{items.map((item, index) => ( = ({ item }) => ( {item.icon ?? (item.Icon && )}

@@ -35,7 +35,7 @@ const Accordion: React.FC = ({ }) => { const [expanded, setExpanded] = useState(defaultExpanded ?? -1); return ( -

+
{items.map((item, index) => ( Date: Tue, 11 Mar 2025 12:22:17 +0530 Subject: [PATCH 3/5] refactor: remove-duplicate-style --- src/lib/accordion/index.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/lib/accordion/index.tsx b/src/lib/accordion/index.tsx index 89450b9..a6132c0 100644 --- a/src/lib/accordion/index.tsx +++ b/src/lib/accordion/index.tsx @@ -17,14 +17,7 @@ interface AccordionProps { const DefaultTitle: React.FC<{ item: AccordionItem }> = ({ item }) => ( <> {item.icon ?? (item.Icon && )} -

- {item.title} -

+

{item.title}

); From 07125b853fffbc8f6a86471b3c2fbf340957a197 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 11 Mar 2025 15:00:34 +0530 Subject: [PATCH 4/5] chore: use-react-aria-components --- package.json | 2 +- src/lib/accordion/accordion-item.tsx | 7 +- yarn.lock | 935 ++++++++++++++++----------- 3 files changed, 556 insertions(+), 388 deletions(-) diff --git a/package.json b/package.json index fc1ee77..fcf3cfc 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "clsx": "^2.1.1", "rc-slider": "^9.7.5", "react": "^18.0.0", - "react-aria": "^3.38.0", + "react-aria-components": "^1.7.1", "react-dom": "^18.0.0", "react-is": "^18.0.0", "simplebar": "^5.3.6", diff --git a/src/lib/accordion/accordion-item.tsx b/src/lib/accordion/accordion-item.tsx index ff4e0bc..d65375f 100644 --- a/src/lib/accordion/accordion-item.tsx +++ b/src/lib/accordion/accordion-item.tsx @@ -4,6 +4,7 @@ import Plus from "../../assets/svgs/accordion/plus.svg"; import Minus from "../../assets/svgs/accordion/minus.svg"; import clsx from "clsx"; +import { Button } from "react-aria-components"; interface AccordionItemProps { setExpanded: React.Dispatch>; @@ -23,14 +24,14 @@ const AccordionItem: React.FC = ({ const [ref, { height }] = useElementSize(); return (
- +
Date: Tue, 11 Mar 2025 16:25:15 +0530 Subject: [PATCH 5/5] refactor: feedback --- src/lib/accordion/accordion-item.tsx | 4 ++-- src/lib/accordion/custom.tsx | 13 +++++++++++-- src/lib/accordion/index.tsx | 9 +++++++-- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/lib/accordion/accordion-item.tsx b/src/lib/accordion/accordion-item.tsx index d65375f..d4168f3 100644 --- a/src/lib/accordion/accordion-item.tsx +++ b/src/lib/accordion/accordion-item.tsx @@ -23,12 +23,12 @@ const AccordionItem: React.FC = ({ }) => { const [ref, { height }] = useElementSize(); return ( -
+