@askrjs/themes 0.0.2 → 0.0.4

package/src/components/shell/index.ts

@@ -0,0 +1,16 @@
+export { Shell, ShellMain, ShellNav } from "./shell";
+export { SHELL_A11Y_CONTRACT, type ShellA11yContract } from "./shell.a11y";
+export type {
+  ShellAsChildProps,
+  ShellDivProps,
+  ShellMainAsChildProps,
+  ShellMainDivProps,
+  ShellMainMainProps,
+  ShellMainProps,
+  ShellNavAsChildProps,
+  ShellNavDivProps,
+  ShellNavProps,
+  ShellOwnProps,
+  ShellProps,
+  ShellVariant,
+} from "./shell.types";

package/src/components/shell/shell-nav.types.ts

@@ -0,0 +1,3 @@
+export type CollapseBreakpoint = "sm" | "md" | "lg" | "xl";
+export type CollapseIconPlacement = "start" | "end";
+export type Collapsible = "none" | "icon";

package/src/components/shell/shell-panel.tsx

@@ -0,0 +1,85 @@
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+
+export type ShellPanelRenderProps = {
+  active: boolean;
+  brand?: unknown;
+  children?: unknown;
+  className?: unknown;
+  collapseLabel: string;
+  dataOrientation?: string;
+  onClose: () => void;
+  open: boolean;
+  panelId?: string;
+  prefix: "navbar" | "sidebar";
+  ref?: unknown;
+  rest: Record<string, unknown>;
+};
+
+export function renderShellPanel(props: ShellPanelRenderProps): JSX.Element | null {
+  const {
+    active,
+    brand,
+    children,
+    className,
+    collapseLabel,
+    dataOrientation,
+    onClose,
+    open,
+    panelId,
+    prefix,
+    ref,
+    rest,
+  } = props;
+
+  if (active && !open) {
+    return null;
+  }
+
+  const panelClass = `${prefix}-panel`;
+  const headerClass = `${prefix}-panel-header`;
+  const closeClass = `${prefix}-panel-close`;
+  const headerSlot = `${prefix}-panel-header`;
+  const closeSlot = `${prefix}-panel-close`;
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes(panelClass, className),
+    "aria-label": active ? collapseLabel : rest["aria-label"],
+    "aria-modal": active ? "true" : rest["aria-modal"],
+    "data-slot": panelClass,
+    "data-state": active ? (open ? "open" : "closed") : "open",
+    id: panelId,
+    role: rest.role,
+    tabIndex: active ? -1 : rest.tabIndex,
+    ...(dataOrientation !== undefined ? { "data-orientation": dataOrientation } : {}),
+  }) as Record<string, unknown>;
+
+  if (active) {
+    finalProps.role = "dialog";
+    finalProps["aria-modal"] = "true";
+    finalProps["aria-label"] = collapseLabel;
+    finalProps.tabIndex = -1;
+    finalProps.id = panelId;
+  }
+
+  return (
+    <div {...finalProps}>
+      {active ? (
+        <div class={headerClass} data-slot={headerSlot}>
+          {brand}
+          <button
+            aria-label={`Close ${collapseLabel}`}
+            class={closeClass}
+            data-slot={closeSlot}
+            type="button"
+            onClick={() => onClose()}
+          >
+            <span aria-hidden="true">x</span>
+          </button>
+        </div>
+      ) : null}
+      {children}
+    </div>
+  );
+}

package/src/components/shell/shell-responsive.tsx

