uibee 1.4.0 → 1.4.2

package/Readme.md

@@ -1,4 +1,38 @@
-# Login - Linjeforeningen for IT
-## Shared Code
+
+# Uibee
 
 This package includes shared components, functions and hooks for reuse across Login projects.
+
+## Installation
+
+```bash
+# Clone the repository
+git clone git@github.com:Login-Linjeforening-for-IT/uibee.git
+cd uibee
+
+# Install dependencies
+npm install
+```
+
+## Usage
+
+```bash
+# Start the development server
+npm run build
+```
+
+## Folder Structure
+```
+.
+├── src/
+│   ├── components/      # Reusable NextJS components
+│   ├── hooks/           # Custom React hooks
+│   ├── scripts/         # Build and utility scripts
+│   ├── types/           # TypeScript type definitions
+│   ├── utils/           # Utility functions
+│   └── globals.css      # Global styles
+├── images/              # Project images and SVGs
+├── package.json         # Project metadata and scripts
+├── tailwind.config.ts   # Tailwind CSS configuration
+├── tsconfig.json        # TypeScript configuration
+```

package/dist/globals.css

@@ -7,6 +7,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-300: oklch(80.8% 0.114 19.571);
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
+    --color-green-300: oklch(87.1% 0.15 154.449);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
     --spacing: 0.25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
@@ -185,9 +189,6 @@
   }
 }
 @layer utilities {
-  .absolute {
-    position: absolute;
-  }
   .fixed {
     position: fixed;
   }
@@ -209,6 +210,12 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .flex {
     display: flex;
   }
@@ -326,6 +333,12 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .text-center {
     text-align: center;
   }
@@ -357,6 +370,18 @@
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
   }
+  .text-blue-300\/70 {
+    color: color-mix(in srgb, oklch(80.9% 0.105 251.813) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-blue-300) 70%, transparent);
+    }
+  }
+  .text-green-300\/70 {
+    color: color-mix(in srgb, oklch(87.1% 0.15 154.449) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-green-300) 70%, transparent);
+    }
+  }
   .text-login {
     color: var(--color-login);
   }
@@ -366,6 +391,18 @@
   .text-login-100 {
     color: var(--color-login-100);
   }
+  .text-red-300\/70 {
+    color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-red-300) 70%, transparent);
+    }
+  }
+  .text-yellow-300\/70 {
+    color: color-mix(in srgb, oklch(90.5% 0.182 98.111) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-yellow-300) 70%, transparent);
+    }
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

package/dist/src/components/toast/toaster.d.ts

