@star-insure/sdk 3.0.2 → 3.1.0

package/src/components/common/Button.tsx

@@ -11,6 +11,7 @@ interface Props {
   children: React.ReactNode;
   disabled?: boolean;
   as?: 'link' | 'button' | 'a';
+  small?: boolean;
 }
 
 export default function Button({
@@ -23,9 +24,11 @@ export default function Button({
   status = 'default',
   disabled = false,
   as,
+  small = false,
 }: Props) {
-  const baseClasses =
-    'font-black inline-flex items-center gap-3 justify-center text-white text-center px-5 py-2 rounded-md min-w-[120px] transition-all hover:opacity-75';
+  const baseClasses = small
+    ? 'font-bold text-sm inline-flex items-center gap-3 justify-center text-white text-center px-3 py-1 rounded min-w-[80px] transition-all hover:opacity-75'
+    : 'font-black inline-flex items-center gap-3 justify-center text-white text-center px-5 py-2 rounded-md min-w-[120px] transition-all hover:opacity-75';
 
   const statusClass =
     (status === 'primary' && 'bg-teal') ||

package/src/components/filter/Action.tsx

@@ -0,0 +1,30 @@
+import { Link } from "@inertiajs/react";
+import { TPageHeaderAction } from "../../types";
+import React from "react";
+
+export default function Action({ title, href, as = 'Link', target = '_self', type, onClick = () => {} }: TPageHeaderAction) {
+    const className =
+        'bg-white rounded-full font-bold px-3 py-1.5 text-xs whitespace-nowrap hover:bg-gray-100 hover:border-gray-300 transition-colors border border-gray-200';
+
+    if (as === 'Link' && href) {
+        return (
+            <Link className={className} href={href}>
+                {title}
+            </Link>
+        );
+    }
+
+    if (as === 'a' && href) {
+        return (
+            <a className={className} target={target} href={href}>
+                {title}
+            </a>
+        );
+    }
+
+    return (
+        <button className={className} type={type} onClick={() => onClick()}>
+            {title}
+        </button>
+    );
+}

package/src/components/filter/Back.tsx

@@ -0,0 +1,35 @@
+import { Link } from "@inertiajs/react";
+import React from "react";
+import { HiArrowLeft } from "react-icons/hi2";
+import { usePage } from "../../lib/page";
+
+export function BackButton({ back }: { back?: string | boolean }) {
+    const [backUrl, setBackUrl] = React.useState<string | undefined>(typeof back === 'string' ? back : undefined);
+    const { breadcrumbs } = usePage().props;
+
+    /**
+     * Set the back URL on mount
+     */
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            // Set back button URL
+            if (back && typeof back === 'boolean') {
+                // If we haven't provided a path as a prop, use the last breadcrumb that's not the current one
+                const crumb = breadcrumbs.slice(breadcrumbs.length - 2, breadcrumbs.length - 1);
+                if (crumb && crumb.length === 1) {
+                    // Strip off everything but the path so the <Link> component works
+                    const url = crumb[0].url;
+                    if (url) {
+                        setBackUrl(new URL(url).pathname);
+                    }
+                }
+            }
+        }
+    }, [breadcrumbs]);
+
+    return (
+        <Link href={backUrl || '/'} className="hover:text-teal transition-all p-1 -mr-1">
+            <HiArrowLeft className="h-5 w-5 stroke-[1.25]" />
+        </Link>
+    );
+}

package/src/components/filter/Dropdown.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { createHost, createSlot } from 'create-slots';
+import { useClickOutside } from "../../lib";
+
+const DropdownTitle = createSlot('button');
+const DropdownContent = createSlot('form');
+
+type Props = {
+    children: React.ReactNode;
+    onClose: Function;
+    active: boolean;
+}
+
+function Dropdown({ children, onClose, active }: Props) {
+    const ref = React.useRef<HTMLDivElement | null>(null);
+    const innerRef = React.useRef<HTMLDivElement | null>(null);
+
+    useClickOutside(ref, () => onClose(false));
+
+    React.useEffect(() => {
+        const current = ref?.current;
+        const innerCurrent = innerRef.current;
+
+        current?.classList.toggle('active', active)
+
+        if (!current || !innerCurrent) return;
+
+        const pos = current?.getBoundingClientRect();
+        innerCurrent.style.setProperty('left', `${pos?.left}px`)
+    }, [active, ref.current, innerRef.current]);
+
+    return createHost(children, (Slots) => {
+        return (
+            <div ref={ref} className="static inline-block">
+                {Slots.get(DropdownTitle)}
+
+                {active && (
+                    <div ref={innerRef} className="absolute children z-10 flex flex-col">
+                        {Slots.get(DropdownContent)}
+                    </div>
+                )}
+            </div>
+        )
+    });
+};
+
+Dropdown.Title = DropdownTitle;
+Dropdown.Content = DropdownContent;
+
+export default Dropdown;

