arcanajs 1.0.0 → 2.0.0

package/src/resources/views/back-office/components/ui/CodeBlock/index.tsx

@@ -1,350 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
-import dracula from "react-syntax-highlighter/dist/esm/styles/prism/dracula";
-import okaidia from "react-syntax-highlighter/dist/esm/styles/prism/okaidia";
-
-interface CodeBlockProps {
-  code: string;
-  language?: string;
-  showLineNumbers?: boolean;
-  showCopyButton?: boolean;
-  showHeader?: boolean;
-  maxHeight?: string;
-  expandable?: boolean;
-  filename?: string;
-  theme?: "vscDarkPlus" | "dracula" | "okaidia";
-}
-
-const CodeBlock = ({
-  code,
-  language = "tsx",
-  showLineNumbers = true,
-  showCopyButton = true,
-  showHeader = true,
-  maxHeight = "none",
-  expandable = false,
-  filename,
-  theme = "vscDarkPlus",
-}: CodeBlockProps) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(!expandable);
-  const [showScrollIndicator, setShowScrollIndicator] = useState(false);
-  const codeRef = useRef<HTMLDivElement>(null);
-
-  const themes = {
-    vscDarkPlus,
-    dracula,
-    okaidia,
-  };
-
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy code: ", err);
-    }
-  };
-
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  const checkScrollable = () => {
-    if (codeRef.current) {
-      const { scrollHeight, clientHeight } = codeRef.current;
-      setShowScrollIndicator(scrollHeight > clientHeight);
-    }
-  };
-
-  useEffect(() => {
-    checkScrollable();
-    window.addEventListener("resize", checkScrollable);
-    return () => window.removeEventListener("resize", checkScrollable);
-  }, [code, maxHeight]);
-
-  const simpleFormat = (src: string) => {
-    const indentUnit = "  ";
-    const lines = src.replace(/\r/g, "").split("\n");
-    let level = 0;
-    const out: string[] = [];
-
-    for (let rawLine of lines) {
-      if (/^\s*$/.test(rawLine)) {
-        if (out.length === 0 || /^\s*$/.test(out[out.length - 1])) continue;
-        out.push("");
-        continue;
-      }
-
-      rawLine = rawLine.replace(/\t/g, indentUnit).trim();
-      if (/^[)}\]]/.test(rawLine)) {
-        level = Math.max(0, level - 1);
-      }
-
-      out.push(indentUnit.repeat(level) + rawLine);
-
-      if (/[{[(]$/.test(rawLine) || /:\s*$/.test(rawLine)) {
-        level++;
-      }
-    }
-
-    while (out.length && out[0].trim() === "") out.shift();
-    while (out.length && out[out.length - 1].trim() === "") out.pop();
-    return out.join("\n");
-  };
-
-  const formattedCode = (() => {
-    try {
-      return simpleFormat(code);
-    } catch {
-      return code;
-    }
-  })();
-
-  const getLanguageDisplayName = (lang: string) => {
-    const languageMap: { [key: string]: string } = {
-      tsx: "TypeScript",
-      jsx: "JavaScript",
-      javascript: "JavaScript",
-      typescript: "TypeScript",
-      python: "Python",
-      java: "Java",
-      cpp: "C++",
-      css: "CSS",
-      html: "HTML",
-      json: "JSON",
-      bash: "Bash",
-      shell: "Shell",
-      sql: "SQL",
-    };
-    return languageMap[lang] || lang.toUpperCase();
-  };
-
-  return (
-    <div className="bg-[#1e1e1e] rounded-lg border border-white/10 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300">
-      {/* Header */}
-      {showHeader && (
-        <div className="flex items-center justify-between px-4 py-3 bg-gray-900/50 border-b border-white/10">
-          <div className="flex items-center gap-3">
-            {/* Language Indicator */}
-            <div className="flex items-center gap-2">
-              <div className="flex gap-1">
-                <div className="w-3 h-3 rounded-full bg-red-500"></div>
-                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-                <div className="w-3 h-3 rounded-full bg-green-500"></div>
-              </div>
-              <span className="text-sm font-medium text-gray-300">
-                {getLanguageDisplayName(language)}
-              </span>
-            </div>
-
-            {/* Filename */}
-            {filename && (
-              <div className="flex items-center gap-2 text-xs text-gray-400">
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                  />
-                </svg>
-                {filename}
-              </div>
-            )}
-          </div>
-
-          <div className="flex items-center gap-2">
-            {/* Expand/Collapse Button */}
-            {expandable && (
-              <button
-                onClick={toggleExpand}
-                className="p-1.5 rounded-md hover:bg-white/10 transition-colors duration-200"
-                title={isExpanded ? "Collapse" : "Expand"}
-              >
-                <svg
-                  className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${
-                    isExpanded ? "rotate-180" : ""
-                  }`}
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-            )}
-
-            {/* Copy Button */}
-            {showCopyButton && (
-              <button
-                onClick={copyToClipboard}
-                className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 active:scale-95"
-              >
-                {isCopied ? (
-                  <>
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M5 13l4 4L19 7"
-                      />
-                    </svg>
-                    Copied!
-                  </>
-                ) : (
-                  <>
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                      />
-                    </svg>
-                    Copy
-                  </>
-                )}
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Code Content */}
-      <div
-        ref={codeRef}
-        className={`relative transition-all duration-300 ${
-          isExpanded ? "max-h-none" : `max-h-96 overflow-hidden`
-        }`}
-        style={
-          isExpanded
-            ? {}
-            : { maxHeight: maxHeight !== "none" ? maxHeight : "24rem" }
-        }
-      >
-        {/* Scroll Indicator */}
-        {showScrollIndicator && !isExpanded && (
-          <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-gray-900 to-transparent flex items-center justify-center">
-            <div className="flex items-center gap-1 text-xs text-gray-400 bg-gray-800 px-2 py-1 rounded-full">
-              <svg
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M19 14l-7 7m0 0l-7-7m7 7V3"
-                />
-              </svg>
-              Scroll to see more
-            </div>
-          </div>
-        )}
-
-        <SyntaxHighlighter
-          language={language}
-          style={themes[theme]}
-          showLineNumbers={showLineNumbers}
-          customStyle={{
-            margin: 0,
-            padding: "1.5rem",
-            background: "#1e1e1e",
-            fontSize: "0.875rem",
-            lineHeight: "1.5",
-            border: "none",
-            borderRadius: 0,
-          }}
-          lineNumberStyle={{
-            minWidth: "3em",
-            paddingRight: "1em",
-            color: "#858585",
-            userSelect: "none",
-            background: "transparent",
-          }}
-          wrapLines={true}
-          wrapLongLines={true}
-        >
-          {formattedCode}
-        </SyntaxHighlighter>
-
-        {/* Expand Overlay */}
-        {expandable && !isExpanded && (
-          <div
-            className="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900/80 cursor-pointer flex items-end justify-center pb-4"
-            onClick={toggleExpand}
-          >
-            <div className="flex items-center gap-2 px-4 py-2 bg-gray-800 rounded-lg text-sm text-gray-300 hover:bg-gray-700 transition-colors">
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5"
-                />
-              </svg>
-              Click to expand
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Footer with character/lines count */}
-      <div className="px-4 py-2 bg-gray-900/30 border-t border-white/5 flex justify-between items-center text-xs text-gray-500">
-        <div className="flex items-center gap-4">
-          <span>{formattedCode.split("\n").length} lines</span>
-          <span>{formattedCode.length} characters</span>
-        </div>
-        <div className="flex items-center gap-1">
-          <svg
-            className="w-3 h-3"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M13 10V3L4 14h7v7l9-11h-7z"
-            />
-          </svg>
-          routerkit.com
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CodeBlock;

package/src/resources/views/front-office/components/common/Footer/main.tsx

@@ -1,161 +0,0 @@
-import { Link } from "router-kit";
-
-const MainFooter = () => {
-  return (
-    <footer className="bg-primary-500 border-t border-white/10">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8 sm:py-10 lg:py-12">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
-          {/* Company Info */}
-          <div className="col-span-1 sm:col-span-2">
-            <div className="flex items-center space-x-3 mb-3 sm:mb-4">
-              <span className="text-xl sm:text-2xl font-bold text-gradient">
-                Router-Kit
-              </span>
-            </div>
-            <p className="text-white/70 text-xs sm:text-sm mb-3 sm:mb-4 max-w-md">
-              A lightweight, minimal, and powerful client-side routing library
-              for React applications. Simple yet flexible routing without the
-              overhead.
-            </p>
-            <div className="flex space-x-3 sm:space-x-4">
-              <a
-                href="https://github.com/Mohammed-Ben-Cheikh/router-kit"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-white/70 hover:text-accent-300 transition-colors"
-                aria-label="GitHub"
-              >
-                <svg
-                  className="w-5 h-5 sm:w-6 sm:h-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-                </svg>
-              </a>
-              <a
-                href="https://www.npmjs.com/package/router-kit"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-white/70 hover:text-accent-300 transition-colors"
-                aria-label="NPM"
-              >
-                <svg
-                  className="w-5 h-5 sm:w-6 sm:h-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z" />
-                </svg>
-              </a>
-            </div>
-          </div>
-
-          {/* Quick Links */}
-          <div>
-            <h4 className="text-white text-base sm:text-lg font-semibold mb-3 sm:mb-4">
-              Quick Links
-            </h4>
-            <ul className="space-y-2">
-              <li>
-                <Link
-                  to="/"
-                  className="text-sm text-white/70 hover:text-accent-300 transition-colors"
-                >
-                  Home
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/docs"
-                  className="text-sm text-white/70 hover:text-accent-300 transition-colors"
-                >
-                  Documentation
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/about"
-                  className="text-sm text-white/70 hover:text-accent-300 transition-colors"
-                >
-                  About
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/contact"
-                  className="text-sm text-white/70 hover:text-accent-300 transition-colors"
-                >
-                  Contact
-                </Link>
-              </li>
-            </ul>
-          </div>
-
-          {/* Resources */}
-          <div>
-            <h4 className="text-white text-base sm:text-lg font-semibold mb-3 sm:mb-4">
-              Resources
-            </h4>
-            <ul className="space-y-2">
-              <li>
-                <a
-                  href="https://github.com/Mohammed-Ben-Cheikh/router-kit"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-sm text-white/70 hover:text-accent-300 transition-colors"
-                >
-                  GitHub
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.npmjs.com/package/router-kit"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-sm text-white/70 hover:text-accent-300 transition-colors"
-                >
-                  NPM Package
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#"
-                  className="text-sm text-white/70 hover:text-accent-300 transition-colors"
-                >
-                  API Reference
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#"
-                  className="text-sm text-white/70 hover:text-accent-300 transition-colors"
-                >
-                  Examples
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        {/* Copyright */}
-        <div className="border-t border-white/10 mt-6 sm:mt-8 pt-6 sm:pt-8 text-xs sm:text-sm text-center text-white/60">
-          <p className="px-4">
-            © {new Date().getFullYear()} Router-Kit by{" "}
-            <a
-              href="https://mohammedbencheikh.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-accent-300 hover:underline"
-            >
-              Mohammed Ben Cheikh
-            </a>
-            . All rights reserved.
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default MainFooter;

package/src/resources/views/front-office/components/common/Header/main.tsx

@@ -1,151 +0,0 @@
-import { useState } from "react";
-import { Link, NavLink } from "router-kit";
-
-const MainHeader = () => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const linkClasses =
-    "px-4 py-2 text-white/80 hover:text-accent-300 transition-all duration-300 rounded-lg hover:bg-white/10 font-medium";
-  const activeLinkClasses = "!text-accent-300 bg-white/10";
-
-  const mobileLinkClasses =
-    "block px-4 py-3 text-white/80 hover:text-accent-300 transition-all duration-300 rounded-lg hover:bg-white/10 font-medium";
-
-  const toggleMenu = () => {
-    setIsMenuOpen(!isMenuOpen);
-  };
-
-  const closeMenu = () => {
-    setIsMenuOpen(false);
-  };
-
-  return (
-    <nav className="fixed top-0 left-0 right-0 bg-primary-500/95 backdrop-blur-md border-b border-white/10 z-50">
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-between h-16">
-          <Link to="/" className="flex items-center space-x-3 group">
-            <span className="text-2xl font-bold text-gradient">Router-Kit</span>
-          </Link>
-
-          {/* Desktop Menu */}
-          <div className="hidden md:flex items-center space-x-2">
-            <NavLink
-              className={linkClasses}
-              activeClassName={activeLinkClasses}
-              to="/"
-            >
-              Home
-            </NavLink>
-            <NavLink
-              className={linkClasses}
-              activeClassName={activeLinkClasses}
-              to="/docs"
-            >
-              Documentation
-            </NavLink>
-            <NavLink
-              className={linkClasses}
-              activeClassName={activeLinkClasses}
-              to="/about"
-            >
-              About
-            </NavLink>
-            <NavLink
-              className={linkClasses}
-              activeClassName={activeLinkClasses}
-              to="/contact"
-            >
-              Contact
-            </NavLink>
-            <a
-              href="https://github.com/Mohammed-Ben-Cheikh/router-kit"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="ml-4 px-4 py-2 bg-gradient-blue text-primary-500 rounded-lg font-semibold hover:shadow-lg hover:shadow-accent-300/50 transition-all duration-300"
-            >
-              GitHub
-            </a>
-          </div>
-
-          {/* Mobile Menu Button */}
-          <button
-            onClick={toggleMenu}
-            className="md:hidden p-2 text-white/80 hover:text-accent-300 transition-colors"
-            aria-label="Toggle menu"
-          >
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              {isMenuOpen ? (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              ) : (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              )}
-            </svg>
-          </button>
-        </div>
-
-        {/* Mobile Menu */}
-        <div
-          className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
-            isMenuOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
-          }`}
-        >
-          <div className="py-4 space-y-2" onClick={closeMenu}>
-            <NavLink
-              className={mobileLinkClasses}
-              activeClassName={activeLinkClasses}
-              to="/"
-            >
-              Home
-            </NavLink>
-            <NavLink
-              className={mobileLinkClasses}
-              activeClassName={activeLinkClasses}
-              to="/docs"
-            >
-              Documentation
-            </NavLink>
-            <NavLink
-              className={mobileLinkClasses}
-              activeClassName={activeLinkClasses}
-              to="/about"
-            >
-              About
-            </NavLink>
-            <NavLink
-              className={mobileLinkClasses}
-              activeClassName={activeLinkClasses}
-              to="/contact"
-            >
-              Contact
-            </NavLink>
-            <a
-              href="https://github.com/Mohammed-Ben-Cheikh/router-kit"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="block mx-4 mt-4 px-4 py-2 bg-gradient-blue text-primary-500 rounded-lg font-semibold text-center hover:shadow-lg hover:shadow-accent-300/50 transition-all duration-300"
-            >
-              GitHub
-            </a>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-export default MainHeader;

package/src/resources/views/front-office/components/common/Layout/main.tsx

@@ -1,15 +0,0 @@
-import type { ReactNode } from "react";
-import MainFooter from "../Footer/main";
-import MainHeader from "../Header/main";
-
-const MainLayout = ({ children }: { children: ReactNode }) => {
-  return (
-    <div className="min-h-screen bg-primary-500 flex flex-col">
-      <MainHeader />
-      <main className="pt-16 flex-grow">{children}</main>
-      <MainFooter />
-    </div>
-  );
-};
-
-export default MainLayout;