@mohasinac/appkit 2.1.3 → 2.3.0

package/src/ui/components/ViewToggle.tsx

@@ -1,133 +0,0 @@
-"use client";
-
-import { Button } from "./Button";
-import { Div } from "./Div";
-
-/** Three layout modes for listing pages. Stored in URL as ?view=card|fluid|list */
-export type ViewMode = "card" | "fluid" | "list";
-
-export interface ViewToggleLabels {
-  card: string;
-  fluid: string;
-  list: string;
-  toolbar?: string;
-}
-
-export interface ViewToggleProps {
-  value: ViewMode;
-  onChange: (mode: ViewMode) => void;
-  labels?: ViewToggleLabels;
-  className?: string;
-}
-
-const ACTIVE = "bg-primary/5 text-primary ring-primary/30 dark:bg-primary/10";
-const INACTIVE =
-  "text-zinc-500 ring-zinc-200 hover:bg-zinc-100 dark:text-zinc-400 dark:ring-slate-700 dark:hover:bg-slate-800";
-
-const DEFAULT_LABELS: ViewToggleLabels = {
-  card: "Card grid",
-  fluid: "Fluid grid",
-  list: "List view",
-  toolbar: "View mode",
-};
-
-export function ViewToggle({
-  value,
-  onChange,
-  labels,
-  className,
-}: ViewToggleProps) {
-  const mergedLabels = { ...DEFAULT_LABELS, ...labels };
-
-  return (
-    <Div
-      className={["flex gap-1", className ?? ""].join(" ").trim()}
-      role="toolbar"
-      aria-label={mergedLabels.toolbar}
-    >
-      {/* Card grid — fixed breakpoint columns */}
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        onClick={() => onChange("card")}
-        aria-label={mergedLabels.card}
-        aria-pressed={value === "card"}
-        className={`flex items-center justify-center rounded-lg p-2 ring-1 transition-colors ${
-          value === "card" ? ACTIVE : INACTIVE
-        }`}
-      >
-        <svg
-          className="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={1.5}
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
-          />
-        </svg>
-      </Button>
-
-      {/* Fluid grid — CSS auto-fill columns */}
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        onClick={() => onChange("fluid")}
-        aria-label={mergedLabels.fluid}
-        aria-pressed={value === "fluid"}
-        className={`flex items-center justify-center rounded-lg p-2 ring-1 transition-colors ${
-          value === "fluid" ? ACTIVE : INACTIVE
-        }`}
-      >
-        <svg
-          className="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={1.5}
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 9.375v1.5m1.5-3.75C19.496 8.25 20 8.754 20 9.375v1.5m0-5.25v5.25m0-5.25C20 5.004 19.496 4.5 18.875 4.5M7.5 15h9"
-          />
-        </svg>
-      </Button>
-
-      {/* List mode — compact rows */}
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        onClick={() => onChange("list")}
-        aria-label={mergedLabels.list}
-        aria-pressed={value === "list"}
-        className={`flex items-center justify-center rounded-lg p-2 ring-1 transition-colors ${
-          value === "list" ? ACTIVE : INACTIVE
-        }`}
-      >
-        <svg
-          className="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={1.5}
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-          />
-        </svg>
-      </Button>
-    </Div>
-  );
-}

package/src/ui/index.ts

