@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/data-grid/index.tsx

@@ -0,0 +1,4 @@
+// @liorian/sdk/presentation/data-grid — DataGrid engine.
+export * from "./data-grid-empty";
+export * from "./data-grid-search-engine";
+export * from "./data-grid";

package/src/presentation/form-screen.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import {cn} from "../infrastructure/utilities/utils";
+import {ThemeLogo} from "./system/logo.theme";
+import {AppConfig} from "../domain/config/app.config";
+import Link from "next/link";
+import {useAuth} from "../infrastructure/hooks/use-auth";
+import {Button} from "./ui/button";
+import {ThemeSwitcherButton} from "./theme/theme-switcher-button";
+import {Fragment} from "react";
+
+export interface FormScreenProps extends React.HTMLAttributes<HTMLDivElement> {
+    hideSideImage?: boolean;
+}
+
+const COPYRIGHT_YEAR = new Intl.DateTimeFormat('fr-FR', {year: 'numeric'}).format(new Date());
+
+export function FormScreen({className, children, hideSideImage, ...props}: FormScreenProps) {
+    const {user, logout} = useAuth()
+    const inPopup = typeof window !== 'undefined' && window.opener && window.opener !== window
+
+    return (
+        <Fragment>
+            <div className={cn(
+                "hidden w-full",
+                inPopup ? "" : "flex justify-end items-center"
+            )}>
+                <div className="p-4">
+                    <ThemeSwitcherButton/>
+                </div>
+            </div>
+            <div {...props}
+                 className={cn("flex flex-col min-h-svh items-center justify-center bg-background p-4 md:p-10", className,)}>
+                <div
+                    className={cn(
+                        "relative w-full max-w-150 min-h-150 rounded-[32px] overflow-hidden bg-background border border-white/5",
+                        hideSideImage && "flex flex-col justify-center",
+                        !hideSideImage && "grid lg:grid-cols-[1.15fr_0.85fr]"
+                    )}>
+                    {/* Left side (Form) */}
+                    <div className="flex flex-col justify-between gap-8 p-8 md:p-12 ">
+                        <div className="flex items-center justify-between w-full">
+                            <div className="flex items-center gap-2">
+                                <div className="w-full max-w-80 rounded-full  flex items-center justify-center">
+                                    <ThemeLogo variant="banner" color={"black"} onDark={"white"}
+                                               className="object-contain"/>
+                                </div>
+                                {/*<span className="font-bold text-sm text-white">Liorian</span>*/}
+                            </div>
+                            <div className="flex items-center gap-6 text-xs text-muted-foreground">
+                                {/*<Link href="/public" className="hover:text-white transition-colors">Accueil</Link>*/}
+                                {/*<Link href="/auth/sign-in" className="hover:text-white transition-colors">Se connecter</Link>*/}
+                                {/*<Link href="/auth/sign-up" className="hover:text-white transition-colors">Rejoindre</Link>*/}
+                            </div>
+                        </div>
+                        <div className="flex flex-1 items-center justify-center w-full">
+                            {children}
+                        </div>
+                        {
+                            user && (
+                                <div className="flex flex-row items-center">
+                                    <Button onClick={logout} variant="ghost">
+                                        Se déconnecter
+                                    </Button>
+                                </div>
+                            )
+                        }
+                        <div
+                            className="text-left text-[10px] text-muted-foreground/30 font-medium uppercase tracking-wider">
+                            © {COPYRIGHT_YEAR} {AppConfig.APP_NAME}
+                        </div>
+                    </div>
+                    {/* Right side (Image with curvy separator) */}
+                    {!hideSideImage && (<div className="relative hidden lg:block overflow-hidden">
+                        <img
+                            src="/assets/images/image-001.jpg"
+                            alt={AppConfig.APP_NAME}
+                            className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.4]"
+                        />
+                        {/* Wavy separator overlay */}
+                        <div className="absolute top-0 bottom-0 left-0 w-8 -ml-px fill-background stroke-none">
+                            <svg viewBox="0 0 100 1000" preserveAspectRatio="none" className="h-full w-full">
+                                <path d="M100 0 C 35 250, 40 750, 100 1000 L0 1000 L0 0 Z"/>
+                            </svg>
+                        </div>
+                        {/* Bottom-right watermark logo */}
+                        <div className="absolute bottom-8 right-8 text-white select-none ">
+                            <ThemeLogo variant="icon" className="h-8 w-auto object-contain brightness-0 invert"/>
+                        </div>
+                    </div>)}
+                </div>
+            </div>
+        </Fragment>
+    )
+}

