@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/forms/Textarea.tsx

@@ -1,99 +0,0 @@
-import React from "react";
-import { Div, Span } from "../../ui";
-import {
-  cn,
-  INPUT_BASE,
-  INPUT_ERROR,
-  LABEL_BASE,
-  HELPER_BASE,
-  ERROR_BASE,
-} from "./utils";
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  error?: string;
-  helperText?: string;
-  showCharCount?: boolean;
-}
-
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  function Textarea(
-    {
-      label,
-      error,
-      helperText,
-      showCharCount,
-      className = "",
-      required,
-      maxLength,
-      value,
-      defaultValue,
-      ...props
-    },
-    ref,
-  ) {
-    const charCount =
-      typeof value === "string"
-        ? value.length
-        : typeof defaultValue === "string"
-          ? defaultValue.length
-          : 0;
-
-    return (
-      <Div className="w-full">
-        {label && (
-          <label className={LABEL_BASE}>
-            {label}
-            {required && (
-              <Span className="text-red-500 ml-1" aria-hidden="true">
-                *
-              </Span>
-            )}
-          </label>
-        )}
-
-        <textarea
-          ref={ref}
-          className={cn(
-            INPUT_BASE,
-            "resize-y min-h-[80px]",
-            error ? INPUT_ERROR : "",
-            className,
-          )}
-          aria-invalid={error ? "true" : undefined}
-          maxLength={maxLength}
-          value={value}
-          defaultValue={defaultValue}
-          {...props}
-        />
-
-        <Div className="flex items-center justify-between mt-1.5">
-          <Div className="flex-1">
-            {error && (
-              <p className={ERROR_BASE} role="alert">
-                {error}
-              </p>
-            )}
-            {!error && helperText && (
-              <p className={HELPER_BASE}>{helperText}</p>
-            )}
-          </Div>
-          {showCharCount && maxLength && (
-            <p
-              className={cn(
-                "text-xs tabular-nums ml-2 flex-shrink-0",
-                charCount >= maxLength
-                  ? "text-red-500 dark:text-red-400"
-                  : "text-zinc-400 dark:text-zinc-500",
-              )}
-            >
-              {charCount} / {maxLength}
-            </p>
-          )}
-        </Div>
-      </Div>
-    );
-  },
-);
-
-Textarea.displayName = "Textarea";

package/src/features/forms/Toggle.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import React from "react";
-import { Button, Div, Span } from "../../ui";
-import { cn } from "./utils";
-
-export interface ToggleProps {
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  label?: string;
-  size?: "sm" | "md" | "lg";
-  className?: string;
-  id?: string;
-}
-
-const SIZE_CONFIG = {
-  sm: {
-    track: "w-8 h-[18px]",
-    thumb: "w-3.5 h-3.5",
-    translateOn: "translate-x-[14px]",
-    translateOff: "translate-x-0.5",
-  },
-  md: {
-    track: "w-11 h-6",
-    thumb: "w-5 h-5",
-    translateOn: "translate-x-5",
-    translateOff: "translate-x-0.5",
-  },
-  lg: {
-    track: "w-14 h-7",
-    thumb: "w-6 h-6",
-    translateOn: "translate-x-7",
-    translateOff: "translate-x-0.5",
-  },
-};
-
-/**
- * Toggle — switch control for boolean input with smooth animation.
- * Supports controlled and uncontrolled modes.
- */
-export function Toggle({
-  checked: controlledChecked,
-  defaultChecked = false,
-  onChange,
-  disabled = false,
-  label,
-  size = "md",
-  className = "",
-  id,
-}: ToggleProps) {
-  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
-  const checked =
-    controlledChecked !== undefined ? controlledChecked : internalChecked;
-
-  const handleChange = () => {
-    if (disabled) return;
-    const newChecked = !checked;
-    if (controlledChecked === undefined) setInternalChecked(newChecked);
-    onChange?.(newChecked);
-  };
-
-  const toggleId = id ?? React.useId();
-  const cfg = SIZE_CONFIG[size];
-
-  return (
-    <Div className={cn("flex items-center gap-3", className)}>
-      <Button
-        type="button"
-        role="switch"
-        id={toggleId}
-        aria-checked={checked}
-        disabled={disabled}
-        onClick={handleChange}
-        className={cn(
-          "relative inline-flex items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500/30 dark:focus:ring-secondary-400/30 focus:ring-offset-2 dark:focus:ring-offset-slate-900",
-          cfg.track,
-          checked
-            ? "bg-primary-600 dark:bg-secondary-500"
-            : "bg-zinc-200 dark:bg-slate-700",
-          disabled && "opacity-50 cursor-not-allowed",
-        )}
-      >
-        <Span
-          className={cn(
-            "inline-block rounded-full bg-white shadow-sm transition-transform duration-200",
-            cfg.thumb,
-            checked ? cfg.translateOn : cfg.translateOff,
-          )}
-        />
-      </Button>
-
-      {label && (
-        <label
-          htmlFor={toggleId}
-          className={cn(
-            "text-sm font-medium cursor-pointer select-none",
-            checked
-              ? "text-zinc-900 dark:text-zinc-100"
-              : "text-zinc-600 dark:text-zinc-400",
-            disabled && "opacity-50 cursor-not-allowed",
-          )}
-        >
-          {label}
-        </label>
-      )}
-    </Div>
-  );
-}

