uibee 3.2.0 → 3.3.1

package/dist/utils/auth/callback.d.ts

@@ -0,0 +1,14 @@
+import { AuthCallbackProps } from "uibee/utils";
+
+//#region src/utils/auth/callback.d.ts
+declare function authCallback({
+  req,
+  tokenURL,
+  clientID,
+  clientSecret,
+  redirectPath,
+  userInfoURL,
+  tokenRedirectPath
+}: AuthCallbackProps): Promise<Response>;
+//#endregion
+export { authCallback as default };

package/dist/utils/auth/callback.js

@@ -0,0 +1,53 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/callback.ts
+async function authCallback({ req, tokenURL, clientID, clientSecret, redirectPath, userInfoURL, tokenRedirectPath }) {
+	const domain = getDomain(req);
+	const searchParams = new URL(req.url).searchParams;
+	if (!searchParams) return NextResponse.json({ error: "No search parameters found." }, { status: 400 });
+	const code = searchParams.get("code");
+	if (!code) return NextResponse.json({ error: "No authorization code found." }, { status: 400 });
+	try {
+		const tokenResponse = await fetch(tokenURL, {
+			method: "POST",
+			headers: { "Content-Type": "application/x-www-form-urlencoded" },
+			body: new URLSearchParams({
+				client_id: clientID,
+				client_secret: clientSecret,
+				code,
+				redirect_uri: `${domain}${redirectPath}`,
+				grant_type: "authorization_code"
+			}).toString()
+		});
+		const tokenResponseBody = await tokenResponse.text();
+		if (!tokenResponse.ok) return new Response(JSON.stringify(`Failed to obtain token: ${tokenResponseBody}`), {
+			status: 500,
+			headers: { "Content-Type": "application/json" }
+		});
+		const token = JSON.parse(tokenResponseBody);
+		const userInfoResponse = await fetch(userInfoURL, { headers: { Authorization: `Bearer ${token.access_token}` } });
+		if (!userInfoResponse.ok) {
+			const userInfoError = await userInfoResponse.text();
+			return new Response(`No user info found: ${userInfoError}`, {
+				status: 500,
+				headers: { "Content-Type": "application/json" }
+			});
+		}
+		const userInfo = await userInfoResponse.json();
+		const redirectUrl = new URL(`${domain}${tokenRedirectPath}`);
+		redirectUrl.search = new URLSearchParams({
+			id: userInfo.sub,
+			name: userInfo.name,
+			username: userInfo.nickname,
+			email: userInfo.email,
+			groups: userInfo.groups.join(","),
+			access_token: token.access_token
+		}).toString();
+		return NextResponse.redirect(redirectUrl.toString());
+	} catch (err) {
+		console.error("Error during OAuth flow:", err.message);
+		return NextResponse.json({ error: "Authentication failed" }, { status: 500 });
+	}
+}
+//#endregion
+export { authCallback as default };

package/dist/utils/auth/getDomain.js

@@ -0,0 +1,6 @@
+//#region src/utils/auth/getDomain.ts
+function getDomain(req) {
+	return `${req.headers.get("x-forwarded-proto") ?? new URL(req.url).protocol.replace(":", "")}://${req.headers.get("host") ?? req.headers.get("x-forwarded-host") ?? new URL(req.url).host}`;
+}
+//#endregion
+export { getDomain };

package/dist/utils/auth/login.d.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server.js";
+import { AuthLoginProps } from "uibee/utils";
+
+//#region src/utils/auth/login.d.ts
+declare function AuthLogin({
+  req,
+  clientID,
+  redirectPath,
+  authURL
+}: AuthLoginProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthLogin as default };

package/dist/utils/auth/login.js

@@ -0,0 +1,17 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/login.ts
+async function AuthLogin({ req, clientID, redirectPath, authURL }) {
+	const domain = getDomain(req);
+	const state = Math.random().toString(36).substring(5);
+	const authQueryParams = new URLSearchParams({
+		client_id: clientID,
+		redirect_uri: `${domain}${redirectPath}`,
+		response_type: "code",
+		scope: "openid profile email",
+		state
+	}).toString();
+	return NextResponse.redirect(`${authURL}?${authQueryParams}`);
+}
+//#endregion
+export { AuthLogin as default };

package/dist/utils/auth/logout.d.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server.js";
+import { AuthLogoutProps } from "uibee/utils";
+
+//#region src/utils/auth/logout.d.ts
+declare function AuthLogout({
+  req,
+  path
+}: AuthLogoutProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthLogout as default };