@@ -1,3 +1,3 @@
-import { ToastProps } from 'uibee/components';
-export declare function addToast(message: string, type?: ToastProps['type']): void;
+import { ToastType } from 'uibee/components';
+export declare function addToast(type: ToastType, title: string, description?: string): void;
 export default function Toaster(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toast/toaster.js

@@ -3,19 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react';
 import { useEffect, useState, useRef } from 'react';
 const observers = [];
-export function addToast(message, type) {
-    observers.forEach((observer) => observer({ message, type }));
+export function addToast(type, title, description = '') {
+    observers.forEach((observer) => observer({ title, description, type }));
 }
 export default function Toaster() {
     const [toasts, setToasts] = useState([]);
     const timers = useRef({});
     const [isHovered, setIsHovered] = useState(false);
     const pauseTimes = useRef({});
+    const mainToastRef = useRef(null);
+    const [mainToastPosition, setMainToastPosition] = useState(null);
     useEffect(() => {
-        const listener = ({ message, type }) => {
+        const listener = ({ type, title, description }) => {
             const id = Date.now();
             setToasts(prev => {
-                const newToasts = prev.concat({ id, message, type, remaining: 3000, created: Date.now() }).slice(-3);
+                const newToasts = prev.concat({ id, type, title, description, remaining: 3000, created: Date.now() }).slice(-3);
                 return newToasts;
             });
         };
@@ -51,25 +53,37 @@ export default function Toaster() {
             });
         }
     }, [isHovered, toasts]);
+    // Track main toast position for stacking
+    useEffect(() => {
+        if (mainToastRef.current && toasts.length > 0) {
+            const rect = mainToastRef.current.getBoundingClientRect();
+            setMainToastPosition({
+                top: rect.top,
+                right: window.innerWidth - rect.right
+            });
+        }
+    }, [toasts, isHovered]);
     const bgClasses = ['bg-login-600', 'bg-login-700', 'bg-login-800'];
-    return (_jsx("div", { className: `fixed bottom-4 right-4 z-50 flex ${isHovered ? 'flex-col-reverse items-end gap-2' : 'flex-col items-end'}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: toasts.slice().reverse().map((toast, idx) => (_jsxs("div", { className: 'p-2 rounded-lg text-login-50 animate-fade-in-down transition-all w-sm flex items-center gap-2 ' +
-                (bgClasses[idx] || bgClasses[2]), style: isHovered ? {} : {
-                position: 'absolute',
-                right: 0,
+    return (_jsx("div", { className: `fixed bottom-4 right-4 z-50 flex ${isHovered ? 'flex-col-reverse items-end gap-2' : 'flex-col items-end'}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: toasts.slice().reverse().map((toast, idx) => (_jsxs("div", { ref: idx === 0 ? mainToastRef : null, className: 'p-2 rounded-lg text-login-50 animate-fade-in-down transition-all w-sm flex items-center gap-2 ' +
+                (bgClasses[idx] || bgClasses[2]), style: isHovered ? {} : idx === 0 ? {
+                zIndex: 100,
+            } : {
+                position: 'fixed',
+                top: mainToastPosition ? `${mainToastPosition.top - idx * 8}px` : 'auto',
                 zIndex: 100 - idx,
-                bottom: `${idx * 8}px`,
                 transform: `scale(${1 - idx * 0.05})`,
-            }, children: [_jsx("span", { className: 'flex-shrink-0 w-10 h-10 flex items-center justify-center', children: _jsx(ToastIcon, { type: toast.type }) }), _jsx("span", { children: toast.message })] }, toast.id))) }));
+            }, children: [_jsx("span", { className: 'flex-shrink-0 w-10 h-10 flex items-center justify-center', children: _jsx(ToastIcon, { type: toast.type }) }), _jsxs("div", { className: 'pr-1 pb-1', children: [_jsx("span", { className: 'font-bold', children: toast.title }), (idx === 0 || isHovered) &&
+                            _jsx("span", { className: 'text-sm line-clamp-3', children: toast.description })] })] }, `${toast.id}-${idx}`))) }));
 }
 function ToastIcon({ type }) {
     switch (type) {
         case 'success':
-            return _jsx(CircleCheck, {});
+            return _jsx(CircleCheck, { className: 'text-green-300/70' });
         case 'warning':
-            return _jsx(CircleAlert, {});
+            return _jsx(CircleAlert, { className: 'text-yellow-300/70' });
         case 'error':
-            return _jsx(CircleX, {});
+            return _jsx(CircleX, { className: 'text-red-300/70' });
         case 'info':
-            return _jsx(Info, {});
+            return _jsx(Info, { className: 'text-blue-300/70' });
     }
 }

package/dist/src/utils/LogoConsoleOutput/LogoConsoleOutput.d.ts

@@ -0,0 +1 @@
+export declare function LogoConsoleOutput(): void;

package/dist/src/utils/LogoConsoleOutput/LogoConsoleOutput.js

