@star-insure/sdk 4.6.0 → 5.0.0

package/dist/types/api/auth.d.ts

@@ -1,4 +1,4 @@
-export declare type UserContext = 'administrator' | 'staff' | 'broker' | 'agent' | 'security' | 'customer';
+export declare type UserContext = 'administrator' | 'staff' | 'broker' | 'dealer' | 'agent' | 'security' | 'customer';
 declare type AuthUser = {
     id: number;
     name: string;

package/package.json

@@ -2,7 +2,7 @@
     "name": "@star-insure/sdk",
     "description": "The SDK for Star Insure client apps with shared helper functions and TypeScript definitions.",
     "author": "alexclark_nz",
-    "version": "4.6.0",
+    "version": "5.0.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -67,6 +67,8 @@
     "dependencies": {
         "@headlessui/react": "^1.6.3",
         "@inertiajs/react": "^1.0.0",
+        "@tailwindcss/forms": "^0.5.9",
+        "@tailwindcss/typography": "^0.5.15",
         "classnames": "^2.3.2",
         "date-fns": "^2.28.0",
         "lodash-es": "^4.17.21",

package/src/components/common/Button.tsx

@@ -31,7 +31,7 @@ export default function Button({
     : '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:brightness-110';
 
   const statusClass =
-    (status === 'primary' && 'bg-teal') ||
+    (status === 'primary' && 'bg-primary') ||
     (status === 'danger' && 'bg-red-500') ||
     (status === 'warning' && 'bg-yellow-400') ||
     (status === 'info' && 'bg-blue-400') ||

package/src/components/common/Modal.tsx

@@ -38,7 +38,7 @@ export default function Modal({ children, isActive = false, onClose, title, widt
                         leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     >
                         <div className={`${className} w-full align-start inline-block bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-7xl sm:p-6 ${width}`}>
-                            <div className={`flex gap-4 mb-4 text-asphalt ${title ? 'border-b-2 border-asphalt pb-4' : ''}`}>
+                            <div className={`flex gap-4 mb-4 text-secondary ${title ? 'border-b-2 border-secondary pb-4' : ''}`}>
                                 {title && <h3 className="font-black text-lg">{title}</h3>}
                                 <button type="button" onClick={onClose} className="ml-auto transition-all hover:opacity-50">
                                     <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

package/src/components/common/ToastItem.tsx

@@ -8,10 +8,10 @@ export default function ToastItem({ _id = '', message, status = 'default' }: Toa
 
     const defaultClasses = 'w-full min-w-[250px] p-4 shadow flex justify-between items-center font-black rounded-md not:';
 
-    const statusClasses = status === 'success' && 'bg-teal text-white'
+    const statusClasses = status === 'success' && 'bg-primary text-white'
         || status === 'error' && 'bg-red-500 text-white'
         || status === 'warning' && 'bg-yellow-400 text-white'
-        || 'bg-white text-asphalt';
+        || 'bg-white text-secondary';
 
     const classes = `${defaultClasses} ${statusClasses}`;
 

package/src/components/filter/Back.tsx

@@ -30,7 +30,7 @@ export function BackButton({ back, className }: { back?: string | boolean; class
     }, [breadcrumbs]);
 
     return (
-        <Link href={backUrl || '/'} className={cn(className, 'flex items-center justify-center hover:text-teal transition-all')}>
+        <Link href={backUrl || '/'} className={cn(className, 'flex items-center justify-center text-back-button-text hover:text-primary transition-all')}>
             <HiArrowLeft className="h-5 w-5 stroke-[1.25]" />
         </Link>
     );

package/src/components/filter/FilterItem.tsx

@@ -198,9 +198,9 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
             <div
                 onClick={() => handleClick()}
                 className={cn(
-                    'flex rounded-2xl border hover:cursor-pointer hover:border-teal bg-gray-600 px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-teal transition-colors',
+                    'flex rounded-2xl border hover:cursor-pointer hover:border-primary bg-gray-600 px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-primary transition-colors',
                     {
-                        '!bg-teal border-teal': hasFilters,
+                        '!bg-primary border-primary': hasFilters,
                     }
             )}>
                 <p className="whitespace-nowrap">{filter.label}</p>

package/src/components/filter/PageHeader.tsx

@@ -155,21 +155,21 @@ export default function PageHeader({
     return (
         <section className={cn('col-span-full flex items-center gap-2 max-w-full rounded-lg bg-white p-2 shadow', className)}>
             {back && (
-                <BackButton back={back} className="bg-gray-100 h-[60px] w-[60px] rounded" />
+                <BackButton back={back} className="bg-back-button-background h-[60px] w-[60px] rounded" />
             )}
 
-            <div className={cn('w-full grid grid-cols-[auto_1fr_auto_auto] h-[60px] rounded bg-gray-100 p-3 gap-4', innerClassName)}>
+            <div className={cn('w-full grid grid-cols-[auto_1fr_auto_auto] h-[60px] rounded bg-page-header-background p-3 gap-4', innerClassName)}>
                 <button
                     type="button"
                     disabled={!search}
                     onClick={() => setSearchActive(true)}
-                    className={cn('mr-auto flex items-center gap-4 transition-colors pr-6 pl-1 disabled:opacity-100', {
-                        'hover:text-teal': search && !isSearchActive,
+                    className={cn('mr-auto flex items-center gap-4 transition-colors pr-6 pl-1 disabled:opacity-100 text-page-header-text', {
+                        'hover:text-primary': search && !isSearchActive,
                     }
                 )}>
                     {search && <SearchBar search={search} active={isSearchActive} onActive={setSearchActive} placeholder={`Search ${title}...`} focusSearchShortcut={focusSearchShortcut} />}
 
-                    {!isSearchActive && <h1 className="text-base font-black">{title}</h1>}
+                    {!isSearchActive && <h1 className="text-base text-page-header-text font-black">{title}</h1>}
                 </button>
 
                 <div className="flex items-center ml-auto gap-2 h-full min-w-0 max-w-full">
@@ -189,7 +189,7 @@ export default function PageHeader({
                 </div>
 
                 {filteredActions.length > 0 && (
-                    <div className="flex items-center gap-3 bg-gray-100">
+                    <div className="flex items-center gap-3 bg-page-header-background">
                         {filterOptions.length > 0 && <div className="w-[1px] h-full bg-gray-300" />}
                         <nav className="flex items-center gap-2">
                             {filteredActions.map((action) => (

package/src/components/filter/SearchBar.tsx

@@ -86,7 +86,7 @@ export default function SearchBar({ search, active, onActive, placeholder, focus
                     title="Open Search Bar"
                     type="button"
                     onClick={() => onActive(true)}
-                    className="flex items-center justify-center rounded-full hover:text-teal p-1 hover:bg-gray-100"
+                    className="flex items-center justify-center rounded-full hover:text-primary p-1 hover:bg-gray-100"
                 >
                     <HiMagnifyingGlass className="h-5 w-5 stroke-[1.25]" />
                 </button>
@@ -94,7 +94,7 @@ export default function SearchBar({ search, active, onActive, placeholder, focus
             {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"
+                    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-primary"
                 >
                     <input
                         type="text"

package/src/components/forms/MoneyField.tsx

@@ -28,7 +28,7 @@ export default function MoneyField({ value = 0, onChange, name = 'value', id = '
     const displayValue = formatMoney(value, 0);
 
     return (
-        <div className={`${className} flex items-center gap-2 pl-4 rounded-md border border-gray-300 transition-all focus-within:border-teal focus-within:outline-none focus-within:ring focus-within:ring-teal focus-within:ring-opacity-50`}>
+        <div className={`${className} flex items-center gap-2 pl-4 rounded-md border border-gray-300 transition-all focus-within:border-primary focus-within:outline-none focus-within:ring focus-within:ring-primary focus-within:ring-opacity-50`}>
             <span className="font-bold pr-2">$</span>
             <input
                 type="text"

package/src/components/forms/RegistrationSearchField.tsx

@@ -228,7 +228,7 @@ export default function RegistrationSearchField({
           type="button"
           onClick={handleSearch}
           disabled={status === 'processing'}
-          className={cn(searchBtnClassName, "bg-teal px-4 py-3 rounded-md transition-all")}
+          className={cn(searchBtnClassName, "bg-primary px-4 py-3 rounded-md transition-all")}
         >
           <span className="sr-only">Search</span>
           <svg

package/src/components/tables/TableHead.tsx

@@ -8,7 +8,7 @@ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSe
 
 export default function TableHead({ children, className, ...props }: Props) {
     return (
-        <thead {...props} className={cn(className, 'px-3 py-4 text-sm text-white bg-gray-600')}>
+        <thead {...props} className={cn(className, 'px-3 py-4 text-sm text-white bg-table-header-background')}>
             {children}
         </thead>
     )

package/src/components/tables/TableRow.tsx

@@ -8,7 +8,7 @@ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRo
 }
 
 export default function TableRow({ children, className = '', onClick = () => {}, ...props }: Props) {
-    const bgClass = className.includes('bg') ? '' : 'bg-white even:bg-gray-50'
+    const bgClass = className.includes('bg') ? '' : 'bg-white even:bg-table-row-alternative-background'
 
     return (
         <tr {...props} className={cn(className, bgClass, 'hover:bg-gray-100')} onClick={(e) => onClick(e)}>

package/src/tailwind-preset.js

@@ -0,0 +1,51 @@
+module.exports = {
+    content: [
+        './resources/**/*.blade.php',
+        './resources/**/*.{js,ts,jsx,tsx}',
+        './node_modules/@star-insure/sdk/src/**/*.{js,ts,jsx,tsx}',
+    ],
+    theme: {
+        fontFamily: {
+            sans: ['MuseoSansRounded', 'Helvetica', 'arial', 'sans-serif'],
+            serif: ['Gabriela', 'Georgia', 'serif'],
+        },
+        container: {
+            center: true,
+            padding: '1.25rem',
+        },
+        extend: {
+            colors: {
+                primary: 'var(--primary-color)',
+                'primary-300': 'var(--primary-300-color)',
+                'primary-100': 'var(--primary-100-color)',
+                'primary-700': 'var(--primary-700-color)',
+                secondary: 'var(--secondary-color)',
+                'page-background': 'var(--page-background-color)',
+                'footer-background': 'var(--footer-background-color)',
+                'page-header-background': 'var(--page-header-background-color)',
+                'page-header-text': 'var(--page-header-text-color)',
+                'back-button-background': 'var(--back-button-background-color)',
+                'back-button-text': 'var(--back-button-text-color)',
+                'section-title': 'var(--section-title-color)',
+                'sub-section-title': 'var(--sub-section-title-color)',
+                'section-separator': 'var(--section-separator-color)',
+                'section-header-background': 'var(--section-header-background-color)',
+                'section-header-text': 'var(--section-header-text-color)',
+                'card-subtitle': 'var(--card-subtitle-color)',
+                'card-alternative-background': 'var(--card-alternative-background-color)',
+                'table-header-background': 'var(--table-header-background-color)',
+                'table-header-text': 'var(--table-header-text-color)',
+                'table-row-alternative-background': 'var(--table-row-alternative-background-color)',
+                'gray-600': '#8a8c8e',
+                'gray-700': '#666',
+            },
+            transitionDuration: {
+                DEFAULT: '300ms',
+            },
+            transitionTimingFunction: {
+                DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            },
+        },
+    },
+    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
+};

package/src/theme.css

@@ -0,0 +1,30 @@
+:root {
+    --primary-color: #6fc7b6;
+    --primary-300-color: #b8e1d9;
+    --primary-100-color: #f2f9f8;
+    --primary-700-color: #48aa97;
+
+    --secondary-color: #2b3844;
+
+    --page-background-color: #f9fafb;
+    --footer-background-color: #e5e7eb;
+
+    --page-header-background-color: #f3f4f6;
+    --page-header-text-color: rgb(102, 102, 102);
+    --back-button-background-color: #f3f4f6;
+    --back-button-text-color: rgb(102, 102, 102);
+
+    --section-title-color: #6b7280;
+    --sub-section-title-color: rgb(102, 102, 102);
+    --section-separator-color: rgb(107, 114, 128);
+
+    --section-header-background-color: #f3f4f6;
+    --section-header-text-color: rgb(102, 102, 102);
+
+    --card-subtitle-color: #2B3844;
+    --card-alternative-background-color: rgba(102, 102, 102, 0.07);
+
+    --table-header-background-color: #8a8c8e;
+    --table-header-text-color: #FFFFFF;
+    --table-row-alternative-background-color: #f9fafb;
+}

package/src/types/api/auth.ts

@@ -2,6 +2,7 @@ export type UserContext =
   | 'administrator'
   | 'staff'
   | 'broker'
+  | 'dealer'
   | 'agent'
   | 'security'
   | 'customer';