Merge pull request #64 from kleros/chore/accordion-migration

chore: accordion-migration

Author: alcercu

eslint.config.mjs

@@ -80,7 +80,7 @@ export default [
       "max-len": [
         "warn",
         {
-          code: 80,
+          code: 120,
         },
       ],
 

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",

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 (
     <React.StrictMode>
       <ThemeProvider theme={theme}>
@@ -106,9 +121,7 @@ const App = () => {
           <StyledButton
             variant="primary"
             text={"Change theme"}
-            onClick={() =>
-              theme === lightTheme ? setTheme(darkTheme) : setTheme(lightTheme)
-            }
+            onClick={changeTheme}
           />
         </StyledDiv>
       </ThemeProvider>

src/lib/accordion/accordion-item.tsx

@@ -1,54 +1,10 @@
 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<CollapsibleProps>`
-  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";
+import { Button } from "react-aria-components";
 
 interface AccordionItemProps {
   setExpanded: React.Dispatch<React.SetStateAction<number>>;
@@ -67,22 +23,39 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 }) => {
   const [ref, { height }] = useElementSize();
   return (
-    <StyledDiv>
-      <button
-        className="accordion-button"
-        onClick={() => setExpanded(expanded ? -1 : index)}
+    <div className="my-2">
+      <Button
+        className={clsx(
+          "bg-klerosUIComponentsWhiteBackground border-klerosUIComponentsStroke border",
+          "hover-medium-blue hover-short-transition hover:cursor-pointer",
+          "rounded-[3px] px-8 py-[11.5px]",
+          "flex w-full items-center justify-between",
+        )}
+        onPress={() => setExpanded(expanded ? -1 : index)}
       >
         {title}
         {expanded ? (
-          <Minus className="accordion-svg" />
+          <Minus
+            className={clsx("fill-klerosUIComponentsPrimaryText h-4 w-4")}
+          />
         ) : (
-          <Plus className="accordion-svg" />
+          <Plus
+            className={clsx("fill-klerosUIComponentsPrimaryText h-4 w-4")}
+          />
         )}
-      </button>
-      <Collapsible expanded={expanded} totalHeight={height}>
-        <Body ref={ref}> {body} </Body>
-      </Collapsible>
-    </StyledDiv>
+      </Button>
+      <div
+        style={{ height: expanded ? `${height.toString()}px` : 0 }}
+        className={clsx(
+          expanded ? `overflow-visible` : "overflow-hidden",
+          "transition-[height] duration-(--klerosUIComponentsTransitionSpeed) ease-initial",
+        )}
+      >
+        <div className="p-8" ref={ref}>
+          {body}
+        </div>
+      </div>
+    </div>
   );
 };
 

src/lib/accordion/custom.tsx

@@ -1,14 +1,6 @@
 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;
-`;
+import clsx from "clsx";
 
 interface AccordionItem {
   title: ReactNode;
@@ -17,12 +9,20 @@ interface AccordionItem {
 
 interface AccordionProps {
   items: AccordionItem[];
+  className?: string;
 }
 
-const CustomAccordion: React.FC<AccordionProps> = ({ items, ...props }) => {
+const CustomAccordion: React.FC<AccordionProps> = ({
+  items,
+  className,
+  ...props
+}) => {
   const [expanded, setExpanded] = useState(-1);
   return (
-    <Wrapper {...props}>
+    <div
+      className={clsx("box-border flex w-[1000px] flex-col", className)}
+      {...props}
+    >
       {items.map((item, index) => (
         <AccordionItem
           key={index}
@@ -33,7 +33,7 @@ const CustomAccordion: React.FC<AccordionProps> = ({ items, ...props }) => {
           expanded={expanded === index}
         />
       ))}
-    </Wrapper>
+    </div>
   );
 };
 

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;
@@ -20,31 +12,28 @@ interface AccordionItem {
 interface AccordionProps {
   items: AccordionItem[];
   defaultExpanded?: number;
+  className?: string;
 }
 
-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.Icon />)}
-    <AccordionTitle>{item.title}</AccordionTitle>
+    <p className="w-fit text-center font-semibold">{item.title}</p>
   </>
 );
 
 const Accordion: React.FC<AccordionProps> = ({
   items,
   defaultExpanded,
+  className,
   ...props
 }) => {
   const [expanded, setExpanded] = useState(defaultExpanded ?? -1);
   return (
-    <Wrapper {...props}>
+    <div
+      className={clsx("box-border flex w-[1000px] flex-col", className)}
+      {...props}
+    >
       {items.map((item, index) => (
         <AccordionItem
           key={index}
@@ -55,7 +44,7 @@ const Accordion: React.FC<AccordionProps> = ({
           expanded={expanded === index}
         />
       ))}
-    </Wrapper>
+    </div>
   );
 };
 

src/styles/global.css

@@ -26,7 +26,7 @@
     --klerosUIComponentsWarning: #ff9900;
     --klerosUIComponentsWarningLight: #fff9f0;
     --klerosUIComponentsError: #f60c36;
-    --klerosUIComponentsErrorLight: #FEF0F3;
+    --klerosUIComponentsErrorLight: #fef0f3;
     --klerosUIComponentsTint: #d14eff;
     --klerosUIComponentsTintMedium: #401d6c;
     --klerosUIComponentsTintPurple: #f4f0fa;
@@ -70,65 +70,38 @@
 
   /* Typography styles */
   h1 {
-    @apply text-2xl font-semibold leading-[33px] m-0;
     color: var(--klerosUIComponentsPrimaryText);
   }
 
   h2 {
-    @apply text-base font-semibold leading-[22px] m-0;
     color: var(--klerosUIComponentsPrimaryText);
   }
 
   p {
-    @apply text-base font-normal leading-[22px] m-0 break-words;
     color: var(--klerosUIComponentsPrimaryText);
   }
 
   small {
-    @apply text-sm font-normal leading-[19px] m-0 break-words;
     color: var(--klerosUIComponentsSecondaryText);
   }
+}
 
-  /* Element styles */
-  hr {
-    @apply opacity-100;
-  }
-
-  svg {
-    @apply inline-block align-middle;
-  }
-
-  img {
-    @apply inline-block align-middle;
-  }
-
-  button {
-    @apply text-base m-0 border-none overflow-visible normal-case;
-  }
-
-  button:hover:enabled {
-    @apply cursor-pointer;
-  }
-
-  input {
-    @apply text-base m-0 border-none overflow-visible;
-  }
-
-  optgroup {
-    @apply text-base m-0 border-none;
-  }
-
-  select {
-    @apply text-base m-0 border-none normal-case;
-  }
-
-  textarea {
-    @apply text-base m-0 border-none;
+@layer components {
+  /* Animations */
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
-  /* Box sizing */
-  .border-box, .border-box *, .border-box *:before, .border-box *:after {
-    @apply box-border;
+  .fade-in {
+    animation: fadeIn 0.3s ease-in-out;
   }
 
   /* Transitions */
@@ -142,28 +115,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;
   }
 }