package/src/features/forms/index.ts

@@ -1,34 +0,0 @@
-// @mohasinac/feat-forms
-// Generic form shell components for any React project.
-
-export { Input } from "./Input";
-export type { InputProps } from "./Input";
-
-export { Textarea } from "./Textarea";
-export type { TextareaProps } from "./Textarea";
-
-export { Select } from "./Select";
-export type { SelectProps, SelectOption } from "./Select";
-
-export { Checkbox } from "./Checkbox";
-export type { CheckboxProps } from "./Checkbox";
-
-export { RadioGroup } from "./Radio";
-export type { RadioGroupProps, RadioOption } from "./Radio";
-
-export { Toggle } from "./Toggle";
-export type { ToggleProps } from "./Toggle";
-
-export { Slider } from "./Slider";
-export type { SliderProps } from "./Slider";
-
-export { Form, FormGroup, FormFieldSpan, FormActions } from "./Form";
-export type { FormProps, FormGroupProps, FormActionsProps } from "./Form";
-
-export {
-  cn,
-  INPUT_BASE,
-  INPUT_ERROR,
-  INPUT_SUCCESS,
-  INPUT_DISABLED,
-} from "./utils";

package/src/features/forms/utils.ts

@@ -1,25 +0,0 @@
-/** Simple class-name concatenation utility. */
-export function cn(...classes: (string | undefined | null | false)[]): string {
-  return classes.filter(Boolean).join(" ");
-}
-
-// ─── Shared style constants ───────────────────────────────────────────────────
-
-export const INPUT_BASE =
-  "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
-
-export const INPUT_ERROR =
-  "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
-
-export const INPUT_SUCCESS =
-  "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
-
-export const INPUT_DISABLED =
-  "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60";
-
-export const INPUT_WITH_ICON = "pl-10";
-
-export const LABEL_BASE =
-  "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5";
-export const HELPER_BASE = "text-xs text-zinc-500 dark:text-zinc-400 mt-1";
-export const ERROR_BASE = "text-xs text-red-600 dark:text-red-400 mt-1";

package/src/features/homepage/api/[id]/route.ts

