@mohasinac/appkit 2.3.2 → 2.4.0

package/dist/ui/rich-text/RichText.style.css

@@ -1,5 +1,292 @@
-/* RichText — sanitised HTML renderer with prose styling */
-
-.appkit-rich-text {
-  /* Base wrapper — prose classes applied via className prop */
-}
+/* RichText — sanitised HTML renderer with prose styling */
+
+/* --- Rich Text Editor --------------------------------------------------------
+ * CSS-backed surface ensures dark mode applies even when Tailwind's dark:
+ * utilities for this package are not scanned/generated.
+ * The Tailwind utility classes on the element remain the primary source;
+ * these rules act as a reliable fallback with the same values.
+ * -------------------------------------------------------------------------- */
+.appkit-rich-text-editor {
+  background: var(--appkit-color-surface, #ffffff);
+  border: 1px solid var(--appkit-color-border, #e4e4e7);
+  border-radius: 0.5rem;
+}
+
+.dark .appkit-rich-text-editor {
+  background: #0f172a;    /* slate-900 = --appkit-color-surface dark */
+  border-color: #334155;  /* slate-700 = --appkit-color-border dark */
+}
+
+.appkit-rich-text-editor__toolbar {
+  border-bottom: 1px solid var(--appkit-color-border, #e4e4e7);
+}
+
+.dark .appkit-rich-text-editor__toolbar {
+  border-bottom-color: #334155;
+}
+
+.appkit-rich-text-editor__btn {
+  border: 1px solid #e4e4e7;
+  color: #3f3f46;
+  border-radius: 0.375rem;
+}
+
+.dark .appkit-rich-text-editor__btn {
+  border-color: #475569;
+  color: #e2e8f0;
+}
+
+.dark .appkit-rich-text-editor__btn:hover {
+  background-color: #1e293b;
+}
+
+
+
+/* --------------------------------------------------------------------------
+ * Base wrapper. All selectors are scoped to .appkit-rich-text so they
+ * never leak into surrounding UI.
+ * Prose classes (typography plugin) are applied via the `proseClass` prop.
+ * The rules below layer on top of prose to ensure proper dark-mode theming
+ * for elements that the typography plugin doesn't fully cover.
+ * -------------------------------------------------------------------------- */
+
+/* --- Inline code ---------------------------------------------------------- */
+.appkit-rich-text :not(pre) > code {
+  padding: 0.15em 0.4em;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-weight: 500;
+  background-color: rgba(53, 112, 252, 0.08);   /* primary cobalt /8 */
+  color: #1343de;                                /* primary-700 cobalt */
+  border: 1px solid rgba(53, 112, 252, 0.18);
+}
+
+.dark .appkit-rich-text :not(pre) > code {
+  background-color: rgba(51, 65, 85, 0.6);      /* slate-700/60 */
+  color: #84e122;                                /* lime green — high contrast on dark */
+  border-color: rgba(71, 85, 105, 0.5);
+}
+
+/* --- Code blocks (pre) ---------------------------------------------------- */
+.appkit-rich-text pre {
+  border-radius: 0.5rem;
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  font-size: 0.875em;
+  line-height: 1.7;
+  background-color: #1e293b;                     /* slate-800 — always dark */
+  color: #e2e8f0;                                /* slate-200 */
+  border: 1px solid rgba(51, 65, 85, 0.6);
+}
+
+.dark .appkit-rich-text pre {
+  background-color: #0f172a;                     /* slate-900 */
+  border-color: rgba(30, 41, 59, 0.8);
+}
+
+/* --- Blockquote ----------------------------------------------------------- */
+.appkit-rich-text blockquote {
+  border-left: 3px solid #3570fc;               /* primary cobalt */
+  padding: 0.5rem 1rem;
+  margin: 1.25rem 0;
+  border-radius: 0 0.375rem 0.375rem 0;
+  background-color: rgba(53, 112, 252, 0.06);
+  color: #3f3f46;                                /* zinc-700 */
+  font-style: italic;
+}
+
+.dark .appkit-rich-text blockquote {
+  border-left-color: #f063b9;                    /* secondary-400 */
+  background-color: rgba(240, 99, 185, 0.06);
+  color: #a1a1aa;                                /* zinc-400 */
+}
+
+/* --- Mark / Highlight ----------------------------------------------------- */
+.appkit-rich-text mark {
+  background-color: rgba(101, 196, 8, 0.25);
+  color: inherit;
+  border-radius: 0.125rem;
+  padding: 0 0.1em;
+}
+
+.dark .appkit-rich-text mark {
+  background-color: rgba(101, 196, 8, 0.35);
+  color: #f4f4f5;                               /* zinc-100 */
+}
+
+/* --- Horizontal rule ------------------------------------------------------ */
+.appkit-rich-text hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(to right, transparent, rgba(161, 161, 170, 0.4), transparent);
+  margin: 1.75rem 0;
+}
+
+.dark .appkit-rich-text hr {
+  background: linear-gradient(to right, transparent, rgba(71, 85, 105, 0.5), transparent);
+}
+
+/* --- Links ---------------------------------------------------------------- */
+.appkit-rich-text a {
+  color: #1a55f2;                               /* primary-600 cobalt */
+  text-decoration: underline;
+  text-decoration-color: rgba(26, 85, 242, 0.4);
+  text-underline-offset: 2px;
+  transition: color 150ms, text-decoration-color 150ms;
+}
+
+.appkit-rich-text a:hover {
+  color: #1343de;                               /* primary-700 cobalt */
+  text-decoration-color: rgba(19, 67, 222, 0.7);
+}
+
+.dark .appkit-rich-text a {
+  color: #84e122;                               /* lime green — high contrast on dark bg */
+  text-decoration-color: rgba(132, 225, 34, 0.4);
+}
+
+.dark .appkit-rich-text a:hover {
+  color: #a3f550;                               /* lighter lime green */
+  text-decoration-color: rgba(163, 245, 80, 0.6);
+}
+
+/* --- Tables --------------------------------------------------------------- */
+.appkit-rich-text table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;                    /* zinc-200 */
+}
+
+.dark .appkit-rich-text table {
+  border-color: #334155;                        /* slate-700 */
+}
+
+.appkit-rich-text th {
+  background-color: #f4f4f5;                    /* zinc-100 */
+  color: #18181b;                               /* zinc-900 */
+  font-weight: 600;
+  padding: 0.6rem 0.875rem;
+  text-align: left;
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.dark .appkit-rich-text th {
+  background-color: #1e293b;                    /* slate-800 */
+  color: #f4f4f5;                               /* zinc-100 */
+  border-bottom-color: #334155;
+}
+
+.appkit-rich-text td {
+  padding: 0.55rem 0.875rem;
+  border-bottom: 1px solid #f4f4f5;            /* zinc-100 */
+  color: #3f3f46;                               /* zinc-700 */
+}
+
+.dark .appkit-rich-text td {
+  border-bottom-color: #1e293b;                 /* slate-800 */
+  color: #a1a1aa;                               /* zinc-400 */
+}
+
+.appkit-rich-text tr:last-child td {
+  border-bottom: none;
+}
+
+.appkit-rich-text tr:hover td {
+  background-color: rgba(244, 244, 245, 0.6);   /* zinc-100/60 */
+}
+
+.dark .appkit-rich-text tr:hover td {
+  background-color: rgba(30, 41, 59, 0.5);      /* slate-800/50 */
+}
+
+/* --- Figure & captions ---------------------------------------------------- */
+.appkit-rich-text figure {
+  margin: 1.5rem 0;
+}
+
+.appkit-rich-text figcaption {
+  margin-top: 0.5rem;
+  font-size: 0.8em;
+  color: #71717a;                               /* zinc-500 */
+  text-align: center;
+  font-style: italic;
+}
+
+.dark .appkit-rich-text figcaption {
+  color: #71717a;                               /* zinc-500 */
+}
+
+/* --- Images --------------------------------------------------------------- */
+.appkit-rich-text img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+}
+
+/* --- Headings — consistent theming even without prose-invert -------------- */
+.appkit-rich-text h1,
+.appkit-rich-text h2,
+.appkit-rich-text h3,
+.appkit-rich-text h4,
+.appkit-rich-text h5,
+.appkit-rich-text h6 {
+  color: #18181b;                               /* zinc-900 */
+  font-weight: 700;
+  line-height: 1.25;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.dark .appkit-rich-text h1,
+.dark .appkit-rich-text h2,
+.dark .appkit-rich-text h3,
+.dark .appkit-rich-text h4,
+.dark .appkit-rich-text h5,
+.dark .appkit-rich-text h6 {
+  color: #fafafa;                               /* zinc-50 */
+}
+
+/* --- Body text fallback when not inside a prose wrapper ------------------- */
+.appkit-rich-text p {
+  color: #3f3f46;                               /* zinc-700 */
+}
+
+.dark .appkit-rich-text p {
+  color: #a1a1aa;                               /* zinc-400 */
+}
+
+/* --- Lists ---------------------------------------------------------------- */
+.appkit-rich-text ul,
+.appkit-rich-text ol {
+  padding-left: 1.5rem;
+  color: #3f3f46;
+}
+
+.dark .appkit-rich-text ul,
+.dark .appkit-rich-text ol {
+  color: #a1a1aa;
+}
+
+/* --- Ins / Del ------------------------------------------------------------ */
+.appkit-rich-text ins {
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: #3570fc;               /* primary cobalt */
+}
+
+.dark .appkit-rich-text ins {
+  text-decoration-color: #84e122;               /* lime green on dark */
+}
+
+.appkit-rich-text del {
+  text-decoration: line-through;
+  color: #71717a;
+  opacity: 0.75;
+}
+
+.dark .appkit-rich-text del {
+  color: #52525b;
+}

package/dist/ui/rich-text/RichTextRenderer.d.ts

@@ -0,0 +1,15 @@
+export interface RichTextRendererProps {
+    html?: string | null;
+    className?: string;
+    proseClass?: string;
+}
+/**
+ * SSR-safe HTML renderer for admin/CMS-authored rich text content.
+ *
+ * Works as a React Server Component — no browser APIs, no `"use client"`.
+ * Content is assumed to have been sanitized at save time via RichTextEditor.
+ *
+ * For user-generated content or untrusted HTML, use <RichText> instead
+ * (client-only, runs the DOM-based sanitizer).
+ */
+export declare function RichTextRenderer({ html, className, proseClass, }: RichTextRendererProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/rich-text/RichTextRenderer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SSR-safe HTML renderer for admin/CMS-authored rich text content.
+ *
+ * Works as a React Server Component — no browser APIs, no `"use client"`.
+ * Content is assumed to have been sanitized at save time via RichTextEditor.
+ *
+ * For user-generated content or untrusted HTML, use <RichText> instead
+ * (client-only, runs the DOM-based sanitizer).
+ */
+export function RichTextRenderer({ html, className = "", proseClass = "prose max-w-none dark:prose-invert", }) {
+    if (!html)
+        return null;
+    return (_jsx("div", { className: `appkit-rich-text ${proseClass} ${className}`.trim(), dangerouslySetInnerHTML: { __html: html } }));
+}

package/dist/utils/id-generators.d.ts

@@ -153,6 +153,8 @@ export interface GenerateReviewVideoFilenameInput {
 export declare function generateReviewVideoFilename(input: GenerateReviewVideoFilenameInput): string;
 export declare function generateStoreLogoFilename(storeName: string, ext?: string): string;
 export declare function generateStoreBannerFilename(storeName: string, ext?: string): string;
+export declare function generateBrandLogoFilename(brandName: string, ext?: string): string;
+export declare function generateBrandBannerFilename(brandName: string, ext?: string): string;
 export interface GenerateBlogImageFilenameInput {
     title: string;
     category: string;
@@ -200,6 +202,14 @@ export type MediaFilenameContext = ({
     type: "store-banner";
     store: string;
     ext?: string;
+} | {
+    type: "brand-logo";
+    brand: string;
+    ext?: string;
+} | {
+    type: "brand-banner";
+    brand: string;
+    ext?: string;
 } | ({
     type: "blog-image";
 } & GenerateBlogImageFilenameInput) | ({

package/dist/utils/id-generators.js

@@ -250,6 +250,14 @@ export function generateStoreBannerFilename(storeName, ext = "webp") {
     const store = slugify(storeName).substring(0, 40).replace(/-+$/, "");
     return `store-${store}-banner.${ext.replace(/^\./, "")}`;
 }
+export function generateBrandLogoFilename(brandName, ext = "webp") {
+    const brand = slugify(brandName).substring(0, 40).replace(/-+$/, "");
+    return `brand-${brand}-logo.${ext.replace(/^\./, "")}`;
+}
+export function generateBrandBannerFilename(brandName, ext = "webp") {
+    const brand = slugify(brandName).substring(0, 40).replace(/-+$/, "");
+    return `brand-${brand}-banner.${ext.replace(/^\./, "")}`;
+}
 export function generateBlogImageFilename(input) {
     const title = slugify(input.title).substring(0, 40).replace(/-+$/, "");
     const category = slugify(input.category).substring(0, 20).replace(/-+$/, "");
@@ -328,6 +336,10 @@ export function generateMediaFilename(ctx) {
             return generateStoreLogoFilename(ctx.store, ctx.ext);
         case "store-banner":
             return generateStoreBannerFilename(ctx.store, ctx.ext);
+        case "brand-logo":
+            return generateBrandLogoFilename(ctx.brand, ctx.ext);
+        case "brand-banner":
+            return generateBrandBannerFilename(ctx.brand, ctx.ext);
         case "blog-image":
             return generateBlogImageFilename(ctx);
         case "blog-cover":

package/dist/validation/schemas.d.ts

@@ -15,8 +15,8 @@ export declare const paginationQuerySchema: z.ZodObject<{
     search?: string | undefined;
     page?: number | undefined;
     sortOrder?: "desc" | "asc" | undefined;
-    sortBy?: string | undefined;
     limit?: number | undefined;
+    sortBy?: string | undefined;
 }>;
 export declare const objectIdSchema: z.ZodString;
 export declare const urlSchema: z.ZodString;
@@ -122,10 +122,10 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    rotation?: number | undefined;
     minWidth?: number | undefined;
     quality?: number | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "jpeg" | "png" | undefined;
@@ -135,10 +135,10 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    rotation?: number | undefined;
     minWidth?: number | undefined;
     quality?: number | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "jpeg" | "png" | undefined;
@@ -148,10 +148,10 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    rotation?: number | undefined;
     minWidth?: number | undefined;
     quality?: number | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "jpeg" | "png" | undefined;
@@ -161,10 +161,10 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    rotation?: number | undefined;
     minWidth?: number | undefined;
     quality?: number | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "jpeg" | "png" | undefined;
@@ -174,10 +174,10 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    rotation?: number | undefined;
     minWidth?: number | undefined;
     quality?: number | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "jpeg" | "png" | undefined;
@@ -187,10 +187,10 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    rotation?: number | undefined;
     minWidth?: number | undefined;
     quality?: number | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "jpeg" | "png" | undefined;
@@ -200,10 +200,10 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    rotation?: number | undefined;
     minWidth?: number | undefined;
     quality?: number | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "jpeg" | "png" | undefined;
@@ -213,10 +213,10 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    rotation?: number | undefined;
     minWidth?: number | undefined;
     quality?: number | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "jpeg" | "png" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -71,6 +71,10 @@
       "types": "./dist/features/admin/repository/site-settings.repository.d.ts",
       "import": "./dist/features/admin/repository/site-settings.repository.js"
     },
+    "./features/whatsapp-bot/server": {
+      "types": "./dist/features/whatsapp-bot/server.d.ts",
+      "import": "./dist/features/whatsapp-bot/server.js"
+    },
     "./styles": "./dist/styles.css",
     "./tokens": {
       "types": "./dist/tokens/index.d.ts",

package/README.md

@@ -1,116 +0,0 @@
-# @mohasinac/appkit
-
-Appkit is a TypeScript package that provides shared contracts, feature modules, UI helpers, repositories, and runtime-aware utilities for Next.js and React applications.
-
-## Package Info
-
-- Name: `@mohasinac/appkit`
-- Current version: `2.3.1`
-- Module type: ESM
-- Entrypoints:
-  - Root: `dist/index.js`
-  - Client-only: `dist/client.js`
-  - Server-only: `dist/server.js`
-
-## Installation
-
-```bash
-npm install @mohasinac/appkit
-```
-
-Install peer dependencies required by the features you use:
-
-```bash
-npm install react react-dom next next-intl @tanstack/react-query
-```
-
-Optional peer dependencies (only if your integration uses them):
-
-- `firebase-admin`
-- `resend`
-- `razorpay`
-
-## Build Appkit Locally
-
-```bash
-npm run build
-```
-
-This compiles the package to `dist/` using `tsconfig.build.json`.
-
-## Basic Consumer Usage
-
-```ts
-import {
-  // contracts
-  type ApiResponse,
-  // constants
-  API_ENDPOINTS,
-  // utilities
-  createApiEndpointResolver,
-} from "@mohasinac/appkit";
-```
-
-Appkit exposes three runtime-aware entrypoints:
-
-- `@mohasinac/appkit`: shared/runtime-safe exports
-- `@mohasinac/appkit/client`: browser-only exports
-- `@mohasinac/appkit/server`: server-only exports
-
-Use the smallest runtime-specific entrypoint possible.
-
-## Runtime Handling for Consumers
-
-Because Appkit includes both server-capable and browser-only modules, consumers must choose where code runs.
-
-1. Use shared utilities, types, schemas, and config constants anywhere.
-2. Use server-only code only in server contexts (server actions, route handlers, backend code).
-3. Render browser-only modules from client components.
-4. If a browser-only component must be loaded from an SSR route, use dynamic import with SSR disabled.
-
-Example for browser-only modules in an SSR page:
-
-```tsx
-import dynamic from "next/dynamic";
-
-const ClientWidget = dynamic(
-  () => import("@mohasinac/appkit/client").then((m) => m.ClientWidget),
-  { ssr: false },
-);
-```
-
-Example for server-only modules:
-
-```ts
-import { createApiHandler } from "@mohasinac/appkit/server";
-```
-
-## Consumer Responsibilities
-
-When integrating Appkit, keep these boundaries in your application:
-
-1. Keep secrets in server-only environment files and never expose them in client bundles.
-2. Initialize SDKs once in provider/config bootstrap code.
-3. Keep page-level data fetching in your app's page or server layer; pass data to Appkit views/components.
-4. Wrap writes/mutations in server actions or backend handlers.
-5. Use Appkit repositories/contracts rather than bypassing with ad hoc direct SDK calls.
-
-## Adding New Components or Code to Appkit
-
-Use this checklist when contributing:
-
-1. Place code in the appropriate domain folder under `src/` (`features/`, `core/`, `contracts/`, `utils/`, etc.).
-2. Export new symbols from the local domain barrel (`index.ts`) and then from `src/index.ts` if public.
-3. Keep runtime boundaries explicit:
-   - Browser API usage (`window`, `document`, `navigator`, `localStorage`) belongs to client-only modules.
-   - Node/server SDK usage belongs to server-only modules.
-   - Pure helpers stay framework-agnostic.
-4. Prefer type-safe contracts and schema validation for new APIs and forms.
-5. Run `npm run build` and fix all TypeScript errors before publishing.
-6. Add or update docs when new exports change consumer behavior.
-
-## Publishing Notes
-
-- Only `dist/` is published (`files` field in `package.json`).
-- Ensure build output is up to date before release.
-- Validate exported API surface from `src/index.ts`, `src/client.ts`, and `src/server.ts` before version bump.