@@ -0,0 +1,44 @@
+export function LogoConsoleOutput() {
+    const chromeStr = '%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 ❤️';
+    const safariStr = '\n' +
+        '%c███████╗\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  ███████╗\n' +
+        '██╔═════╝\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t╚════██║\n' +
+        '██║%c   ██╗\t\t\t\t  ██████╗\t \t ╔██████╗\t  ██╗    \t ███╗ \t\t   ██╗%c\t  ██║\n' +
+        '  ╚═╝%c \t██║\t\t\t  ██╔════██╗\t ██╔════╝\t  ██║    \t ████╗\t   ██║%c\t   ╚═╝%c\n' +
+        '    \t\t██║\t\t\t  ██║\t\t\t   ██║\t ██║\t  ███╗    ██║\t\t ██╔██╗    ██║\n' +
+        '    \t\t██║\t\t\t  ██║\t\t\t   ██║\t ██║\t\t ██║    ██║\t\t ██║╚██╗  ██║\n' +
+        '%c██╗%c   ██████╗\t╚██████╝\t\t ╚██████╝\t  ██║      ██║\t\t ╚███║ \t  %c██╗\n' +
+        '██║%c\t  ╚═════╝\t\t  ╚════╝\t\t\t\t╚═════╝\t\t   ╚═╝\t\t ╚═╝\t\t  ╚═══╝\t\t  %c██║\n' +
+        '███████╗%c\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t %c███████║\n' +
+        '   ╚══════╝\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t╚══════╝%c\n\n' +
+        '\t\t\t\t\t\t\t\t\t\t\t\t\t- Laget av TekKom med 🍕 og ❤️';
+    let str = '';
+    if (navigator.userAgent.indexOf('Chrome') != -1) {
+        str = chromeStr;
+    }
+    else if (navigator.userAgent.indexOf('Firefox') != -1) {
+        str = chromeStr;
+    }
+    else if (navigator.userAgent.indexOf('Safari') != -1) {
+        str = safariStr;
+    }
+    else {
+        return (console.log('Login - Linjeforeningen for IT'));
+    }
+    // each string is the CSS to apply for each consecutive %c
+    console.log(str, 
+    // applies orange color
+    'color: #fd8738', 
+    // clears the style for every non orange part
+    '', 'color: #fd8738', '', 'color: #fd8738', '', 'color: #fd8738', '', 'color: #fd8738', '', 'color: #fd8738', '', 'color: #fd8738', '');
+}

package/dist/src/utils/cookies/cookies.d.ts

@@ -0,0 +1,4 @@
+export declare function getCookie(name: string): string | null;
+export declare function setCookie(name: string, value: string, days?: number): void;
+export declare function removeCookies(...cookies: string[]): void;
+export declare function removeCookie(name: string): void;

package/dist/src/utils/cookies/cookies.js

@@ -0,0 +1,28 @@
+export function getCookie(name) {
+    const matches = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()[\]/\\+^])/g, '\\$1') + '=([^;]*)'));
+    return matches ? decodeURIComponent(matches[1]) : null;
+}
+export function setCookie(name, value, days) {
+    let expires = '';
+    if (!value) {
+        return;
+    }
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+        expires = `expires=${date.toUTCString()};`;
+    }
+    document.cookie =
+        `${name}=${encodeURIComponent(value)}; ` +
+            `${expires} path=/; SameSite=Lax`;
+}
+export function removeCookies(...cookies) {
+    for (const cookie of cookies) {
+        removeCookie(cookie);
+    }
+}
+export function removeCookie(name) {
+    document.cookie =
+        `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; ` +
+            'path=/; SameSite=Lax';
+}

package/dist/src/utils/index.d.ts

@@ -1,2 +1,4 @@
 export { default as alertSlowQuery } from './sql/alertSlowQuery';
 export { default as discordAlert } from './discord/discordAlert';
+export { getCookie, setCookie, removeCookie } from './cookies/cookies';
+export { LogoConsoleOutput } from './LogoConsoleOutput/LogoConsoleOutput';

package/dist/src/utils/index.js

@@ -1,2 +1,4 @@
 export { default as alertSlowQuery } from './sql/alertSlowQuery';
 export { default as discordAlert } from './discord/discordAlert';
+export { getCookie, setCookie, removeCookie } from './cookies/cookies';
+export { LogoConsoleOutput } from './LogoConsoleOutput/LogoConsoleOutput';

package/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components'
+export * from './hooks'
+export * from './utils'
+export * from './scripts'
+export * from './styles'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "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/toast/toaster.tsx

@@ -2,26 +2,28 @@
 
 import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react'
 import { useEffect, useState, useRef } from 'react'
-import { ToastProps, ToastObserverProps } from 'uibee/components'
+import { ToastProps, ToastType, ToastObserverProps } from 'uibee/components'
 
 
 const observers: ToastObserverProps[] = []
 
