Merge pull request #68 from kleros/feat/add-accordion-stories

Feat: add accordion stories

Author: alcercu

.storybook/preview.ts

@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import clsx from "clsx";
+
+import type { Preview } from "@storybook/react";
+
+import "../src/styles/global.css";
+
+export type IPreviewArgs = {
+  themeUI: "light" | "dark";
+  backgroundUI: "white" | "light";
+};
+
+const preview: Preview = {
+  decorators: [
+    (Story, { args }) => {
+      const { themeUI, backgroundUI } = args;
+      useEffect(() => {
+        if (themeUI === "dark") document.documentElement.classList.add("dark");
+        else document.documentElement.classList.remove("dark");
+      }, [themeUI]);
+      return (
+        <div
+          className={clsx(
+            "p-4",
+            backgroundUI === "white"
+              ? "bg-klerosUIComponentsWhiteBackground"
+              : "bg-klerosUIComponentsLightBackground",
+          )}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    themeUI: "light",
+    backgroundUI: "white",
+  },
+  argTypes: {
+    themeUI: {
+      options: ["light", "dark"],
+      control: { type: "radio" },
+    },
+    backgroundUI: {
+      options: ["white", "light"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default preview;

.storybook/preview.tsx

@@ -67,6 +67,11 @@ export default [
       react: {
         version: "^16.12.0",
       },
+      "import/resolver": {
+        node: {
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+        },
+      },
     },
 
     rules: {

eslint.config.mjs

@@ -91,6 +91,7 @@
     "simplebar": "^5.3.6",
     "simplebar-react": "^2.3.6",
     "smooth-scroll-into-view-if-needed": "^1.1.33",
+    "tailwind-merge": "^3.0.2",
     "usehooks-ts": "^2.9.1"
   },
   "lint-staged": {

package.json

@@ -3,8 +3,8 @@ import { useElementSize } from "../../hooks/useElementSize";
 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";
+import { cn } from "../../utils";
 
 interface AccordionItemProps {
   setExpanded: React.Dispatch<React.SetStateAction<number>>;
@@ -25,7 +25,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   return (
     <div className="my-2">
       <Button
-        className={clsx(
+        className={cn(
           "bg-klerosUIComponentsWhiteBackground border-klerosUIComponentsStroke border",
           "hover-medium-blue hover-short-transition hover:cursor-pointer",
           "rounded-[3px] px-8 py-[11.5px]",
@@ -35,18 +35,14 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
       >
         {title}
         {expanded ? (
-          <Minus
-            className={clsx("fill-klerosUIComponentsPrimaryText h-4 w-4")}
-          />
+          <Minus className={cn("fill-klerosUIComponentsPrimaryText h-4 w-4")} />
         ) : (
-          <Plus
-            className={clsx("fill-klerosUIComponentsPrimaryText h-4 w-4")}
-          />
+          <Plus className={cn("fill-klerosUIComponentsPrimaryText h-4 w-4")} />
         )}
       </Button>
       <div
         style={{ height: expanded ? `${height.toString()}px` : 0 }}
-        className={clsx(
+        className={cn(
           expanded ? `overflow-visible` : "overflow-hidden",
           "transition-[height] duration-(--klerosUIComponentsTransitionSpeed) ease-initial",
         )}

src/lib/accordion/accordion-item.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import AccordionItem from "./accordion-item";
-import clsx from "clsx";
+import { cn } from "../../utils";
 
 interface AccordionItem {
   title: ReactNode;
@@ -20,7 +20,7 @@ const CustomAccordion: React.FC<AccordionProps> = ({
   const [expanded, setExpanded] = useState(-1);
   return (
     <div
-      className={clsx("box-border flex w-[1000px] flex-col", className)}
+      className={cn("box-border flex w-[1000px] flex-col", className)}
       {...props}
     >
       {items.map((item, index) => (

src/lib/accordion/custom.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import AccordionItem from "./accordion-item";
-import clsx from "clsx";
+import { cn } from "../../utils";
 
 interface AccordionItem {
   title: string;
@@ -31,7 +31,7 @@ const Accordion: React.FC<AccordionProps> = ({
   const [expanded, setExpanded] = useState(defaultExpanded ?? -1);
   return (
     <div
-      className={clsx("box-border flex w-[1000px] flex-col", className)}
+      className={cn("box-border flex w-[1000px] flex-col", className)}
       {...props}
     >
       {items.map((item, index) => (