@@ -0,0 +1,212 @@
+import { For } from "@askrjs/askr/control";
+import { resource } from "@askrjs/askr/resources";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import { isJsxElement, toChildArray } from "../_internal/jsx";
+
+export type ShellResponsivePanelProps = {
+  active: boolean;
+  collapseLabel: string;
+  onClose: () => void;
+  open: boolean;
+  panelId?: string;
+};
+
+let shellScrollLockCount = 0;
+let shellScrollLockPreviousValue: string | null = null;
+
+function acquireShellScrollLock(): void {
+  if (typeof document === "undefined") return;
+
+  const body = document.body;
+  if (shellScrollLockCount === 0) {
+    shellScrollLockPreviousValue = body.getAttribute("data-shell-scroll-lock");
+  }
+
+  shellScrollLockCount += 1;
+  body.setAttribute("data-shell-scroll-lock", "true");
+}
+
+function releaseShellScrollLock(): void {
+  if (typeof document === "undefined" || shellScrollLockCount === 0) return;
+
+  shellScrollLockCount -= 1;
+  if (shellScrollLockCount > 0) return;
+
+  const body = document.body;
+  if (shellScrollLockPreviousValue === null) {
+    body.removeAttribute("data-shell-scroll-lock");
+  } else {
+    body.setAttribute("data-shell-scroll-lock", shellScrollLockPreviousValue);
+  }
+
+  shellScrollLockPreviousValue = null;
+}
+
+export function isShellPanelChild(child: unknown, panelComponent: unknown): child is JSXElement {
+  return isJsxElement(child) && child.type === panelComponent;
+}
+
+export function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {
+  const keyedChildren = toChildArray(children).map((child, index) => {
+    if (!isJsxElement(child) || child.key != null) {
+      return child;
+    }
+
+    return {
+      ...child,
+      key: `${keyPrefix}-${index}`,
+    };
+  });
+
+  return (
+    <For
+      each={() => keyedChildren}
+      by={(child, index) =>
+        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`
+      }
+    >
+      {(child) => child as never}
+    </For>
+  );
+}
+
+export function renderKeyedShellPanelChildren(
+  children: unknown,
+  keyPrefix: string,
+  panelProps: ShellResponsivePanelProps,
+): JSX.Element {
+  const keyedChildren = toChildArray(children).map((child, index) => {
+    if (!isJsxElement(child)) {
+      return child;
+    }
+
+    return {
+      ...child,
+      key: child.key != null ? child.key : `${keyPrefix}-${index}`,
+      props: {
+        ...child.props,
+        active: panelProps.active,
+        collapseLabel: panelProps.collapseLabel,
+        onClose: panelProps.onClose,
+        open: panelProps.open,
+        panelId: panelProps.panelId,
+      },
+    };
+  });
+
+  return (
+    <For
+      each={() => keyedChildren}
+      by={(child, index) =>
+        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`
+      }
+    >
+      {(child) => child as never}
+    </For>
+  );
+}
+
+export function ShellResponsiveWatcher<TBreakpoint extends string>(props: {
+  breakpoint: TBreakpoint;
+  isCollapsed: (breakpoint: TBreakpoint) => boolean;
+  onExpand: () => void;
+  onResize: (nextCollapsed: boolean) => void;
+}): JSX.Element | null {
+  const { breakpoint, isCollapsed, onExpand, onResize } = props;
+
+  resource(
+    ({ signal }: { signal: AbortSignal }) => {
+      const updateCollapsedState = () => {
+        const nextCollapsed = isCollapsed(breakpoint);
+        onResize(nextCollapsed);
+
+        if (!nextCollapsed) {
+          onExpand();
+        }
+      };
+
+      updateCollapsedState();
+
+      if (typeof window === "undefined") {
+        return null;
+      }
+
+      window.addEventListener("resize", updateCollapsedState);
+      signal.addEventListener(
+        "abort",
+        () => {
+          window.removeEventListener("resize", updateCollapsedState);
+        },
+        { once: true },
+      );
+
+      return null;
+    },
+    [breakpoint],
+  );
+
+  return null;
+}
+
+export function ShellPanelWatcher(props: {
+  contentId?: string;
+  onClose: () => void;
+  open: boolean;
+  panelSlot: string;
+}): JSX.Element | null {
+  const { contentId, onClose, open, panelSlot } = props;
+
+  resource(
+    ({ signal }: { signal: AbortSignal }) => {
+      if (!open || typeof window === "undefined") {
+        releaseShellScrollLock();
+        return null;
+      }
+
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== "Escape") {
+          return;
+        }
+
+        event.preventDefault();
+        onClose();
+      };
+
+      window.addEventListener("keydown", onKeyDown);
+
+      const focusFrame =
+        typeof window.requestAnimationFrame === "function"
+          ? window.requestAnimationFrame(() => {
+              const content =
+                (typeof contentId === "string" ? document.getElementById(contentId) : null) ??
+                document.querySelector<HTMLElement>(
+                  `[data-slot="${panelSlot}"][data-state="open"]`,
+                );
+
+              content?.focus({ preventScroll: true });
+            })
+          : undefined;
+
+      acquireShellScrollLock();
+
+      signal.addEventListener(
+        "abort",
+        () => {
+          window.removeEventListener("keydown", onKeyDown);
+
+          if (focusFrame !== undefined && typeof window.cancelAnimationFrame === "function") {
+            window.cancelAnimationFrame(focusFrame);
+          }
+
+          releaseShellScrollLock();
+        },
+        { once: true },
+      );
+
+      return null;
+    },
+    [open],
+  );
+
+  return null;
+}

