athameui 0.0.5 → 0.0.7

package/components/Avatar/Avatar.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { CSSObject } from "@emotion/react";
+import { cx } from "../../utils/cx";
+
+type AvatarProps = {
+  displayName: string;
+  imageUrl?: string;
+  className?: {
+    avatar?: string;
+    initials?: string;
+    // image?: string;
+  };
+  size?: number;
+  sx?: {
+    avatar?: CSSObject;
+    initials?: CSSObject;
+    // image?: CSSObject;
+  };
+};
+
+// TODO: Add images later
+export const Avatar = ({
+  className,
+  displayName = "Display Name",
+  sx,
+  size = 40,
+}: AvatarProps) => {
+  const initials = displayName.split(" ").map((n) => n[0].toUpperCase());
+  const avatarClasses = cx(
+    ".ath-avatar",
+    `width-${size}px`,
+    `height-${size}px`,
+    `line-height-${size}px`,
+    className?.avatar,
+  );
+  const initialsClasses = cx(
+    ".ath-avatar-initials",
+    `font-size-${size / 2}px`,
+    className?.initials,
+  );
+  // const imageClasses = cx(".ath-avatar-image", className?.image);
+
+  return (
+    <div css={sx?.avatar} className={avatarClasses}>
+      <div css={sx?.initials} className={initialsClasses}>
+        {initials[0]}
+        {initials[1]}
+      </div>
+    </div>
+  );
+};

package/components/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

package/components/Button/Button.tsx