@@ -1,145 +0,0 @@
-/**
- * feat-homepage — GET / PATCH / DELETE /api/homepage-sections/[id]
- *
- * Pure stub:
- * ```ts
- * // app/api/homepage-sections/[id]/route.ts
- * export { homepageSectionItemGET as GET, homepageSectionItemPATCH as PATCH, homepageSectionItemDELETE as DELETE }
- *   from "@mohasinac/feat-homepage";
- * ```
- */
-
-import { NextResponse } from "next/server.js";
-import { z } from "zod";
-import { getProviders } from "../../../../contracts";
-import { createRouteHandler } from "../../../../next";
-import type { HomepageSection } from "../../types/index";
-
-// ──── GET /api/homepage-sections/[id] ────────────────────────────────────────
-
-export async function GET(
-  _request: Request,
-  context: { params: Promise<{ id: string }> },
-): Promise<NextResponse> {
-  try {
-    const { id } = await context.params;
-
-    const { db } = getProviders();
-    if (!db) {
-      return NextResponse.json(
-        { success: false, error: "Database provider not registered" },
-        { status: 503 },
-      );
-    }
-
-    const repo = db.getRepository<HomepageSection>("homepageSections");
-    const section = await repo.findById(id);
-    if (!section) {
-      return NextResponse.json(
-        { success: false, error: "Section not found" },
-        { status: 404 },
-      );
-    }
-
-    return NextResponse.json({ success: true, data: section });
-  } catch (error) {
-    console.error(
-      "[feat-homepage] GET /api/homepage-sections/[id] failed",
-      error,
-    );
-    return NextResponse.json(
-      { success: false, error: "Failed to fetch homepage section" },
-      { status: 500 },
-    );
-  }
-}
-
-export { GET as homepageSectionItemGET };
-
-// ──── PATCH /api/homepage-sections/[id] ───────────────────────────────────
-
-const homepageSectionUpdateSchema = z
-  .object({
-    type: z
-      .enum([
-        "hero",
-        "featured_categories",
-        "featured_products",
-        "banner",
-        "testimonials",
-        "promotions",
-        "blog_posts",
-        "sellers",
-        "custom",
-      ])
-      .optional(),
-    title: z.string().optional(),
-    enabled: z.boolean().optional(),
-    isVisible: z.boolean().optional(),
-    order: z.number().int().min(0).optional(),
-    content: z.object({}).passthrough().optional(),
-    mobile: z.object({}).passthrough().optional(),
-  })
-  .passthrough();
-
-export const homepageSectionItemPATCH = createRouteHandler({
-  auth: true,
-  roles: ["admin"],
-  schema: homepageSectionUpdateSchema,
-  handler: async ({ request, body }) => {
-    const url = new URL(request.url);
-    const segments = url.pathname.split("/");
-    const id = segments[segments.length - 1];
-
-    const { db } = getProviders();
-    if (!db)
-      return NextResponse.json(
-        { success: false, error: "DB not configured" },
-        { status: 503 },
-      );
-
-    const repo = db.getRepository<HomepageSection>("homepageSections");
-    const section = await repo.findById(id);
-    if (!section)
-      return NextResponse.json(
-        { success: false, error: "Section not found" },
-        { status: 404 },
-      );
-
-    const updated = await repo.update(id, {
-      ...(body as object),
-      updatedAt: new Date().toISOString(),
-    } as Partial<HomepageSection>);
-    return NextResponse.json({ success: true, data: updated });
-  },
-});
-
-// ──── DELETE /api/homepage-sections/[id] ─────────────────────────────────
-
-export const homepageSectionItemDELETE = createRouteHandler({
-  auth: true,
-  roles: ["admin"],
-  handler: async ({ request }) => {
-    const url = new URL(request.url);
-    const segments = url.pathname.split("/");
-    const id = segments[segments.length - 1];
-
-    const { db } = getProviders();
-    if (!db)
-      return NextResponse.json(
-        { success: false, error: "DB not configured" },
-        { status: 503 },
-      );
-
-    const repo = db.getRepository<HomepageSection>("homepageSections");
-    const section = await repo.findById(id);
-    if (!section)
-      return NextResponse.json(
-        { success: false, error: "Section not found" },
-        { status: 404 },
-      );
-
-    await repo.delete(id);
-    return NextResponse.json({ success: true });
-  },
-});

package/src/features/homepage/api/carousel/[id]/route.ts

