uibee 1.6.12 → 2.0.0

package/src/components/navbar/navbar.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import React, { useState } from 'react'
+import Link from 'next/link'
+import LogoSmall from '@components/logo/logoSmall'
+import LanguageToggle from '@components/toggle/language'
+import ThemeToggle from '@components/toggle/theme'
+import { Language } from 'uibee/components'
+import { LogOut } from 'lucide-react'
+
+
+function hamburgerStyle (isOpen: boolean, isSecond?: boolean) {
+    return `bg-login-50 h-0.5 absolute w-8 transition-all duration-[400ms] left-2 ${
+        isOpen
+            ? `top-6 ${isSecond ? 'rotate-45' : '-rotate-45'}`
+            : isSecond ? 'top-7' : 'top-4'
+    }`
+}
+
+export type NavbarProps = {
+    lang: Language
+    onlyLogo?: boolean
+    theme: string
+    token: string | null
+    children: React.ReactNode
+}
+
+export default function Navbar({ lang, onlyLogo, token, children }: NavbarProps) {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+    return (
+        <div className={`${isMobileMenuOpen ? 'bg-[#181818f0]' : 'bg-[#18181899]'} backdrop-blur-xl fixed top-0 z-900 w-full`}>
+            <div className={`flex w-full max-w-6xl m-auto p-2 transition duration-500 800px:justify-between 800px:p-4 ${
+                isMobileMenuOpen ? 'h-screen bg-login-900/20 800px:h-20' : ''
+            }`}>
+                {/* Logo */}
+                <div className='block h-12 p-1 800px:p-0'>
+                    <Link
+                        href='/'
+                        onClick={() => setIsMobileMenuOpen(false)}
+                    >
+                        <LogoSmall />
+                    </Link>
+                </div>
+
+                {onlyLogo ? null : (
+                    <>
+                        {/* Desktop Navigation */}
+                        <nav className='hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-[50rem]'>
+                            {children}
+                        </nav>
+
+                        {/* Controls */}
+                        <nav className='flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit'>
+                            <ThemeToggle />
+                            <LanguageToggle language={lang} />
+                            <AuthButton token={token} />
+                        </nav>
+
+                        {/* Mobile Menu Button */}
+                        <button
+                            className='w-12 h-12 relative cursor-pointer bg-none border-none 800px:hidden'
+                            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                        >
+                            <div className={hamburgerStyle(isMobileMenuOpen)} />
+                            <div className={hamburgerStyle(isMobileMenuOpen, true)} />
+                        </button>
+
+                        {/* Mobile Navigation */}
+                        <nav className={`fixed top-16 w-[calc(100%-2rem)] max-w-[35rem] mx-auto left-0 right-0 800px:hidden
+                            transition-all duration-500 ease-in-out overflow-hidden 
+                            ${isMobileMenuOpen ? 'max-h-[calc(100vh-4rem)] opacity-100' : 'max-h-0 opacity-0'}`}
+                        onClick={() => setIsMobileMenuOpen(false)}>
+                            {React.Children.map(children, (child, index) => (
+                                <div
+                                    key={index}
+                                    className={`transition-all duration-500 ease-out ${
+                                        isMobileMenuOpen
+                                            ? 'opacity-100 transform translate-y-0'
+                                            : 'opacity-0 transform -translate-y-4'
+                                    }`}
+                                    style={{
+                                        transitionDelay: isMobileMenuOpen ? `${index * 80}ms` : '0ms'
+                                    }}
+                                >
+                                    {child}
+                                </div>
+                            ))}
+                        </nav>
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}
+
+function AuthButton({ token }: { token: string | null }) {
+    return (
+        <div className='rounded-[0.3rem] hover:bg-[#6464641a] h-12 w-12'>
+            {token ? (
+                <Link
+                    href='/api/logout'
+                    prefetch={false}
+                    onClick={(e) => {
+                        e.preventDefault()
+                        window.location.href = '/api/logout'
+                    }}
+                    className='grid items-center justify-center h-full w-full'
+                >
+                    <LogOut size={24} />
+                </Link>
+            ) : (
+                <Link
+                    href='/api/login'
+                    className='grid items-center justify-center h-full w-full'
+                >
+                    <div className={`relative w-[30px] h-5
+                        before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
+                        before:w-[10px] before:h-[10px] before:border-2 before:border-login-50
+                        before:rounded-full before:bg-transparent
+                        after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
+                        after:w-[18px] after:h-2 after:border-2 after:border-login-50
+                        after:rounded-t-[22px] after:border-b-0 after:bg-transparent
+                    `}
+                    />
+                </Link>
+            )}
+        </div>
+    )
+}

package/src/components/navbar/navbarDropdown.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import React, { ReactNode, useRef, useState } from 'react'
+
+export type NavDropdownProps = {
+    children: ReactNode
+    title: string
+}
+
+export default function NavDropdown({ children, title }: NavDropdownProps) {
+    const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false)
+    const navItemRef = useRef<HTMLDivElement>(null)
+
+    return (
+        <>
+            {/* Desktop Dropdown */}
+            <div className={'relative group hidden 800px:block'}>
+                <div className='outline-none' tabIndex={0} ref={navItemRef}>
+                    <div className={`list-none no-underline text-base leading-4 p-3 font-bold cursor-pointer flex flex-row items-center 
+                        transition-colors`
+                    }>
+                        {title}
+                        <ChevronDown className={'w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out'} />
+                    </div>
+                    <div className={`absolute pt-2 -ml-4 -translate-y-4 opacity-0 pointer-events-none
+                        transition-all duration-200 ease-in-out z-10
+                        group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0
+                        group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0`}
+                    >
+                        <ul className={'p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98'}>
+                            {React.Children.map(children, (child, index) => (
+                                <div
+                                    key={index}
+                                    onClick={() => navItemRef.current?.blur()}
+                                    className='group dropdown'
+                                >
+                                    {child}
+                                </div>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {/* Mobile Dropdown */}
+            <div className={'block 800px:hidden'}>
+                <button
+                    className={'bg-none border-none cursor-pointer w-full text-left'}
+                    onClick={(e) => {
+                        e.stopPropagation()
+                        setIsMobileDropdownOpen(!isMobileDropdownOpen)
+                    }}
+                >
+                    <li className={`list-none no-underline text-2xl leading-6 overflow-hidden
+                        w-full pl-4 pr-4 rounded-[0.3rem] transition-all duration-[600ms]
+                        flex items-center gap-2 opacity-100 min-h-16 py-5 `}
+                    >
+                        <span>{title}</span>
+                        <ChevronDown className={`w-6 h-6 transition-transform duration-400 flex-shrink-0 
+                            ${isMobileDropdownOpen ? 'rotate-180' : ''}`}
+                        />
+                    </li>
+                </button>
+                <div className={`list-none no-underline text-xl px-6 ${isMobileDropdownOpen ? 'pb-4' : ''}`}>
+                    {React.Children.map(children, (child, index) => (
+                        <div key={index} className={`leading-6 transition-all duration-500 group dropdown
+                            ${isMobileDropdownOpen ? 'h-11 opacity-100' : 'h-0 opacity-0'}
+                        `}>
+                            {child}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </>
+    )
+}

package/src/components/navbar/navbarItem.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { ArrowUpRight } from 'lucide-react'
+import Link from 'next/link'
+import { ReactNode } from 'react'
+
+export type NavItemProps = {
+    href: string
+    children: ReactNode
+    external?: boolean
+    target?: string
+    rel?: string
+    title?: string
+    icon?: ReactNode
+}
+
+const commonStyling = 'list-none flex no-underline items-center gap-2 whitespace-nowrap cursor-pointer'
+
+export default function NavItem({ href, children, external = false, target, rel, title, icon }: NavItemProps) {
+    const linkProps = { href, target, rel, title }
+
+    return (
+        <>
+            {/* Desktop version */}
+            <Link {...linkProps} className='hidden 800px:block'>
+                <li className={`${commonStyling} text-base leading-4 p-3 font-bold transition-colors link-corner-hover
+                    group-[.dropdown]:p-2.5 group-[.dropdown]:pr-3 group-[.dropdown]:pl-1`
+                }>
+                    {icon}
+                    {children}
+                    {external && <ArrowUpRight className='w-6 h-6 stroke-login' />}
+                </li>
+            </Link>
+
+            {/* Mobile version */}
+            <Link {...linkProps} className='block 800px:hidden'>
+                <li className={`${commonStyling} text-2xl leading-6 overflow-hidden w-auto pl-4 rounded-[0.3rem] transition-all 
+                    duration-[600ms] opacity-100 h-16 py-5 group-[.dropdown]:p-0 group-[.dropdown]:text-lg group-[.dropdown]:h-auto 
+                    group-[.dropdown]:py-2.5 group-[.dropdown]:pl-4`
+                }>
+                    {children}
+                    {external && <ArrowUpRight className='w-6 h-6 stroke-login' />}
+                </li>
+            </Link>
+        </>
+    )
+}

package/src/components/toggle/language.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { getCookie, setCookie } from '@utils/cookies/cookies'
+import { useRouter } from 'next/navigation'
+import { Language } from 'uibee/components'
+import { Globe } from 'lucide-react'
+
+export default function LanguageToggle({language}: {language: Language}) {
+    const [lang, setLang] = useState<Language>(language)
+    const [jump, setJump] = useState(false)
+
+    const router = useRouter()
+
+    useEffect(() => {
+        const savedLang = getCookie('lang') as Language
+        if (savedLang) {
+            setLang(savedLang)
+        }
+    }, [])
+
+    function handleClick() {
+        const newLang = lang === 'no' ? 'en' : 'no'
+        setCookie('lang', newLang)
+        setLang(newLang)
+        language = newLang
+        setJump(true)
+        setTimeout(() => setJump(false), 400)
+        router.refresh()
+    }
+
+    const buttonClasses = `cursor-pointer p-2 leading-8 text-base w-[4.3rem] text-center rounded 
+        bg-transparent border-none hover:bg-gray-400/10 flex flex-row items-center justify-center gap-1`
+
+    return(
+        <button
+            value={lang}
+            onClick={handleClick}
+            className={buttonClasses}
+        >
+            <Globe className={`text-xl leading-8 -mt-0.5 ${jump ? 'animate-jump' : ''}`}/>
+            {' ' + lang}
+        </button>
+    )
+}

package/src/components/toggle/theme.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { getCookie, setCookie } from '@utils/cookies/cookies'
+import { useRouter } from 'next/navigation'
+
+export default function ThemeToggle({className}: {className?: string}) {
+    const router = useRouter()
+    const [theme, setTheme] = useState<'dark' | 'light'>('dark')
+
+    useEffect(() => {
+        const savedTheme = getCookie('theme') as 'dark' | 'light'
+        if (savedTheme) {
+            setTheme(savedTheme)
+        }
+
+        document.documentElement.classList.remove('dark', 'light')
+        document.documentElement.classList.add(theme)
+    }, [theme])
+
+    function toggleTheme() {
+        const newTheme = theme === 'dark' ? 'light' : 'dark'
+        setCookie('theme', newTheme)
+        setTheme(newTheme)
+        router.refresh()
+    }
+
+    return (
+        <div className={`grid place-items-center justify-end rounded-md hover:bg-login-300/20 w-fit ${className}`}>
+            <label className='cursor-pointer'>
+                <input
+                    type='checkbox'
+                    checked={theme === 'light'}
+                    onChange={toggleTheme}
+                    className='sr-only'
+                />
+                <ThemeIcon theme={theme} />
+            </label>
+        </div>
+    )
+}
+
+function ThemeIcon({ theme }: { theme: 'dark' | 'light' }) {
+    const sunrayClass = `fill-white transition-opacity duration-400 ${
+        theme === 'light' ? 'opacity-0' : 'opacity-100'
+    }`
+
+    return (
+        <svg
+            className='h-12 p-3'
+            viewBox='0 0 100 100'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            {/* Sun */}
+            <defs>
+                <mask id='theme-toggle_clip-path'>
+                    <rect x='0' y='0' width='100' height='100' fill='white' />
+                    <circle
+                        className={`transition-transform duration-400 ${
+                            theme === 'dark' ? 'translate-x-8 -translate-y-4' : ''
+                        }`}
+                        cx='68'
+                        cy='40'
+                        r='18'
+                    />
+                </mask>
+            </defs>
+            {/* Moon */}
+            <circle
+                className={`origin-center transition-all duration-400 ${
+                    theme === 'light'
+                        ? 'scale-[1.9] fill-black'
+                        : 'scale-100 fill-white'
+                }`}
+                mask={'url(#theme-toggle_clip-path)'}
+                cx='50'
+                cy='50'
+                r='23'
+            />
+            {/* Sunrays */}
+            <rect
+                className={sunrayClass}
+                x='86'
+                y='47'
+                width='14'
+                height='6'
+                rx='3'
+            />
+            <rect
+                className={sunrayClass}
+                y='47'
+                width='14'
+                height='6'
+                rx='3'
+            />
+            <rect
+                className={sunrayClass}
+                x='47'
+                y='86'
+                width='6'
+                height='14'
+                rx='3'
+            />
+            <rect
+                className={sunrayClass}
+                x='75'
+                y='75'
+                width='6'
+                height='14'
+                rx='3'
+                transform='rotate(-45 78 78)'
+            />
+            <rect
+                className={sunrayClass}
+                x='84.8995'
+                y='12'
+                width='6'
+                height='14'
+                rx='3'
+                transform='rotate(45 84.8995 12)'
+            />
+            <rect
+                className={sunrayClass}
+                x='22.8995'
+                y='74'
+                width='6'
+                height='14'
+                rx='3'
+                transform='rotate(45 22.8995 74)'
+            />
+            <rect
+                className={sunrayClass}
+                x='13'
+                y='16.2426'
+                width='6'
+                height='14'
+                rx='3'
+                transform='rotate(-45 13 16.2426)'
+            />
+            <rect
+                className={sunrayClass}
+                x='47'
+                y='0'
+                width='6'
+                height='14'
+                rx='3'
+            />
+        </svg>
+    )
+}

package/src/components/version/version.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+
+type VersionTagProps = {
+    version?: string
+    url?: string
+    className?: string
+}
+
+export default function VersionTag({version, url, className}: VersionTagProps) {
+    if (!version) {
+        return
+    }
+
+    const style =
+        `w-fit bg-login-600 px-2 py-1 rounded-md text-white tracking-[0.05em] font-semibold text-lg ${className}`
+
+    if (url) {
+        return (
+            <Link
+                className={style}
+                target='_blank'
+                href={url}
+            >
+                v{version}
+            </Link>
+        )
+    }
+
+    return (
+        <div className={style}>
+            v{version}
+        </div>
+    )
+}

package/src/globals.css

@@ -3,6 +3,21 @@
 @config '../tailwind.config.ts';
 
 @theme {
+    --breakpoint-100px: 100px;
+	--breakpoint-200px: 200px;
+	--breakpoint-300px: 300px;
+	--breakpoint-432px: 432px;
+	--breakpoint-350px: 350px;
+	--breakpoint-400px: 400px;
+	--breakpoint-450px: 450px;
+	--breakpoint-500px: 500px;
+	--breakpoint-600px: 600px;
+	--breakpoint-700px: 700px;
+	--breakpoint-800px: 800px;
+	--breakpoint-900px: 900px;
+	--breakpoint-1000px: 1000px;
+	--breakpoint-1200px: 1200px;
+
     --breakpoint-xs: 30rem;
     --breakpoint-2xl: 100rem;
     --breakpoint-3xl: 120rem;
@@ -82,3 +97,35 @@ body {
     background: var(--background);
     font-family: Arial, Helvetica, sans-serif;
 }
+
+@keyframes jump {
+    40% {
+        transform: translateY(-0.3rem);
+    }
+}
+
+@utility animate-jump {
+    animation: jump 0.4s 1;
+}
+
+@utility link-corner-hover {
+    position: relative;
+    
+    &::after {
+        content: ' ';
+        position: absolute;
+        width: .8em;
+        height: .8em;
+        bottom: .4em;
+        right: .4em;
+        border-right: .2em solid transparent;
+        border-bottom: .2em solid transparent;
+        transition: .2s;
+    }
+    
+    &:hover::after {
+        border-color: var(--color-login);
+        right: 0;
+        bottom: 0;
+    }
+}

package/src/scripts/rewriteAlias.ts

@@ -3,35 +3,37 @@ import path from 'path'
 import { globSync } from 'glob'
 
 const DIST_DIR = path.resolve('dist')
-const IMAGES_DIR = path.join(DIST_DIR, 'images')
+const SRC_DIR = path.join(DIST_DIR, 'src')
 
 const jsFiles = globSync(`${DIST_DIR}/**/*.js`, { nodir: true })
 
 jsFiles.forEach((file) => {
     let content = fs.readFileSync(file, 'utf-8')
     const fileDir = path.dirname(file)
-    content = content.replace(/from ['"]@images\/(.*?)['"]/g, (_, p1) => {
-        const targetPath = path.join(IMAGES_DIR, p1)
+
+    // Handle @utils/* imports
+    content = content.replace(/from ['"]@utils\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'utils', p1)
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/')
+        return `from '${relative}'`
+    })
+
+    // Handle @components/* imports
+    content = content.replace(/from ['"]@components\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'components', p1)
         const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/')
         return `from '${relative}'`
     })
 
-    const inlineImages = content.match(/src: ['"]images\/(.*?)['"]/g)
-    if (inlineImages) {
-        inlineImages.forEach((match) => {
-            const imgPathMatch = match.match(/src: ['"]images\/(.*?)['"]/)
-            if (imgPathMatch) {
-                const imgRelativePath = imgPathMatch[1]
-                const resolvedPath = path.join(IMAGES_DIR, imgRelativePath)
-                console.error(`⚠️  Detected inline image in ${file}: ${match}`)
-                console.error(`   Resolved file path: ${resolvedPath}`)
-                console.error(`   This is not allowed. Use 'import image from '@images/${imgRelativePath}'' instead.`)
-            }
-        })
-    }
+    // Handle @hooks/* imports
+    content = content.replace(/from ['"]@hooks\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'hooks', p1)
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/')
+        return `from '${relative}'`
+    })
 
     fs.writeFileSync(file, content, 'utf-8')
 })
 
-console.log('🐝 Image imports rewritten')
+console.log('🐝 All path aliases rewritten')
 console.log('🐝 Build complete')

package/src/types/components.d.ts

@@ -27,6 +27,10 @@ declare module 'uibee/components' {
         (event: ToastEventProps): void
     }
 
+    export type Language = 'no' | 'en'
+
     export default function LoginPage(props: LoginPageProps): JSX.Element;
     export default function Toaster(props: { toasts: ToastProps[] }): JSX.Element;
+    export default function LanguageToggle(props: { lang: Language }): JSX.Element;
+    export default function ThemeSwitch(props: { className?: string }): JSX.Element;
 }

package/tsconfig.json

@@ -13,8 +13,14 @@
     "jsx": "react-jsx",
     "resolveJsonModule": true,
     "paths": {
-      "@images/*": [
-        "./images/*"
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@utils/*": [
+        "./src/utils/*"
+      ],
+      "@hooks/*": [
+        "./src/hooks/*"
       ]
     }
   },