package/dist/utils/auth/logout.js

@@ -0,0 +1,20 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/logout.ts
+async function AuthLogout({ req, path }) {
+	const domain = getDomain(req);
+	const response = NextResponse.redirect(new URL(path || "/", domain));
+	[
+		"access_token",
+		"user_id",
+		"user_name",
+		"user_nickname",
+		"user_email",
+		"user_groups"
+	].forEach((cookieName) => {
+		response.cookies.delete(cookieName);
+	});
+	return response;
+}
+//#endregion
+export { AuthLogout as default };

package/dist/utils/auth/token.d.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server.js";
+import { AuthTokenProps } from "uibee/utils";
+
+//#region src/utils/auth/token.d.ts
+declare function AuthToken({
+  req,
+  redirectPath
+}: AuthTokenProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthToken as default };

package/dist/utils/auth/token.js

@@ -0,0 +1,30 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/token.ts
+async function AuthToken({ req, redirectPath }) {
+	const domain = getDomain(req);
+	const url = new URL(req.url);
+	const token = url.searchParams.get("access_token");
+	const btg = url.searchParams.get("btg");
+	const redirectCookie = req.cookies.get("redirect_after_login");
+	const redirect = redirectCookie ? redirectCookie.value : redirectPath || "/";
+	if (!token) return NextResponse.json({ error: "No access token provided" }, { status: 400 });
+	if (btg) return NextResponse.redirect(new URL(redirect, domain));
+	const accessToken = url.searchParams.get("access_token");
+	const userID = url.searchParams.get("id");
+	const username = url.searchParams.get("name");
+	const userNickname = url.searchParams.get("username");
+	const userEmail = url.searchParams.get("email");
+	const userGroups = url.searchParams.get("groups");
+	const response = NextResponse.redirect(new URL(redirect, domain));
+	response.cookies.set("access_token", accessToken);
+	response.cookies.set("user_id", userID);
+	response.cookies.set("user_name", username);
+	response.cookies.set("user_nickname", userNickname);
+	response.cookies.set("user_email", userEmail);
+	response.cookies.set("user_groups", userGroups);
+	if (redirectCookie) response.cookies.delete("redirect_after_login");
+	return response;
+}
+//#endregion
+export { AuthToken as default };

package/dist/utils/logoConsoleOutput/logoConsoleOutput.d.ts

@@ -0,0 +1,4 @@
+//#region src/utils/logoConsoleOutput/logoConsoleOutput.d.ts
+declare function LogoConsoleOutput(): void;
+//#endregion
+export { LogoConsoleOutput };

package/dist/utils/logoConsoleOutput/logoConsoleOutput.js

