@acmekit/docs-ui 2.13.41

package/src/components/CodeBlock/Actions/index.tsx

@@ -0,0 +1,137 @@
+
+import clsx from "clsx"
+import React from "react"
+import { Link } from "../../../components/Link"
+import { Tooltip } from "../../../components/Tooltip"
+import { ExclamationCircle, PlaySolid } from "@acmekit/icons"
+import { GITHUB_ISSUES_LINK } from "../../../constants"
+import { CodeBlockCopyAction } from "./Copy"
+import { CodeBlockAskAiAction } from "./AskAi"
+
+export type CodeBlockActionsProps = {
+  source: string
+  isSingleLine?: boolean
+  inHeader: boolean
+  showGradientBg?: boolean
+  inInnerCode?: boolean
+  isCollapsed: boolean
+  canShowApiTesting?: boolean
+  onApiTesting?: React.Dispatch<React.SetStateAction<boolean>>
+  noReport?: boolean
+  noCopy?: boolean
+  noAskAi?: boolean
+}
+
+export const CodeBlockActions = ({
+  source,
+  inHeader,
+  showGradientBg = true,
+  inInnerCode = false,
+  isCollapsed,
+  isSingleLine = false,
+  canShowApiTesting = false,
+  onApiTesting,
+  noReport = false,
+  noCopy = false,
+  noAskAi = false,
+}: CodeBlockActionsProps) => {
+  const iconClassName = [
+    "text-acmekit-contrast-fg-secondary",
+    "group-hover:text-acmekit-contrast-fg-primary",
+    "group-focus:text-acmekit-contrast-fg-primary",
+  ]
+
+  return (
+    <div
+      className={clsx(
+        "hidden md:block",
+        !inHeader &&
+          "xs:rounded xs:absolute xs:right-0 xs:top-0 xs:w-[calc(17%+10px)] xs:h-full"
+      )}
+    >
+      {!inHeader && (
+        <div
+          className={clsx(
+            !inHeader &&
+              showGradientBg && [
+                inInnerCode &&
+                  "xs:bg-subtle-code-fade-right-to-left dark:xs:bg-subtle-code-fade-right-to-left-dark",
+                !inInnerCode &&
+                  "xs:bg-base-code-fade-right-to-left dark:xs:bg-base-code-fade-right-to-left-dark",
+              ],
+            (inHeader || !showGradientBg) && "xs:bg-transparent",
+            "z-[9] w-full h-full absolute top-0 left-0"
+          )}
+        />
+      )}
+      <div
+        className={clsx(
+          "md:flex md:justify-end md:gap-docs_0.25 relative",
+          !inHeader && [
+            "md:pr-docs_0.5 z-[11]",
+            isCollapsed && "md:pt-docs_2.5",
+            !isCollapsed && [
+              isSingleLine && "md:pt-docs_0.25",
+              !isSingleLine && "md:pt-docs_0.5",
+            ],
+          ]
+        )}
+      >
+        {!noAskAi && (
+          <CodeBlockAskAiAction source={source} inHeader={inHeader} />
+        )}
+        {canShowApiTesting && (
+          <Tooltip
+            text="Test API"
+            tooltipClassName="font-base"
+            className={clsx("group")}
+            innerClassName={clsx(
+              inHeader && "flex",
+              "h-fit rounded-docs_sm",
+              "group-hover:bg-acmekit-contrast-bg-base-hover group-focus:bg-acmekit-contrast-bg-base-hover"
+            )}
+          >
+            <span
+              className={clsx(
+                !inHeader && "p-[6px]",
+                inHeader && "p-[4.5px]",
+                "cursor-pointer"
+              )}
+              onClick={() => onApiTesting?.(true)}
+            >
+              <PlaySolid className={clsx(iconClassName)} />
+            </span>
+          </Tooltip>
+        )}
+        {!noReport && (
+          <Tooltip
+            text="Report Issue"
+            tooltipClassName="font-base"
+            className={clsx("group")}
+            innerClassName={clsx(
+              inHeader && "flex",
+              "h-fit rounded-docs_sm",
+              "group-hover:bg-acmekit-contrast-bg-base-hover group-focus:bg-acmekit-contrast-bg-base-hover"
+            )}
+          >
+            <Link
+              href={GITHUB_ISSUES_LINK}
+              target="_blank"
+              className={clsx(
+                "bg-transparent border-none cursor-pointer rounded",
+                "[&:not(:first-child)]:ml-docs_0.5",
+                "inline-flex justify-center items-center invisible xs:visible",
+                !inHeader && "p-[6px]",
+                inHeader && "p-[4.5px]"
+              )}
+              rel="noreferrer"
+            >
+              <ExclamationCircle className={clsx(iconClassName)} />
+            </Link>
+          </Tooltip>
+        )}
+        {!noCopy && <CodeBlockCopyAction source={source} inHeader={inHeader} />}
+      </div>
+    </div>
+  )
+}