@@ -1,248 +0,0 @@
-// ─── Semantic HTML wrappers ───────────────────────────────────────────────────
-export type {
-  SectionProps,
-  ArticleProps,
-  MainProps,
-  AsideProps,
-  NavProps,
-  BlockHeaderProps,
-  BlockFooterProps,
-  HeaderProps,
-  FooterProps,
-  UlProps,
-  OlProps,
-  LiProps,
-} from "./components/Semantic";
-export {
-  Section,
-  Article,
-  Main,
-  Aside,
-  Nav,
-  BlockHeader,
-  BlockFooter,
-  Header,
-  Footer,
-  Ul,
-  Ol,
-  Li,
-} from "./components/Semantic";
-
-export type { DivProps } from "./components/Div";
-export { Div } from "./components/Div";
-
-// ─── Typography primitives ────────────────────────────────────────────────────
-export { Heading, Text, Label, Caption, Span } from "./components/Typography";
-
-// ─── Loading / Feedback ───────────────────────────────────────────────────────
-export type { SpinnerProps } from "./components/Spinner";
-export { Spinner } from "./components/Spinner";
-
-export type { SkeletonProps } from "./components/Skeleton";
-export { Skeleton } from "./components/Skeleton";
-
-// ─── Interactive ──────────────────────────────────────────────────────────────
-export type { ButtonProps } from "./components/Button";
-export { Button } from "./components/Button";
-
-export type { IconButtonProps } from "./components/IconButton";
-export { IconButton } from "./components/IconButton";
-
-export type { TextLinkProps } from "./components/TextLink";
-export { TextLink } from "./components/TextLink";
-
-export type { TooltipProps } from "./components/Tooltip";
-export { Tooltip } from "./components/Tooltip";
-
-export type {
-  AccordionProps,
-  AccordionItemProps,
-} from "./components/Accordion";
-export { Accordion, AccordionItem } from "./components/Accordion";
-
-export type { FormProps } from "./components/Form";
-export { Form } from "./components/Form";
-
-export type { BadgeProps, BadgeVariant } from "./components/Badge";
-export { Badge } from "./components/Badge";
-
-// ─── Feedback ─────────────────────────────────────────────────────────────────
-export type { AlertProps } from "./components/Alert";
-export { Alert } from "./components/Alert";
-
-// ─── Layout helpers ───────────────────────────────────────────────────────────
-export type { DividerProps } from "./components/Divider";
-export { Divider } from "./components/Divider";
-
-// ─── Progress ─────────────────────────────────────────────────────────────────
-export type {
-  ProgressProps,
-  IndeterminateProgressProps,
-} from "./components/Progress";
-export { Progress, IndeterminateProgress } from "./components/Progress";
-
-// ─── S1-1: New Primitives ─────────────────────────────────────────────────────
-
-export type { PaginationProps } from "./components/Pagination";
-export { Pagination } from "./components/Pagination";
-
-export type {
-  StatusBadgeProps,
-  StatusBadgeStatus,
-  OrderStatus,
-  PaymentStatus,
-  ReviewStatus,
-  TicketStatus,
-  GenericStatus,
-} from "./components/StatusBadge";
-export { StatusBadge } from "./components/StatusBadge";
-
-export type { ModalProps } from "./components/Modal";
-export { Modal } from "./components/Modal";
-
-export type { DrawerProps } from "./components/Drawer";
-export { Drawer } from "./components/Drawer";
-
-export type { SelectProps, SelectOption } from "./components/Select";
-export { Select } from "./components/Select";
-
-export type { InputProps } from "./components/Input";
-export { Input } from "./components/Input";
-
-export type { TextareaProps } from "./components/Textarea";
-export { Textarea } from "./components/Textarea";
-
-export type { SliderProps } from "./components/Slider";
-export { Slider } from "./components/Slider";
-
-export type { StarRatingProps } from "./components/StarRating";
-export { StarRating } from "./components/StarRating";
-
-export type { BreadcrumbProps, BreadcrumbItem } from "./components/Breadcrumb";
-export { Breadcrumb } from "./components/Breadcrumb";
-
-export type {
-  ImageLightboxProps,
-  LightboxImage,
-} from "./components/ImageLightbox";
-export { ImageLightbox } from "./components/ImageLightbox";
-
-export type { TagInputProps } from "./components/TagInput";
-export { TagInput } from "./components/TagInput";
-
-export type { StepperNavProps, StepperNavStep } from "./components/StepperNav";
-export { StepperNav } from "./components/StepperNav";
-
-export type {
-  ViewMode,
-  ViewToggleProps,
-  ViewToggleLabels,
-} from "./components/ViewToggle";
-export { ViewToggle } from "./components/ViewToggle";
-
-export type { RatingDisplayProps } from "./components/RatingDisplay";
-export { RatingDisplay } from "./components/RatingDisplay";
-
-export type { PriceDisplayProps } from "./components/PriceDisplay";
-export { PriceDisplay } from "./components/PriceDisplay";
-
-export type { StatsGridProps, StatItem } from "./components/StatsGrid";
-export { StatsGrid } from "./components/StatsGrid";
-
-export type { SummaryCardProps, SummaryLine } from "./components/SummaryCard";
-export { SummaryCard } from "./components/SummaryCard";
-
-export type { CountdownDisplayProps } from "./components/CountdownDisplay";
-export { CountdownDisplay } from "./components/CountdownDisplay";
-
-export type { ItemRowProps } from "./components/ItemRow";
-export { ItemRow } from "./components/ItemRow";
-
-export type {
-  HorizontalScrollerProps,
-  PerViewConfig,
-} from "./components/HorizontalScroller";
-export { HorizontalScroller } from "./components/HorizontalScroller";
-
-// Tab strip with ResizeObserver-driven overflow scroll
-export type { TabStripProps, TabStripTab } from "./components/TabStrip";
-export { TabStrip } from "./components/TabStrip";
-
-// Fluid form layout
-export type { FormGridProps, FormFieldProps } from "./components/FormGrid";
-export { FormGrid, FormField } from "./components/FormGrid";
-
-export type { DescriptionFieldProps } from "./components/DescriptionField";
-export { DescriptionField } from "./components/DescriptionField";
-
-export type {
-  ActiveFilter,
-  ActiveFilterChipsProps,
-} from "./components/ActiveFilterChips";
-export { ActiveFilterChips } from "./components/ActiveFilterChips";
-
-export type { SortOption, SortDropdownProps } from "./components/SortDropdown";
-export { SortDropdown } from "./components/SortDropdown";
-
-export type {
-  TablePaginationProps,
-  TablePaginationLabels,
-} from "./components/TablePagination";
-export { TablePagination } from "./components/TablePagination";
-
-// ─── S1-2: DataTable ──────────────────────────────────────────────────────────
-export type { DataTableProps, DataTableColumn } from "./DataTable";
-export { DataTable } from "./DataTable";
-
-// ─── Table / Pagination / Sticky config (re-exported from @mohasinac/contracts) ──
-export type {
-  TableConfig,
-  TableViewMode,
-  PaginationConfig,
-  StickyConfig,
-} from "../contracts";
-export {
-  DEFAULT_TABLE_CONFIG,
-  DEFAULT_PAGINATION_CONFIG,
-  DEFAULT_STICKY_CONFIG,
-  mergeTableConfig,
-} from "../contracts";
-
-// ─── Layout Primitives ────────────────────────────────────────────────────────
-export type {
-  GapKey,
-  ContainerSize,
-  GridCols,
-  ContainerProps,
-  StackProps,
-  RowProps,
-  GridProps,
-} from "./components/Layout";
-export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
-
-// ─── UI Helpers ───────────────────────────────────────────────────────────────
-export { easings } from "./animation.helper";
-export { hexToRgb, rgbToHex, getContrastColor } from "./color.helper";
-export { classNames, mergeTailwindClasses } from "./style.helper";
-
-// ─── SideModal ────────────────────────────────────────────────────────────────
-export type { SideModalProps } from "./components/SideModal";
-export { SideModal } from "./components/SideModal";
-
-// ─── RichText ─────────────────────────────────────────────────────────────────
-export type { RichTextProps } from "./rich-text/RichText";
-export { RichText } from "./rich-text/RichText";
-
-// ─── ListingLayout + BulkActionBar ────────────────────────────────────────────
-export type {
-  ListingLayoutProps,
-  ListingLayoutLabels,
-} from "./components/ListingLayout";
-export { ListingLayout } from "./components/ListingLayout";
-
-export type {
-  BulkActionBarProps,
-  BulkActionBarLabels,
-  BulkActionItem,
-} from "./components/BulkActionBar";
-export { BulkActionBar } from "./components/BulkActionBar";

