@elaraai/east-ui-components 0.0.1-beta.4 → 0.0.1-beta.6

package/dist/index.js

@@ -5,9 +5,10 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { memo as memo$2, useMemo, useId as useId$1, isValidElement, forwardRef, useContext, createContext, useState, useCallback, useRef, useImperativeHandle, useEffect, PureComponent, useLayoutEffect, cloneElement, createElement as createElement$1, Children, Component, useReducer } from "react";
 import { match, equalFor, printFor, encodeBeast2For, IRType, BlobType } from "@elaraai/east";
-import { Text as Text$1, Button as Button$1, IconButton as IconButton$1, Sparkline, Chart, Box as Box$1, Stack as Stack$1, Separator as Separator$1, Grid as Grid$1, Splitter as Splitter$1, Accordion as Accordion$1, Carousel as Carousel$1, Tabs as Tabs$1, DataList as DataList$1, Table as Table$1, Icon as Icon$1, TreeView as TreeView$1, Gantt, Badge as Badge$1, Tag as Tag$1, Avatar as Avatar$1, Stat as Stat$1, Input as Input$1, Checkbox as Checkbox$1, Switch as Switch$1, Select as Select$1, Slider as Slider$1, Field as Field$1, Textarea as Textarea$1, TagsInput as TagsInput$1, FileUpload as FileUpload$1, Alert as Alert$1, Progress as Progress$1, Card as Card$1, Tooltip as Tooltip$2, Menu as Menu$1, Popover as Popover$1, HoverCard as HoverCard$1, Dialog as Dialog$1, Drawer as Drawer$1, ActionBar as ActionBar$1, ToggleTip, UIComponentType, state_write, state_read } from "@elaraai/east-ui";
+import { Text as Text$1, Code as Code$1, Heading as Heading$1, Link as Link$1, Highlight as Highlight$1, Mark as Mark$1, List as List$1, CodeBlock as CodeBlock$1, Button as Button$1, IconButton as IconButton$1, Sparkline, Chart, Box as Box$1, Stack as Stack$1, Separator as Separator$1, Grid as Grid$1, Splitter as Splitter$1, Accordion as Accordion$1, Carousel as Carousel$1, Tabs as Tabs$1, DataList as DataList$1, Table as Table$1, Icon as Icon$1, TreeView as TreeView$1, Gantt, Badge as Badge$1, Tag as Tag$1, Avatar as Avatar$1, Stat as Stat$1, Input as Input$1, Checkbox as Checkbox$1, Switch as Switch$1, Select as Select$1, Slider as Slider$1, Field as Field$1, Textarea as Textarea$1, TagsInput as TagsInput$1, FileUpload as FileUpload$1, Alert as Alert$1, Progress as Progress$1, Card as Card$1, Tooltip as Tooltip$2, Menu as Menu$1, Popover as Popover$1, HoverCard as HoverCard$1, Dialog as Dialog$1, Drawer as Drawer$1, ActionBar as ActionBar$1, ToggleTip, UIComponentType, state_write, state_read } from "@elaraai/east-ui";
 import { State, state_read as state_read2, state_write as state_write2 } from "@elaraai/east-ui";
