ab-nextjs-core 0.1.0 → 0.1.2

package/ab-screen-layout/styles.module.css

@@ -0,0 +1,134 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @name: AB Screen Layout - Component Stylesheet (plain CSS, Tailwind-independent)
+* @file: ab-screen-layout/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
+/* ===== AB SCREEN LAYOUT STYLES ===== */
+
+.abScreenLayout {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.abScreenLayout__headerWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abScreenLayout__contentWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  z-index: 10;
+}
+
+@media (min-width: 768px) {
+  .abScreenLayout__contentWrapper { flex-direction: row; }
+}
+
+@media (min-width: 1536px) {
+  .abScreenLayout__contentWrapper > *:nth-child(1) {
+    margin: 1.5rem;
+    border-radius: 1.5rem;
+    max-height: calc(100vh - 3rem);
+  }
+}
+
+.abScreenLayout__footerWrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abScreenLayout__backdrop {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 40;
+  backdrop-filter: blur(4px);
+}
+
+.abScreenLayout__menus,
+.abScreenLayout__dialogs,
+.abScreenLayout__toasts {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+}
+
+.abScreenLayout__toasts { animation: abCoreFadeIn 300ms ease-in-out; }
+
+.abScreenLayout__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+@keyframes abCoreFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/index.ts

@@ -0,0 +1,58 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @name: Core - Package Catalog
+* @file: index.ts
+* @type: TypeScript
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+import type { CoreCatalogEntry } from './types'
+
+const supportedCore: Array<CoreCatalogEntry> = [
+  // ------ SERVER components ------
+  { name: 'AbAppLayout', file: 'server/ab-app-layout/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbScreenLayout', file: 'server/ab-screen-layout/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbMainLayout', file: 'server/ab-main-layout/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbAsideLayout', file: 'server/ab-aside-layout/index.tsx', kind: 'server', status: 'Done' },
+
+  // ------ CLIENT components ------
+  { name: 'AbAppLayout', file: 'ab-app-layout/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbScreenLayout', file: 'ab-screen-layout/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbMainLayout', file: 'ab-main-layout/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbAsideLayout', file: 'ab-aside-layout/index.tsx', kind: 'client', status: 'Done' },
+]
+
+const abCore = { supportedCore }
+
+export { supportedCore }
+export default abCore

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "ab-nextjs-core",
-  "version": "0.1.0",
-  "description": "🌱 A lightweight collection of server & client React components as core abElements (i.e. ab-app-layout, ab-screen-layout, ...) created by Abraham Ukachi, and optimized for Next.js applications 😎.",
+  "version": "0.1.2",
+  "description": "\ud83c\udf31 A lightweight collection of server & client React components as core abElements (i.e. ab-app-layout, ab-screen-layout, ...) created by Abraham Ukachi, and optimized for Next.js applications \ud83d\ude0e.",
+  "type": "module",
   "main": "index.ts",
   "types": "types/index.d.ts",
   "homepage": "https://github.com/abraham-ukachi/ab-nextjs-core",
@@ -12,13 +13,18 @@
   "bugs": {
     "url": "https://github.com/abraham-ukachi/ab-nextjs-core/issues"
   },
+  "scripts": {
+    "lint": "eslint . --fix",
+    "test": "vitest run"
+  },
   "keywords": [
     "react",
     "nextjs",
     "core",
     "abraham",
     "ukachi",
-    "ab-nextjs-core"
+    "ab-nextjs-core",
+    "ab-elements"
   ],
   "author": {
     "name": "Abraham Ukachi",
@@ -26,7 +32,53 @@
     "email": "abraham.ukachi@laplateforme.io"
   },
   "license": "MIT",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "peerDependencies": {
+    "clsx": "^2",
+    "next": "16.3.4",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "clsx": "^2.1.1",
+    "eslint": "^9.39.0",
+    "eslint-config-next": "16.3.4",
+    "next": "16.3.4",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^5",
+    "vitest": "^3"
+  },
+  "files": [
+    "index.ts",
+    "types",
+    "server",
+    "ab-app-layout",
+    "ab-screen-layout",
+    "ab-main-layout",
+    "ab-aside-layout",
+    "ab-linear-progress",
+    "ab-page-provider",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./index.ts"
+    },
+    "./package.json": "./package.json",
+    "./server/ab-app-layout": "./server/ab-app-layout/index.tsx",
+    "./server/ab-screen-layout": "./server/ab-screen-layout/index.tsx",
+    "./server/ab-main-layout": "./server/ab-main-layout/index.tsx",
+    "./server/ab-aside-layout": "./server/ab-aside-layout/index.tsx",
+    "./ab-app-layout": "./ab-app-layout/index.tsx",
+    "./ab-screen-layout": "./ab-screen-layout/index.tsx",
+    "./ab-main-layout": "./ab-main-layout/index.tsx",
+    "./ab-aside-layout": "./ab-aside-layout/index.tsx",
+    "./ab-page-provider": "./ab-page-provider/index.tsx",
+    "./ab-linear-progress": "./ab-linear-progress/index.tsx"
   }
-}
+}

package/server/ab-app-layout/index.tsx

