athameui 0.0.2

package/README.md

@@ -0,0 +1,7 @@
+# athameUI 🗡️
+
+A sharp React component library that's a cut above... sorry, not sorry.
+
+This project is still very much a work in progress. Primarily, I'm using it for one of my other projects, so, for the time being, I'm only creating components as I need them.
+
+But feel free to look about. You can clone it and try it out, if you feel so inclined.

package/components/Accordion/Accordion.tsx

@@ -0,0 +1,81 @@
+"use client";
+import { useState } from "react";
+import { AccordionItem } from "./AccordionItem";
+import type { AccordionItemType } from "./AccordionItem";
+import { cx } from "../../utils/cx";
+
+type AccordionProps = {
+  children?: React.ReactNode;
+  items: AccordionItemType[];
+  childrenFirst?: boolean;
+  expand?: "one" | "any";
+  className?:
+    | string
+    | {
+        accordion?: string | false | null | undefined;
+        accordionItem?: string | false | null | undefined;
+      }
+    | false
+    | undefined
+    | null;
+  expandToggleCallback?: (expandedItems: (string | number)[]) => void;
+};
+
+export const Accordion = ({
+  children,
+  className,
+  items,
+  childrenFirst,
+  expand = "one",
+
+  expandToggleCallback,
+}: AccordionProps) => {
+  const [expandedItems, setExpandedItems] = useState<(string | number)[]>([]);
+  const classes = cx(
+    "ath-accordion",
+    typeof className === "object" && className !== null
+      ? className.accordion
+      : className
+  );
+
+  const expandToggle = (itemId: string | number) => {
+    console.log(
+      "Rendering AccordionItem:",
+      itemId,
+      "Expanded:",
+      expandedItems.includes(itemId)
+    );
+    if (expandedItems.includes(itemId)) {
+      setExpandedItems(expandedItems.filter((id) => id !== itemId));
+    } else {
+      if (expand === "one") {
+        setExpandedItems([itemId]);
+      } else if (expand === "any") {
+        setExpandedItems([...expandedItems, itemId]);
+      }
+    }
+    if (expandToggleCallback) {
+      expandToggleCallback(expandedItems);
+    }
+  };
+
+  return (
+    <div className={classes}>
+      {childrenFirst && children}
+      {items.map((item) => (
+        <AccordionItem
+          key={item.id}
+          item={item}
+          expanded={expandedItems.includes(item.id)}
+          onToggle={expandToggle}
+          className={
+            typeof className === "object" && className !== null
+              ? className.accordionItem
+              : undefined
+          }
+        />
+      ))}
+      {!childrenFirst && children}
+    </div>
+  );
+};

package/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,65 @@
+"use client";
+import { useRef } from "react";
+import { Button } from "../Button/Button";
+import { cx } from "../../utils/cx";
+
+export type AccordionItemType = {
+  id: string | number;
+  heading: string;
+  content: React.ReactNode;
+};
+
+export type AccordionItemProps = {
+  item: AccordionItemType;
+  expanded: boolean;
+  onToggle: (id: string | number) => void;
+  className?:
+    | string
+    | { accordionItem?: string | false | null | undefined }
+    | false
+    | undefined
+    | null;
+};
+
+export const AccordionItem = ({
+  item,
+  expanded,
+  onToggle,
+  className,
+}: AccordionItemProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const contentHeight = contentRef.current?.scrollHeight;
+
+  const classes = cx(
+    "ath-accordion-item",
+    typeof className === "object" && className !== null
+      ? className.accordionItem
+      : className
+  );
+
+  return (
+    <div className={classes}>
+      <Button
+        className="ath-accordion-item-heading"
+        variant="ghost"
+        size="full"
+        textAlign="left"
+        onClick={() => onToggle(item.id)}
+        dark
+      >
+        <h4>{item.heading}</h4>
+      </Button>
+      <div
+        className={cx(
+          "ath-accordion-expansion-wrapper",
+          expanded && "expanded"
+        )}
+        style={{ height: expanded ? contentHeight : 0 }}
+      >
+        <div ref={contentRef} className="ath-accordion-item-content">
+          {item.content}
+        </div>
+      </div>
+    </div>
+  );
+};

package/components/Accordion/index.ts

@@ -0,0 +1,2 @@
+export * from "./Accordion";
+export * from "./AccordionItem";

