@hashrytech/quick-components-kit 0.13.3 → 0.13.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hashrytech/quick-components-kit
 
+## 0.13.5
+
+### Patch Changes
+
+- refactor: setting placeholder text size to text-base default
+- refactor: set text size for lg TextInput to text-base
+- patch: adding evaluation of redirect rule to apiclient
+
+## 0.13.4
+
+### Patch Changes
+
+- refactor: changing inputClasses prop for TextInput to just class
+
 ## 0.13.3
 
 ### Patch Changes

package/dist/components/text-input/TextInput.svelte

@@ -18,8 +18,7 @@
      * @prop {string} [name] - The name attribute for form submission.
      * @prop {string} [value] - The bound value of the input.
      * @prop {string} [placeholder] - Placeholder text.
-     * @prop {string} [labelText] - Optional label text.
-     * @prop {ClassNameValue} [inputClasses] - Additional Tailwind classes to apply to the input. Example: "border-red-500 text-green-600"
+     * @prop {string} [labelText] - Optional label text.     
      * @prop {TextInputSize} [size] - Size variant ("sm", "md", "lg") with predefined Tailwind styles.
      *        - "sm": h-[2.05rem] text-sm placeholder:text-sm
      *        - "md": h-[2.375rem] text-sm placeholder:text-sm
@@ -27,6 +26,7 @@
      * @prop {() => void} [onchange] - Event handler for change events.
      * @prop {() => void} [onmouseup] - Event handler for mouseup events.
      * @prop {Snippet} [label] - Custom label snippet.
+     * @prop {Snippet} [class] - Css classes for the input element.
      */
     export type TextInputProps = {
         id: string;        
@@ -34,8 +34,7 @@
         value?: string;
         type?: TextInputType;
         placeholder?: string;
-        labelText?: string;        
-        inputClasses?: ClassNameValue;
+        labelText?: string;
         size?: TextInputSize;
         disabled?: boolean;
         required?: boolean;
@@ -44,6 +43,7 @@
         onmouseup?: () => void;
         label?: Snippet;
         icon?: Snippet;
+        class?: ClassNameValue;
     };
     
 
@@ -52,7 +52,7 @@
 <script lang="ts">
     import { twMerge } from 'tailwind-merge';
     
