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: {