package/src/ui/rich-text/RichText.tsx

@@ -1,243 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { Div } from "../components/Div";
-
-// ─── Allowed HTML tags (safe subset — no script/iframe/object) ───────────────
-
-const ALLOWED_TAGS = new Set([
-  "p",
-  "br",
-  "strong",
-  "em",
-  "u",
-  "s",
-  "del",
-  "ins",
-  "b",
-  "i",
-  "mark",
-  "code",
-  "pre",
-  "blockquote",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "ul",
-  "ol",
-  "li",
-  "a",
-  "hr",
-  "table",
-  "thead",
-  "tbody",
-  "tr",
-  "th",
-  "td",
-  "caption",
-  "figure",
-  "figcaption",
-  "img",
-  "picture",
-  "span",
-  "div",
-  "section",
-  "article",
-]);
-
-/** Attributes allowed per tag. "*" means allowed on any tag. */
-const ALLOWED_ATTRS: Record<string, string[]> = {
-  "*": ["class", "id", "lang", "dir", "aria-label", "role", "tabindex"],
-  a: ["href", "title", "target", "rel"],
-  img: ["src", "alt", "width", "height", "loading", "data-align"],
-  td: ["colspan", "rowspan"],
-  th: ["colspan", "rowspan", "scope"],
-  ol: ["type", "start"],
-};
-
-// ─── Simple client-side sanitiser ────────────────────────────────────────────
-// We avoid a third-party sanitizer dependency to keep this module lightweight.
-// For user-supplied HTML, also sanitize server-side before storage.
-
-function sanitiseHtml(dirty: string): string {
-  if (typeof window === "undefined") {
-    return dirty;
-  }
-
-  const dp = new DOMParser();
-  const doc = dp.parseFromString(dirty, "text/html");
-
-  function walk(node: Element): void {
-    const children = Array.from(node.children);
-    for (const child of children) {
-      const tag = child.tagName.toLowerCase();
-
-      if (!ALLOWED_TAGS.has(tag)) {
-        node.replaceChild(
-          document.createTextNode(child.textContent ?? ""),
-          child,
-        );
-        continue;
-      }
-
-      const attrNames = Array.from(child.attributes).map((a) => a.name);
-      const allowed = [
-        ...(ALLOWED_ATTRS["*"] ?? []),
-        ...(ALLOWED_ATTRS[tag] ?? []),
-      ];
-      for (const attr of attrNames) {
-        if (!allowed.includes(attr)) {
-          child.removeAttribute(attr);
-        }
-      }
-
-      if (tag === "a") {
-        const href = child.getAttribute("href") ?? "";
-        if (/^javascript:/i.test(href.trim())) {
-          child.removeAttribute("href");
-        }
-        if (href && !href.startsWith("/") && !href.startsWith("#")) {
-          child.setAttribute("rel", "noopener noreferrer");
-          child.setAttribute("target", "_blank");
-        }
-      }
-
-      if (tag === "img") {
-        const src = child.getAttribute("src") ?? "";
-        if (/^data:/i.test(src.trim())) {
-          child.removeAttribute("src");
-        }
-      }
-
-      walk(child);
-    }
-  }
-
-  walk(doc.body);
-  return doc.body.innerHTML;
-}
-
-// ─── RichText component ──────────────────────────────────────────────────────
-
-/** Adds interactive copy buttons to every `<pre>` block in a container. */
-function attachCopyButtons(container: HTMLDivElement) {
-  container.querySelectorAll<HTMLElement>("pre").forEach((pre) => {
-    if (pre.querySelector("[data-copy-btn]")) return;
-
-    pre.style.position = "relative";
-
-    const btn = document.createElement("button");
-    btn.dataset.copyBtn = "1";
-    btn.type = "button";
-    btn.setAttribute("aria-label", "Copy code");
-    btn.textContent = "Copy";
-    btn.style.cssText =
-      "position:absolute;top:8px;right:8px;padding:2px 10px;font-size:11px;font-family:inherit;" +
-      "border-radius:6px;border:1px solid rgba(148,163,184,.4);background:rgba(30,41,59,.75);" +
-      "color:#e2e8f0;cursor:pointer;line-height:1.6;user-select:none;transition:background .15s;";
-
-    btn.addEventListener("click", () => {
-      const code =
-        pre.querySelector("code")?.textContent ?? pre.textContent ?? "";
-      if (!navigator.clipboard) return;
-      navigator.clipboard
-        .writeText(code)
-        .then(() => {
-          btn.textContent = "Copied!";
-          setTimeout(() => {
-            btn.textContent = "Copy";
-          }, 1800);
-        })
-        .catch(() => {});
-    });
-
-    pre.appendChild(btn);
-  });
-}
-
-export interface RichTextProps {
-  /** Raw HTML string, typically rendered from a rich-text editor payload. */
-  html: string;
-  /** Extra class names on the wrapper div. */
-  className?: string;
-  /** Tailwind prose class variant. */
-  proseClass?: string;
-  /**
-   * When true, every `<pre>` code block gets an overlay "Copy" button that
-   * copies the code text to the clipboard on click. Defaults to false.
-   */
-  copyableCode?: boolean;
-  /**
-   * Optional syntax highlighter applied to every `<pre><code>` block.
-   * Called with (rawCode, languageName) and should return highlighted HTML.
-   *
-   * The language name is derived from the `language-*` CSS class on the `<code>`
-   * element (e.g. "ts", "js", "python"). Falls back to `"plaintext"` when absent.
-   *
-   * @example
-   * ```tsx
-   * import hljs from "highlight.js";
-   * <RichText
-   *   html={post.body}
-   *   highlightCode={(code, lang) =>
-   *     hljs.highlight(code, { language: lang || "plaintext", ignoreIllegals: true }).value
-   *   }
-   * />
-   * ```
-   */
-  highlightCode?: (code: string, lang: string) => string;
-}
-
-/**
- * RichText renders sanitised HTML from a CMS / ProseMirror output.
- *
- * Security: client-side DOM-based sanitiser strips disallowed tags/attrs.
- * For defence-in-depth, also sanitise on the server before storing.
- *
- * Usage:
- * ```tsx
- * <RichText html={blogPost.body} className="max-w-2xl" />
- * <RichText html={desc} copyableCode />
- * ```
- */
-export function RichText({
-  html,
-  className = "",
-  proseClass = "prose max-w-none dark:prose-invert",
-  copyableCode = false,
-  highlightCode,
-}: RichTextProps) {
-  const safe = useMemo(() => {
-    const sanitized = sanitiseHtml(html);
-
-    if (!highlightCode || typeof document === "undefined") return sanitized;
-
-    const container = document.createElement("div");
-    container.innerHTML = sanitized;
-    container.querySelectorAll("pre > code").forEach((codeEl) => {
-      const langClass = Array.from(codeEl.classList).find((c) =>
-        c.startsWith("language-"),
-      );
-      const lang = langClass ? langClass.replace("language-", "") : "plaintext";
-      codeEl.innerHTML = highlightCode(codeEl.textContent ?? "", lang);
-    });
-    return container.innerHTML;
-  }, [html, highlightCode]);
-
-  const ref = (el: HTMLDivElement | null) => {
-    if (el && copyableCode) {
-      attachCopyButtons(el);
-    }
-  };
-
-  return (
-    <Div
-      ref={ref}
-      className={`${proseClass} ${className}`}
-      dangerouslySetInnerHTML={{ __html: safe }}
-    />
-  );
-}