-    let { id, type="text", name="", value=$bindable(""), placeholder="", labelText, size="md", inputClasses="", disabled=false, required=false, error, onchange, onmouseup, label, icon}: TextInputProps = $props();
+    let { id, type="text", name="", value=$bindable(""), placeholder="", labelText, size="md", disabled=false, required=false, error, onchange, onmouseup, label, icon, ...props}: TextInputProps = $props();
 
     /**
      * Predefined size classes for the TextBox input.
@@ -63,7 +63,7 @@
     let sizeStyle: Record<TextInputSize, string> = {
         sm: "h-[2.05rem] text-sm placeholder:text-sm",
         md: "h-[2.375rem] text-sm placeholder:text-sm",
-        lg: "h-[2.8rem] text-lg placeholder:text-lg"
+        lg: "h-[2.8rem] text-base placeholder:text-base"
     };
 
 </script>
@@ -76,7 +76,7 @@
             class={twMerge("rounded-primary border-border-primary focus:border-primary-500 focus:ring-primary-500 placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-gray-300/30",
             error ? "bg-red-50 border-red-300 ring-red-300" : "", 
             icon ? "pl-10" : "",
-            sizeStyle[size], inputClasses)}
+            sizeStyle[size], props.class)}
         />
     </div>
     {#if error}

package/dist/components/text-input/TextInput.svelte.d.ts

@@ -16,7 +16,6 @@ export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "
  * @prop {string} [value] - The bound value of the input.
  * @prop {string} [placeholder] - Placeholder text.
  * @prop {string} [labelText] - Optional label text.
- * @prop {ClassNameValue} [inputClasses] - Additional Tailwind classes to apply to the input. Example: "border-red-500 text-green-600"
  * @prop {TextInputSize} [size] - Size variant ("sm", "md", "lg") with predefined Tailwind styles.
  *        - "sm": h-[2.05rem] text-sm placeholder:text-sm
  *        - "md": h-[2.375rem] text-sm placeholder:text-sm
@@ -24,6 +23,7 @@ export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "
  * @prop {() => void} [onchange] - Event handler for change events.
  * @prop {() => void} [onmouseup] - Event handler for mouseup events.
  * @prop {Snippet} [label] - Custom label snippet.
+ * @prop {Snippet} [class] - Css classes for the input element.
  */
 export type TextInputProps = {
     id: string;
@@ -32,7 +32,6 @@ export type TextInputProps = {
     type?: TextInputType;
     placeholder?: string;
     labelText?: string;
-    inputClasses?: ClassNameValue;
     size?: TextInputSize;
     disabled?: boolean;
     required?: boolean;
@@ -41,6 +40,7 @@ export type TextInputProps = {
     onmouseup?: () => void;
     label?: Snippet;
     icon?: Snippet;
+    class?: ClassNameValue;
 };
 declare const TextInput: import("svelte").Component<TextInputProps, {}, "value">;
 type TextInput = ReturnType<typeof TextInput>;

package/dist/modules/api-client.d.ts

@@ -9,6 +9,12 @@ import { type ProblemDetail } from "./problem-details.js";
  * and API routes) to automatically benefit from its enhancements (e.g., cookie forwarding,
  * built-in request/response interception via SvelteKit's `handleFetch` hook).
  */
+export interface AutoRedirectRule {
+    status: number;
+    errorKey: string;
+    errorValue?: string;
+    redirectTo: string;
+}
 export type ApiResponse<T> = {
     ok: boolean;
     status: number;
@@ -26,6 +32,7 @@ export interface ApiClientConfig {
      * handled by `src/hooks.server.ts` via `handleFetch`.
      */
     getAccessToken?: () => string | undefined;
+    autoRedirects?: AutoRedirectRule[];
 }
 export interface RequestOptions extends RequestInit {
     /** If true, the Authorization header will not be added to this request. */
@@ -82,6 +89,7 @@ export declare class ApiClient {
     private clientAuthToken;
     private getAccessTokenFromStore;
     private fetchInstance?;
+    private autoRedirects;
     private requestInterceptors;
     private responseInterceptors;
     private errorHandlers;
@@ -155,6 +163,7 @@ export declare class ApiClient {
      * @template T - Expected type of the response data.
      */
     request<T>(endpoint: string, method: string, body: BodyInit | object | null | undefined, options?: RequestOptions): Promise<ApiResponse<T>>;
+    private evaluateRedirect;
     /**
      * Sends a GET request to the specified API endpoint.
      *

package/dist/modules/api-client.js

@@ -1,5 +1,7 @@
 // src/lib/api/client.ts
+import { redirect } from "@sveltejs/kit";
 import { getProblemDetail } from "./problem-details.js";
+import { browser } from "$app/environment";
 /**
  * Custom error class for API responses.
  * Provides access to the HTTP status code.
@@ -35,6 +37,7 @@ export class ApiClient {
     clientAuthToken;
     getAccessTokenFromStore;
     fetchInstance;
+    autoRedirects = [];
     requestInterceptors = [];
     responseInterceptors = [];
     errorHandlers = [];
@@ -47,6 +50,7 @@ export class ApiClient {
         this.baseURL = config.baseURL;
         this.defaultHeaders = config.defaultHeaders || { 'Content-Type': 'application/json' };
         this.getAccessTokenFromStore = config.getAccessToken;
+        this.autoRedirects = config.autoRedirects || [];
     }
     /**
      * Sets the Bearer token for client-side requests.
@@ -247,6 +251,7 @@ export class ApiClient {
             const message = error instanceof Error ? error.message : 'Unexpected error occurred';
             const errorObj = isApiError && error.json ? error.json : getProblemDetail({ status, title: "Server fetch error", type: "/exceptions/fetch-error/", detail: message });
             //const errorObj = status != 503 ? message : getProblemDetail({status, title: "Server fetch error", type: "/exceptions/fetch-error/", detail: "Error fetching data from API", server: message });
+            this.evaluateRedirect(errorObj, status);
             return {
                 ok: false,
                 status,
@@ -254,6 +259,24 @@ export class ApiClient {
             };
         }
     }
+    evaluateRedirect(errorObj, status) {
+        for (const rule of this.autoRedirects) {
+            // Checks if the error matches the redirect rule value can be undefined to match if no value is specified.
+            if (status === rule.status && rule.errorKey in errorObj && (rule.errorValue === undefined || errorObj[rule.errorKey] === rule.errorValue)) {
+                if (browser) {
+                    // Client-side redirect
+                    import('$app/navigation').then(({ goto }) => {
+                        goto(rule.redirectTo, { replaceState: true });
+                    });
+                }
+                else {
+                    // Server-side redirect
+                    throw redirect(303, rule.redirectTo);
+                }
+                break;
+            }
+        }
+    }
     // --- HTTP Method Shorthands ---
     /**
      * Sends a GET request to the specified API endpoint.

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.13.3",
+  "version": "0.13.5",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [