uibee 2.12.3 → 2.13.0

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

@@ -1,4 +1,5 @@
 export { default as Input } from './inputs/input';
+export { default as SearchInput } from './inputs/searchInput';
 export { default as Textarea } from './inputs/textarea';
 export { default as Checkbox } from './inputs/checkbox';
 export { default as Select } from './inputs/select';

package/dist/src/components/index.js

@@ -1,5 +1,6 @@
 // Input components
 export { default as Input } from './inputs/input';
+export { default as SearchInput } from './inputs/searchInput';
 export { default as Textarea } from './inputs/textarea';
 export { default as Checkbox } from './inputs/checkbox';
 export { default as Select } from './inputs/select';

package/dist/src/components/inputs/searchInput.d.ts

@@ -0,0 +1,6 @@
+interface SearchInputProps {
+    placeholder?: string;
+    variant?: 'default' | 'minimal';
+}
+export default function SearchInput({ placeholder, variant }: SearchInputProps): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/dist/src/components/inputs/searchInput.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { Search } from 'lucide-react';
+import Input from './input';
+export default function SearchInput({ placeholder = 'Search...', variant = 'default' }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [searchValue, setSearchValue] = useState(searchParams.get('q') || '');
+    useEffect(() => {
+        const currentQ = searchParams.get('q') || '';
+        setSearchValue(currentQ);
+    }, [searchParams]);
+    function handleSearch(value) {
+        setSearchValue(value);
+        const params = new URLSearchParams(searchParams.toString());
+        if (value.trim()) {
+            params.set('q', value.trim());
+        }
+        else {
+            params.delete('q');
+        }
+        params.delete('page');
+        router.push(`${pathname}?${params.toString()}`);
+    }
+    function handleKeyDown(e) {
+        if (e.key === 'Enter') {
+            handleSearch(searchValue);
+        }
+    }
+    function handleChange(e) {
+        setSearchValue(e.target.value);
+    }
+    if (variant === 'minimal') {
+        return (_jsxs("div", { className: 'relative', children: [_jsx(Search, { className: 'absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5' }), _jsx("input", { type: 'text', value: searchValue, onChange: (e) => setSearchValue(e.target.value), onKeyDown: handleKeyDown, onBlur: () => handleSearch(searchValue), placeholder: placeholder, className: 'pl-10 pr-4 py-2 border-b outline-none w-64' })] }));
+    }
+    else {
+        _jsx(Input, { name: 'search', icon: _jsx(Search, { className: 'w-5 h-5' }), value: searchValue, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: () => handleSearch(searchValue), placeholder: placeholder });
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.12.3",
+  "version": "2.13.0",
   "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/index.ts

@@ -1,5 +1,6 @@
 // Input components
 export { default as Input } from './inputs/input'
+export { default as SearchInput } from './inputs/searchInput'
 export { default as Textarea } from './inputs/textarea'
 export { default as Checkbox } from './inputs/checkbox'
 export { default as Select } from './inputs/select'

package/src/components/inputs/searchInput.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { useState, useEffect, type KeyboardEvent, type ChangeEvent } from 'react'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { Search } from 'lucide-react'
+import Input from './input'
+
+interface SearchInputProps {
+    placeholder?: string
+    variant?: 'default' | 'minimal'
+}
+
+export default function SearchInput({ placeholder = 'Search...', variant = 'default' }: SearchInputProps) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const searchParams = useSearchParams()
+    const [searchValue, setSearchValue] = useState(searchParams.get('q') || '')
+
+    useEffect(() => {
+        const currentQ = searchParams.get('q') || ''
+        setSearchValue(currentQ)
+    }, [searchParams])
+
+    function handleSearch(value: string) {
+        setSearchValue(value)
+        const params = new URLSearchParams(searchParams.toString())
+        if (value.trim()) {
+            params.set('q', value.trim())
+        } else {
+            params.delete('q')
+        }
+        params.delete('page')
+        router.push(`${pathname}?${params.toString()}`)
+    }
+
+    function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+        if (e.key === 'Enter') {
+            handleSearch(searchValue)
+        }
+    }
+
+    function handleChange(e: ChangeEvent<HTMLInputElement>) {
+        setSearchValue(e.target.value)
+    }
+
+    if (variant === 'minimal') {
+        return (
+            <div className='relative'>
+                <Search className='absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5' />
+                <input
+                    type='text'
+                    value={searchValue}
+                    onChange={(e) => setSearchValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={() => handleSearch(searchValue)}
+                    placeholder={placeholder}
+                    className='pl-10 pr-4 py-2 border-b outline-none w-64'
+                />
+            </div>
+        )
+    } else {
+        <Input
+            name='search'
+            icon={<Search className='w-5 h-5' />}
+            value={searchValue}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onBlur={() => handleSearch(searchValue)}
+            placeholder={placeholder}
+        />
+    }
+}