package/src/presentation/icons/custom.tsx

@@ -0,0 +1,20 @@
+import {IconKey, IIconCustomProps} from "./types";
+import {Fragment} from "react";
+import {LucideIcon} from "./lucide";
+import {RemixIcon} from "./remix";
+import {IconProviderEnum} from "./icons.enum";
+
+
+
+export function CustomIcon({provider = IconProviderEnum.LUCIDE, name, ...props}: IIconCustomProps) {
+    return <Fragment>
+        {!provider || provider === IconProviderEnum.LUCIDE
+            ? <LucideIcon {...props} name={name as IconKey}/>
+            : null
+        }
+        {provider === IconProviderEnum.REMIX
+            ? <RemixIcon {...props} name={name as IconKey}/>
+            : null
+        }
+    </Fragment>
+}

package/src/presentation/icons/glyphIcons.tsx

@@ -0,0 +1,53 @@
+import {cn} from "../../infrastructure/utilities/utils";
+import React from "react";
+import {camelCase} from "../../infrastructure/utilities/strings.util";
+
+export enum FaTypeEnum {
+    Solid = 'fas',
+    Regular = 'far',
+    Brands = 'fab',
+    Light = 'fal',
+    Duotone = 'fad',
+    SharpRegular = 'fa-sharp fa-regular',
+    SharpSolid = 'fa-sharp fa-solid',
+    SharpLight = 'fa-sharp fa-light',
+    SharpDuotoneSolid = 'fa-sharp-duotone fa-solid',
+    SharpDuotoneRegular = 'fa-sharp-duotone fa-regular',
+    SharpDuotoneLight = 'fa-sharp-duotone fa-light',
+    SharpDuotoneThin = 'fa-sharp-duotone fa-thin',
+    BoldRounded = 'fi fi-br',
+    SolidRounded = 'fi fi-sr',
+    RegularRounded = 'fi fi-rr',
+}
+
+export enum FaSizeEnum {
+    x1 = 1,
+    x2 = 2,
+    x3 = 3,
+    x4 = 4,
+    x5 = 5,
+    x6 = 6,
+    x7 = 7,
+    x8 = 8,
+    x9 = 9,
+    x10 = 10,
+}
+
+export interface FaIconProps extends React.HTMLProps<HTMLSpanElement>{
+    type?: FaTypeEnum;
+    name: string;
+    size?: FaSizeEnum;
+}
+
+export function FaIcon({type, name, size, className, ...props}: FaIconProps) {
+    const _type = type ? type.toString().trim() : 'fas';
+    const isFa = _type.substring(0, 2) === 'fa';
+
+    return (
+        <i {...props} className={cn(
+            'animate-zoom-in',
+            className,
+            `${isFa ? _type : ''} ${isFa ? 'fa-': `${type}-`}${camelCase(name)} ${(size ? `fa-${size}x` : 'fa-lg')}`,
+        )}></i>
+    )
+}

package/src/presentation/icons/icons.enum.ts

@@ -0,0 +1,4 @@
+export enum IconProviderEnum {
+    REMIX = 'RemixIcon',
+    LUCIDE = 'LucideIcon',
+}

package/src/presentation/icons/icons.util.ts

@@ -0,0 +1,6 @@
+import {IconKey} from "./types";
+
+
+export function toIconKey(name: string){
+    return name as IconKey;
+}

package/src/presentation/icons/index.tsx

@@ -0,0 +1,8 @@
+// @liorian/sdk/presentation/icons — icon provider system.
+export * from "./custom";
+export * from "./glyphIcons";
+export * from "./icons.enum";
+export * from "./icons.util";
+export * from "./lucide";
+export * from "./remix";
+export * from "./types";