@@ -14,14 +14,14 @@ import {
 import { CSSObject } from "@emotion/react";
 
 export type ButtonProps = {
-  children?: ReactElement | string;
+  children?: React.ReactNode | string;
   className?: {
     button?: string | false | null | undefined;
     icon?: string | false | null | undefined;
   };
   dark?: boolean;
   disabled?: boolean;
-  icon?: React.ComponentType<{ className?: string }> | string;
+  icon?: ReactElement | string;
   size?: ButtonSize;
   sx?: CSSObject | { button?: CSSObject; icon?: CSSObject };
   title?: string;
@@ -43,7 +43,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       className,
       dark = false,
       disabled = false,
-      icon: Icon,
+      icon,
       size = "medium",
       sx,
       tabIndex,
@@ -59,7 +59,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    const isIconOnly = Icon && !children;
+    const isIconOnly = icon && !children;
 
     const sharedClasses = cx(
       "ath-button",
@@ -77,14 +77,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         : className,
     );
 
-    const iconClasses = cx(
-      sharedClasses,
-      "ath-button-icon",
-      typeof className === "object" && className !== null
-        ? className.icon
-        : undefined,
-    );
-
     const onClickHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
       onClick?.(e);
     };
@@ -115,13 +107,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onBlur={onBlurHandler}
         {...rest}
       >
-        {Icon ? (
+        {icon ? (
           <>
-            <Icon
-              className={iconClasses}
-              css={sx?.icon ? sx.icon : undefined}
-            />
-
+            {icon}
             {!isIconOnly && children}
           </>
         ) : (

package/components/Button/button.variants.ts

@@ -20,19 +20,10 @@ export const buttonVariants = {
     outline: "ath-button-outline",
     ghost: "ath-button-ghost",
   },
-
   dark: "ath-button-dark",
 } as const;
 
-export const ButtonGroupVariants = {
-  direction: {
-    row: "ath-button-group-direction-row",
-    column: "ath-button-group-direction-column",
-  },
-} as const;
-
 export type ButtonSize = keyof typeof buttonVariants.size;
 export type ButtonVariant = keyof typeof buttonVariants.variant;
 export type ButtonDark = typeof buttonVariants.dark;
 export type ButtonTextPosition = keyof typeof buttonVariants.textPosition;
-export type ButtonGroupDirection = keyof typeof ButtonGroupVariants.direction;

package/components/Button/index.ts

@@ -1,3 +1,2 @@
 export * from "./Button";
-export * from "./ButtonGroup";
 export * from "./ScrollToTopButton";

package/components/{Button → ButtonGroup}/ButtonGroup.tsx

@@ -1,16 +1,7 @@
-import { CSSObject } from "@emotion/react";
+"use client";
 import { cx } from "../../utils";
-
-type ButtonGroupProps = {
-  children: React.ReactNode;
-  className?: {
-    buttonGroup?: string | false | null | undefined;
-  };
-  direction?: "row" | "column";
-  sx?: {
-    buttonGroup?: CSSObject | string;
-  };
-};
+import { ButtonGroupVariants } from "./buttonGroup.variants";
+import type { ButtonGroupProps } from "./ButtonGroupProps";
 
 export const ButtonGroup = ({
   children,
@@ -20,7 +11,7 @@ export const ButtonGroup = ({
 }: ButtonGroupProps) => {
   const buttonGroupClasses = cx(
     "ath-button-group",
-    `ath-button-group-direction-${direction}`,
+    ButtonGroupVariants.direction[direction],
     className?.buttonGroup ? className.buttonGroup : undefined,
   );
 

package/components/ButtonGroup/ButtonGroupProps.ts

@@ -0,0 +1,12 @@
+import { CSSObject } from "@emotion/react";
+
+export type ButtonGroupProps = {
+  children: React.ReactNode;
+  className?: {
+    buttonGroup?: string | false | null | undefined;
+  };
+  direction?: "row" | "column";
+  sx?: {
+    buttonGroup?: CSSObject | string;
+  };
+};

package/components/ButtonGroup/buttonGroup.variants.ts

@@ -0,0 +1,8 @@
+export const ButtonGroupVariants = {
+  direction: {
+    row: "ath-button-group-direction-row",
+    column: "ath-button-group-direction-column",
+  },
+} as const;
+
+export type ButtonGroupDirection = keyof typeof ButtonGroupVariants.direction;

package/components/ButtonGroup/index.ts

@@ -0,0 +1 @@
+export * from "./ButtonGroup";

package/components/FormElements/FormInput.tsx

@@ -1,9 +1,11 @@
+"use client";
 import React, { ReactNode, useRef, useLayoutEffect } from "react";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 import { FormInputLabel } from "./FormInputLabel";
 
 export type FormInputProps = {
+  autoComplete?: string;
   autoFocus?: boolean;
   autoResize?: boolean;
   className?: {
@@ -48,7 +50,9 @@ export type FormInputProps = {
   value?: string | number;
 
   onChange: (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>,
   ) => void;
   onKeyDown?: React.KeyboardEventHandler<
     HTMLInputElement | HTMLTextAreaElement
@@ -56,6 +60,7 @@ export type FormInputProps = {
 };
 
 export const FormInput: React.FC<FormInputProps> = ({
+  autoComplete,
   autoFocus = false,
   autoResize = false,
   className,
@@ -153,12 +158,14 @@ export const FormInput: React.FC<FormInputProps> = ({
       className={labelClasses}
       sx={{ label: sx?.label, required: sx?.required }}
       labelPosition={labelPosition}
+      dark={dark}
     />
   ) : null;
 
   const inputElement =
     type === "textarea" ? (
       <textarea
+        autoComplete={autoComplete}
         autoFocus={autoFocus}
         ref={textAreaRef}
         name={name}
@@ -175,6 +182,7 @@ export const FormInput: React.FC<FormInputProps> = ({
       />
     ) : (
       <input
+        autoComplete={autoComplete}
         autoFocus={autoFocus}
         name={name}
         type={type}

package/components/FormElements/FormInputLabel.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { ReactNode } from "react";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";

package/components/Header/Header.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 

package/components/Layout/Footer.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils";
 
 type FooterProps = {

package/components/Layout/Main.tsx

@@ -1,3 +1,4 @@
+"use client";
 import type { CSSObject } from "@emotion/react";
 import { cx } from "../../utils";
 

package/components/List/List.tsx

@@ -1,52 +1,33 @@
+"use client";
 import type { ReactElement } from "react";
+import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 
 type ListProps = {
   children?: ReactElement[] | string[];
-  className?:
-    | string
-    | {
-        list?: string | false | null | undefined;
-      }
-    | false
-    | undefined
-    | null;
-  ariaLabel?: string;
-  ariaLabelledBy?: string;
-  ariaDescribedBy?: string;
-  role?: "list" | "menu" | "menubar" | "tablist" | "tree" | "grid";
-  dataTestId?: string;
+  className?: {
+    list?: string | false | null | undefined;
+  };
   ordered?: boolean;
+  role?: "list" | "menu" | "menubar" | "tablist" | "tree" | "grid";
+  sx?: {
+    list?: CSSObject;
+  };
 };
 
 export const List = ({
   className,
   children,
-  ariaLabel,
-  ariaLabelledBy,
-  ariaDescribedBy,
-  role = "list",
-  dataTestId,
   ordered = false,
+  role = "list",
+  sx,
 }: ListProps) => {
   const ListType = ordered ? "ol" : "ul";
 
-  const classes = cx(
-    "ath-list",
-    typeof className === "object" && className !== null
-      ? className.list
-      : className,
-  );
+  const classes = cx("ath-list", className?.list);
 
   return (
-    <ListType
-      className={classes}
-      role={role}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      aria-describedby={ariaDescribedBy}
-      data-testid={dataTestId}
-    >
+    <ListType className={classes} role={role} css={sx?.list}>
       {children}
     </ListType>
   );

package/components/List/ListItem.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils";
 
 type ListItemProps = {

package/components/Modal/Modal.tsx

@@ -0,0 +1,207 @@
+"use client";
+import React from "react";
+import { CSSObject } from "@emotion/react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { CancelCircleIcon } from "@hugeicons/core-free-icons";
+import { Button } from "../Button/Button";
+import { cx } from "../../main";
+
+export type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  title?: string;
+  maxWidth?: string;
+  showCloseButton?: boolean;
+  dataTestId?: string;
+  className?: {
+    backdrop?: string;
+    modal?: string;
+    header?: string;
+    title?: string;
+    content?: string;
+    closeButton?: string;
+  };
+  closeOnBackdropClick?: boolean;
+  closeOnEscape?: boolean;
+  trapFocus?: boolean;
+  initialFocusRef?: React.RefObject<HTMLElement>;
+  finalFocusRef?: React.RefObject<HTMLElement>;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
+  sx?: {
+    backdrop?: CSSObject;
+    modal?: CSSObject;
+    header?: CSSObject;
+    title?: CSSObject;
+    content?: CSSObject;
+    closeButton?: CSSObject;
+  };
+};
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  children,
+  title,
+  showCloseButton = true,
+  dataTestId,
+  className,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  trapFocus = true,
+  initialFocusRef,
+  finalFocusRef,
+  sx,
+
+  onClose,
+  ...rest
+}) => {
+  const [previouslyFocusedElement, setPreviouslyFocusedElement] =
+    React.useState<HTMLElement | null>(null);
+  const modalRef = React.useRef<HTMLDivElement>(null);
+
+  const backdropClasses = cx("ath-modal-backdrop", className?.backdrop);
+  const modalClasses = cx("ath-modal", className?.modal);
+  const headerClasses = cx("ath-modal-header", className?.header);
+  const titleClasses = cx("ath-modal-title", className?.title);
+  const contentClasses = cx("ath-modal-content", className?.content);
+  const closeButtonClasses = cx(
+    "ath-modal-close-button",
+    className?.closeButton,
+  );
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // Focus trap implementation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!trapFocus || e.key !== "Tab") return;
+
+    const modalElement = modalRef.current;
+    if (!modalElement) return;
+
+    const focusableElements = modalElement.querySelectorAll(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])',
+    );
+    const firstElement = focusableElements[0] as HTMLElement;
+    const lastElement = focusableElements[
+      focusableElements.length - 1
+    ] as HTMLElement;
+
+    if (e.shiftKey) {
+      if (document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement?.focus();
+      }
+    } else {
+      if (document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement?.focus();
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setPreviouslyFocusedElement(document.activeElement as HTMLElement);
+
+      document.body.style.overflow = "hidden";
+
+      setTimeout(() => {
+        if (initialFocusRef?.current) {
+          initialFocusRef.current.focus();
+        } else {
+          const modalElement = modalRef.current;
+          if (modalElement) {
+            const firstFocusable = modalElement.querySelector(
+              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+            ) as HTMLElement;
+            if (firstFocusable) {
+              firstFocusable.focus();
+            }
+          }
+        }
+      }, 0);
+    } else {
+      document.body.style.overflow = "";
+
+      if (finalFocusRef?.current) {
+        finalFocusRef.current.focus();
+      } else if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus();
+      }
+    }
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (closeOnEscape && e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [
+    isOpen,
+    onClose,
+    closeOnEscape,
+    initialFocusRef,
+    finalFocusRef,
+    previouslyFocusedElement,
+  ]);
+
+  if (!isOpen) return null;
+
+  const titleId = title ? `${dataTestId || "modal"}-title` : undefined;
+
+  return (
+    <div
+      className={backdropClasses}
+      onClick={handleBackdropClick}
+      onKeyDown={handleKeyDown}
+      css={sx?.backdrop}
+    >
+      <div
+        ref={modalRef}
+        css={sx?.modal}
+        className={modalClasses}
+        role="dialog"
+        {...rest}
+      >
+        {(title || showCloseButton) && (
+          <div css={sx?.header} className={headerClasses}>
+            {title && (
+              <h1 css={sx?.title} className={titleClasses} id={titleId}>
+                {title}
+              </h1>
+            )}
+            {showCloseButton && (
+              <Button
+                className={{ button: closeButtonClasses }}
+                sx={{ button: sx?.closeButton }}
+                onClick={onClose}
+                aria-label="Close modal"
+                variant="ghost"
+                size="medium"
+                icon={<HugeiconsIcon icon={CancelCircleIcon} size={24} />}
+              />
+            )}
+          </div>
+        )}
+        <div css={sx?.content} className={contentClasses}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

package/components/Modal/index.ts

@@ -0,0 +1 @@
+export * from "./Modal";

package/components/Search/Search.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { FormInput } from "../FormElements";
 import { Button } from "../Button";
@@ -24,7 +25,7 @@ type SearchProps = {
   resultsLabel?: React.ReactNode;
   searchLabel?: string;
   searchRole?: string;
-  searchTerm?: string;
+  searchTerm?: string | number;
   showResultsCount?: boolean;
   showSearchButton?: boolean;
   sx?: {
@@ -37,7 +38,7 @@ type SearchProps = {
   testId?: string;
   totalResultsCount?: string;
 
-  onSearch?: (searchTerm: string) => void;
+  onSearch?: (searchTerm: string | number | undefined) => void;
   setSearchTerm: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
@@ -75,7 +76,7 @@ export const Search = ({
   };
 
   const onSearchHandler = () => {
-    onSearch?.(searchTerm || "");
+    onSearch?.(searchTerm);
   };
 
   const hitEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {

package/components/index.ts

@@ -1,10 +1,11 @@
+export * from "./Accordion";
+export * from "./Avatar";
 export * from "./Button";
+export * from "./ButtonGroup";
+export * from "./ContainerScalingText";
+export * from "./FormElements";
 export * from "./Header";
-export * from "./Accordion";
-export * from "./List";
 export * from "./Layout";
+export * from "./List";
+export * from "./Modal";
 export * from "./Search";
-export * from "./FormElements";
-export * from "./ContainerScalingText";
-// export * from "./AthameRouter";
-// export * from "./Link";