@codella-software/react 2.0.1 → 2.1.0

package/README.md

@@ -7,8 +7,8 @@ React hooks for Codella core services - FormBuilder, TableBuilder, FiltersAndSor
 - **useFormBuilder** - Manage form state, validation, and submission
 - **useTableService** - Manage dynamic table data, filtering, and sorting
 - **useFiltersAndSort** - Handle complex filtering and sorting logic
-- **useTabsService** - Manage tab state and navigation
-- **useAPIService** - RESTful API client with authentication
+- **useTabsService** - Manage tab state and navigation (use CLI templates for responsive components)
+- **useAPIService** - RESTful API client with authentication, interceptors, and middleware hooks
 - **useLiveUpdates** - Real-time data updates via WebSocket or Server-Sent Events
 
 ## Installation
@@ -69,20 +69,52 @@ function MyTable() {
 
 ```typescript
 import { useAPIService } from '@codella-software/react';
+import { useEffect, useState } from 'react';
 
 function UsersList() {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(false);
+
   const api = useAPIService({
-    baseURL: 'https://api.example.com'
+    baseURL: 'https://api.example.com',
+    hooks: {
+      onBeforeRequest: () => setLoading(true),
+      onAfterResponse: () => setLoading(false),
+      onError: (ctx) => console.error('Error:', ctx.error)
+    }
   });
 
+  // Add request interceptor to include custom headers
+  useEffect(() => {
+    api.interceptors.request.use((config) => ({
+      ...config,
+      headers: { ...config.headers, 'X-App-Version': '2.0' }
+    }));
+
+    // Add response interceptor to transform data
+    api.interceptors.response.use((response) => ({
+      ...response,
+      data: Array.isArray(response.data) ? response.data : [response.data]
+    }));
+  }, [api]);
+
   useEffect(() => {
     api.get('/users').then(setUsers);
   }, [api]);
 
-  return <div>{/* Display users */}</div>;
+  return (
+    <div>
+      {loading && <p>Loading...</p>}
+      <ul>
+        {users.map(user => <li key={user.id}>{user.name}</li>)}
+      </ul>
+    </div>
+  );
 }
 ```
 
+See [API Service Documentation](https://CodellaSoftware.github.io/codella-utils/api-service/) for interceptors, middleware hooks, and authentication patterns.
+
 ## Documentation
 
 For full API documentation, visit [https://CodellaSoftware.github.io/codella-utils/](https://CodellaSoftware.github.io/codella-utils/)

package/dist/index.cjs

@@ -1983,127 +1983,8 @@ function useSetActiveTab() {
     previousTab: () => service.previousTab()
   };
 }
-function ResponsiveTabs({
-  className = "",
-  tabClassName = "",
-  activeTabClassName = "",
-  selectClassName = "",
-  breakpoint = 768,
-  showBadges = true,
-  icon = true
-}) {
-  const [isMobile, setIsMobile] = react.useState(false);
-  const activeTab = useActiveTab();
-  const tabs = useTabs();
-  const { setActiveTab } = useSetActiveTab();
-  react.useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < breakpoint);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [breakpoint]);
-  if (!activeTab) {
-    return null;
-  }
-  return isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
-    TabsSelect,
-    {
-      tabs,
-      activeTabId: activeTab.id,
-      onTabChange: setActiveTab,
-      className: selectClassName
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    TabsList,
-    {
-      tabs,
-      activeTabId: activeTab.id,
-      onTabChange: setActiveTab,
-      className,
-      tabClassName,
-      activeTabClassName,
-      showBadges,
-      icon
-    }
-  );
-}
-function TabsList({
-  tabs,
-  activeTabId,
-  onTabChange,
-  className = "",
-  tabClassName = "",
-  activeTabClassName = "",
-  showBadges = true,
-  icon = true
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "tablist",
-      className: `flex border-b border-gray-200 ${className}`,
-      "aria-label": "Tabs",
-      children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          role: "tab",
-          "aria-selected": tab.id === activeTabId,
-          "aria-controls": `tabpanel-${tab.id}`,
-          id: `tab-${tab.id}`,
-          onClick: () => !tab.disabled && onTabChange(tab.id),
-          disabled: tab.disabled,
-          className: `
-            relative px-4 py-2 text-sm font-medium transition-colors
-            ${tab.disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-700 hover:text-gray-900"}
-            ${tab.id === activeTabId ? `text-blue-600 border-b-2 border-blue-600 ${activeTabClassName}` : ""}
-            ${tabClassName}
-          `,
-          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-            icon && tab.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: tab.icon }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: tab.label }),
-            showBadges && tab.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 inline-flex items-center justify-center px-2 py-1 text-xs font-semibold leading-none text-white transform translate-y-px bg-red-600 rounded-full", children: tab.badge })
-          ] })
-        },
-        tab.id
-      ))
-    }
-  );
-}
-function TabsSelect({
-  tabs,
-  activeTabId,
-  onTabChange,
-  className = ""
-}) {
-  tabs.find((t) => t.id === activeTabId);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "select",
-    {
-      value: activeTabId,
-      onChange: (e) => onTabChange(e.target.value),
-      "aria-label": "Select a tab",
-      className: `
-          w-full px-3 py-2 text-sm font-medium border border-gray-300 rounded-md
-          bg-white text-gray-900 hover:border-gray-400 focus:outline-none focus:ring-2
-          focus:ring-blue-500 focus:ring-offset-0
-        `,
-      children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: tab.id, disabled: tab.disabled, children: [
-        tab.label,
-        " ",
-        tab.badge ? `(${tab.badge})` : ""
-      ] }, tab.id))
-    }
-  ) });
-}
 exports.LiveUpdateProvider = LiveUpdateProvider;
-exports.ResponsiveTabs = ResponsiveTabs;
-exports.TabsList = TabsList;
 exports.TabsProvider = TabsProvider;
-exports.TabsSelect = TabsSelect;
 exports.useActiveTab = useActiveTab;
 exports.useFiltersAndSort = useFiltersAndSort;
 exports.useFormBuilder = useFormBuilder;