arcanajs 0.2.2 → 1.0.0

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

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,15 @@
+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;

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

@@ -0,0 +1,350 @@
+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;