Fix storybook build error

tuzkituan · Apr 21, 2024 · 4cb45b4 · 4cb45b4
1 parent 6beee78
commit 4cb45b4
Show file tree

Hide file tree

Showing 6 changed files with 6,985 additions and 21,178 deletions.
diff --git a/lib/components/menu/menu.tsx b/lib/components/menu/menu.tsx
@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { useMemo, useState } from "react";
-import { Arrow, useLayer } from "react-laag";
+import { useLayer } from "react-laag";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
 import { IMenu, IMenuItem, IMenuKey } from "./menu.types";
@@ -18,7 +18,7 @@ export const Menu = ({
 
   const theme = useComponentStyle("Menu");
 
-  const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
+  const { triggerProps, layerProps, renderLayer } = useLayer({
     isOpen: open || isOpen,
     placement,
     auto: true,
@@ -41,9 +41,9 @@ export const Menu = ({
     return twMerge(theme.itemIcon());
   }, [theme]);
 
-  const arrowClasses = useMemo(() => {
-    return twMerge(theme.arrow());
-  }, [theme]);
+  // const arrowClasses = useMemo(() => {
+  //   return twMerge(theme.arrow());
+  // }, [theme]);
 
   const onMenuItemClick = (value: IMenuKey) => {
     if (value) {
@@ -90,14 +90,14 @@ export const Menu = ({
               {...layerProps}
             >
               {renderMenuItems()}
-              <Arrow
-                {...arrowProps}
+              {/* <Arrow
                 backgroundColor="var(--color-neutral-5)" // color-component-background
                 borderColor="transparent"
                 className={arrowClasses}
                 borderWidth={1}
                 size={8}
-              />
+                {...arrowProps}
+              /> */}
             </motion.ul>
           </AnimatePresence>
         )}

diff --git a/lib/components/popover/popover.tsx b/lib/components/popover/popover.tsx
@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { useMemo, useState } from "react";
-import { Arrow, useLayer } from "react-laag";
+import { useLayer } from "react-laag";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
 import { IPopover } from "./popover.types";
@@ -17,7 +17,7 @@ export const Popover = ({
 
   const theme = useComponentStyle("Popover");
 
-  const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
+  const { triggerProps, layerProps, renderLayer } = useLayer({
     isOpen: open || isOpen,
     placement,
     auto: true,
@@ -32,9 +32,9 @@ export const Popover = ({
     return twMerge(theme.base(), popoverClassName);
   }, [popoverClassName, theme]);
 
-  const arrowClasses = useMemo(() => {
-    return twMerge(theme.arrow());
-  }, [theme]);
+  // const arrowClasses = useMemo(() => {
+  //   return twMerge(theme.arrow());
+  // }, [theme]);
 
   return (
     <>
@@ -59,14 +59,14 @@ export const Popover = ({
               {...layerProps}
             >
               {content}
-              <Arrow
+              {/* <Arrow
                 {...arrowProps}
                 backgroundColor="var(--color-neutral-5)" // color-component-background
                 borderColor="transparent"
                 className={arrowClasses}
                 borderWidth={1}
                 size={8} 
-              />
+              /> */}
             </motion.div>
           </AnimatePresence>
         )}

diff --git a/lib/components/tooltip/tooltip.tsx b/lib/components/tooltip/tooltip.tsx
@@ -1,9 +1,9 @@
-import { Arrow, useHover, useLayer } from "react-laag";
+import { AnimatePresence, motion } from "framer-motion";
+import { useMemo } from "react";
+import { useHover, useLayer } from "react-laag";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
-import { AnimatePresence, motion } from "framer-motion";
 import { ITooltip } from "./tooltip.types";
-import { useMemo } from "react";
 
 export const Tooltip = ({
   children,
@@ -15,7 +15,7 @@ export const Tooltip = ({
 
   const theme = useComponentStyle("Tooltip");
 
-  const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
+  const { triggerProps, layerProps, renderLayer } = useLayer({
     isOpen: isHover,
     placement,
     auto: true,
@@ -26,9 +26,9 @@ export const Tooltip = ({
     return twMerge(theme.base(), tooltipClassName);
   }, [tooltipClassName, theme]);
 
-  const arrowClasses = useMemo(() => {
-    return twMerge(theme.arrow());
-  }, [theme]);
+  // const arrowClasses = useMemo(() => {
+  //   return twMerge(theme.arrow());
+  // }, [theme]);
 
   return (
     <>
@@ -46,13 +46,13 @@ export const Tooltip = ({
               {...layerProps}
             >
               {content}
-              <Arrow
+              {/* <Arrow
                 {...arrowProps}
                 backgroundColor="black"
                 className={arrowClasses}
                 borderWidth={1}
                 size={6}
-              />
+              /> */}
             </motion.div>
           </AnimatePresence>
         )}