@@ -0,0 +1,113 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+import type { ReactElement, ReactNode } from 'react';
+import clsx from 'clsx';
+import AbLinearProgress from '../../ab-linear-progress';
+import styles from './styles.module.css';
+
+export interface AbAppLayoutProps {
+  orientation: 'vertical' | 'horizontal';
+  className?: string;
+  hidden?: boolean;
+  pageName?: string;
+  header?: ReactNode;
+  sideBar?: ReactNode;
+  content?: ReactNode;
+  navBar?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+  menus?: ReactNode;
+}
+
+/**
+ * Ab App Layout — Core Server Component (from LYD LydAppLayout).
+ * Slots only — does NOT default to LYD Sidebar/NavBar/next-intl.
+ */
+const AbAppLayout = ({
+  orientation,
+  className,
+  hidden,
+  pageName,
+  header,
+  sideBar,
+  content,
+  navBar,
+  footer,
+  children,
+  menus,
+}: AbAppLayoutProps): ReactElement => {
+  return (
+    <div
+      className={clsx(['AbAppLayout', styles.abAppLayout, className])}
+      hidden={hidden}
+      data-page-name={pageName}
+      data-orientation={orientation ?? ''}
+    >
+      <div className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])}>
+        {header}
+      </div>
+
+      <div className={clsx(['ContentWrapper', styles.abAppLayout__contentWrapper])}>
+        {sideBar}
+        {content ?? children}
+        {navBar}
+      </div>
+
+      <div className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])}>
+        {footer}
+      </div>
+
+      <div id="backdrop" className={clsx(['Backdrop', styles.abAppLayout__backdrop])} hidden />
+      <div id="menus" className={clsx(['Menus', styles.abAppLayout__menus])} hidden>
+        {menus}
+      </div>
+      <div id="dialogs" className={clsx(['Dialogs', styles.abAppLayout__dialogs])} hidden />
+      <div id="toasts" className={clsx(['Toasts', styles.abAppLayout__toasts])} hidden />
+
+      <AbLinearProgress
+        className="absolute top-0 left-0 right-0 z-50 !h-0.5 lg:!h-1"
+        color="secondary"
+        hidden={true}
+        isIndeterminate={true}
+        progress={25}
+      />
+
+      <canvas className={clsx(['Canvas', styles.abAppLayout__canvas])} />
+    </div>
+  );
+};
+
+export default AbAppLayout;

package/server/ab-app-layout/styles.module.css

@@ -0,0 +1,145 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @name: AB App Layout - Component Stylesheet (plain CSS, Tailwind-independent)
+* @file: server/ab-app-layout/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
+/* ===== AB APP LAYOUT STYLES ===== */
+
+.abAppLayout {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.abAppLayout__headerWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abAppLayout__contentWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  z-index: 10;
+}
+
+@media (min-width: 768px) {
+  .abAppLayout__contentWrapper { flex-direction: row; }
+}
+
+@media (min-width: 1536px) {
+  .abAppLayout__contentWrapper > *:nth-child(1) {
+    border-top-right-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+    overflow: hidden;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 0;
+    margin-right: 0;
+    max-height: calc(100vh - 3rem);
+  }
+
+  .abAppLayout__contentWrapper > *:nth-child(2) {
+    margin: 1.5rem;
+    border-radius: 1.5rem;
+    max-height: calc(100vh - 3rem);
+  }
+}
+
+.abAppLayout__footerWrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abAppLayout__backdrop {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 40;
+  backdrop-filter: blur(4px);
+}
+
+.abAppLayout__menus,
+.abAppLayout__dialogs,
+.abAppLayout__toasts {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+}
+
+.abAppLayout__toasts { animation: abCoreFadeIn 300ms ease-in-out; }
+
+.abAppLayout__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+@keyframes abCoreFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/server/ab-aside-layout/index.tsx

@@ -0,0 +1,117 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+import type { ReactElement, ReactNode } from 'react';
+import clsx from 'clsx';
+import AbLinearProgress from '../../ab-linear-progress';
+import styles from './styles.module.css';
+
+export interface AbAsideLayoutProps {
+  orientation: 'vertical' | 'horizontal';
+  className?: string;
+  hidden?: boolean;
+  pageName?: string;
+  header?: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+  dividerHidden?: boolean;
+  menus?: ReactNode;
+}
+
+/**
+ * Ab Aside Layout — Core Server Component (from LYD LydAsideLayout).
+ */
+const AbAsideLayout = ({
+  orientation,
+  className,
+  hidden,
+  pageName,
+  header,
+  content,
+  footer,
+  children,
+  dividerHidden,
+  menus,
+}: AbAsideLayoutProps): ReactElement => {
+  return (
+    <aside
+      className={clsx(['AbAsideLayout', styles.abAsideLayout, className])}
+      hidden={hidden}
+      data-page-name={pageName}
+    >
+      <div className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])}>
+        {header}
+      </div>
+
+      <div
+        className={clsx([
+          'ContentWrapper',
+          styles.abAsideLayout__contentWrapper,
+          orientation === 'horizontal' && '!flex-row',
+        ])}
+      >
+        {content ?? children}
+      </div>
+
+      <div className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])}>
+        {footer}
+      </div>
+
+      <div className={clsx(['Backdrop', styles.abAsideLayout__backdrop])} hidden />
+      <div className={clsx(['Menus', styles.abAsideLayout__menus])} hidden>
+        {menus}
+      </div>
+      <div className={clsx(['Dialogs', styles.abAsideLayout__dialogs])} hidden />
+      <div className={clsx(['Toasts', styles.abAsideLayout__toasts])} hidden />
+
+      {!dividerHidden && (
+        <span className={clsx(['divider', 'vertical', 'left', styles.abAsideLayout__divider])} />
+      )}
+
+      <AbLinearProgress
+        className="absolute top-0 left-0 right-0 z-50 !h-0.5 lg:!h-1"
+        color="secondary"
+        hidden={true}
+        isIndeterminate={true}
+        progress={25}
+      />
+
+      <canvas className={clsx(['Canvas', styles.abAsideLayout__canvas])} />
+    </aside>
+  );
+};
+
+export default AbAsideLayout;