@acmekit/docs-ui 2.13.41

package/src/components/Notification/Item/Layout/Default/index.tsx

@@ -0,0 +1,89 @@
+import React from "react"
+import { NotificationItemProps } from "../../../../../components/Notification/Item"
+import clsx from "clsx"
+import {
+  CheckCircleSolid,
+  ExclamationCircleSolid,
+  InformationCircleSolid,
+  XCircleSolid,
+} from "@acmekit/icons"
+import { Button } from "../../../../../components/Button"
+
+export type NotificationItemLayoutDefaultProps = NotificationItemProps & {
+  handleClose: () => void
+  closeButtonText?: string
+}
+
+export const NotificationItemLayoutDefault: React.FC<
+  NotificationItemLayoutDefaultProps
+> = ({
+  type = "info",
+  title = "",
+  text = "",
+  children,
+  isClosable = true,
+  handleClose,
+  CustomIcon,
+  closeButtonText = "Close",
+}) => {
+  return (
+    <div
+      className="bg-acmekit-bg-base w-full h-full shadow-elevation-flyout dark:shadow-elevation-flyout-dark rounded-docs_DEFAULT"
+      data-testid="default-layout"
+    >
+      <div className={clsx("flex gap-docs_1 p-docs_1")}>
+        {type !== "none" && (
+          <div
+            className={clsx(
+              type !== "custom" && "w-docs_2 flex justify-center items-center"
+            )}
+          >
+            {type === "info" && (
+              <InformationCircleSolid className="text-acmekit-tag-blue-icon" />
+            )}
+            {type === "error" && (
+              <XCircleSolid className="text-acmekit-tag-red-icon" />
+            )}
+            {type === "warning" && (
+              <ExclamationCircleSolid className="text-acmekit-tag-orange-icon" />
+            )}
+            {type === "success" && (
+              <CheckCircleSolid className="text-acmekit-tag-green-icon" />
+            )}
+            {type === "custom" && CustomIcon}
+          </div>
+        )}
+        <span
+          className={clsx("text-compact-medium-plus", "text-acmekit-fg-base")}
+          data-testid="layout-title"
+        >
+          {title}
+        </span>
+      </div>
+      {(text || children) && (
+        <div
+          className={clsx(
+            "flex pt-0 pr-docs_1 pb-docs_1.5 pl-docs_1 gap-docs_1",
+            "border-0 border-b border-solid border-acmekit-border-base"
+          )}
+          data-testid="layout-content"
+        >
+          <div className="w-docs_2 flex-none"></div>
+          <div className={clsx("flex flex-col", children && "gap-docs_1")}>
+            {text && (
+              <span className={clsx("text-medium text-acmekit-fg-subtle")}>
+                {text}
+              </span>
+            )}
+            {children}
+          </div>
+        </div>
+      )}
+      {isClosable && (
+        <div className={clsx("p-docs_1 flex justify-end items-center")}>
+          <Button onClick={handleClose}>{closeButtonText}</Button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/Notification/Item/index.tsx

@@ -0,0 +1,88 @@
+
+import clsx from "clsx"
+import React, { Children, ReactElement, useRef } from "react"
+import { NotificationItemLayoutDefault } from "./Layout/Default"
+// @ts-expect-error can't install the types package because it doesn't support React v19
+import { CSSTransition } from "react-transition-group"
+
+export type NotificationItemProps = {
+  layout?: "default" | "empty"
+  type?: "info" | "error" | "warning" | "success" | "custom" | "none"
+  CustomIcon?: React.ReactNode
+  title?: string
+  text?: string
+  className?: string
+  children?: ReactElement
+  isClosable?: boolean
+  placement?: "top" | "bottom"
+  show?: boolean
+  setShow?: (value: boolean) => void
+  onClose?: () => void
+  closeButtonText?: string
+} & React.HTMLAttributes<HTMLDivElement>
+
+type EmptyLayoutProps = {
+  onClose?: () => void
+}
+
+export const NotificationItem = ({
+  className = "",
+  placement = "bottom",
+  show = true,
+  layout = "default",
+  setShow,
+  onClose,
+  children,
+  ...rest
+}: NotificationItemProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const handleClose = () => {
+    setShow?.(false)
+    onClose?.()
+  }
+
+  return (
+    <CSSTransition
+      timeout={200}
+      classNames={{
+        enter: "animate-slideInRight animate-fast",
+        exit: "animate-slideOutRight animate-fast",
+      }}
+      nodeRef={ref}
+    >
+      <div
+        className={clsx(
+          "md:max-w-[320px] md:w-[320px] w-full",
+          "fixed md:right-docs_1 left-0 md:m-docs_1",
+          placement === "bottom" && "md:bottom-docs_1 bottom-0",
+          placement === "top" && "md:top-docs_1 top-0",
+          "opacity-100 transition-opacity duration-200 ease-ease",
+          !show && "!opacity-0",
+          className
+        )}
+        ref={ref}
+        data-testid="notification-item"
+      >
+        {layout === "default" && (
+          <NotificationItemLayoutDefault {...rest} handleClose={handleClose}>
+            {children}
+          </NotificationItemLayoutDefault>
+        )}
+        {layout === "empty" &&
+          Children.map(children, (child) => {
+            if (child) {
+              return React.cloneElement<EmptyLayoutProps>(
+                child as React.ReactElement<
+                  EmptyLayoutProps,
+                  React.FunctionComponent<EmptyLayoutProps>
+                >,
+                {
+                  onClose: handleClose,
+                }
+              )
+            }
+          })}
+      </div>
+    </CSSTransition>
+  )
+}

package/src/components/Notification/index.tsx

@@ -0,0 +1,65 @@
+
+import {
+  NotificationContextType,
+  NotificationItemType,
+  useNotifications,
+} from "../../providers/Notification"
+import React from "react"
+import { NotificationItem } from "./Item"
+// @ts-expect-error can't install the types package because it doesn't support React v19
+import { TransitionGroup } from "react-transition-group"
+import clsx from "clsx"
+
+export const NotificationContainer = () => {
+  const { notifications, removeNotification } =
+    useNotifications() as NotificationContextType
+
+  const handleClose = (notification: NotificationItemType) => {
+    notification.onClose?.()
+    if (notification.id) {
+      removeNotification(notification.id)
+    }
+  }
+
+  const renderFilteredNotifications = (
+    condition: (notificaiton: NotificationItemType) => boolean,
+    className?: string
+  ) => {
+    return (
+      <TransitionGroup
+        className={clsx(
+          "flex fixed z-40 flex-col gap-docs_0.5 right-0",
+          "md:w-auto w-full overflow-y-auto",
+          "max-h-[50%] md:max-h-[calc(100vh-57px)]",
+          "max-[768px]:max-h-[50%]",
+          className
+        )}
+      >
+        {notifications.filter(condition).map((notification) => (
+          <NotificationItem
+            {...notification}
+            onClose={() => handleClose(notification)}
+            className={clsx(
+              notification.className,
+              "!relative !top-0 !bottom-0 !right-0"
+            )}
+            key={notification.id}
+          />
+        ))}
+      </TransitionGroup>
+    )
+  }
+
+  return (
+    <>
+      {renderFilteredNotifications(
+        (notification) => notification.placement === "top",
+        "top-0"
+      )}
+      {renderFilteredNotifications(
+        (notification) => notification.placement !== "top",
+        "bottom-0"
+      )}
+    </>
+  )
+}

package/src/components/Pagination/Card/index.tsx

@@ -0,0 +1,80 @@
+import { TriangleLeftMini, TriangleRightMini } from "@acmekit/icons"
+import clsx from "clsx"
+import { Link } from "react-router-dom"
+import React from "react"
+
+type PaginationCardProps = {
+  type: "previous" | "next"
+  title: string
+  parentTitle?: string
+  link: string
+  className?: string
+}
+
+export const PaginationCard = ({
+  type,
+  title,
+  parentTitle,
+  link,
+  className,
+}: PaginationCardProps) => {
+  return (
+    <div
+      className={clsx(
+        "relative flex-1",
+        "py-docs_0.5 px-docs_0.75 rounded",
+        "bg-acmekit-bg-component hover:bg-acmekit-bg-component-hover",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "hover:shadow-elevation-card-hover dark:shadow-elevation-card-hover-dark",
+        className
+      )}
+      data-testid="pagination-card"
+    >
+      <Link
+        to={link}
+        className="absolute top-0 left-0 w-full h-full"
+        data-testid="pagination-card-link"
+      />
+      <div
+        className={clsx("h-[40px] flex gap-docs_0.75 items-center")}
+        data-testid="pagination-card-content"
+      >
+        {type === "previous" && (
+          <TriangleLeftMini
+            className="text-acmekit-fg-muted"
+            data-testid="pagination-card-previous-icon"
+          />
+        )}
+        <div
+          className={clsx(
+            "flex-1",
+            type === "previous" && "text-left",
+            type === "next" && "text-right"
+          )}
+          data-testid="pagination-card-title-wrapper"
+        >
+          {parentTitle && (
+            <span
+              className="block text-compact-small text-acmekit-fg-subtle"
+              data-testid="pagination-card-parent-title"
+            >
+              {parentTitle}
+            </span>
+          )}
+          <span
+            className="block text-compact-small-plus text-acmekit-fg-base"
+            data-testid="pagination-card-title"
+          >
+            {title}
+          </span>
+        </div>
+        {type === "next" && (
+          <TriangleRightMini
+            className="text-acmekit-fg-muted"
+            data-testid="pagination-card-next-icon"
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/Pagination/index.tsx

@@ -0,0 +1,35 @@
+
+import React from "react"
+import { usePagination } from "../../providers/Pagination"
+import clsx from "clsx"
+import { PaginationCard } from "./Card"
+
+export const Pagination = () => {
+  const { previousPage, nextPage } = usePagination()
+
+  return (
+    <div
+      className={clsx(
+        "flex justify-between",
+        "flex-col sm:flex-row gap-docs_0.75"
+      )}
+    >
+      {previousPage && (
+        <PaginationCard
+          type="previous"
+          title={previousPage.title}
+          parentTitle={previousPage.parentTitle}
+          link={previousPage.link}
+        />
+      )}
+      {nextPage && (
+        <PaginationCard
+          type="next"
+          title={nextPage.title}
+          parentTitle={nextPage.parentTitle}
+          link={nextPage.link}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/Prerequisites/Item/index.tsx

@@ -0,0 +1,43 @@
+import clsx from "clsx"
+import { Link } from "../../Link"
+import React from "react"
+
+export type PrerequisiteItemPosition = "top" | "middle" | "bottom" | "alone"
+
+export type PrerequisiteItemType = {
+  text: string
+  link?: string
+  position?: PrerequisiteItemPosition
+}
+
+type PrerequisiteItemProps = {
+  item: PrerequisiteItemType
+}
+
+export const PrerequisiteItem = ({
+  item: { text, link, position = "alone" },
+}: PrerequisiteItemProps) => {
+  return (
+    <Link
+      href={link || "#"}
+      className={clsx(
+        "bg-acmekit-tag-neutral-bg text-acmekit-fg-subtle",
+        "px-docs_0.75 py-docs_0.5 w-fit",
+        "flex justify-center items-center",
+        link && "hover:bg-acmekit-tag-neutral-bg-hover",
+        "rounded-tr-docs_xl rounded-br-docs_xl",
+        position === "alone" && "rounded-docs_xl",
+        position === "top" && "rounded-tl-docs_xl rounded-bl-docs_DEFAULT",
+        position === "middle" &&
+          "rounded-tl-docs_DEFAULT rounded-bl-docs_DEFAULT",
+        position === "bottom" && "rounded-tl-docs_DEFAULT rounded-bl-docs_xl",
+        !link && "cursor-text"
+      )}
+      target={link ? "_blank" : undefined}
+      rel={link ? "noopener noreferrer" : undefined}
+    >
+      {text}
+      {link && "↗"}
+    </Link>
+  )
+}

package/src/components/Prerequisites/index.tsx

@@ -0,0 +1,94 @@
+
+import React, { useRef } from "react"
+import { Button } from "../../components/Button"
+import { useCollapsible } from "../../hooks/use-collapsible"
+import clsx from "clsx"
+import { TriangleRightMini } from "@acmekit/icons"
+import {
+  PrerequisiteItem,
+  PrerequisiteItemPosition,
+  PrerequisiteItemType,
+} from "./Item"
+
+type PrerequisitesProps = {
+  items: PrerequisiteItemType[]
+}
+
+export const Prerequisites = ({ items }: PrerequisitesProps) => {
+  const itemsRef = useRef<HTMLDivElement>(null)
+  const { collapsed, getCollapsibleElms, setCollapsed } = useCollapsible({
+    initialValue: false,
+    translateEnabled: false,
+    childrenRef: itemsRef,
+    useChild: false,
+  })
+
+  const getPosition = (index: number): PrerequisiteItemPosition => {
+    if (items.length === 1) {
+      return "alone"
+    }
+
+    if (index === items.length - 1) {
+      return "bottom"
+    }
+
+    return index === 0 ? "top" : "middle"
+  }
+
+  return (
+    <details
+      open={!collapsed}
+      onClick={(event) => {
+        if (event.target instanceof HTMLAnchorElement) {
+          return
+        }
+        event.preventDefault()
+      }}
+      onToggle={(event) => {
+        // this is to avoid event propagation
+        // when details are nested, which is a bug
+        // in react. Learn more here:
+        // https://github.com/facebook/react/issues/22718
+        event.stopPropagation()
+      }}
+      className="my-docs_1"
+    >
+      <summary
+        className="flex no-marker items-center mb-[6px] w-fit"
+        onClick={() => setCollapsed((prev) => !prev)}
+      >
+        <Button
+          className={clsx(
+            "flex items-center",
+            "px-docs_0.5 py-docs_0.25",
+            "text-acmekit-fg-subtle",
+            "active:!outline-none active:!shadow-none",
+            "focus:!outline-none focus:!shadow-none"
+          )}
+          variant="transparent-clear"
+        >
+          <TriangleRightMini
+            className={clsx("transition-transform", !collapsed && "rotate-90")}
+          />
+          <span className="text-compact-small-plus block ml-[6px]">
+            Prerequisites
+          </span>
+          <span className="fg-muted text-compact-small">{items.length}</span>
+        </Button>
+      </summary>
+      {getCollapsibleElms(
+        <div className="flex gap-[6px] flex-col" ref={itemsRef}>
+          {items.map((item, index) => (
+            <PrerequisiteItem
+              item={{
+                ...item,
+                position: getPosition(index),
+              }}
+              key={index}
+            />
+          ))}
+        </div>
+      )}
+    </details>
+  )
+}

package/src/components/RadioItem/index.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx"
+import React from "react"
+
+export type RadioItemProps = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & {
+  checked?: boolean
+}
+
+export const RadioItem = ({ className, checked, ...props }: RadioItemProps) => {
+  return (
+    <div className="p-[3px] flex justify-center items-center relative">
+      <input
+        type="radio"
+        className={clsx(
+          "appearance-none bg-acmekit-bg-component shadow-borders-base dark:shadow-border-base-dark",
+          "w-[14px] h-[14px] rounded-full",
+          "focus:shadow-borders-interactive-with-focus disabled:opacity-50",
+          "checked:!bg-acmekit-bg-interactive checked:!shadow-borders-interactive-with-shadow",
+          !checked && "hover:bg-acmekit-bg-component-hover",
+          className
+        )}
+        checked={checked}
+        {...props}
+      />
+      {checked && (
+        <span
+          className={clsx(
+            "w-[6px] h-[6px] bg-acmekit-bg-base dark:bg-acmekit-fg-on-color absolute top-1/2 left-1/2 rounded-full",
+            "-translate-x-1/2 -translate-y-1/2 shadow-details-contrast-on-bg-interactive"
+          )}
+          data-testid="radio-item-checked-indicator"
+        />
+      )}
+    </div>
+  )
+}

package/src/components/Rating/index.tsx

@@ -0,0 +1,133 @@
+
+import React, { useCallback, useEffect, useRef, useState } from "react"
+import clsx from "clsx"
+import { Star, StarSolid } from "@acmekit/icons"
+import { Button } from "../../components/Button"
+import { Label } from "../../components/Label"
+import { TextArea } from "../../components/TextArea"
+import { useNotifications } from "../../providers/Notification"
+
+export type RatingProps = {
+  event?: string
+  className?: string
+  onRating?: (rating?: number) => void
+  additionalQuestion?: string
+  parentNotificationId?: string
+} & React.HTMLAttributes<HTMLDivElement>
+
+export const Rating: React.FC<RatingProps> = ({
+  event = "rating",
+  className = "",
+  onRating,
+  additionalQuestion = "What should we improve?",
+  parentNotificationId,
+}) => {
+  const [rating, setRating] = useState(0)
+  const [additionalFeedback, setAdditionalFeedback] = useState("")
+  const [hoverRating, setHoverRating] = useState(0)
+  const starElms = useRef<HTMLElement[]>([])
+  const starArr = Array.from(Array(5).keys())
+  const track = (..._args: any[]) => {}
+  const { updateNotification } = useNotifications(true) || {}
+
+  const submitTracking = useCallback(
+    (selectedRating?: number, feedback?: string) => {
+      track({
+        event: {
+          event,
+          options: {
+            rating: selectedRating || rating,
+            additionalFeedback: feedback || additionalFeedback,
+          },
+          callback: () => onRating?.(selectedRating || rating),
+        },
+      })
+    },
+    [rating, additionalFeedback]
+  )
+
+  const handleRating = (selectedRating: number) => {
+    if (rating) {
+      return
+    }
+    setHoverRating(0)
+    setRating(selectedRating)
+    if (selectedRating >= 4) {
+      for (let i = 0; i < selectedRating; i++) {
+        starElms.current[i].classList.add("animate-tada")
+      }
+      submitTracking(selectedRating)
+    }
+  }
+
+  useEffect(() => {
+    if (
+      rating > 0 &&
+      rating < 4 &&
+      parentNotificationId &&
+      updateNotification
+    ) {
+      // update parent notification ID
+      updateNotification(parentNotificationId, {
+        closeButtonText: "Submit",
+        onClose: () => submitTracking(rating, additionalFeedback),
+      })
+    }
+  }, [additionalFeedback, rating])
+
+  return (
+    <div className={clsx("flex flex-col gap-docs_1")}>
+      <div className={clsx("flex gap-docs_0.5", className)}>
+        {starArr.map((i) => {
+          const isSelected =
+            (rating !== 0 && rating - 1 >= i) ||
+            (hoverRating !== 0 && hoverRating - 1 >= i)
+          return (
+            <Button
+              variant="transparent"
+              buttonRef={(element) => {
+                if (starElms.current.length - 1 < i) {
+                  starElms.current.push(element as HTMLElement)
+                }
+              }}
+              key={i}
+              onMouseOver={() => {
+                if (!rating) {
+                  setHoverRating(i + 1)
+                }
+              }}
+              onMouseLeave={() => {
+                if (!rating) {
+                  setHoverRating(0)
+                }
+              }}
+              onClick={() => handleRating(i + 1)}
+            >
+              {!isSelected && <Star />}
+              {isSelected && (
+                <StarSolid className="text-acmekit-tag-orange-icon" />
+              )}
+            </Button>
+          )
+        })}
+      </div>
+      {rating !== 0 && rating < 4 && (
+        <div
+          className={clsx(
+            "text-acmekit-fg-subtle",
+            "flex flex-col gap-docs_0.5"
+          )}
+        >
+          <Label>{additionalQuestion}</Label>
+          <TextArea
+            placeholder="I didn't like..."
+            rows={4}
+            onChange={(e) => setAdditionalFeedback(e.target.value)}
+            value={additionalFeedback}
+            className="w-full"
+          />
+        </div>
+      )}
+    </div>
+  )
+}