@@ -0,0 +1,11 @@
+//#region src/utils/logoConsoleOutput/logoConsoleOutput.ts
+function LogoConsoleOutput() {
+	const ua = navigator.userAgent;
+	if (!ua.includes("Chrome") && !ua.includes("Firefox") && !ua.includes("Safari")) {
+		console.log("Login - Linjeforeningen for IT");
+		return;
+	}
+	console.log("%c███████╗                              ███████╗\n██╔════╝                              ╚════██║\n██║%c ██╗     ██████╗  ██████╗ ██╗███╗   ██╗ %c██║\n╚═╝%c ██║    ██╔═══██╗██╔════╝ ██║████╗  ██║ %c╚═╝%c\n    ██║    ██║   ██║██║  ███╗██║██╔██╗ ██║\n    ██║    ██║   ██║██║   ██║██║██║╚██╗██║\n%c██╗%c ██████╗╚██████╔╝╚██████╔╝██║██║ ╚████║ %c██╗\n██║%c ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝╚═╝  ╚═══╝ %c██║\n███████╗%c                              %c███████║\n╚══════╝                              ╚══════╝%c\n\n       - Laget av TekKom med 🍕 og ❤️", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "");
+}
+//#endregion
+export { LogoConsoleOutput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/buttons/button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Link from 'next/link'
 import type { JSX } from 'react'
 

package/src/components/footer/footer.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import Link from 'next/link'
 import VersionTag from '@components/version/version'
 
 export type Lang = 'no' | 'en'
@@ -31,6 +32,41 @@ function t(s: BilingualString, lang: Lang): string {
     return typeof s === 'string' ? s : s[lang]
 }
 
+function Column({ col, lang }: { col: FooterColumn; lang: Lang }) {
+    return (
+        <div>
+            <h4 className='pb-2 text-sm font-medium tracking-widest text-login-100'>
+                {t(col.heading, lang)}
+            </h4>
+            {col.items.map((item, j) =>
+                item.href ? (
+                    item.href.startsWith('/') ? (
+                        <Link
+                            key={j}
+                            className='link--underscore-hover block text-login-50'
+                            href={item.href}
+                        >
+                            {t(item.label, lang)}
+                        </Link>
+                    ) : (
+                        <a
+                            key={j}
+                            className='link--underscore-hover block text-login-50'
+                            href={item.href}
+                        >
+                            {t(item.label, lang)}
+                        </a>
+                    )
+                ) : (
+                    <p key={j} className='text-login-50'>
+                        {t(item.label, lang)}
+                    </p>
+                )
+            )}
+        </div>
+    )
+}
+
 export default function Footer({
     logo,
     sponsor,
@@ -42,47 +78,49 @@ export default function Footer({
     className,
 }: FooterProps) {
     const year = new Date().getFullYear()
+    const [firstColumn, ...restColumns] = columns ?? []
     const hasRight = (columns && columns.length > 0) || (socialLinks && socialLinks.length > 0)
 
     return (
-        <div className={`mt-24 bg-login-950 md:mt-40 ${className || ''}`}>
+        <div className={`max-md:mt-24 bg-login-950 md:mt-40 ${className || ''}`}>
             <div className={`
-                mx-auto w-full px-4 pt-16 pb-24 md:max-w-304 md:px-12 md:pt-20 md:pb-4
+                mx-auto w-full pb-4 max-md:px-4 max-md:pt-16 md:max-w-304 md:px-12 md:pt-20
                 ${hasRight ? 'md:grid md:grid-cols-[18rem_1fr] md:gap-x-12' : ''}
             `}>
-                <div className='mx-auto grid w-full max-w-60 gap-16 md:row-span-2 md:max-w-72 md:gap-20'>
+                <div className='mx-auto grid w-full max-md:max-w-60 max-md:gap-16 md:row-span-2 md:max-w-72 md:gap-20'>
                     <div className='block w-full'>{logo}</div>
                     {sponsor && (
                         <div>
                             <div className='block w-full'>{sponsor.node}</div>
                             {sponsor.label && (
-                                <p className='pt-8 text-center text-login-100'>{t(sponsor.label, lang)}</p>
+                                <p className='pt-8 text-center text-login-100'>
+                                    {t(sponsor.label, lang)}
+                                </p>
                             )}
                         </div>
                     )}
                 </div>
 
-                {columns && columns.length > 0 && (
+                {firstColumn && (
+                    <div className='
+                        grid w-full self-start max-md:mt-16
+                        max-sm:max-w-60 sm:max-md:max-w-88
+                        md:col-start-2 md:row-start-1 md:max-w-136 md:justify-self-center
+                    '>
+                        <Column col={firstColumn} lang={lang} />
+                    </div>
+                )}
+
+                {restColumns.length > 0 && (
                     <div className={`
-                        mt-12 grid w-full max-w-60 gap-8
-                        sm:max-w-88 sm:justify-items-end sm:justify-self-end
-                        md:col-start-2 md:row-start-1 md:mt-0 md:max-w-136 md:gap-0 md:justify-self-end
-                        ${columns.length > 1 ? 'sm:grid-cols-2' : ''}
+                        grid w-full self-start max-md:mt-16 max-md:gap-8
+                        max-sm:max-w-60 sm:max-md:max-w-88 sm:justify-items-end sm:justify-self-end
+                        md:col-start-2 md:row-start-1 md:max-w-136 md:justify-self-end
+                        ${restColumns.length > 1 ? 'sm:grid-cols-2' : ''}
                     `}>
-                        {columns.map((col, i) => (
+                        {restColumns.map((col, i) => (
                             <div key={i} className='sm:justify-self-center md:justify-self-end'>
-                                <h4 className='pb-2 text-sm font-medium tracking-widest text-login-100'>
-                                    {t(col.heading, lang)}
-                                </h4>
-                                {col.items.map((item, j) =>
-                                    item.href ? (
-                                        <a key={j} className='link--underscore-hover block' href={item.href}>
-                                            {t(item.label, lang)}
-                                        </a>
-                                    ) : (
-                                        <p key={j}>{t(item.label, lang)}</p>
-                                    )
-                                )}
+                                <Column col={col} lang={lang} />
                             </div>
                         ))}
                     </div>
@@ -90,11 +128,12 @@ export default function Footer({
 
                 {socialLinks && socialLinks.length > 0 && (
                     <div className='md:col-start-2 md:row-start-2 md:justify-self-end'>
-                        <div className='mx-auto mt-20 mb-12 flex w-fit flex-wrap justify-center gap-6'>
+                        <div className='mx-auto mt-20 mb-12 grid w-fit gap-6 max-sm:grid-cols-3 sm:grid-flow-col'>
                             {socialLinks.map((link, i) => (
                                 <a
                                     key={i}
-                                    className={`block size-8 text-login-100 transition-all duration-200 group
+                                    className={`group mx-auto flex h-8 w-8 items-center justify-center
+                                        text-login-100 transition-all duration-200
                                         ${link.hoverClass ?? 'hover:text-login-50'}`}
                                     title={link.title}
                                     href={link.href}
@@ -108,11 +147,9 @@ export default function Footer({
                     </div>
                 )}
 
-                <div className='mt-16 flex flex-col items-start gap-4 md:col-span-2 md:row-start-3 md:mt-24 md:grid
-                    md:grid-cols-[auto_min-content] md:items-end md:gap-8'
-                >
+                <div className='mt-24 grid grid-cols-[auto_min-content] items-end gap-8 md:col-span-2 md:row-start-3'>
                     <p className='text-xs wrap-break-word text-login-100'>
-                        Copyright © {year} {t(copyright, lang)}
+                        {lang === 'no' ? 'Opphavsrett' : 'Copyright'} © {year} {t(copyright, lang)}
                     </p>
                     {version && (
                         <VersionTag version={version.tag} url={version.href} />

package/src/components/index.ts

@@ -1,4 +1,3 @@
-'use client'
 export { default as Input } from './inputs/input'
 export { default as SearchInput } from './inputs/searchInput'
 export { default as Textarea } from './inputs/textarea'

package/src/components/inputs/checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Check } from 'lucide-react'
 import { FieldWrapper, InputLabel } from './shared'
 

package/src/components/inputs/input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type ChangeEvent, type JSX, useRef, useState, useId } from 'react'
 import { Calendar, Clock } from 'lucide-react'
 import { FieldWrapper } from './shared'

package/src/components/inputs/radio.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { FieldWrapper, InputLabel } from './shared'
 
 export type RadioOption = {

package/src/components/inputs/range.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { FieldWrapper } from './shared'
 
 export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {

package/src/components/inputs/shared/colorPickerPopup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { type JSX, useState, useEffect, useRef } from 'react'
 
 export type ColorPickerPopupProps = {

package/src/components/inputs/shared/dateTimePickerPopup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useEffect } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 

package/src/components/inputs/textarea.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 import { Eye, Pencil } from 'lucide-react'
 import { FieldWrapper } from './shared'

package/src/components/inputs/toggle.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 type ToggleOption<T> = {
     value: T
     label?: string

package/src/components/sidebar/sidebar.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, type ElementType, type ReactNode } from 'react'
-import { usePathname } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import Link from 'next/link'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
@@ -20,23 +20,49 @@ export type SidebarItem = {
 
 type SidebarProps = {
     items: SidebarItem[]
-    header?: ReactNode
+    header?: ReactNode | ((expanded: boolean) => ReactNode)
     bottomAction?: (expanded: boolean) => ReactNode
     mobile?: boolean
     initialExpanded?: boolean
+    onExpandedChange?: (expanded: boolean) => void
+    className?: string
 }
 
 const ITEM_HEIGHT = 48
 const GAP = 4
 const SUB_STRIDE = 40
 
-export default function Sidebar({ items, header, bottomAction, mobile = false, initialExpanded = true }: SidebarProps) {
+export default function Sidebar({
+    items,
+    header,
+    bottomAction,
+    mobile = false,
+    initialExpanded = true,
+    onExpandedChange,
+    className = '',
+}: SidebarProps) {
     const [expanded, setExpanded] = useState(initialExpanded)
     const pathname = usePathname()
+    const searchParams = useSearchParams()
+    const fullPath = pathname + (searchParams.toString() ? `?${searchParams.toString()}` : '')
+
+    function toggleExpanded() {
+        const next = !expanded
+        setExpanded(next)
+        onExpandedChange?.(next)
+    }
+
+    function isSubActive(sub: SidebarSubItem) {
+        return sub.path.includes('?')
+            ? fullPath.startsWith(sub.path)
+            : pathname === sub.path
+    }
 
     function isItemActive(item: SidebarItem) {
         return pathname === item.path ||
-            !!(item.items?.some(sub => pathname === sub.path || pathname.startsWith(sub.path + '/')))
+            !!(item.items?.some(sub => sub.path.includes('?')
+                ? fullPath.startsWith(sub.path)
+                : pathname === sub.path || pathname.startsWith(sub.path + '/')))
     }
 
     const activeIndex = items.findIndex(isItemActive)
@@ -49,6 +75,7 @@ export default function Sidebar({ items, header, bottomAction, mobile = false, i
             flex flex-col border-r border-login-100/10 bg-login-900
             transition-all duration-300 ease-in-out
             ${mobile ? 'w-full' : `h-full ${expanded ? 'w-64' : 'w-20'}`}
+            ${className}
         `}>
             {!mobile && (
                 <div className={`relative mb-2 p-4 transition-all duration-300 ${expanded ? 'h-16' : 'h-20'}`}>
@@ -57,11 +84,11 @@ export default function Sidebar({ items, header, bottomAction, mobile = false, i
                             absolute top-4 flex items-center transition-all duration-300
                             ${expanded ? 'left-4 gap-3' : 'left-1/2 -translate-x-1/2 gap-0'}
                         `}>
-                            {header}
+                            {typeof header === 'function' ? header(expanded) : header}
                         </div>
                     )}
                     <button
-                        onClick={() => setExpanded(!expanded)}
+                        onClick={toggleExpanded}
                         className={`
                             absolute cursor-pointer rounded-lg p-1.5
                             text-login-200 transition-all duration-300 hover:bg-login-800
@@ -75,7 +102,7 @@ export default function Sidebar({ items, header, bottomAction, mobile = false, i
 
             {mobile && <div className='h-4' />}
 
-            <div className='relative flex flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto px-3'>
+            <div className='relative flex flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto px-3 [scrollbar-width:none]'>
                 {activeIndex >= 0 && (
                     <span
                         aria-hidden
@@ -87,7 +114,7 @@ export default function Sidebar({ items, header, bottomAction, mobile = false, i
                     const isActive = isItemActive(item)
                     const Icon = item.icon
                     const activeSubIndex = item.items
-                        ? item.items.findIndex(sub => pathname === sub.path || pathname.startsWith(sub.path + '/'))
+                        ? item.items.findIndex(isSubActive)
                         : -1
 
                     return (
@@ -142,7 +169,7 @@ export default function Sidebar({ items, header, bottomAction, mobile = false, i
                                         />
                                     )}
                                     {item.items.map((sub, subIndex) => {
-                                        const isSubActive = pathname === sub.path || pathname.startsWith(sub.path + '/')
+                                        const subActive = isSubActive(sub)
                                         return (
                                             <Link
                                                 key={`${index}-${subIndex}`}
@@ -150,7 +177,7 @@ export default function Sidebar({ items, header, bottomAction, mobile = false, i
                                                 className={`
                                                     relative z-10 rounded-lg p-2 text-sm
                                                     transition-all duration-200
-                                                    ${isSubActive
+                                                    ${subActive
                                                 ? 'text-login'
                                                 : 'text-login-300 hover:bg-login-800/30 hover:text-login-100'
                                             }

package/src/components/toast/toastItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { ToastType, ToastProps } from 'uibee/components'

package/src/globals.css

@@ -2,6 +2,11 @@
 
 @config '../tailwind.config.ts';
 
+/* Apply hover styles on :hover directly instead of gating them behind
+   @media (hover: hover), which never matches on devices reporting hover: none. */
+@custom-variant hover (&:hover);
+@custom-variant group-hover (&:is(:where(.group):hover *));
+
 @theme {
     --breakpoint-100px: 100px;
 	--breakpoint-200px: 200px;
@@ -35,7 +40,7 @@
     --color-login-100: #b0b0b0;
     --color-login-75: #e4e4e4;
     --color-login-50: #ededed;
-    
+
     --color-login-text: #ededed;
 }
 

package/tsdown.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
     outExtensions: () => ({ js: '.js', dts: '.d.ts' }),
     dts: true,
     clean: true,
+    unbundle: true,
     deps: {
         onlyBundle: false,
     },