@@ -1,169 +0,0 @@
-/**
- * feat-homepage — GET / PATCH / DELETE /api/carousel/[id]
- *
- * Pure stub:
- * ```ts
- * // app/api/carousel/[id]/route.ts
- * export { carouselItemGET as GET, carouselItemPATCH as PATCH, carouselItemDELETE as DELETE }
- *   from "@mohasinac/feat-homepage";
- * ```
- */
-
-import { NextResponse } from "next/server.js";
-import { z } from "zod";
-import { getProviders } from "../../../../../contracts";
-import { createRouteHandler } from "../../../../../next";
-import type { CarouselSlide } from "../../../types/index";
-
-// ──── GET /api/carousel/[id] ──────────────────────────────────────────────────
-
-export async function GET(
-  _request: Request,
-  context: { params: Promise<{ id: string }> },
-): Promise<NextResponse> {
-  try {
-    const { id } = await context.params;
-
-    const { db } = getProviders();
-    if (!db) {
-      return NextResponse.json(
-        { success: false, error: "Database provider not registered" },
-        { status: 503 },
-      );
-    }
-
-    const repo = db.getRepository<CarouselSlide>("carouselSlides");
-    const slide = await repo.findById(id);
-    if (!slide) {
-      return NextResponse.json(
-        { success: false, error: "Carousel slide not found" },
-        { status: 404 },
-      );
-    }
-
-    return NextResponse.json({ success: true, data: slide });
-  } catch (error) {
-    console.error("[feat-homepage] GET /api/carousel/[id] failed", error);
-    return NextResponse.json(
-      { success: false, error: "Failed to fetch carousel slide" },
-      { status: 500 },
-    );
-  }
-}
-
-export { GET as carouselItemGET };
-
-// ──── PATCH /api/carousel/[id] ─────────────────────────────────────────────────
-
-const carouselSlideUpdateSchema = z
-  .object({
-    title: z.string().min(1).max(200).optional(),
-    order: z.number().int().min(0).optional(),
-    active: z.boolean().optional(),
-    media: z
-      .object({
-        type: z.enum(["image", "video"]),
-        url: z.string().url(),
-        alt: z.string(),
-        thumbnail: z.string().url().optional(),
-      })
-      .optional(),
-    link: z
-      .object({
-        url: z.string().url(),
-        openInNewTab: z.boolean(),
-      })
-      .optional(),
-    mobileMedia: z
-      .object({
-        type: z.enum(["image", "video"]),
-        url: z.string().url(),
-        alt: z.string(),
-      })
-      .optional(),
-    cards: z.array(z.object({}).passthrough()).optional(),
-    overlay: z.object({}).passthrough().optional(),
-  })
-  .passthrough();
-
-const MAX_ACTIVE_SLIDES = 5;
-
-export const carouselItemPATCH = createRouteHandler({
-  auth: true,
-  roles: ["admin"],
-  schema: carouselSlideUpdateSchema,
-  handler: async ({ request, body }) => {
-    const url = new URL(request.url);
-    const segments = url.pathname.split("/");
-    const id = segments[segments.length - 1];
-
-    const { db } = getProviders();
-    if (!db)
-      return NextResponse.json(
-        { success: false, error: "DB not configured" },
-        { status: 503 },
-      );
-
-    const repo = db.getRepository<CarouselSlide>("carouselSlides");
-    const slide = await repo.findById(id);
-    if (!slide)
-      return NextResponse.json(
-        { success: false, error: "Slide not found" },
-        { status: 404 },
-      );
-
-    // Guard: activating a slide must not exceed max
-    const patch = body as { active?: boolean };
-    if (patch.active === true && !slide.active) {
-      const active = await repo.findAll({
-        filters: "active==true",
-        perPage: MAX_ACTIVE_SLIDES + 1,
-      });
-      if (active.data.length >= MAX_ACTIVE_SLIDES) {
-        return NextResponse.json(
-          {
-            success: false,
-            error: `Maximum ${MAX_ACTIVE_SLIDES} active slides allowed`,
-          },
-          { status: 409 },
-        );
-      }
-    }
-
-    const updated = await repo.update(id, {
-      ...(body as object),
-      updatedAt: new Date().toISOString(),
-    } as Partial<CarouselSlide>);
-    return NextResponse.json({ success: true, data: updated });
-  },
-});
-
-// ──── DELETE /api/carousel/[id] ───────────────────────────────────────────────
-
-export const carouselItemDELETE = createRouteHandler({
-  auth: true,
-  roles: ["admin"],
-  handler: async ({ request }) => {
-    const url = new URL(request.url);
-    const segments = url.pathname.split("/");
-    const id = segments[segments.length - 1];
-
-    const { db } = getProviders();
-    if (!db)
-      return NextResponse.json(
-        { success: false, error: "DB not configured" },
-        { status: 503 },
-      );
-
-    const repo = db.getRepository<CarouselSlide>("carouselSlides");
-    const slide = await repo.findById(id);
-    if (!slide)
-      return NextResponse.json(
-        { success: false, error: "Slide not found" },
-        { status: 404 },
-      );
-
-    await repo.delete(id);
-    return NextResponse.json({ success: true });
-  },
-});