feat: work on the node component

src/stories/Collection.stories.tsx

@@ -1,10 +1,16 @@
 import RowyThemeProvider from "@src/theme/RowyThemeProvider";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta } from "@storybook/react";
 import Collection from "./Collection";
 
 export default {
   title: "Example/Collection",
   component: Collection,
+  parameters: {
+    backgrounds: {
+      default: "dark",
+      values: [{ name: "dark", value: "#101013" }],
+    },
+  },
   decorators: [
     (Story) => (
       <RowyThemeProvider>

src/stories/Collection.tsx

@@ -23,7 +23,7 @@ const Collection: FC<ICollectionProps> = () => {
               map(
                 pathObject,
                 (methodObject, method) =>
-                  (methodObject as any).tags.includes(tag.name) && (
+                  (methodObject as any).tags?.includes(tag.name) && (
                     <Grid key={path + method} item width={280}>
                       <OpenApiNode path={path as any} method={method as any} />
                     </Grid>

src/stories/NodeName.tsx

@@ -67,7 +67,7 @@ const NodeName: FC<INodeNameProps> = ({ name, onNameChange, tooltip }) => {
       <Tooltip title={tooltip}>
         <Typography
           variant="caption"
-          mt={0.2}
+          mt={0.1}
           width={112}
           textAlign="center"
           overflow="hidden"

src/stories/OpenApiNode.tsx

@@ -1,7 +1,7 @@
 import { Box, Divider, Stack, Tooltip, Typography } from "@mui/material";
 import { motion } from "framer-motion";
 import { map } from "lodash-es";
-import { SVGProps, useMemo, useRef, useState } from "react";
+import { SVGProps, useMemo, useState } from "react";
 import Node from "./Node";
 import NodeName from "./NodeName";
 import NodeToolbar from "./NodeToolbar";
@@ -101,26 +101,19 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
 );
 
 const Params = ({ meth, collapsed }: any) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const height = useMemo(
-    () => (ref.current ? ref.current.clientHeight : 0),
-    [ref.current]
-  );
-
   return (
     <Stack
       component={motion.div}
       overflow="hidden"
       height={0}
       variants={{
         hidden: { height: 0, opacity: 0 },
-        visible: { height, opacity: 1 },
+        visible: { height: "auto", opacity: 1 },
       }}
       initial="hidden"
       animate={collapsed ? "hidden" : "visible"}
     >
-      <Stack ref={ref} p={1.5} spacing={0.5}>
+      <Stack p={1.5} spacing={0.5}>
         {meth.parameters?.map((param: any) => (
           <Param key={param.name} id={meth.operationId} param={param} />
         ))}