package/src/ui/rich-text/index.ts

@@ -1,2 +0,0 @@
-export type { RichTextProps } from "./RichText";
-export { RichText } from "./RichText";

package/src/ui/style.helper.ts

@@ -1,18 +0,0 @@
-/**
- * Style Helpers
- *
- * UI helpers for dynamic styling and CSS class management.
- */
-
-export function classNames(
-  ...classes: (string | boolean | undefined | null)[]
-): string {
-  return classes.filter(Boolean).join(" ");
-}
-
-export function mergeTailwindClasses(
-  ...classes: (string | undefined | null)[]
-): string {
-  const classArray = classes.filter(Boolean).join(" ").split(" ");
-  return Array.from(new Set(classArray)).join(" ");
-}

package/src/utils/animation.helper.ts

@@ -1,22 +0,0 @@
-/**
- * Animation Helpers
- *
- * Pure easing functions for JavaScript animations and transitions.
- * All functions accept a normalized time value `t` in [0, 1]
- * and return a value in [0, 1].
- */
-
-export const easings = {
-  linear: (t: number) => t,
-  easeInQuad: (t: number) => t * t,
-  easeOutQuad: (t: number) => t * (2 - t),
-  easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
-  easeInCubic: (t: number) => t * t * t,
-  easeOutCubic: (t: number) => --t * t * t + 1,
-  easeInOutCubic: (t: number) =>
-    t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
-  easeInQuart: (t: number) => t * t * t * t,
-  easeOutQuart: (t: number) => 1 - --t * t * t * t,
-  easeInOutQuart: (t: number) =>
-    t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
-};