package/src/components/shell/shell.a11y.ts

@@ -0,0 +1,20 @@
+export const SHELL_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    layout: "data-ak-layout" as const,
+    variant: "data-variant" as const,
+    gap: "data-gap" as const,
+  },
+  SLOT_VALUES: {
+    root: "shell" as const,
+    nav: "shell-nav" as const,
+    main: "shell-main" as const,
+  },
+  VARIANT_VALUES: {
+    sidebar: "sidebar" as const,
+    topbar: "topbar" as const,
+    rail: "rail" as const,
+  },
+} as const;
+
+export type ShellA11yContract = typeof SHELL_A11Y_CONTRACT;

package/src/components/shell/shell.tsx

@@ -0,0 +1,74 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+import type {
+  ShellAsChildProps,
+  ShellDivProps,
+  ShellMainAsChildProps,
+  ShellMainDivProps,
+  ShellMainMainProps,
+  ShellNavAsChildProps,
+  ShellNavDivProps,
+} from "./shell.types";
+
+export function Shell(props: ShellDivProps): JSX.Element;
+export function Shell(props: ShellAsChildProps): JSX.Element;
+export function Shell(props: ShellDivProps | ShellAsChildProps) {
+  const { asChild, children, class: className, variant = "sidebar", ref, ...rest } = props;
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("shell", className),
+    "data-slot": "shell",
+    "data-ak-layout": "true",
+    "data-variant": variant,
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function ShellNav(props: ShellNavDivProps): JSX.Element;
+export function ShellNav(props: ShellNavAsChildProps): JSX.Element;
+export function ShellNav(props: ShellNavDivProps | ShellNavAsChildProps) {
+  const { asChild, children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("shell-nav", className),
+    "data-slot": "shell-nav",
+    "data-ak-layout": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function ShellMain(props: ShellMainMainProps): JSX.Element;
+export function ShellMain(props: ShellMainDivProps): JSX.Element;
+export function ShellMain(props: ShellMainAsChildProps): JSX.Element;
+export function ShellMain(props: ShellMainMainProps | ShellMainDivProps | ShellMainAsChildProps) {
+  const as = "as" in props ? props.as : "main";
+  const { asChild, children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("shell-main", className),
+    "data-slot": "shell-main",
+    "data-ak-layout": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  if (as === "div") {
+    return <div {...finalProps}>{children}</div>;
+  }
+
+  return <main {...finalProps}>{children}</main>;
+}

package/src/components/shell/shell.types.ts

@@ -0,0 +1,71 @@
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type ShellVariant = "sidebar" | "topbar" | "rail";
+
+export type ShellOwnProps = {
+  variant?: ShellVariant;
+  class?: string;
+  children?: unknown;
+};
+
+export type ShellDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  ShellOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type ShellAsChildProps = Omit<ShellOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type ShellProps = ShellDivProps | ShellAsChildProps;
+
+export type ShellNavOwnProps = {
+  class?: string;
+  children?: unknown;
+};
+
+export type ShellNavDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  ShellNavOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type ShellNavAsChildProps = Omit<ShellNavOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type ShellNavProps = ShellNavDivProps | ShellNavAsChildProps;
+
+export type ShellMainOwnProps = {
+  as?: "main" | "div";
+  class?: string;
+  children?: unknown;
+};
+
+export type ShellMainMainProps = Omit<JSX.IntrinsicElements["main"], "children" | "ref"> &
+  ShellMainOwnProps & {
+    as?: "main";
+    asChild?: false;
+    ref?: Ref<HTMLElement>;
+  };
+
+export type ShellMainDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  ShellMainOwnProps & {
+    as: "div";
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type ShellMainAsChildProps = Omit<ShellMainOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type ShellMainProps = ShellMainMainProps | ShellMainDivProps | ShellMainAsChildProps;

package/src/components/sidebar/index.ts

@@ -0,0 +1,5 @@
+export { Sidebar } from "./sidebar";
+export { SidebarPanel } from "./sidebar-panel";
+export { SidebarToggle } from "./sidebar-toggle";
+export type { SidebarPanelProps, SidebarProps, SidebarToggleProps } from "./sidebar.types";
+export type { CollapseBreakpoint, Collapsible } from "../shell/shell-nav.types";

package/src/components/sidebar/sidebar-panel.tsx

@@ -0,0 +1,76 @@
+import { readContext } from "@askrjs/askr";
+import { renderShellPanel } from "../shell/shell-panel";
+import { SidebarResponsiveContext } from "./sidebar.context";
+import type { SidebarPanelProps } from "./sidebar.types";
+
+export function SidebarPanel(props: SidebarPanelProps): JSX.Element | null {
+  const {
+    active: activeProp,
+    brand,
+    children,
+    class: className,
+    collapseLabel: collapseLabelProp,
+    onClose,
+    open: openProp,
+    panelId: panelIdProp,
+    ref,
+    ...rest
+  } = props;
+  const needsResponsiveContext =
+    activeProp === undefined ||
+    collapseLabelProp === undefined ||
+    onClose === undefined ||
+    openProp === undefined ||
+    panelIdProp === undefined;
+  const responsive = needsResponsiveContext
+    ? (() => {
+        try {
+          return readContext(SidebarResponsiveContext);
+        } catch {
+          return {
+            active: () => false,
+            collapseLabel: () => "Menu",
+            closePanel: () => undefined,
+            iconCollapsed: () => false,
+            isRailCollapsible: () => false,
+            orientation: () => "vertical" as const,
+            panelId: () => undefined,
+            panelOpen: () => false,
+            togglePanel: () => undefined,
+            toggleRail: () => undefined,
+          };
+        }
+      })()
+    : {
+        active: () => false,
+        collapseLabel: () => "Menu",
+        closePanel: () => undefined,
+        iconCollapsed: () => false,
+        isRailCollapsible: () => false,
+        orientation: () => "vertical" as const,
+        panelId: () => undefined,
+        panelOpen: () => false,
+        togglePanel: () => undefined,
+        toggleRail: () => undefined,
+      };
+  const active = activeProp ?? responsive.active();
+  const open = openProp ?? responsive.panelOpen();
+  const panelId = panelIdProp ?? responsive.panelId();
+  const collapseLabel = collapseLabelProp ?? responsive.collapseLabel();
+  const closePanel = onClose ?? responsive.closePanel;
+
+  return renderShellPanel({
+    active,
+    brand,
+    children,
+    className,
+    collapseLabel,
+    dataOrientation: responsive.orientation(),
+    onClose: closePanel,
+    open,
+    panelId,
+    prefix: "sidebar",
+    ref,
+    rest,
+  });
+}

package/src/components/sidebar/sidebar-toggle.tsx

@@ -0,0 +1,5 @@
+import type { SidebarToggleProps } from "./sidebar.types";
+
+export function SidebarToggle(_props: SidebarToggleProps): null {
+  return null;
+}

package/src/components/sidebar/sidebar.context.ts

@@ -0,0 +1,40 @@
+import { defineContext } from "@askrjs/askr";
+
+export type SidebarContextValue = {
+  orientation: () => "vertical";
+};
+
+export type SidebarResponsiveContextValue = {
+  active: () => boolean;
+  collapseLabel: () => string;
+  closePanel: () => void;
+  iconCollapsed: () => boolean;
+  isRailCollapsible: () => boolean;
+  orientation: () => "vertical";
+  panelId: () => string | undefined;
+  panelOpen: () => boolean;
+  togglePanel: () => void;
+  toggleRail: () => void;
+};
+
+const defaultOrientation = () => "vertical" as const;
+
+const defaultResponsiveContext: SidebarResponsiveContextValue = {
+  active: () => false,
+  collapseLabel: () => "Menu",
+  closePanel: () => undefined,
+  iconCollapsed: () => false,
+  isRailCollapsible: () => false,
+  orientation: defaultOrientation,
+  panelId: () => undefined,
+  panelOpen: () => false,
+  togglePanel: () => undefined,
+  toggleRail: () => undefined,
+};
+
+export const SidebarContext = defineContext<SidebarContextValue>({
+  orientation: defaultOrientation,
+});
+
+export const SidebarResponsiveContext =
+  defineContext<SidebarResponsiveContextValue>(defaultResponsiveContext);

package/src/components/sidebar/sidebar.shared.ts

@@ -0,0 +1,12 @@
+import { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed } from "../navbar/navbar.shared";
+import type { CollapseBreakpoint, Collapsible } from "../shell/shell-nav.types";
+
+export { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed };
+
+export function resolveSidebarCollapsible(collapsible: Collapsible | undefined): Collapsible {
+  return collapsible ?? "none";
+}
+
+export function isSidebarCollapsed(breakpoint: CollapseBreakpoint): boolean {
+  return isNavbarCollapsed(breakpoint);
+}