@codebit-programando-solucoes/codebit-web-antd 1.1.5 → 1.1.16

package/dist/components/CssTokenBridge.d.ts

@@ -0,0 +1,89 @@
+import { FC } from 'react';
+
+/**
+ * A bridge component that syncs Ant Design theme tokens to CSS custom properties. This component doesn't render anything visible but sets CSS variables on the document root
+ * element, making Ant Design tokens available for use in regular CSS files.
+ *
+ * The following CSS variables are exposed:
+ *
+ * **Color tokens:**
+ *
+ * - --antd-color-bg-container (Background for containers)
+ * - --antd-color-bg-elevated (Background for elevated surfaces)
+ * - --antd-color-bg-layout (Background for layout)
+ * - --antd-color-border (Border color)
+ * - --antd-color-primary (Primary brand color)
+ * - --antd-color-text (Main text color)
+ * - --antd-color-text-secondary (Secondary text color)
+ * - --antd-color-split (Split/divider color)
+ *
+ * **Margin tokens:**
+ *
+ * - --antd-margin-xxs: 4px (Smallest margin for very tight spacing)
+ * - --antd-margin-xs: 8px (Extra small margin for compact layouts)
+ * - --antd-margin-sm: 12px (Small margin for close proximity elements)
+ * - --antd-margin: 16px (Base/default margin, most commonly used)
+ * - --antd-margin-md: 20px (Medium-large margin for breathing room)
+ * - --antd-margin-lg: 24px (Large margin for significant spacing)
+ * - --antd-margin-xl: 32px (Extra large margin for strong separation)
+ * - --antd-margin-xxl: 48px (Largest margin for major section breaks)
+ *
+ * **Padding tokens:**
+ *
+ * - --antd-padding-xxs: 4px (Smallest padding for minimal inner spacing)
+ * - --antd-padding-xs: 8px (Extra small padding for tight content)
+ * - --antd-padding-sm: 12px (Small padding for compact components)
+ * - --antd-padding: 16px (Base/default padding, most commonly used)
+ * - --antd-padding-md: 20px (Medium-large padding for comfortable spacing)
+ * - --antd-padding-lg: 24px (Large padding for spacious containers)
+ * - --antd-padding-xl: 32px (Extra large padding for major containers)
+ *
+ * **Font size tokens:**
+ *
+ * - --antd-font-size-sm: 12px (Small text, captions, labels)
+ * - --antd-font-size: 14px (Base font size, body text)
+ * - --antd-font-size-lg: 16px (Large text, emphasis)
+ * - --antd-font-size-xl: 20px (Extra large text, subheadings)
+ *
+ * **Line height tokens:**
+ *
+ * - --antd-line-height (Base line height)
+ * - --antd-line-height-lg (Large line height)
+ *
+ * **Control height tokens:**
+ *
+ * - --antd-control-height-sm (Small control height)
+ * - --antd-control-height (Base control height)
+ * - --antd-control-height-lg (Large control height)
+ *
+ * **Border radius tokens:**
+ *
+ * - --antd-border-radius-sm (Small border radius)
+ * - --antd-border-radius (Base border radius)
+ * - --antd-border-radius-lg (Large border radius)
+ *
+ * @example
+ *     ```tsx
+ *     // Place this component at the root level of your app
+ *     function App() {
+ *       return (
+ *         <>
+ *           <CssTokenBridge />
+ *           <YourAppContent />
+ *         </>
+ *       );
+ *     }
+ *     ```;
+ *
+ * @example
+ *     ```css
+ *     // Use the exposed CSS variables in your stylesheets
+ *     .my-component {
+ *       background-color: var(--antd-color-bg-container);
+ *       padding: var(--antd-padding-md);
+ *       color: var(--antd-color-text);
+ *       font-size: var(--antd-font-size);
+ *     }
+ *     ```;
+ */
+export const CssTokenBridge: FC;

package/dist/components/FilterContainer.d.ts

@@ -0,0 +1,15 @@
+import { JSX, ReactNode } from 'react';
+import { CardProps } from 'antd';
+
+export interface FilterContainerProps extends Omit<CardProps, 'children'> {
+    /** The content to be rendered inside the card */
+    children: ReactNode;
+}
+
+/**
+ * FilterContainer component that wraps content in an Ant Design Card with custom padding. This component is typically used to contain filter controls and form elements.
+ *
+ * @param props - Component props
+ * @returns A Card component with custom padding styles
+ */
+export function FilterContainer(props: FilterContainerProps): JSX.Element;

package/dist/components/ListCard.d.ts

@@ -0,0 +1,22 @@
+import { JSX, ReactNode } from 'react';
+
+/** Props for the ListCard component */
+export interface ListCardProps {
+    /** The title to display in the card header */
+    title: string;
+
+    /** Optional callback function to clear filters */
+    onClearFilters?: (() => void) | null;
+
+    /** Container element for header components */
+    headerContainer?: ReactNode | null;
+
+    /** Container element for the table component */
+    tableContainer?: ReactNode | null;
+
+    /** Optional actions to display to the right of clear filters button */
+    actions?: ReactNode | null;
+}
+
+/** ListCard component - A card layout for displaying lists with filters and tables. */
+export function ListCard(props: ListCardProps): JSX.Element;