package/src/presentation/icons/lucide.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import {IconKey, IIconProps} from "./types";
+import * as Icons from "lucide-react";
+import React from "react";
+import {cn} from "../../infrastructure/utilities/utils";
+import {kebabToPascalCase} from "../../infrastructure/utilities/strings.util";
+
+export function LucideIcon({name, size = 16, color = "currentColor", className}: IIconProps) {
+    name = kebabToPascalCase<IconKey>(name)
+    const Icon = Icons[name as IconKey] as React.ForwardRefExoticComponent<any>;
+    if(!Icon) return null;
+    return <Icon className={cn(
+        className,
+        `size-${size}`
+    )} color={color} />;
+}

package/src/presentation/icons/remix.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import {IconKey, IIconExtendedProps} from "./types";
+import * as Icons from "@remixicon/react";
+import {cn} from "../../infrastructure/utilities/utils";
+import {kebabToPascalCase} from "../../infrastructure/utilities/strings.util";
+import {toIconKey} from "./icons.util";
+
+
+export function RemixIcon({name, size = 3, color = "currentColor", variant = 'Line', className}: IIconExtendedProps) {
+
+    name = toIconKey(
+        name.startsWith('ri-')
+            ? name.replace('ri-', '')
+            : name
+    );
+    name = toIconKey(
+        name.endsWith('-line')
+            ? name.replace('-line', '')
+            : name
+    );
+
+    name = toIconKey(
+        name.endsWith('-fill')
+            ? name.replace('-fill', '')
+            : name
+    );
+
+    name = kebabToPascalCase<IconKey>(`ri-${name}-${variant}`)
+    const Icon = Icons[name as keyof typeof Icons] as React.ForwardRefExoticComponent<any>;
+    if (!Icon) return null;
+    return <Icon className={cn(className, `size-${size}`)} color={color}/>;
+}

package/src/presentation/icons/types.ts

@@ -0,0 +1,27 @@
+import Icons from "lucide-react";
+import React from "react";
+import {IconProviderEnum} from "./icons.enum";
+
+export type IconKey = keyof typeof Icons;
+
+export interface IIconProps extends React.ComponentProps<'i'> {
+    name: IconKey | string;
+    size?: number;
+    color?: string;
+}
+
+export interface IIconExtendedProps extends IIconProps {
+    variant?: 'Fill' | 'Line';
+}
+
+export interface IIconCustomProps extends IIconExtendedProps {
+    provider?: IconProviderEnum;
+}
+
+export interface IPagesIcons {
+    default: string;
+    create: string;
+    read: string;
+    update: string;
+    delete: string;
+}

package/src/presentation/index.tsx

@@ -0,0 +1,45 @@
+// @liorian/sdk/presentation — presentational layer (components, data-grid, icons, modals, themes, ui…).
+// NOTE: `8starlabs-ui` legacy components are intentionally NOT hoisted here to avoid clashing
+// with the design-system primitives (`Button`, `buttonVariants`, `TimelineItem`, …).
+// They remain available via `@liorian/sdk/presentation/8starlabs-ui`.
+// NOTE: `katon/header-menubar` (custom `NavigationMenu`) is not hoisted either — the design-system
+// `NavigationMenu` wins here; the katon one stays on `@liorian/sdk/presentation/themes/katon`.
+export * from "./analytics-section";
+export * from "./app-sidebar";
+export * from "./charts";
+export * from "./components";
+export * from "./data-grid";
+export * from "./form-screen";
+export * from "./icons";
+export * from "./modals";
+export * from "./module-menubar";
+export * from "./module-widget";
+export * from "./nav-documents";
+export * from "./nav-main";
+export * from "./nav-secondary";
+export * from "./nav-user";
+export * from "./permission-action-badge";
+export * from "./reui";
+export * from "./sheets";
+export * from "./size.enum";
+export * from "./system";
+export * from "./theme";
+export * from "./uploading";
+export * from "./ui";
+
+// Katon theme (hoisted individually; `header-menubar` excluded — see note above).
+export * from "./themes/katon/view";
+export * from "./themes/katon/view-wrapper";
+export * from "./themes/katon/view-helmet";
+export * from "./themes/katon/view-frame";
+export * from "./themes/katon/view-status";
+export * from "./themes/katon/main-wrapper";
+export * from "./themes/katon/edge-section";
+export * from "./themes/katon/header-modules-available";
+export * from "./themes/katon/header-modules-recents";
+export * from "./themes/katon/header-options";
+export * from "./themes/katon/header-organization-select";
+export * from "./themes/katon/header-routines";
+export * from "./themes/katon/header-tasks-connected-user";
+export * from "./themes/katon/module-item-link";
+export * from "./themes/katon/dashboard-layout";

