@alepha/ui 0.13.6 → 0.13.8

package/src/core/components/buttons/ToggleSidebarButton.tsx

@@ -1,4 +1,5 @@
 import { useStore } from "@alepha/react";
+import { Flex } from "@mantine/core";
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
@@ -9,22 +10,24 @@ const ToggleSidebarButton = () => {
   const [collapsed, setCollapsed] = useStore("alepha.ui.sidebar.collapsed");
 
   return (
-    <ActionButton
-      icon={
-        collapsed ? (
-          <IconLayoutSidebarRightCollapse />
-        ) : (
-          <IconLayoutSidebarLeftCollapse />
-        )
-      }
-      variant={"subtle"}
-      size={"md"}
-      onClick={() => setCollapsed(!collapsed)}
-      tooltip={{
-        position: "right",
-        label: collapsed ? "Show sidebar" : "Hide sidebar",
-      }}
-    />
+    <Flex>
+      <ActionButton
+        icon={
+          collapsed ? (
+            <IconLayoutSidebarRightCollapse />
+          ) : (
+            <IconLayoutSidebarLeftCollapse />
+          )
+        }
+        variant={"subtle"}
+        size={"md"}
+        onClick={() => setCollapsed(!collapsed)}
+        tooltip={{
+          position: "right",
+          label: collapsed ? "Show sidebar" : "Hide sidebar",
+        }}
+      />
+    </Flex>
   );
 };
 

package/src/core/components/data/ErrorViewer.tsx