-import { Text as Text$2, Button, IconButton, useChakraContext, useLocaleContext, Box, defineStyle, Stack, Flex, ColorSwatch, HStack, Span, Separator, Show, AbsoluteCenter, Grid, GridItem, Splitter, Accordion, Carousel, Tabs, DataList, Table, Skeleton, createTreeCollection, TreeView, useToken, Badge, Tag, Avatar, Stat, Input, Checkbox, Switch, createListCollection, Select, Portal, Slider, Field, Fieldset, Textarea, TagsInput, FileUpload, Alert, Progress, Card, Tooltip as Tooltip$1, Menu, Popover, HoverCard, Dialog, CloseButton, Drawer, ActionBar } from "@chakra-ui/react";
+import { Text as Text$2, Code, Heading, Link, Highlight, Mark, List, CodeBlock, createShikiAdapter, Box, IconButton, Button, useChakraContext, useLocaleContext, defineStyle, Stack, Flex, ColorSwatch, HStack, Span, Separator, Show, AbsoluteCenter, Grid, GridItem, Splitter, Accordion, Carousel, Tabs, DataList, Table, Skeleton, createTreeCollection, TreeView, useToken, Badge, Tag, Avatar, Stat, Input, Checkbox, Switch, createListCollection, Select, Portal, Slider, Field, Fieldset, Textarea, TagsInput, FileUpload, Alert, Progress, Card, Tooltip as Tooltip$1, Menu, Popover, HoverCard, Dialog, CloseButton, Drawer, ActionBar } from "@chakra-ui/react";
+import { createHighlighter } from "shiki";
 import { createPortal, flushSync } from "react-dom";
 const getSomeorUndefined = (opt) => {
   return match(opt, {
@@ -37,6 +38,160 @@ const EastChakraText = memo$2(function EastChakraText2({ value }) {
   const props = useMemo(() => toChakraText(value), [value]);
   return /* @__PURE__ */ jsx(Text$2, { ...props, children: value.value });
 }, (prev, next) => textEqual(prev.value, next.value));
+const codeEqual = equalFor(Code$1.Types.Code);
+function toChakraCode(value) {
+  var _a, _b;
+  return {
+    variant: (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type,
+    colorPalette: getSomeorUndefined(value.colorPalette),
+    size: (_b = getSomeorUndefined(value.size)) == null ? void 0 : _b.type
+  };
+}
+const EastChakraCode = memo$2(function EastChakraCode2({ value }) {
+  const props = useMemo(() => toChakraCode(value), [value]);
+  return /* @__PURE__ */ jsx(Code, { ...props, children: value.value });
+}, (prev, next) => codeEqual(prev.value, next.value));
+const headingEqual = equalFor(Heading$1.Types.Heading);
+function toChakraHeading(value) {
+  var _a, _b, _c;
+  return {
+    size: (_a = getSomeorUndefined(value.size)) == null ? void 0 : _a.type,
+    as: (_b = getSomeorUndefined(value.as)) == null ? void 0 : _b.type,
+    color: getSomeorUndefined(value.color),
+    textAlign: (_c = getSomeorUndefined(value.textAlign)) == null ? void 0 : _c.type
+  };
+}
+const EastChakraHeading = memo$2(function EastChakraHeading2({ value }) {
+  const props = useMemo(() => toChakraHeading(value), [value]);
+  return /* @__PURE__ */ jsx(Heading, { ...props, children: value.value });
+}, (prev, next) => headingEqual(prev.value, next.value));
+const linkEqual = equalFor(Link$1.Types.Link);
+function toChakraLink(value) {
+  var _a;
+  const external2 = getSomeorUndefined(value.external);
+  return {
+    href: value.href,
+    variant: (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type,
+    colorPalette: getSomeorUndefined(value.colorPalette),
+    ...external2 ? { target: "_blank", rel: "noopener noreferrer" } : {}
+  };
+}
+const EastChakraLink = memo$2(function EastChakraLink2({ value }) {
+  const props = useMemo(() => toChakraLink(value), [value]);
+  return /* @__PURE__ */ jsx(Link, { ...props, children: value.value });
+}, (prev, next) => linkEqual(prev.value, next.value));
+const highlightEqual = equalFor(Highlight$1.Types.Highlight);
+function toChakraHighlight(value) {
+  const color2 = getSomeorUndefined(value.color);
+  return {
+    query: value.query,
+    styles: color2 ? { bg: color2 } : void 0
+  };
+}
+const EastChakraHighlight = memo$2(function EastChakraHighlight2({ value }) {
+  const props = useMemo(() => toChakraHighlight(value), [value]);
+  return /* @__PURE__ */ jsx(Highlight, { query: props.query, styles: props.styles, children: value.value });
+}, (prev, next) => highlightEqual(prev.value, next.value));
+const markEqual = equalFor(Mark$1.Types.Mark);
+function toChakraMark(value) {
+  var _a;
+  return {
+    variant: (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type,
+    colorPalette: getSomeorUndefined(value.colorPalette)
+  };
+}
+const EastChakraMark = memo$2(function EastChakraMark2({ value }) {
+  const props = useMemo(() => toChakraMark(value), [value]);
+  return /* @__PURE__ */ jsx(Mark, { ...props, children: value.value });
+}, (prev, next) => markEqual(prev.value, next.value));
+const listEqual = equalFor(List$1.Types.List);
+function toChakraList(value) {
+  var _a;
+  const variant = (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type;
+  return {
+    as: variant === "ordered" ? "ol" : "ul",
+    gap: getSomeorUndefined(value.gap),
+    colorPalette: getSomeorUndefined(value.colorPalette),
+    ps: "5"
+    // Padding-start for bullet/number markers
+  };
+}
+const EastChakraList = memo$2(function EastChakraList2({ value }) {
+  const props = useMemo(() => toChakraList(value), [value]);
+  return /* @__PURE__ */ jsx(List.Root, { ...props, children: value.items.map((item, index) => /* @__PURE__ */ jsx(List.Item, { children: item }, index)) });
+}, (prev, next) => listEqual(prev.value, next.value));
+const codeBlockEqual = equalFor(CodeBlock$1.Types.CodeBlock);
+let highlighterPromise = null;
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      langs: [
+        "typescript",
+        "javascript",
+        "json",
+        "html",
+        "css",
+        "python",
+        "rust",
+        "go",
+        "sql",
+        "bash",
+        "markdown",
+        "yaml",
+        "xml"
+      ],
+      themes: ["github-dark"]
+    });
+  }
+  return highlighterPromise;
+}
+const shikiAdapter = createShikiAdapter({
+  load: getHighlighter,
+  theme: "github-dark"
+});
+function toCodeBlockProps(value) {
+  const languageVariant = getSomeorUndefined(value.language);
+  const language = languageVariant == null ? void 0 : languageVariant.type;
+  const highlightLinesBigint = getSomeorUndefined(value.highlightLines);
+  const highlightLines = highlightLinesBigint == null ? void 0 : highlightLinesBigint.map((n2) => Number(n2));
+  return {
+    language,
+    showLineNumbers: getSomeorUndefined(value.showLineNumbers),
+    highlightLines,
+    maxHeight: getSomeorUndefined(value.maxHeight),
+    showCopyButton: getSomeorUndefined(value.showCopyButton),
+    title: getSomeorUndefined(value.title)
+  };
+}
+const EastChakraCodeBlock = memo$2(function EastChakraCodeBlock2({ value }) {
+  const props = useMemo(() => toCodeBlockProps(value), [value]);
+  const meta = useMemo(() => {
+    const result = {};
+    if (props.showLineNumbers !== void 0) {
+      result.showLineNumbers = props.showLineNumbers;
+    }
+    if (props.highlightLines !== void 0) {
+      result.highlightLines = props.highlightLines;
+    }
+    return Object.keys(result).length > 0 ? result : void 0;
+  }, [props.showLineNumbers, props.highlightLines]);
+  const showHeader = props.title || props.showCopyButton;
+  return /* @__PURE__ */ jsx(CodeBlock.AdapterProvider, { value: shikiAdapter, children: /* @__PURE__ */ jsx(Box, { maxHeight: props.maxHeight, overflow: "auto", children: /* @__PURE__ */ jsxs(
+    CodeBlock.Root,
+    {
+      code: value.code,
+      language: props.language,
+      meta,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs(CodeBlock.Header, { children: [
+          props.title && /* @__PURE__ */ jsx(CodeBlock.Title, { children: props.title }),
+          props.showCopyButton && /* @__PURE__ */ jsx(CodeBlock.CopyTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "2xs", children: /* @__PURE__ */ jsx(CodeBlock.CopyIndicator, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsx(CodeBlock.Content, { children: /* @__PURE__ */ jsx(CodeBlock.Code, { children: /* @__PURE__ */ jsx(CodeBlock.CodeText, {}) }) })
+      ]
+    }
+  ) }) });
+}, (prev, next) => codeBlockEqual(prev.value, next.value));
 const buttonEqual = equalFor(Button$1.Types.Button);
 function toChakraButton(value) {
   var _a, _b, _c;
@@ -55173,7 +55328,7 @@ const EastChakraHoverCard = memo$2(function EastChakraHoverCard2({ value }) {
       closeDelay,
       children: [
         /* @__PURE__ */ jsx(HoverCard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(EastChakraComponent, { value: value.trigger }) }) }),
-        /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(HoverCard.Positioner, { children: /* @__PURE__ */ jsxs(HoverCard.Content, { children: [
+        /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(HoverCard.Positioner, { children: /* @__PURE__ */ jsxs(HoverCard.Content, { width: "fit-content", maxWidth: "unset", children: [
           hasArrow && /* @__PURE__ */ jsx(HoverCard.Arrow, {}),
           value.body.map((child, index) => /* @__PURE__ */ jsx(EastChakraComponent, { value: child }, index))
         ] }) }) })
@@ -55311,6 +55466,13 @@ const EastChakraComponent = memo$2(function EastChakraComponent2({ value }) {
     return match(value, {
       // Typography
       Text: (v2) => /* @__PURE__ */ jsx(EastChakraText, { value: v2 }),
+      Code: (v2) => /* @__PURE__ */ jsx(EastChakraCode, { value: v2 }),
+      Heading: (v2) => /* @__PURE__ */ jsx(EastChakraHeading, { value: v2 }),
+      Link: (v2) => /* @__PURE__ */ jsx(EastChakraLink, { value: v2 }),
+      Highlight: (v2) => /* @__PURE__ */ jsx(EastChakraHighlight, { value: v2 }),
+      Mark: (v2) => /* @__PURE__ */ jsx(EastChakraMark, { value: v2 }),
+      List: (v2) => /* @__PURE__ */ jsx(EastChakraList, { value: v2 }),
+      CodeBlock: (v2) => /* @__PURE__ */ jsx(EastChakraCodeBlock, { value: v2 }),
       // Buttons
       Button: (v2) => /* @__PURE__ */ jsx(EastChakraButton, { value: v2 }),
       IconButton: (v2) => /* @__PURE__ */ jsx(EastChakraIconButton, { value: v2 }),