-export function addToast(message: string, type?: ToastProps['type']) {
-    observers.forEach((observer) => observer({ message, type }))
+export function addToast(type: ToastType, title: string, description: string = '') {
+    observers.forEach((observer) => observer({ title, description, type }))
 }
 
 export default function Toaster() {
-    const [toasts, setToasts] = useState<Array<ToastProps & { id: number; remaining: number; created: number }>>([])
+    const [toasts, setToasts] = useState<Array<ToastProps & { remaining: number; created: number }>>([])
     const timers = useRef<{ [id: number]: NodeJS.Timeout }>({})
     const [isHovered, setIsHovered] = useState(false)
     const pauseTimes = useRef<{ [id: number]: number }>({})
+    const mainToastRef = useRef<HTMLDivElement>(null)
+    const [mainToastPosition, setMainToastPosition] = useState<{ top: number; right: number } | null>(null)
 
     useEffect(() => {
-        const listener: ToastObserverProps = ({ message, type }) => {
+        const listener: ToastObserverProps = ({ type, title, description }) => {
             const id = Date.now()
             setToasts(prev => {
-                const newToasts = prev.concat({ id, message, type, remaining: 3000, created: Date.now() }).slice(-3)
+                const newToasts = prev.concat({ id, type, title, description, remaining: 3000, created: Date.now() }).slice(-3)
                 return newToasts
             })
         }
@@ -57,6 +59,17 @@ export default function Toaster() {
         }
     }, [isHovered, toasts])
 
+    // Track main toast position for stacking
+    useEffect(() => {
+        if (mainToastRef.current && toasts.length > 0) {
+            const rect = mainToastRef.current.getBoundingClientRect()
+            setMainToastPosition({
+                top: rect.top,
+                right: window.innerWidth - rect.right
+            })
+        }
+    }, [toasts, isHovered])
+
     const bgClasses = ['bg-login-600', 'bg-login-700', 'bg-login-800']
     return (
         <div
@@ -66,38 +79,45 @@ export default function Toaster() {
         >
             {toasts.slice().reverse().map((toast, idx) => (
                 <div
-                    key={toast.id}
+                    key={`${toast.id}-${idx}`}
+                    ref={idx === 0 ? mainToastRef : null}
                     className={
                         'p-2 rounded-lg text-login-50 animate-fade-in-down transition-all w-sm flex items-center gap-2 ' +
                         (bgClasses[idx] || bgClasses[2])
                     }
-                    style={isHovered ? {} : {
-                        position: 'absolute',
-                        right: 0,
+                    style={isHovered ? {} : idx === 0 ? {
+                        zIndex: 100,
+                    } : {
+                        position: 'fixed',
+                        top: mainToastPosition ? `${mainToastPosition.top - idx * 8}px` : 'auto',
                         zIndex: 100 - idx,
-                        bottom: `${idx * 8}px`,
                         transform: `scale(${1 - idx * 0.05})`,
                     }}
                 >
                     <span className='flex-shrink-0 w-10 h-10 flex items-center justify-center'>
                         <ToastIcon type={toast.type} />
                     </span>
-                    <span>{toast.message}</span>
+                    <div className='pr-1 pb-1'>
+                        <span className='font-bold'>{toast.title}</span>
+                        {(idx === 0 || isHovered) &&
+                            <span className='text-sm line-clamp-3'>{toast.description}</span>
+                        }
+                    </div>
                 </div>
             ))}
         </div>
     )
 }
 
-function ToastIcon({ type }: { type?: ToastProps['type'] }) {
+function ToastIcon({ type }: { type?: ToastType }) {
     switch (type) {
         case 'success':
-            return <CircleCheck />
+            return <CircleCheck className='text-green-300/70' />
         case 'warning':
-            return <CircleAlert />
+            return <CircleAlert className='text-yellow-300/70' />
         case 'error':
-            return <CircleX />
+            return <CircleX className='text-red-300/70' />
         case 'info':
-            return <Info />
+            return <Info className='text-blue-300/70' />
     }
 }

package/src/types/components.d.ts

@@ -9,15 +9,18 @@ declare module 'uibee/components' {
         handleSubmit?: (formData: FormData) => void
     }
 
+    export type ToastType = 'success' | 'error' | 'info' | 'warning'
     export interface ToastProps {
         id: number
-        message: string
-        type?: 'success' | 'error' | 'info' | 'warning'
+        type: ToastType
+        title: string
+        description?: string
     }
 
     export interface ToastEventProps {
-        message: string
-        type?: ToastProps['type']
+        type: ToastType
+        title: string
+        description?: string
     }
 
     export interface ToastObserverProps {

package/src/utils/LogoConsoleOutput/LogoConsoleOutput.ts

@@ -0,0 +1,61 @@
+export function LogoConsoleOutput() {
+
+    const chromeStr =
+        '%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 ❤️'
+
+    const safariStr =
+        '\n' +
+        '%c███████╗\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  ███████╗\n' +
+        '██╔═════╝\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t╚════██║\n' +
+        '██║%c   ██╗\t\t\t\t  ██████╗\t \t ╔██████╗\t  ██╗    \t ███╗ \t\t   ██╗%c\t  ██║\n' +
+        '  ╚═╝%c \t██║\t\t\t  ██╔════██╗\t ██╔════╝\t  ██║    \t ████╗\t   ██║%c\t   ╚═╝%c\n' +
+        '    \t\t██║\t\t\t  ██║\t\t\t   ██║\t ██║\t  ███╗    ██║\t\t ██╔██╗    ██║\n' +
+        '    \t\t██║\t\t\t  ██║\t\t\t   ██║\t ██║\t\t ██║    ██║\t\t ██║╚██╗  ██║\n' +
+        '%c██╗%c   ██████╗\t╚██████╝\t\t ╚██████╝\t  ██║      ██║\t\t ╚███║ \t  %c██╗\n' +
+        '██║%c\t  ╚═════╝\t\t  ╚════╝\t\t\t\t╚═════╝\t\t   ╚═╝\t\t ╚═╝\t\t  ╚═══╝\t\t  %c██║\n' +
+        '███████╗%c\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t %c███████║\n' +
+        '   ╚══════╝\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t╚══════╝%c\n\n' +
+        '\t\t\t\t\t\t\t\t\t\t\t\t\t- Laget av TekKom med 🍕 og ❤️'
+
+    let str = ''
+
+    if(navigator.userAgent.indexOf('Chrome') != -1) {
+        str = chromeStr
+    } else if (navigator.userAgent.indexOf('Firefox') != -1) {
+        str = chromeStr
+    } else if (navigator.userAgent.indexOf('Safari') != -1) {
+        str = safariStr
+    } else {
+        return (console.log('Login - Linjeforeningen for IT'))
+    }
+
+    // each string is the CSS to apply for each consecutive %c
+    console.log(str,
+        // applies orange color
+        'color: #fd8738',
+        // clears the style for every non orange part
+        '',
+        'color: #fd8738',
+        '',
+        'color: #fd8738',
+        '',
+        'color: #fd8738',
+        '',
+        'color: #fd8738',
+        '',
+        'color: #fd8738',
+        '',
+        'color: #fd8738',
+        ''
+    )
+}

package/src/utils/cookies/cookies.ts

@@ -0,0 +1,38 @@
+export function getCookie(name: string): string | null {
+    const matches = document.cookie.match(
+        new RegExp(
+            '(?:^|; )' + name.replace(/([.$?*|{}()[\]/\\+^])/g, '\\$1') + '=([^;]*)'
+        )
+    )
+    return matches ? decodeURIComponent(matches[1]) : null
+}
+
+export function setCookie(name: string, value: string, days?: number) {
+    let expires = ''
+
+    if (!value) {
+        return
+    }
+
+    if (days) {
+        const date = new Date()
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
+        expires = `expires=${date.toUTCString()};`
+    }
+
+    document.cookie =
+        `${name}=${encodeURIComponent(value)}; ` +
+        `${expires} path=/; SameSite=Lax`
+}
+
+export function removeCookies(...cookies: string[]) {
+    for (const cookie of cookies) {
+        removeCookie(cookie)
+    }
+}
+
+export function removeCookie(name: string) {
+    document.cookie =
+        `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; ` +
+        'path=/; SameSite=Lax'
+}

package/src/utils/index.ts

@@ -1,2 +1,4 @@
 export { default as alertSlowQuery } from './sql/alertSlowQuery'
 export { default as discordAlert } from './discord/discordAlert'
+export { getCookie, setCookie, removeCookie } from './cookies/cookies'
+export { LogoConsoleOutput } from './LogoConsoleOutput/LogoConsoleOutput'

package/tsconfig.json

@@ -14,11 +14,14 @@
     "jsx": "react-jsx",
     "resolveJsonModule": true,
     "paths": {
-      "@images/*": ["images/*"]
+      "@images/*": [
+        "images/*"
+      ]
     }
   },
   "include": [
     "src",
-    "tailwind.config.ts"
+    "tailwind.config.ts",
+    "index.d.ts"
   ]
 }