@@ -0,0 +1,171 @@
+import {
+  ActionIcon,
+  Box,
+  Collapse,
+  CopyButton,
+  type MantineSize,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconCheck,
+  IconChevronDown,
+  IconChevronRight,
+  IconCopy,
+} from "@tabler/icons-react";
+import { useState } from "react";
+
+interface ErrorViewerProps {
+  error: Error | unknown;
+  showStack?: boolean;
+  copyable?: boolean;
+  size?: MantineSize;
+}
+
+const getSizeConfig = (size: MantineSize = "sm") => {
+  const configs = {
+    xs: { text: "xs", icon: 12, gap: 2 },
+    sm: { text: "sm", icon: 14, gap: 4 },
+    md: { text: "md", icon: 16, gap: 6 },
+    lg: { text: "lg", icon: 18, gap: 8 },
+    xl: { text: "xl", icon: 20, gap: 10 },
+  };
+  return configs[size] || configs.sm;
+};
+
+const parseStackTrace = (stack: string): string[] => {
+  return stack
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+};
+
+export const ErrorViewer = ({
+  error,
+  showStack = true,
+  copyable = true,
+  size = "sm",
+}: ErrorViewerProps) => {
+  const [stackExpanded, setStackExpanded] = useState(false);
+  const sizeConfig = getSizeConfig(size);
+  const copyIconSize = sizeConfig.icon + 2;
+
+  const isError = error instanceof Error;
+  const errorName = isError ? error.name : "Error";
+  const errorMessage = isError ? error.message : String(error);
+  const errorStack = isError ? error.stack : undefined;
+  const stackLines = errorStack ? parseStackTrace(errorStack) : [];
+
+  const getCopyContent = () => {
+    if (isError) {
+      return `${errorName}: ${errorMessage}${errorStack ? `\n\n${errorStack}` : ""}`;
+    }
+    return String(error);
+  };
+
+  return (
+    <Box pos="relative" w="100%">
+      {copyable && (
+        <Box pos="absolute" top={0} right={0} style={{ zIndex: 1 }}>
+          <CopyButton value={getCopyContent()}>
+            {({ copied, copy }) => (
+              <Tooltip label={copied ? "Copied" : "Copy Error"}>
+                <ActionIcon
+                  color={copied ? "teal" : "gray"}
+                  variant="subtle"
+                  onClick={copy}
+                  size={size}
+                >
+                  {copied ? (
+                    <IconCheck size={copyIconSize} />
+                  ) : (
+                    <IconCopy size={copyIconSize} />
+                  )}
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </CopyButton>
+        </Box>
+      )}
+      <Box pt={copyable ? 30 : 0}>
+        <Box
+          style={{
+            display: "flex",
+            alignItems: "flex-start",
+            gap: sizeConfig.gap,
+          }}
+        >
+          <Text
+            component="span"
+            c="red"
+            ff="monospace"
+            fw={600}
+            size={sizeConfig.text}
+          >
+            {errorName}:
+          </Text>
+          <Text
+            component="span"
+            ff="monospace"
+            size={sizeConfig.text}
+            style={{ wordBreak: "break-word" }}
+          >
+            {errorMessage}
+          </Text>
+        </Box>
+
+        {showStack && stackLines.length > 1 && (
+          <Box mt="sm">
+            <Box
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: sizeConfig.gap,
+                cursor: "pointer",
+              }}
+              onClick={() => setStackExpanded(!stackExpanded)}
+            >
+              <ActionIcon size="xs" variant="transparent" c="dimmed">
+                {stackExpanded ? (
+                  <IconChevronDown size={sizeConfig.icon} />
+                ) : (
+                  <IconChevronRight size={sizeConfig.icon} />
+                )}
+              </ActionIcon>
+              <Text c="dimmed" size={sizeConfig.text} fw={500}>
+                Stack Trace ({stackLines.length - 1} frames)
+              </Text>
+            </Box>
+
+            <Collapse in={stackExpanded}>
+              <Box
+                mt="xs"
+                pl="md"
+                style={{
+                  borderLeft: "1px solid var(--mantine-color-default-border)",
+                }}
+              >
+                {stackLines.slice(1).map((line, index) => (
+                  <Text
+                    key={index}
+                    ff="monospace"
+                    size="xs"
+                    c="dimmed"
+                    style={{
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-all",
+                    }}
+                  >
+                    {line}
+                  </Text>
+                ))}
+              </Box>
+            </Collapse>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default ErrorViewer;

package/src/core/components/data/JsonViewer.tsx

@@ -31,15 +31,16 @@ interface JsonNodeProps {
   isLast?: boolean;
   isArrayItem?: boolean;
   size?: MantineSize;
+  iconWidth: number;
 }
 
 const getSizeConfig = (size: MantineSize = "sm") => {
   const configs = {
-    xs: { text: "xs", icon: 12, indent: 16, gap: 2 },
-    sm: { text: "sm", icon: 14, indent: 20, gap: 4 },
-    md: { text: "md", icon: 16, indent: 24, gap: 6 },
-    lg: { text: "lg", icon: 18, indent: 28, gap: 8 },
-    xl: { text: "xl", icon: 20, indent: 32, gap: 10 },
+    xs: { text: "xs" as const, icon: 12, indent: 16, gap: 4, iconWidth: 18 },
+    sm: { text: "sm" as const, icon: 14, indent: 20, gap: 6, iconWidth: 20 },
+    md: { text: "md" as const, icon: 16, indent: 24, gap: 8, iconWidth: 22 },
+    lg: { text: "lg" as const, icon: 18, indent: 28, gap: 10, iconWidth: 24 },
+    xl: { text: "xl" as const, icon: 20, indent: 32, gap: 12, iconWidth: 26 },
   };
   return configs[size] || configs.sm;
 };
@@ -52,6 +53,7 @@ const JsonNode = ({
   isLast = false,
   isArrayItem = false,
   size = "sm",
+  iconWidth,
 }: JsonNodeProps) => {
   const [expanded, setExpanded] = useState(depth < 2);
   const sizeConfig = getSizeConfig(size);
@@ -68,83 +70,50 @@ const JsonNode = ({
   const renderPrimitive = (val: any): ReactNode => {
     const type = getValueType(val);
 
+    const textProps = {
+      component: "span" as const,
+      ff: "monospace" as const,
+      size: sizeConfig.text,
+    };
+
     switch (type) {
       case "string":
         return (
-          <Text
-            component="span"
-            c="teal"
-            ff="monospace"
-            size={sizeConfig.text}
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <Text {...textProps} c="teal">
             "{val}"
           </Text>
         );
       case "number":
         return (
-          <Text
-            component="span"
-            c="blue"
-            ff="monospace"
-            size={sizeConfig.text}
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <Text {...textProps} c="blue">
             {val}
           </Text>
         );
       case "boolean":
         return (
-          <Text
-            component="span"
-            c="violet"
-            ff="monospace"
-            size={sizeConfig.text}
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <Text {...textProps} c="violet">
             {String(val)}
           </Text>
         );
       case "null":
         return (
-          <Text
-            component="span"
-            c="dimmed"
-            ff="monospace"
-            size={sizeConfig.text}
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <Text {...textProps} c="dimmed">
             null
           </Text>
         );
       case "undefined":
         return (
-          <Text
-            component="span"
-            c="dimmed"
-            ff="monospace"
-            size={sizeConfig.text}
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <Text {...textProps} c="dimmed">
             undefined
           </Text>
         );
       default:
-        return (
-          <Text
-            component="span"
-            ff="monospace"
-            size={sizeConfig.text}
-            style={{ whiteSpace: "nowrap" }}
-          >
-            {String(val)}
-          </Text>
-        );
+        return <Text {...textProps}>{String(val)}</Text>;
     }
   };
 
   const renderKey = () => {
-    if (!name) return null;
+    if (name === undefined) return null;
     return (
       <Text
         component="span"
@@ -153,11 +122,17 @@ const JsonNode = ({
         fw={500}
         size={sizeConfig.text}
       >
-        {isArrayItem ? `[${name}]` : `"${name}"`}:
+        {isArrayItem ? `[${name}]` : `"${name}"`}
       </Text>
     );
   };
 
+  const comma = !isLast && (
+    <Text component="span" c="dimmed" ff="monospace" size={sizeConfig.text}>
+      ,
+    </Text>
+  );
+
   if (valueType === "object" || valueType === "array") {
     const isObject = valueType === "object";
     const entries = isObject
@@ -173,81 +148,98 @@ const JsonNode = ({
       <Box>
         <Box
           style={{
-            display: "flex",
+            display: "grid",
+            gridTemplateColumns: `${iconWidth}px auto`,
             alignItems: "center",
-            gap: sizeConfig.gap,
-            minWidth: "max-content",
           }}
         >
-          {canExpand && (
-            <ActionIcon
-              size="xs"
-              variant="transparent"
-              c="dimmed"
-              onClick={() => setExpanded(!expanded)}
-              style={{ cursor: "pointer", flexShrink: 0 }}
-            >
-              {expanded ? (
-                <IconChevronDown size={sizeConfig.icon} />
-              ) : (
-                <IconChevronRight size={sizeConfig.icon} />
-              )}
-            </ActionIcon>
-          )}
-          {!canExpand && (
-            <Box w={sizeConfig.icon + 6} style={{ flexShrink: 0 }} />
-          )}
-          <Box style={{ flexShrink: 0 }}>{renderKey()}</Box>{" "}
-          <Text
-            component="span"
-            c="dimmed"
-            ff="monospace"
-            size={sizeConfig.text}
-            style={{ flexShrink: 0 }}
+          <Box
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
           >
-            {brackets[0]}
-          </Text>
-          {!expanded && !isEmpty && (
-            <Text
-              component="span"
-              c="dimmed"
-              ff="monospace"
-              fs="italic"
-              size={sizeConfig.text}
-              style={{ flexShrink: 0 }}
-            >
-              {preview}
-            </Text>
-          )}
-          {(isEmpty || !expanded) && (
+            {canExpand && (
+              <ActionIcon
+                size="xs"
+                variant="transparent"
+                c="dimmed"
+                onClick={() => setExpanded(!expanded)}
+                style={{ cursor: "pointer" }}
+              >
+                {expanded ? (
+                  <IconChevronDown size={sizeConfig.icon} />
+                ) : (
+                  <IconChevronRight size={sizeConfig.icon} />
+                )}
+              </ActionIcon>
+            )}
+          </Box>
+          <Box
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: sizeConfig.gap,
+            }}
+          >
+            {renderKey()}
+            {name !== undefined && (
+              <Text
+                component="span"
+                c="dimmed"
+                ff="monospace"
+                size={sizeConfig.text}
+              >
+                :
+              </Text>
+            )}
             <Text
               component="span"
               c="dimmed"
               ff="monospace"
               size={sizeConfig.text}
-              style={{ flexShrink: 0 }}
-            >
-              {brackets[1]}
-            </Text>
-          )}
-          {!isEmpty && !expanded && (
-            <Text
-              component="span"
-              c="dimmed"
-              size={sizeConfig.text}
-              style={{ flexShrink: 0 }}
             >
-              {entries.length} {entries.length === 1 ? "item" : "items"}
+              {brackets[0]}
             </Text>
-          )}
+            {!expanded && !isEmpty && (
+              <Text
+                component="span"
+                c="dimmed"
+                ff="monospace"
+                fs="italic"
+                size={sizeConfig.text}
+              >
+                {preview}
+              </Text>
+            )}
+            {(isEmpty || !expanded) && (
+              <>
+                <Text
+                  component="span"
+                  c="dimmed"
+                  ff="monospace"
+                  size={sizeConfig.text}
+                >
+                  {brackets[1]}
+                </Text>
+                {comma}
+              </>
+            )}
+            {!isEmpty && !expanded && (
+              <Text component="span" c="dimmed" size={sizeConfig.text}>
+                {entries.length} {entries.length === 1 ? "item" : "items"}
+              </Text>
+            )}
+          </Box>
         </Box>
 
         <Collapse in={expanded && canExpand}>
           <Box
             pl={sizeConfig.indent}
+            ml={iconWidth / 2}
             style={{
               borderLeft: "1px solid var(--mantine-color-default-border)",
-              marginLeft: Math.floor((sizeConfig.icon + 6) / 2),
             }}
           >
             {entries.map(
@@ -261,20 +253,24 @@ const JsonNode = ({
                   isLast={index === entries.length - 1}
                   isArrayItem={!isObject}
                   size={size}
+                  iconWidth={iconWidth}
                 />
               ),
             )}
           </Box>
-          <Box style={{ display: "flex", minWidth: "max-content" }}>
-            <Box w={sizeConfig.icon + 6} style={{ flexShrink: 0 }} />
-            <Text
-              c="dimmed"
-              ff="monospace"
-              size={sizeConfig.text}
-              style={{ flexShrink: 0 }}
-            >
-              {brackets[1]}
-            </Text>
+          <Box
+            style={{
+              display: "grid",
+              gridTemplateColumns: `${iconWidth}px auto`,
+            }}
+          >
+            <Box />
+            <Box style={{ display: "flex", gap: sizeConfig.gap }}>
+              <Text c="dimmed" ff="monospace" size={sizeConfig.text}>
+                {brackets[1]}
+              </Text>
+              {comma}
+            </Box>
           </Box>
         </Collapse>
       </Box>
@@ -284,26 +280,33 @@ const JsonNode = ({
   return (
     <Box
       style={{
-        display: "flex",
+        display: "grid",
+        gridTemplateColumns: `${iconWidth}px auto`,
         alignItems: "center",
-        gap: sizeConfig.gap,
-        minWidth: "max-content",
       }}
     >
-      <Box w={sizeConfig.icon + 6} style={{ flexShrink: 0 }} />
-      <Box style={{ flexShrink: 0 }}>{renderKey()}</Box>
-      <Box style={{ flexShrink: 0 }}>{renderPrimitive(value)}</Box>
-      {!isLast && (
-        <Text
-          component="span"
-          c="dimmed"
-          ff="monospace"
-          size={sizeConfig.text}
-          style={{ flexShrink: 0 }}
-        >
-          ,
-        </Text>
-      )}
+      <Box />
+      <Box
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: sizeConfig.gap,
+        }}
+      >
+        {renderKey()}
+        {name !== undefined && (
+          <Text
+            component="span"
+            c="dimmed"
+            ff="monospace"
+            size={sizeConfig.text}
+          >
+            :
+          </Text>
+        )}
+        {renderPrimitive(value)}
+        {comma}
+      </Box>
     </Box>
   );
 };
@@ -319,7 +322,7 @@ export const JsonViewer = ({
   const copyIconSize = sizeConfig.icon + 2;
 
   return (
-    <Box pos="relative" w={"100%"}>
+    <Box pos="relative" w="100%">
       {copyable && (
         <Box pos="absolute" top={0} right={0} style={{ zIndex: 1 }}>
           <CopyButton value={JSON.stringify(data, null, 2)}>
@@ -343,7 +346,13 @@ export const JsonViewer = ({
         </Box>
       )}
       <Box pt={copyable ? 30 : 0} style={{ overflowX: "auto" }}>
-        <JsonNode value={data} depth={0} maxDepth={maxDepth} size={size} />
+        <JsonNode
+          value={data}
+          depth={0}
+          maxDepth={maxDepth}
+          size={size}
+          iconWidth={sizeConfig.iconWidth}
+        />
       </Box>
     </Box>
   );