package/components/Button/BackToTopButton.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Button } from "./Button";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { CircleArrowUp02Icon } from "@hugeicons/core-free-icons";
+import type { ButtonProps } from "./Button";
+import { cx } from "../../utils/cx";
+
+type BackToTopButtonProps = ButtonProps & {
+  className?: string;
+};
+
+export const BackToTopButton = (props: BackToTopButtonProps) => {
+  const { className, variant, dark = false, testId, title } = props;
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      if (scrollPosition < 300) {
+        setVisible(false);
+      } else {
+        setVisible(true);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  if (!visible) return null;
+
+  const classes = cx("ath-back-to-top-button", className);
+
+  return (
+    <Button
+      className={classes}
+      data-testid={`${testId} "ath-back-to-top-button"`}
+      onClick={scrollToTop}
+      variant={variant ?? "secondary"}
+      title={title ?? "Back to Top"}
+      dark={dark}
+    >
+      <HugeiconsIcon icon={CircleArrowUp02Icon} width="50" height="50" />
+    </Button>
+  );
+};

package/components/Button/Button.tsx

@@ -0,0 +1,114 @@
+"use client";
+import { ButtonPrimitive, type ButtonPrimitiveProps } from "./ButtonPrimitive";
+import { cx } from "../../utils/cx";
+import { buttonVariants, ButtonSize, ButtonVariant } from "./button.variants";
+
+import type {
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactElement,
+} from "react";
+import { forwardRef } from "react";
+
+export type ButtonProps = Omit<ButtonPrimitiveProps, "className"> & {
+  children?: ReactElement | string;
+  className?:
+    | string
+    | { button?: string | false | null | undefined }
+    | false
+    | undefined
+    | null;
+  type?: "button" | "submit" | "reset";
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  dark?: boolean;
+  iconOnly?: boolean;
+  icon?: ReactElement | string;
+  title?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  tabIndex?: number;
+  testId?: string;
+  textAlign?: "left" | "center" | "right";
+
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      className,
+      variant = "primary",
+      size = "medium",
+      dark = false,
+      disabled = false,
+      icon,
+      iconOnly,
+      tabIndex,
+      testId,
+      type = "button",
+      title,
+      autoFocus = false,
+      textAlign = "center",
+
+      onBlur,
+      onClick,
+      onFocus,
+      onKeyDown,
+      ...rest
+    },
+    ref
+  ) => {
+    const classes = cx(
+      "ath-button",
+      buttonVariants.size[size],
+      buttonVariants.variant[variant],
+      buttonVariants.textAlign[textAlign],
+      dark ? buttonVariants.dark : "",
+      typeof className === "object" && className !== null
+        ? className.button
+        : className
+    );
+
+    const onClickHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
+      onClick?.(e);
+    };
+
+    return (
+      <ButtonPrimitive
+        ref={ref}
+        type={type}
+        title={title}
+        className={classes}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        tabIndex={disabled ? -1 : tabIndex}
+        data-testid={testId}
+        onClick={onClickHandler}
+        onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        {...rest}
+      >
+        {icon ? (
+          <>
+            {typeof icon === "string" ? (
+              <span aria-hidden="true">{icon}</span>
+            ) : (
+              icon
+            )}
+            {!iconOnly && children}
+          </>
+        ) : (
+          <>{children}</>
+        )}
+      </ButtonPrimitive>
+    );
+  }
+);
+
+Button.displayName = "Button";

package/components/Button/ButtonGroup.tsx

@@ -0,0 +1,13 @@
+type ButtonGroupProps = {
+  children: React.ReactNode;
+  gap?: string;
+  direction?: "row" | "column";
+};
+
+export const ButtonGroup = ({
+  children,
+  gap = "2",
+  direction = "row",
+}: ButtonGroupProps) => {
+  return <div className={`flex flex-${direction} gap-${gap}`}>{children}</div>;
+};

package/components/Button/ButtonPrimitive.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { forwardRef } from "react";
+
+export type ButtonPrimitiveProps =
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {};
+
+export const ButtonPrimitive = forwardRef<
+  HTMLButtonElement,
+  ButtonPrimitiveProps
+>(({ children, ...rest }, ref) => {
+  return (
+    <button ref={ref} {...rest}>
+      {children}
+    </button>
+  );
+});

package/components/Button/button.variants.ts

@@ -0,0 +1,30 @@
+// button.variants.ts
+export const buttonVariants = {
+  size: {
+    small: "ath-button-small",
+    medium: "ath-button-medium",
+    large: "ath-button-large",
+    full: "ath-button-full",
+  },
+  variant: {
+    primary: "ath-button-primary",
+    secondary: "ath-button-secondary",
+    tertiary: "ath-button-tertiary",
+    danger: "ath-button-danger",
+    warning: "ath-button-warning",
+    success: "ath-button-success",
+    outline: "ath-button-outline",
+    ghost: "ath-button-ghost",
+  },
+  textAlign: {
+    left: "ath-button-text-left",
+    center: "ath-button-text-center",
+    right: "ath-button-text-right",
+  },
+  dark: "ath-button-dark",
+} as const;
+
+export type ButtonSize = keyof typeof buttonVariants.size;
+export type ButtonVariant = keyof typeof buttonVariants.variant;
+export type ButtonDark = keyof typeof buttonVariants.dark;
+export type ButtonTextAlign = keyof typeof buttonVariants.textAlign;