package/dist/components/TableContainer.d.ts

@@ -0,0 +1,42 @@
+import { JSX, ReactElement } from 'react';
+import type { TableProps } from 'antd';
+
+/**
+ * Check if a node is or contains pagination element
+ *
+ * @param node - The DOM node to check
+ * @returns True if the node is or contains a pagination element
+ */
+export function isPaginationNode(node: Node): boolean;
+
+/**
+ * Check if mutation contains pagination nodes
+ *
+ * @param mutation - The mutation record to check
+ * @returns True if the mutation contains pagination nodes
+ */
+export function hasPaginationInMutation(mutation: MutationRecord): boolean;
+
+/** Props for the TableContainer component */
+export interface TableContainerProps {
+    /** The table component to be wrapped (typically an Ant Design Table) */
+    children: ReactElement<TableProps<any>>;
+}
+
+/**
+ * TableContainer component that automatically adjusts table scroll height based on available space and pagination presence.
+ *
+ * This component wraps an Ant Design table and calculates the optimal scroll height by measuring the container, table header, and pagination heights. It observes DOM mutations to
+ * detect pagination changes and recalculates on window resize events.
+ *
+ * @example
+ *     ```tsx
+ *     <TableContainer>
+ *         <Table dataSource={data} columns={columns} pagination={{ pageSize: 10 }} />
+ *     </TableContainer>
+ *     ```;
+ *
+ * @param props - Component props
+ * @returns A container div with the enhanced table component
+ */
+export function TableContainer(props: TableContainerProps): JSX.Element;

package/dist/components/index.d.ts

@@ -1,3 +1,7 @@
 export * from './LoggedMainContainer';
 export * from './ThemeToggle';
 export * from './ErrorRetry';
+export * from './ListCard';
+export * from './CssTokenBridge';
+export * from './TableContainer';
+export * from './FilterContainer.jsx';

package/dist/contexts/CodebitConfigContext.d.ts

@@ -13,15 +13,15 @@ export interface MenuItem {
 }
 
 /** User object type */
-export interface UserType {
+export interface LoggedUser {
     /** User's full name */
-    name: string;
+    name?: string;
     /** User's email address */
-    email: string;
+    email?: string;
     /** Unique user identifier */
-    id: string;
+    id?: string;
     /** User roles/permissions */
-    roles: string[];
+    roles?: string[];
 }
 
 /** Context type for Codebit configuration */
@@ -29,7 +29,7 @@ export interface CodebitConfigContextType {
     /** Array of menu items */
     menuItems: MenuItem[];
     /** Current user object */
-    user: UserType;
+    user: LoggedUser;
     /** Logout handler */
     onLogout: () => void | Promise<void>;
     /** Function to toggle the theme */
@@ -40,17 +40,14 @@ export interface CodebitConfigContextType {
     version?: string;
     /** Show version in menu */
     showVersion?: boolean;
-    /** OAuth callback URL for authentication */
-    oauthCallbackUrl: string;
+    /** Internationalization instance */
+    i18n?: import('i18next').i18n;
     /** Optional secondary sidebar content */
     secondarySidebar?: React.ReactNode;
     /** Width of the secondary sidebar */
     secondarySidebarWidth?: number;
 }
 
-/** Context for Codebit configuration */
-export const CodebitConfigContext: React.Context<CodebitConfigContextType | null>;
-
 /** Props for the CodebitConfigProvider component */
 export interface CodebitConfigProviderProps {
     /** Child components */
@@ -58,15 +55,9 @@ export interface CodebitConfigProviderProps {
     /** Menu items configuration */
     menuItems: MenuItem[];
     /** Current user object */
-    user: UserType;
+    user: LoggedUser;
     /** Logout handler */
     onLogout: () => void | Promise<void>;
-    /** Function to toggle the theme */
-    toggleTheme: () => void;
-    /** Current dark mode state */
-    isDarkMode: boolean;
-    /** OAuth callback URL for authentication */
-    oauthCallbackUrl: string;
     /** Application version. Default is '1.0' */
     version?: string;
     /** Show version in menu. Default is true */
@@ -75,6 +66,8 @@ export interface CodebitConfigProviderProps {
     secondarySidebar?: React.ReactNode;
     /** Width of the secondary sidebar */
     secondarySidebarWidth?: number;
+    /** Controls theme persistence in localStorage. Default is `true` */
+    storeThemeInLocalStorage?: boolean;
 }
 
 /**
@@ -88,3 +81,6 @@ export interface CodebitConfigProviderProps {
 export function CodebitConfigProvider(
     props: CodebitConfigProviderProps,
 ): React.JSX.Element;
+
+/** Context for Codebit configuration */
+export const CodebitConfigContext: React.Context<CodebitConfigContextType | null>;