@star-insure/sdk 3.0.2 → 3.1.0

package/src/components/filter/SearchBar.tsx

@@ -0,0 +1,105 @@
+import { router } from "@inertiajs/react";
+import React from "react";
+import { HiMagnifyingGlass, HiXMark } from "react-icons/hi2";
+import { useClickOutside } from "../../lib";
+
+
+export default function SearchBar({ search, active, onActive, placeholder }: { search?: string, active: boolean, onActive: Function, placeholder?: string }) {
+    const [query, setQuery] = React.useState<string>('');
+
+    const searchRef = React.useRef<HTMLDivElement | null>(null);
+
+    /**
+     * Populate search input on load
+     */
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            // Populate search
+            const search = new URLSearchParams(window.location.search);
+
+            const q = search.get('search') as string;
+
+            if (q) {
+                setQuery(q);
+                onActive(true);
+            }
+        }
+    }, []);
+
+    /**
+     * Minimise the search bar on click outside if there's no search query
+     */
+    useClickOutside(searchRef, () => {
+        if (!query) {
+            onActive(false);
+        }
+    });
+
+    /**
+     * Handle the search function
+     */
+    function handleSearch(e?: React.FormEvent, queryOverride?: string) {
+        e?.preventDefault();
+
+        if (typeof search !== 'string') return;
+
+        let path: string = search;
+        if (path[0] !== '/') {
+            path = `/${path}`;
+        }
+
+        const params = new URLSearchParams(window?.location.search);
+        params.set('search', queryOverride ?? query);
+        params.set('page', '1');
+
+        router.get(`${path}?${params.toString()}`);
+    }
+
+    return (
+        <div ref={searchRef} className="">
+            {!active && (
+                <button
+                    title="Open Search Bar"
+                    type="button"
+                    onClick={() => onActive(true)}
+                    className="flex items-center justify-center rounded-full hover:text-teal p-1 transition-colors hover:bg-gray-100"
+                >
+                    <HiMagnifyingGlass className="h-5 w-5 stroke-[1.25]" />
+                </button>
+            )}
+            {active && (
+                <form
+                    onSubmit={handleSearch}
+                    className="group flex items-center gap-2 rounded-full bg-white pr-4 pl-1 shadow transition-all focus-within:outline-none focus-within:ring-1 focus-within:ring-teal"
+                >
+                    <input
+                        type="text"
+                        name="search"
+                        id="search"
+                        value={query}
+                        onChange={(e) => setQuery(e.currentTarget.value || '')}
+                        className="!focus:border-0 !border-0 !bg-transparent !shadow-none !ring-opacity-0 !transition-none placeholder:text-gray-400 !py-1.5 text-sm"
+                        autoFocus
+                        placeholder={placeholder}
+                    />
+                    {query && (
+                        <button
+                            type="button"
+                            title="Clear Search"
+                            onClick={() => {
+                                setQuery('');
+                                handleSearch(undefined, '');
+                            }}
+                        >
+                            <HiXMark className="h-5 w-5" />
+                        </button>
+                    )}
+                    <button type="submit">
+                        <HiMagnifyingGlass className="h-5 w-5" />
+                    </button>
+                </form>
+            )}
+        </div>
+    );
+}
+

package/src/components/filter/index.ts

@@ -0,0 +1 @@
+export { default as PageHeader } from './PageHeader';

package/src/lib/page.tsx

@@ -0,0 +1,24 @@
+import { Page, PageProps } from '@inertiajs/core';
+import { usePage as inertiaUsePage } from '@inertiajs/react';
+import { AuthContext, Breadcrumb, Environment } from '../types';
+
+/**
+ * Add custom props here, that are defined in `app/Http/Middleware/HandleInertiaRequests.php`
+ */
+type CustomPageProps = {
+    env: Environment;
+    breadcrumbs: Breadcrumb[];
+    links: Record<string, string>;
+    access_token?: string;
+    impersonate_id?: number;
+    csrf_token?: string;
+    auth: AuthContext;
+} & PageProps;
+
+/**
+ * A wrapper around Inertia's usePage function that gives better type-safety
+ */
+export function usePage<T>(): Page<CustomPageProps & T> {
+    // @ts-ignore
+    return inertiaUsePage();
+}

package/src/types/misc/index.ts

@@ -6,3 +6,36 @@ export interface Toast {
     status?: 'success' | 'error' | 'default' | 'warning';
     timeout?: number;
 }
+
+export interface FilterOption {
+    label: string;
+    name: string;
+    options?: FilterValue[];
+    type?: 'options' | 'date' | 'greaterThan' | 'scope' | 'select';
+}
+
+export interface FilterValue {
+    label: string;
+    value: string | number;
+}
+
+export interface Filter {
+    [key: string]: (string | number)[];
+}
+
+export type TPageHeaderAction = {
+    title: string;
+    as?: 'button' | 'a' | 'Link';
+    href?: string;
+    target?: '_self' | '_blank';
+    onClick?: Function;
+    type?: 'button' | 'submit';
+};
+
+export type Environment = 'production' | 'staging' | 'testing' | 'local';
+
+export type Breadcrumb = {
+    current?: boolean;
+    title: string;
+    url?: string;
+};