package/src/components/filter/FilterItem.tsx

@@ -0,0 +1,318 @@
+import { router } from "@inertiajs/react";
+import { format, subYears } from "date-fns";
+import React from "react";
+import { FilterOption, FilterValue } from "../../types";
+import Select from 'react-select';
+import { HiChevronDown } from "react-icons/hi2";
+import Dropdown from "./Dropdown";
+import cn from 'classnames';
+import { Button } from "../common";
+
+export function FilterItem({ filter }: { filter: FilterOption, path?: string }) {
+    const [isOpen, setOpen] = React.useState<boolean>(false);
+    const [selected, setSelected] = React.useState<string[]>([]);
+
+    const [selectedOptions, setSelectedOptions] = React.useState<FilterValue[]>([]); // Filter type: select
+    const hasFilters = selected.length > 0;
+
+    // Populate values on load
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const search = new URLSearchParams(window.location.search);
+
+            if (filter.type === 'date') {
+                const fromDate = search.get(`${filter.name}[from]`);
+                const toDate = search.get(`${filter.name}[to]`);
+                if (fromDate && toDate) {
+                    setSelected([fromDate, toDate]);
+                }
+            } else if (filter.type === 'greaterThan') {
+                const selectedFromUrl = search.getAll(`${filter.name}-GTE`);
+                if (selectedFromUrl) {
+                    setSelected(selectedFromUrl);
+                }
+            } else if (filter.type === 'scope') {
+                const selectedFromUrl = search.getAll(`scope${filter.name}`);
+                if (selectedFromUrl) {
+                    setSelected(selectedFromUrl);
+                }
+            } else if (filter.type === 'select') {
+                const selectedFromUrl = search.getAll(`${filter.name}[]`);
+                if (selectedFromUrl) {
+                    setSelected(selectedFromUrl);
+                    const selectedOptions = filter.options && filter.options.filter(item => selectedFromUrl.includes(item.value.toString()));
+                    selectedOptions && setSelectedOptions(selectedOptions);
+                }
+            } else {
+                const selectedFromUrl = search.getAll(`${filter.name}[]`);
+                if (selectedFromUrl) {
+                    setSelected(selectedFromUrl);
+                }
+            }
+        }
+    }, []);
+
+    function handleInput(e: React.SyntheticEvent<HTMLInputElement>) {
+        const { value, checked } = e.currentTarget;
+
+        if (checked) {
+            setSelected((curr) => [...curr, value]);
+        } else {
+            setSelected(selected.filter((f) => f !== value));
+        }
+    }
+
+    function handleDateSelect(e: React.SyntheticEvent<HTMLInputElement>) {
+        const { name, value } = e.currentTarget;
+
+        // First value in "selected" will be the "from", second will be the "to"
+        if (name.includes('from')) {
+            return setSelected([value]);
+        }
+
+        if (name.includes('to')) {
+            // Make sure we have a "from" value first
+            if (selected.length === 0) {
+                // We'll default to a year ago if nothing entered
+                return setSelected([format(subYears(new Date(), 1), 'yyyy-MM-dd'), value]);
+            }
+            return setSelected([selected[0], value]);
+        }
+
+        return setSelected([]);
+    }
+
+    /**
+     * Handle Select for FilterType: Select
+     */
+    const handleSelectedOptions = (options: FilterValue[] | any) => {
+        setSelectedOptions(options);
+        const selectedValues = options.map((option : FilterValue) => option.value.toString());
+
+        if (selectedValues.length > 0) {
+            setSelected(selectedValues);
+        } else {
+            setSelected([]);
+        }
+    };
+
+    /**
+     * For Filter Select
+     * Removes the Clear Button
+     */
+    function NullComponent() {
+        return null;
+    }
+
+    function handleSelect(e: React.SyntheticEvent<HTMLSelectElement>) {
+        const { value } = e.currentTarget;
+
+        if (value) {
+            setSelected([value]);
+        } else {
+            setSelected([]);
+        }
+    }
+
+    function handleApply(e: React.FormEvent) {
+        e.preventDefault();
+
+        const search = new URLSearchParams(window.location.search);
+
+        // Reset the page in the query
+        search.set('page', '1');
+
+        if (filter.type === 'date') {
+            const [from, to] = selected;
+
+            search.set(`${filter.name}[from]`, from ?? format(new Date(), 'yyyy-MM-dd'));
+            search.set(`${filter.name}[to]`, to ?? format(new Date(), 'yyyy-MM-dd'));
+        } else if (filter.type === 'greaterThan') {
+            search.delete(`${filter.name}-GTE`);
+
+            if (selected.length > 0) {
+                search.set(`${filter.name}-GTE`, selected[0]);
+            }
+        } else if (filter.type === 'scope') {
+            search.delete(`${filter.name}`);
+            if (selected.length > 0) {
+                search.set(`scope${filter.name}`, selected[0]);
+            }
+        } else {
+            // Clear this filter first
+            search.delete(`${filter.name}[]`);
+
+            // Apply the filters to the query string
+            selected.forEach((selectedValue, i) => {
+                // Fall back to option equality filters
+                search.append(`${filter.name}[]`, selectedValue);
+            });
+        }
+
+        // Fetch new data
+        router.get(`${window.location.pathname}?${search.toString()}`);
+    }
+
+    function handleClear() {
+        const search = new URLSearchParams(window.location.search);
+
+        // Reset the page in the query
+        search.set('page', '1');
+
+        // Clear this filter
+        if (filter.type === 'date') {
+            search.delete(`${filter.name}[from]`);
+            search.delete(`${filter.name}[to]`);
+        } else if (filter.type === 'greaterThan') {
+            search.delete(`${filter.name}-GTE`);
+        } else if (filter.type === 'scope') {
+            search.delete(`scope${filter.name}`);
+        } else {
+            search.delete(`${filter.name}[]`);
+        }
+
+        // Fetch new data
+        router.get(`${window.location.pathname}?${search.toString()}`);
+    }
+
+    function handleClick(force?: boolean) {
+        if (typeof force === 'boolean') {
+            return setOpen(force);
+        }
+
+        setOpen(!isOpen);
+    }
+
+    return (
+        <Dropdown onClose={() => setOpen(!open)} active={isOpen}>
+            <Dropdown.Title
+                onClick={() => handleClick()}
+                className={cn(
+                    'flex rounded-2xl border hover:border-teal bg-gray-600 min-w-[90px] px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-teal transition-colors',
+                    {
+                        '!bg-teal border-teal': hasFilters,
+                    }
+                )}
+            >
+                <p className="whitespace-nowrap">{filter.label}</p>
+                <HiChevronDown />
+            </Dropdown.Title>
+
+            <Dropdown.Content
+                className={`mt-2 flex max-h-[350px] min-w-[200px] flex-col gap-2 rounded-md border border-gray-300 bg-white p-4 shadow-lg ${ filter.type && filter.type === 'select' ? '' : 'overflow-y-scroll'}`}
+                onSubmit={handleApply}
+            >
+                <div className="flex flex-col items-start gap-1">
+                    {(!filter.type || filter.type === 'options') &&
+                        filter.options?.map((option, i) => (
+                            <div className="checkbox text-sm " key={`${option.label}-${i}`}>
+                                <input
+                                    type="checkbox"
+                                    name={filter.name}
+                                    id={option.label}
+                                    value={option.value.toString()}
+                                    checked={selected.includes(option.value.toString())}
+                                    onChange={handleInput}
+                                />
+                                <label className="whitespace-nowrap" htmlFor={option.label}>
+                                    {option.label}
+                                </label>
+                            </div>
+                        ))}
+                    {filter.type === 'greaterThan' && filter.options && (
+                        <label className="mb-2 w-full">
+                            <div className="text-sm">Greater than or equal to</div>
+                            <select
+                                name={filter.name}
+                                id={filter.label}
+                                value={selected[0]}
+                                onChange={handleSelect}
+                                className="w-full"
+                            >
+                                <option value="">Select option</option>
+                                {filter.options?.map((option) => (
+                                    <option key={option.value} value={option.value}>
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </label>
+                    )}
+                    {filter.type === 'scope' && filter.options && (
+                        <label className="mb-2 w-full">
+                            <select
+                                name={filter.name}
+                                id={filter.label}
+                                value={selected[0]}
+                                onChange={handleSelect}
+                                className="w-full"
+                            >
+                                <option value="">Select option</option>
+                                {filter.options?.map((option) => (
+                                    <option key={option.value} value={option.value}>
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </label>
+                    )}
+                    {filter.type === 'date' && (
+                        <div className="mb-2 flex flex-col gap-4">
+                            <label className="text-xs">
+                                From
+                                <input
+                                    type="date"
+                                    name={`${filter.name}[from]`}
+                                    id={`${filter.name}[from]`}
+                                    onChange={handleDateSelect}
+                                    value={selected[0] ?? ''}
+                                />
+                            </label>
+                            <label className="text-xs">
+                                To
+                                <input
+                                    type="date"
+                                    name={`${filter.name}[to]`}
+                                    id={`${filter.name}[to]`}
+                                    onChange={handleDateSelect}
+                                    value={selected[1] ?? ''}
+                                />
+                            </label>
+                        </div>
+                    )}
+                    {filter.type === 'select' && filter.options && (
+                        <div className="w-full">
+                            <Select
+                                isMulti
+                                options={filter.options}
+                                className="basic-multi-select text-sm w-64 !transition-none"
+                                classNamePrefix="select"
+                                onChange={handleSelectedOptions}
+                                components={{
+                                    ClearIndicator: NullComponent, // Hide the ClearIndicator (X button) -> exits filter when clicked
+                                }}
+                                value={selectedOptions}
+                                theme={(theme) => ({
+                                    ...theme,
+                                    colors: {
+                                        ...theme.colors,
+                                        primary25: 'rgb(111, 199, 182)',
+                                        primary: 'rgb(111, 199, 182)',
+                                    },
+                                })}
+                            />
+                        </div>
+                    )}
+                </div>
+                <div className="flex items-center gap-2">
+                    <Button type="button" className="!min-w-[0px] flex-grow !px-2 text-sm !transition-none" onClick={handleClear}>
+                        Clear
+                    </Button>
+                    <Button type="submit" status="primary" className="!min-w-[0px] flex-grow !px-2 text-sm !transition-none">
+                        Apply
+                    </Button>
+                </div>
+            </Dropdown.Content>
+        </Dropdown>
+    );
+}

package/src/components/filter/FilterOptions.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { FilterOption } from "../../types";
+import Button from "../common/Button"
+import { FilterItem } from "./FilterItem";
+import { router } from "@inertiajs/react";
+
+export function FilterOptions({ filterOptions }: { filterOptions: FilterOption[] }) {    
+    function handleClear() {
+        router.get(`${window.location.pathname}`);
+    }
+
+    return (
+        <div className="flex items-center">
+            {filterOptions.map(filter => (
+                <FilterItem filter={filter} key={filter.name} />
+            ))}
+            <Button onClick={handleClear}>Clear filters</Button>
+        </div>
+    );
+}
+

package/src/components/filter/PageHeader.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import cn from 'classnames';
+import { FilterOption, TPageHeaderAction } from '../../types';
+import { BackButton } from './Back';
+import SearchBar from './SearchBar';
+import Action from './Action';
+import { FilterItem } from './FilterItem';
+import { HiChevronLeft, HiChevronRight, HiXMark } from 'react-icons/hi2';
+import { router } from '@inertiajs/core';
+
+interface Props {
+    title: string;
+    search?: string;
+    className?: string;
+    innerClassName?: string;
+    back?: boolean | string;
+    actions?: TPageHeaderAction[];
+    backText?: string;
+    filterOptions?: FilterOption[];
+}
+
+export default function PageHeader({
+    title,
+    search,
+    className = '',
+    innerClassName = '',
+    back = true,
+    actions = [],
+    filterOptions = [],
+}: Props) {
+    const [isSearchActive, setSearchActive] = React.useState<boolean>(false);
+    const scrollContainerRef = React.useRef<HTMLDivElement | null>(null);
+
+    const [overScroll, setOverScroll] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        const current = scrollContainerRef.current;
+        if (!current) return;
+
+        const listener = function() {
+            const activeDropdown = current.querySelector('.active');
+            if (!activeDropdown) return;
+
+            const childrenContainer = activeDropdown.querySelector('.children');
+            if (!childrenContainer) return;
+
+            const pos = activeDropdown.getBoundingClientRect();
+
+            const posChild = childrenContainer.getBoundingClientRect();
+            const posContainer = current.getBoundingClientRect();
+
+            // if the dropdown content moves outside the scroll container to the left, make it disappear
+            if (posChild.left <= posContainer.left - 50) {
+                // @ts-ignore
+                childrenContainer.style.visibility = 'hidden';
+            } else if (posChild.left >= posContainer.right - 50) {
+                // @ts-ignore
+                childrenContainer.style.visibility = 'hidden';
+            } else {
+                // @ts-ignore
+                childrenContainer.style.visibility = 'visible';
+            }
+
+            // @ts-ignore
+            childrenContainer.style.left = `${pos.left}px`;
+        }
+
+        const mouseListener = function(e: MouseEvent) {
+            const pos = current.getBoundingClientRect();
+            if (e.clientX > pos.left && e.clientX < pos.right && e.clientY > pos.top && e.clientY < pos.bottom) {
+                setOverScroll(true);
+            } else {
+                setOverScroll(false);
+            }
+        };
+
+        current.addEventListener('scroll', listener);
+        document.addEventListener('mousemove', mouseListener)
+        
+        return () => {
+            current.removeEventListener('scroll', listener);
+            document.removeEventListener('mousemove', mouseListener)
+        }
+    }, []);
+
+    React.useEffect(() => {
+        const scrollListener = function(e: WheelEvent) {
+            if (overScroll) {
+                e.preventDefault();
+                scrollContainerRef.current?.scrollBy({ left: e.deltaY, behavior: 'auto' });
+            }
+        }
+
+        document.addEventListener('wheel', scrollListener, { passive: false });
+
+        return () => {
+            document.removeEventListener('wheel', scrollListener);
+        }
+    }, [overScroll])
+
+    function handleClear() {
+        router.get(`${window.location.pathname}`);
+    }
+
+    const [hasScroll, setHasScroll] = React.useState<boolean>(false);
+
+    const checkScroll = React.useCallback(() => {
+        const current = scrollContainerRef.current;
+        if (!current) return;
+
+        const pos = current.getBoundingClientRect();
+
+        setHasScroll(current.scrollWidth > (pos.width + 11));
+    }, [scrollContainerRef.current]);
+
+    React.useEffect(() => {
+        checkScroll();
+
+        window.addEventListener('resize', checkScroll)
+
+        return () => {
+            window.removeEventListener('resize', checkScroll);
+        }
+    }, [checkScroll]);
+
+    function clickRight() {
+        scrollContainerRef.current?.scrollBy({ left: 100, behavior: 'auto' });
+        checkScroll();
+    }
+
+    function clickLeft() {
+        scrollContainerRef.current?.scrollBy({ left: -100, behavior: 'auto' });
+        checkScroll();
+    }
+
+    return (
+        <section className={cn('col-span-full max-w-full rounded-lg bg-white p-2 shadow', className)}>
+            <div className={cn('grid grid-cols-[auto_1fr_auto] min-h-[60px] rounded gap-4 bg-gray-100 p-3', innerClassName)}>
+                <div className="mr-auto flex items-center gap-4">
+                    {back && <BackButton back={back} />}
+
+                    {search && <SearchBar search={search} active={isSearchActive} onActive={setSearchActive} placeholder={`Search ${title}...`} />}
+
+                    {!isSearchActive && <h1 className="text-base font-bold">{title}</h1>}
+                </div>
+
+                <div className="flex ml-auto items-center max-w-sm md:max-w-md lg:max-w-lg xl:max-w-2xl gap-2 h-full min-w-0">
+                    {filterOptions.length > 0 && (
+                        <>
+                            <button onClick={handleClear} className="p-1.5 hover:text-red-500"><HiXMark className="w-5 h-5 stroke-[1.25]" /></button>
+                            
+                            {hasScroll && <HiChevronLeft onClick={clickLeft} className="w-5 h-5 text-gray-400 stroke-[1.25]" />}
+                            <div ref={scrollContainerRef} className="flex items-center h-full w-full gap-3 overflow-x-scroll hide-scroll">
+                                {filterOptions.map(filter => (
+                                    <FilterItem key={filter.name} filter={filter} />
+                                ))}
+                            </div>
+                            {hasScroll && <HiChevronRight onClick={clickRight} className="w-5 h-5 text-gray-400 stroke-[1.25]" />}
+                        </>
+                    )}
+                </div>
+
+                {actions.length > 0 && (
+                    <div className="flex items-center gap-3">
+                        {filterOptions.length > 0 && <div className="w-[1px] h-full bg-gray-300" />}
+                        <nav className="flex items-center gap-2">
+                            {actions.map((action) => (
+                                <Action key={`${action.title}-${action.as}-${action.href}`} {...action} />
+                            ))}
+                        </nav>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}