package/src/presentation/modals/components/ModalBox.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+import {useModalStore} from '../stores/useModalStore';
+import {ModalInstance} from '../types/modal.type';
+import {cn} from "../../../infrastructure/utilities/utils";
+import {SizeEnum, SizeHeightEnum} from "../../size.enum";
+import {FaIcon, FaSizeEnum, FaTypeEnum} from "../../icons/glyphIcons";
+import {COMMON_CLASSNAMES} from "../../../infrastructure/common-classname.constant";
+import {CircleXIcon, XIcon} from "lucide-react";
+
+interface ModalBoxProps {
+    modal: ModalInstance;
+}
+
+const ModalBox = ({modal}: ModalBoxProps) => {
+    const closeModal = useModalStore((state) => state.closeModal);
+    let {id, component: Component, props, options} = modal;
+
+    options = options || {};
+    options.scrollable = typeof options.scrollable === 'undefined' ? true : options.scrollable;
+
+    return (
+        <div
+            className={cn(
+                "relative w-full overflow-hidden flex flex-col rounded-xl! border bg-background text-foreground shadow-lg",
+                COMMON_CLASSNAMES.Layer,
+                SizeEnum[options.size || 'AUTO'],
+                options?.useHeight && SizeHeightEnum[options.size || 'AUTO'],
+                options?.className
+            )}
+        >
+            {(options?.title || options?.closable !== false) && (
+                <div className="flex items-center justify-between px-4 py-4">
+                    <div className="flex flex-col px-2">
+                        {options?.title && (
+                            <h3 className="text-lg font-semibold text-foreground">
+                                {options.title}
+                            </h3>
+                        )}
+                        {options?.description && (
+                            <p className="text-sm text-muted-foreground">
+                                {options.description}
+                            </p>
+                        )}
+                    </div>
+
+                    {options?.closable !== false && (
+                        <button
+                            onClick={() => !options?.locked && closeModal(id)}
+                            disabled={options?.locked}
+                            className={cn(
+                                "absolute top-0 right-0 p-1 m-2 rounded-full transition-colors text-muted-foreground",
+                                options?.locked ? "opacity-50 cursor-not-allowed" : "hover:bg-muted"
+                            )}
+                        >
+                            <XIcon className="size-7"/>
+                        </button>
+                    )}
+                </div>
+            )}
+
+            <div className={cn(
+                "flex-auto w-full ",
+                options?.scrollable && "overflow-y-auto",
+                !options?.scrollable && "overflow-hidden",
+            )}>
+                {typeof Component === 'function' ? <Component {...props} /> : Component}
+            </div>
+        </div>
+    );
+};
+
+export default ModalBox;

package/src/presentation/modals/components/ModalPortal.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useModalStore } from '../stores/useModalStore';
+import ModalWrapper from './ModalWrapper';
+
+const ModalPortal = () => {
+  const [mounted, setMounted] = useState(false);
+  const modals = useModalStore((state) => state.modals);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted || modals.length === 0) return null;
+
+  // Each wrapper portals itself into `document.body` at open time, so stacked
+  // overlays follow open order like any other dismissable layer.
+  return (
+    <>
+      {modals.map((modal, index) => (
+        <ModalWrapper
+          key={modal.id}
+          modal={modal}
+          index={index}
+          isLast={index === modals.length - 1}
+        />
+      ))}
+    </>
+  );
+};
+
+export default ModalPortal;