package/components/Button/index.ts

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

package/components/Button/stories/Buttons.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../Button";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { SmileDizzyIcon } from "@hugeicons/core-free-icons";
+import styles from "../Button.module.css";
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: "Components/Button",
+  decorators: [
+    (Story, context) => {
+      const { dark } = context.args;
+      return (
+        <div
+          style={{
+            padding: "2rem",
+            backgroundColor: dark
+              ? "var(--color-background-dark)"
+              : "var(--color-background-light)",
+          }}
+        >
+          <Story aria-label="Button example" data-aria="Button example" />
+        </div>
+      );
+    },
+  ],
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      description: `<code>ReactElement<any, string | JSXElementConstructor<any>> |</code> `,
+      type: undefined,
+    },
+    className: {
+      control: false,
+    },
+    iconOnly: {
+      control: "boolean",
+    },
+    dark: {
+      control: "boolean",
+    },
+    icon: {
+      control: "radio",
+      options: ["No Icon", "w/ Icon"],
+      mapping: {
+        "No Icon": "",
+        "w/ Icon": (
+          <HugeiconsIcon
+            className={styles.buttonSVGIcon}
+            icon={SmileDizzyIcon}
+          />
+        ),
+      },
+    },
+    type: {
+      control: false,
+
+      description: `
+\`"button"\` \`"submit"\` \`"reset"\`
+
+**Default:** \`"button"\`
+`,
+    },
+  },
+};
+export default meta;
+
+export const Default: StoryObj<typeof Button> = {
+  args: {
+    children: "Click me",
+    className: "",
+    variant: "primary",
+    dark: false,
+    size: "medium",
+    type: "button",
+    title: "Title Example",
+    icon: "w/ Icon",
+    iconOnly: true,
+    testId: "test-id",
+  },
+};

package/components/Header/Header.tsx

@@ -0,0 +1,12 @@
+import { cx } from "../../utils/cx";
+
+type HeaderProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const Header = ({ children, className }: HeaderProps) => {
+  const classes = cx("ath-header", className);
+
+  return <header className={classes}>{children}</header>;
+};

package/components/Header/index.ts

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

package/components/List/List.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+
+type ListProps = {
+  children?: ReactNode[];
+  addClasses?: {
+    list?: string;
+    ul?: string;
+    ol?: string;
+  };
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
+  role?: "list" | "menu" | "menubar" | "tablist" | "tree" | "grid";
+  dataTestId?: string;
+  ordered?: boolean;
+};
+
+export const List: React.FC<ListProps> = ({
+  addClasses,
+  children,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  role = "list",
+  dataTestId,
+  ordered = false,
+}) => {
+  const ListType = ordered ? "ol" : "ul";
+
+  return (
+    <ListType
+      className={`bn-list font-medium m-0 w-full flex flex-col list-none ps-0 ${
+        addClasses?.list || ""
+      } ${ordered ? addClasses?.ol || "" : addClasses?.ul || ""}`}
+      role={role}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      data-testid={dataTestId}
+    >
+      {children}
+    </ListType>
+  );
+};

package/components/List/ListItem.tsx

@@ -0,0 +1,52 @@
+type ListItemProps = {
+  children?: React.ReactNode;
+  addClasses?: {
+    li?: string;
+  };
+  useHover?: boolean;
+  role?: "listitem" | "menuitem" | "tab" | "treeitem" | "option";
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  ariaSelected?: boolean;
+  ariaExpanded?: boolean;
+  ariaLevel?: number;
+  tabIndex?: number;
+  dataTestId?: string;
+  onClick?: (event: React.MouseEvent<HTMLLIElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLLIElement>) => void;
+};
+
+export const ListItem: React.FC<ListItemProps> = ({
+  children,
+  addClasses,
+  role = "listitem",
+  ariaLabel,
+  ariaDescribedBy,
+  ariaSelected,
+  ariaExpanded,
+  ariaLevel,
+  tabIndex,
+  dataTestId,
+  onClick,
+  onKeyDown,
+}) => {
+  return (
+    <li
+      className={`bn-list-item rounded-md border border-solid border-color-secondary-50 hover:bg-secondary-50 ${
+        addClasses?.li || ""
+      }`}
+      role={role}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
+      aria-selected={ariaSelected}
+      aria-expanded={ariaExpanded}
+      aria-level={ariaLevel}
+      tabIndex={tabIndex}
+      data-testid={dataTestId}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      {children}
+    </li>
+  );
+};

package/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Button";
+export * from "./Header";
+export * from "./Accordion";
+// export * from "./AthameRouter";
+// export * from "./Link";