package/src/components/CodeBlock/Collapsible/Button/index.tsx

@@ -0,0 +1,58 @@
+
+import clsx from "clsx"
+import React from "react"
+import { CollapsibleReturn } from "../../../../hooks/use-collapsible"
+import { Button } from "@acmekit/ui"
+
+export type CodeBlockCollapsibleButtonProps = {
+  type: "start" | "end"
+  expandButtonLabel?: string
+  className?: string
+} & Omit<CollapsibleReturn, "getCollapsibleElms">
+
+export const CodeBlockCollapsibleButton = ({
+  type,
+  expandButtonLabel = "Show more",
+  collapsed,
+  setCollapsed,
+  className,
+}: CodeBlockCollapsibleButtonProps) => {
+  if (!collapsed) {
+    return <></>
+  }
+
+  return (
+    <>
+      {type === "start" && (
+        <Button
+          className={clsx(
+            "font-base w-full !p-docs_0.5 !shadow-none z-10",
+            "bg-acmekit-contrast-button hover:bg-acmekit-contrast-button-hover",
+            "txt-compact-xsmall text-acmekit-contrast-fg-secondary",
+            type === "start" && "rounded-t-docs_DEFAULT rounded-b-none",
+            className
+          )}
+          data-testid="collapsible-button-start"
+          onClick={() => setCollapsed(false)}
+        >
+          {expandButtonLabel}
+        </Button>
+      )}
+      {type === "end" && (
+        <Button
+          className={clsx(
+            "font-base w-full !p-docs_0.5 !shadow-none z-10",
+            "bg-acmekit-contrast-button hover:bg-acmekit-contrast-button-hover",
+            "txt-compact-xsmall text-acmekit-contrast-fg-secondary",
+            "rounded-t-none rounded-b-docs_DEFAULT",
+            className
+          )}
+          data-testid="collapsible-button-end"
+          onClick={() => setCollapsed(false)}
+        >
+          {expandButtonLabel}
+        </Button>
+      )}
+    </>
+  )
+}

package/src/components/CodeBlock/Collapsible/Fade/index.tsx

@@ -0,0 +1,55 @@
+import clsx from "clsx"
+import React from "react"
+import { CollapsibleReturn } from "../../../../hooks/use-collapsible"
+
+export type CodeBlockCollapsibleFadeProps = {
+  type: "start" | "end"
+  hasHeader?: boolean
+} & Pick<CollapsibleReturn, "collapsed">
+
+export const CodeBlockCollapsibleFade = ({
+  type,
+  hasHeader = false,
+  collapsed,
+}: CodeBlockCollapsibleFadeProps) => {
+  if (!collapsed) {
+    return <></>
+  }
+
+  return (
+    <span
+      className={clsx(
+        "absolute flex flex-col z-10",
+        hasHeader && "left-[6px] w-[calc(100%-12px)]",
+        !hasHeader && "w-full left-0",
+        type === "start" && [
+          hasHeader && "top-[44px]",
+          !hasHeader && "top-[36px]",
+        ],
+        type === "end" && [
+          hasHeader && "bottom-[44px]",
+          !hasHeader && "bottom-[36px]",
+        ]
+      )}
+    >
+      {type === "end" && (
+        <span
+          className={clsx(
+            "w-full h-[56px]",
+            "bg-code-fade-bottom-to-top dark:bg-code-fade-bottom-to-top-dark"
+          )}
+          data-testid="collapsible-fade-end"
+        />
+      )}
+      {type === "start" && (
+        <span
+          className={clsx(
+            "w-full h-[56px]",
+            "bg-code-fade-top-to-bottom dark:bg-code-fade-top-to-bottom-dark"
+          )}
+          data-testid="collapsible-fade-start"
+        />
+      )}
+    </span>
+  )
+}

package/src/components/CodeBlock/Collapsible/Lines/index.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { CollapsibleReturn } from "../../../../hooks/use-collapsible"
+
+export type CodeBlockCollapsibleLinesProps = {
+  children: React.ReactNode
+  type: "start" | "end"
+} & Pick<CollapsibleReturn, "collapsed">
+
+export const CodeBlockCollapsibleLines = ({
+  children,
+  type,
+  collapsed,
+}: CodeBlockCollapsibleLinesProps) => {
+  const isStart = type === "start"
+  return (
+    <>
+      {collapsed && Array.isArray(children)
+        ? children.slice(isStart ? -2 : 0, isStart ? undefined : 2)
+        : children}
+    </>
+  )
+}

package/src/components/CodeBlock/Header/Wrapper/index.tsx

@@ -0,0 +1,46 @@
+import clsx from "clsx"
+import React, { useMemo } from "react"
+import { useColorMode } from "../../../../providers/ColorMode"
+import { CodeBlockStyle } from "../../../CodeBlock"
+
+export type CodeBlockHeaderWrapperProps = {
+  blockStyle?: CodeBlockStyle
+  children: React.ReactNode
+}
+
+export const CodeBlockHeaderWrapper = React.forwardRef<
+  HTMLDivElement,
+  CodeBlockHeaderWrapperProps
+>(function CodeBlockHeaderWrapper({ children, blockStyle = "loud" }, ref) {
+  const { colorMode } = useColorMode()
+
+  const bgColor = useMemo(
+    () =>
+      clsx(
+        blockStyle === "loud" && "bg-acmekit-contrast-bg-base",
+        blockStyle === "subtle" && [
+          colorMode === "light" && "bg-acmekit-bg-component",
+          colorMode === "dark" && "bg-acmekit-code-bg-header",
+        ]
+      ),
+    [blockStyle, colorMode]
+  )
+
+  return (
+    <div
+      className={clsx(
+        "py-docs_0.5 px-docs_1 mb-0",
+        "rounded-t-docs_lg relative flex justify-between items-center",
+        blockStyle === "subtle" && [
+          "border border-solid border-b-0",
+          colorMode === "light" && "border-acmekit-border-base",
+          colorMode === "dark" && "border-acmekit-code-border",
+        ],
+        bgColor
+      )}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})

package/src/components/CodeBlock/Header/index.tsx

@@ -0,0 +1,67 @@
+
+import React, { useMemo } from "react"
+import clsx from "clsx"
+import { CodeBlockStyle } from "../../CodeBlock"
+import { useColorMode } from "../../../providers/ColorMode"
+import { Badge, BadgeVariant } from "../../../components/Badge"
+import { CodeBlockActions, CodeBlockActionsProps } from "../Actions"
+import { CodeBlockHeaderWrapper } from "./Wrapper"
+
+export type CodeBlockHeaderMeta = {
+  badgeLabel?: string
+  badgeColor?: BadgeVariant
+}
+
+export type CodeBlockHeaderProps = {
+  title?: string
+  blockStyle?: CodeBlockStyle
+  actionsProps: CodeBlockActionsProps
+  hideActions?: boolean
+} & CodeBlockHeaderMeta
+
+export const CodeBlockHeader = ({
+  title,
+  blockStyle = "loud",
+  badgeLabel,
+  actionsProps,
+  badgeColor,
+  hideActions = false,
+}: CodeBlockHeaderProps) => {
+  const { colorMode } = useColorMode()
+
+  const titleColor = useMemo(
+    () =>
+      clsx(
+        blockStyle === "loud" && "text-acmekit-contrast-fg-secondary",
+        blockStyle === "subtle" && [
+          colorMode === "light" && "text-acmekit-fg-subtle",
+          colorMode === "dark" && "text-acmekit-contrast-fg-secondary",
+        ]
+      ),
+    [blockStyle, colorMode]
+  )
+
+  return (
+    <CodeBlockHeaderWrapper blockStyle={blockStyle}>
+      <div
+        className={clsx("flex-1", "flex gap-docs_0.75 items-start")}
+        data-testid="code-block-header"
+      >
+        {badgeLabel && (
+          <Badge variant={badgeColor || "code"} className="font-base">
+            {badgeLabel}
+          </Badge>
+        )}
+        {title && (
+          <div
+            className={clsx("text-compact-x-small font-base", titleColor)}
+            data-testid="code-block-header-title"
+          >
+            {title}
+          </div>
+        )}
+      </div>
+      {!hideActions && <CodeBlockActions {...actionsProps} />}
+    </CodeBlockHeaderWrapper>
+  )
+}

package/src/components/CodeBlock/Inline/index.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import clsx from "clsx"
+import { CodeBlockProps } from "../../.."
+
+export const CodeBlockInline = ({ source }: CodeBlockProps) => {
+  return (
+    <pre
+      className={clsx(
+        "px-[6px] bg-acmekit-tag-neutral-bg",
+        "w-full my-docs_0.5 rounded-docs_sm",
+        "border border-acmekit-tag-neutral-border",
+        "whitespace-pre-wrap"
+      )}
+    >
+      <code className="w-full text-code-label text-acmekit-tag-neutral-text">
+        {source}
+      </code>
+    </pre>
+  )
+}