@zonos/amino 5.5.30 → 5.5.31

package/components/nested-data-table/NestedDataTable.d.ts

@@ -0,0 +1,121 @@
+import { type ReactNode } from 'react';
+import type { Column } from 'react-data-grid';
+import type { BaseProps } from "../../types/BaseProps";
+import type { flattenRow } from "../../utils/flattenRow";
+type ColumnType<TRow> = Column<TRow, Record<string, unknown>>;
+export type ColumnCell<TRow extends Record<string, unknown>> = NonNullable<ColumnType<TRow>['renderCell']>;
+export type CustomColumnCells<TRow extends Record<string, unknown>> = {
+    [key in keyof TRow]?: ColumnCell<TRow>;
+};
+type Props<TRow extends Record<string, unknown>> = BaseProps & {
+    /**
+     * Current page number for pagination
+     */
+    currentPage?: number;
+    /**
+     * Custom rendering functions for specific column cells
+     */
+    customColumnCells?: CustomColumnCells<TRow>;
+    /**
+     * Custom function to flatten nested objects in table data
+     * If not provided, the default flattenRow from "src/utils/flattenRow.ts" will be used
+     */
+    customFlattenRow?: typeof flattenRow;
+    /**
+     * Handler function for page changes in pagination
+     * @param page - The new page number
+     */
+    handlePagination?: (page: number) => void;
+    /**
+     * Whether there is a next page available for pagination
+     */
+    hasNextPage?: boolean;
+    /**
+     * Whether there is a previous page available for pagination
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * Whether data is currently being fetched
+     */
+    isFetching: boolean;
+    /**
+     * Custom component to display while data is loading
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Custom component to display when there is no data or an error state
+     */
+    restState?: ReactNode;
+    /**
+     * Data to be displayed in the table
+     */
+    tableData: TRow[];
+    /**
+     * Optional title for the table
+     */
+    title?: string;
+};
+/**
+ * A data table component that can display nested data structures with pagination support.
+ * Automatically extracts and displays nested object properties in a tabular format,
+ * with support for custom cell rendering and pagination controls.
+ *
+ * @example Basic usage
+ * ```tsx
+ * type User = {
+ *   id: number;
+ *   name: string;
+ *   details: {
+ *     email: string;
+ *     phone: string;
+ *   };
+ * };
+ *
+ * const [users, setUsers] = useState<User[]>([]);
+ * const [loading, setLoading] = useState(true);
+ *
+ * useEffect(() => {
+ *   fetchUsers().then(data => {
+ *     setUsers(data);
+ *     setLoading(false);
+ *   });
+ * }, []);
+ *
+ * <NestedDataTable
+ *   isFetching={loading}
+ *   tableData={users}
+ *   title="User List"
+ * />
+ * ```
+ *
+ * @example With custom cell rendering
+ * ```tsx
+ * <NestedDataTable
+ *   customColumnCells={{
+ *     name: props => <strong>{props.row.name}</strong>,
+ *     'details.email': props => <a href={`mailto:${props.row.details.email}`}>{props.row.details.email}</a>
+ *   }}
+ *   isFetching={loading}
+ *   tableData={users}
+ *   title="User List with Custom Formatting"
+ * />
+ * ```
+ *
+ * @example With pagination
+ * ```tsx
+ * const [page, setPage] = useState(1);
+ * const [hasMore, setHasMore] = useState(true);
+ *
+ * <NestedDataTable
+ *   currentPage={page}
+ *   handlePagination={setPage}
+ *   hasNextPage={hasMore}
+ *   hasPreviousPage={page > 1}
+ *   isFetching={loading}
+ *   tableData={users}
+ *   title="Paginated User List"
+ * />
+ * ```
+ */
+export declare const NestedDataTable: <TRow extends Record<string, unknown> | Record<string, unknown>>({ currentPage, customColumnCells, customFlattenRow, handlePagination, hasNextPage, hasPreviousPage, isFetching, loadingComponent, restState, style, tableData, title, }: Props<TRow>) => import("react").JSX.Element;
+export {};

package/components/nested-data-table/NestedDataTableHasura.d.ts

@@ -0,0 +1,19 @@
+import type { flattenRow } from "../../utils/flattenRow";
+type Props = {
+    /**
+     * @param customFlattenRow
+     * @description Custom flattenRow function, if not provided, the default flattenRow (flattenRow - "src/utils/flattenRow.ts") will be used
+     */
+    customFlattenRow?: typeof flattenRow;
+    isFetching: boolean;
+    query: string;
+    /**
+     * @param cachingKey key to be used for caching response in Swr
+     */
+    setCachingKey: (cachingKey: string) => void;
+    setQuery: (query: string) => void;
+    tableData: Record<string, unknown> | Record<string, unknown>[];
+    title: string;
+};
+export declare const NestedDataTableHasura: ({ customFlattenRow, isFetching, query, setCachingKey, setQuery, tableData, title, }: Props) => import("react").JSX.Element;
+export {};

package/components/nested-data-table/_Filter.d.ts

@@ -0,0 +1,7 @@
+import type { Column } from 'react-data-grid';
+import type { RowWithIndex } from "../pivot-table/PivotTable";
+export declare const Filter: ({ columns, hiddenColumns, setHiddenColumns, }: {
+    columns: Column<RowWithIndex, Record<string, unknown>>[];
+    hiddenColumns: string[];
+    setHiddenColumns: (hiddenColumns: string[]) => void;
+}) => import("react").JSX.Element;

package/components/nested-data-table/_TableData.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import type { Column } from 'react-data-grid';
+import { type RowWithIndex } from "../pivot-table/PivotTable";
+import { flattenRow } from "../../utils/flattenRow";
+type ColumnType = Column<RowWithIndex, Record<string, unknown>>;
+type ColumnCell = Parameters<NonNullable<ColumnType['renderCell']>>;
+type Props<TRow extends Record<string, unknown>> = {
+    customColumnCells?: {
+        [key in keyof TRow]?: (props: ColumnCell[0]) => ReactNode;
+    };
+    customFlattenRow?: typeof flattenRow;
+    noFilter?: boolean;
+    tableDataArr: TRow[];
+};
+export declare const TableData: <TRow extends Record<string, unknown>>({ customColumnCells, customFlattenRow, noFilter, tableDataArr, }: Props<TRow>) => import("react").JSX.Element;
+export {};

package/components/pivot-table/PivotTable.d.ts

@@ -0,0 +1,130 @@
+import { type Column, type DataGridProps } from 'react-data-grid';
+import type { BaseProps } from "../../types/BaseProps";
+export type KeyValue = string | number;
+type RowData = Record<string, unknown>;
+type OverrideColumn<TRow extends RowData> = {
+    key: keyof TRow extends string ? keyof TRow | (string & {
+        _placeholder?: never;
+    }) : never;
+};
+export type ColumnProps<TRow extends RowData, TSummaryRow = unknown> = Exclude<Column<TRow, TSummaryRow>, 'key'> & OverrideColumn<TRow>;
+type OverrideProps<TRow extends RowData, TSummaryRow> = {
+    columns: ColumnProps<TRow, TSummaryRow>[];
+    rows: TRow[];
+    /**
+     * @default string
+     */
+    tableHeight?: string;
+};
+export type NestedRowData = {
+    _expandedData: Record<string, unknown>[];
+    _expandedKey: string;
+};
+export type RowWithIndex<Row extends RowData = RowData> = Row & {
+    _itemIndex?: number;
+} & NestedRowData;
+type Props<TRow extends RowWithIndex, TSummaryRow, TRowKey extends KeyValue> = BaseProps & Omit<DataGridProps<TRow, TSummaryRow, TRowKey>, keyof OverrideProps<TRow, TSummaryRow>> & OverrideProps<TRow, TSummaryRow>;
+/**
+ * PivotTable component renders tabular data with advanced features like sorting, indexing, and custom renderers.
+ * Built on top of react-data-grid with added functionality and styling consistent with Amino design.
+ *
+ * @example Basic usage
+ * const columns = [
+ *   { key: 'id', name: 'ID', width: 80 },
+ *   { key: 'name', name: 'Name', width: 200 },
+ *   { key: 'email', name: 'Email', width: 200 },
+ *   { key: 'status', name: 'Status', width: 120 }
+ * ];
+ *
+ * const rows = [
+ *   { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+ *   { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
+ *   { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'Active' }
+ * ];
+ *
+ * <PivotTable
+ *   columns={columns}
+ *   rows={rows}
+ * />
+ *
+ * @example With custom height
+ * <PivotTable
+ *   columns={columns}
+ *   rows={rows}
+ *   tableHeight="400px"
+ * />
+ *
+ * @example With sorting
+ * const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]);
+ *
+ * <PivotTable
+ *   columns={columns}
+ *   rows={rows}
+ *   sortColumns={sortColumns}
+ *   onSortColumnsChange={setSortColumns}
+ * />
+ *
+ * @example With custom cell renderer
+ * const columns = [
+ *   { key: 'id', name: 'ID' },
+ *   { key: 'name', name: 'Name' },
+ *   {
+ *     key: 'status',
+ *     name: 'Status',
+ *     renderCell: ({ row }) => (
+ *       <Badge
+ *         color={row.status === 'Active' ? 'success' : 'warning'}
+ *       >
+ *         {row.status}
+ *       </Badge>
+ *     )
+ *   }
+ * ];
+ *
+ * <PivotTable columns={columns} rows={rows} />
+ *
+ * @example With row selection
+ * const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(new Set());
+ *
+ * <PivotTable
+ *   columns={columns}
+ *   rows={rows}
+ *   selectedRows={selectedRows}
+ *   onSelectedRowsChange={setSelectedRows}
+ * />
+ *
+ * @example With expandable rows
+ * // This example assumes you have configured the Master Detail view
+ * // with the appropriate row renderer in the renderers prop
+ * const rows = [
+ *   {
+ *     id: 1,
+ *     name: 'John Doe',
+ *     _expandedKey: 'orders',
+ *     _expandedData: [
+ *       { id: 101, product: 'Widget', price: 19.99 },
+ *       { id: 102, product: 'Gadget', price: 24.99 }
+ *     ]
+ *   },
+ *   // ... more rows
+ * ];
+ *
+ * <PivotTable
+ *   columns={columns}
+ *   rows={rows}
+ *   expandableRows
+ * />
+ *
+ * @example With header filters
+ * <PivotTable
+ *   columns={columns.map(col => ({
+ *     ...col,
+ *     headerRenderer: props => (
+ *       <FilterHeader {...props} onFilterChange={handleFilterChange} />
+ *     )
+ *   }))}
+ *   rows={filteredRows}
+ * />
+ */
+export declare const PivotTable: <TRow extends RowWithIndex, TSummaryRow = unknown, TRowKey extends KeyValue = KeyValue>({ columns, onSortColumnsChange, renderers: _renderers, rows, sortColumns: _sortColumns, style, tableHeight, ...rest }: Props<TRow, TSummaryRow, TRowKey>) => import("react").JSX.Element;
+export {};

package/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,58 @@
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+export type ProgressBarProps = BaseProps & {
+    /**
+     * The color style of the progress bar
+     * - Can be a specific Color from the theme
+     * - 'greenToRed': Color transitions from green (0-20%) to orange (20-80%) to red (80-100%)
+     * - 'redToGreen': Color transitions from red (0-20%) to orange (20-80%) to green (80-100%)
+     * @default 'blue600'
+     */
+    colorStyle?: 'greenToRed' | 'redToGreen' | Color;
+    /**
+     * The progress percentage, from 0 to 100
+     * Values less than 0 will be treated as 0, and values greater than 100 will be treated as 100
+     * @default 0
+     */
+    progress?: number;
+};
+/**
+ * A progress bar component that displays a horizontal bar to visualize completion or loading progress.
+ * Supports different color styles and percentage-based progress values.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ProgressBar progress={75} />
+ * ```
+ *
+ * @example With different color styles
+ * ```tsx
+ * <VStack spacing={16}>
+ *   <ProgressBar colorStyle="blue600" progress={60} />
+ *   <ProgressBar colorStyle="green600" progress={60} />
+ *   <ProgressBar colorStyle="red600" progress={60} />
+ * </VStack>
+ * ```
+ *
+ * @example With dynamic coloring based on progress
+ * ```tsx
+ * <VStack spacing={16}>
+ *   <Text>Green to Red (higher is worse)</Text>
+ *   <ProgressBar colorStyle="greenToRed" progress={80} />
+ *
+ *   <Text>Red to Green (higher is better)</Text>
+ *   <ProgressBar colorStyle="redToGreen" progress={80} />
+ * </VStack>
+ * ```
+ *
+ * @example With custom styling
+ * ```tsx
+ * <ProgressBar
+ *   className="custom-progress"
+ *   colorStyle="orange600"
+ *   progress={45}
+ *   style={{ height: '8px', borderRadius: '4px' }}
+ * />
+ * ```
+ */
+export declare const ProgressBar: ({ className, colorStyle, progress, style, }: ProgressBarProps) => import("react").JSX.Element;

package/components/radio/Radio.d.ts

@@ -0,0 +1,76 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type RadioProps = BaseProps & {
+    /**
+     * Determines if the radio button is selected
+     */
+    checked: boolean;
+    /**
+     * Sets the radio button to a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label text or element to display next to the radio button
+     */
+    label?: ReactNode;
+    /**
+     * Function called when the radio button state changes
+     */
+    onChange: (checked: boolean) => void;
+    /**
+     * Value associated with this radio button, used for form submission
+     */
+    value: string;
+};
+/**
+ * Radio component provides a single radio button for use in forms or as part of a RadioGroup.
+ * It includes an animated selection indicator and optional label.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [checked, setChecked] = useState(false);
+ *
+ * <Radio
+ *   checked={checked}
+ *   onChange={setChecked}
+ *   value="option1"
+ *   label="Select this option"
+ * />
+ * ```
+ *
+ * @example With disabled state
+ * ```tsx
+ * <Radio
+ *   checked={true}
+ *   disabled={true}
+ *   onChange={() => {}}
+ *   value="disabled-option"
+ *   label="This option cannot be changed"
+ * />
+ * ```
+ *
+ * @example With ReactNode label
+ * ```tsx
+ * <Radio
+ *   checked={checked}
+ *   onChange={setChecked}
+ *   value="option-with-jsx"
+ *   label={<>Custom <strong>formatted</strong> label</>}
+ * />
+ * ```
+ *
+ * @example In a form
+ * ```tsx
+ * <form onSubmit={handleSubmit}>
+ *   <Radio
+ *     checked={formData.agreeToTerms}
+ *     onChange={(checked) => setFormData({...formData, agreeToTerms: checked})}
+ *     value="agree"
+ *     label="I agree to the terms and conditions"
+ *   />
+ *   <Button type="submit">Submit</Button>
+ * </form>
+ * ```
+ */
+export declare const Radio: ({ checked, className, disabled, label, onChange, style, value, }: RadioProps) => import("react").JSX.Element;

package/components/radio/RadioGroup.d.ts

@@ -0,0 +1,105 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type RadioGroupItem<T extends string = string> = {
+    /**
+     * Text or element to display as the radio option label
+     */
+    label: ReactNode;
+    /**
+     * Value associated with this radio option
+     */
+    value: T;
+};
+export type RadioGroupProps<T extends string = string> = BaseProps & {
+    /**
+     * Sets all radio buttons in the group to a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Value to be pre-selected when the component mounts
+     */
+    initialValue?: string;
+    /**
+     * Array of radio options to display
+     */
+    items: RadioGroupItem<T>[];
+    /**
+     * Function called when a radio option is selected
+     */
+    onChange: (newValue: T) => void;
+};
+/**
+ * RadioGroup component provides a group of radio buttons where only one option can be selected at a time.
+ * It manages the selection state internally while exposing the selected value through the onChange callback.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [selected, setSelected] = useState('option1');
+ *
+ * const options = [
+ *   { label: 'Option One', value: 'option1' },
+ *   { label: 'Option Two', value: 'option2' },
+ *   { label: 'Option Three', value: 'option3' }
+ * ];
+ *
+ * <RadioGroup
+ *   items={options}
+ *   initialValue={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
+ *
+ * @example With disabled state
+ * ```tsx
+ * <RadioGroup
+ *   items={[
+ *     { label: 'Yes', value: 'yes' },
+ *     { label: 'No', value: 'no' }
+ *   ]}
+ *   initialValue="yes"
+ *   onChange={handleChange}
+ *   disabled={true}
+ * />
+ * ```
+ *
+ * @example With custom styled labels
+ * ```tsx
+ * const customOptions = [
+ *   {
+ *     label: <span><strong>Business</strong> - For commercial use</span>,
+ *     value: 'business'
+ *   },
+ *   {
+ *     label: <span><strong>Personal</strong> - For individual use</span>,
+ *     value: 'personal'
+ *   }
+ * ];
+ *
+ * <RadioGroup
+ *   items={customOptions}
+ *   initialValue="business"
+ *   onChange={handleAccountTypeChange}
+ * />
+ * ```
+ *
+ * @example With type-safe values using generics
+ * ```tsx
+ * type ShippingMethod = 'standard' | 'express' | 'overnight';
+ *
+ * const [shipping, setShipping] = useState<ShippingMethod>('standard');
+ *
+ * const shippingOptions: RadioGroupItem<ShippingMethod>[] = [
+ *   { label: 'Standard (3-5 days)', value: 'standard' },
+ *   { label: 'Express (2-3 days)', value: 'express' },
+ *   { label: 'Overnight (1 day)', value: 'overnight' }
+ * ];
+ *
+ * <RadioGroup<ShippingMethod>
+ *   items={shippingOptions}
+ *   initialValue={shipping}
+ *   onChange={setShipping}
+ * />
+ * ```
+ */
+export declare const RadioGroup: <T extends string = string>({ className, disabled, initialValue, items, onChange, style, }: RadioGroupProps<T>) => import("react").JSX.Element;

package/components/rest-state/RestState.d.ts

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type RestStateProps = BaseProps & {
+    /**
+     * Action element to display below the subtitle, typically a button
+     */
+    action?: ReactNode;
+    /**
+     * URL of an image to display above the text content
+     */
+    icon?: string;
+    /**
+     * Primary text displayed in the rest state
+     */
+    label: string;
+    /**
+     * Secondary text displayed below the label
+     */
+    subtitle?: ReactNode;
+};
+/**
+ * RestState component provides a placeholder view for empty states, loading states,
+ * errors, or success messages with optional icon and action.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RestState
+ *   label="No results found"
+ *   subtitle="Try adjusting your search criteria"
+ * />
+ * ```
+ *
+ * @example With action button
+ * ```tsx
+ * <RestState
+ *   label="No items yet"
+ *   subtitle="Create your first item to get started"
+ *   action={<Button onClick={handleAddItem} variant="primary">Add Item</Button>}
+ * />
+ * ```
+ *
+ * @example With icon
+ * ```tsx
+ * <RestState
+ *   icon="/path/to/empty-state-illustration.svg"
+ *   label="Your cart is empty"
+ *   subtitle="Browse our products to add items to your cart"
+ *   action={<Button onClick={handleBrowseProducts}>Browse Products</Button>}
+ * />
+ * ```
+ *
+ * @example Error state
+ * ```tsx
+ * <RestState
+ *   icon="/path/to/error-illustration.svg"
+ *   label="Something went wrong"
+ *   subtitle="We couldn't load your data. Please try again later."
+ *   action={<Button onClick={handleRetry}>Retry</Button>}
+ * />
+ * ```
+ *
+ * @example Success state
+ * ```tsx
+ * <RestState
+ *   icon="/path/to/success-illustration.svg"
+ *   label="Payment successful!"
+ *   subtitle="Your order has been processed and will be shipped soon."
+ *   action={<Button onClick={handleViewOrder}>View Order</Button>}
+ * />
+ * ```
+ */
+export declare const RestState: ({ action, className, icon, label, style, subtitle, }: RestStateProps) => import("react").JSX.Element;

package/components/rich-card-select/RichCardStateSelect.d.ts

@@ -0,0 +1,75 @@
+import type { BaseProps } from "../../types/BaseProps";
+import type { UnitedState } from "../../types/UnitedStates";
+export type RichCardStateSelectProps<T extends UnitedState = UnitedState> = BaseProps & {
+    /**
+     * Handler called when a state card is clicked
+     * @param selectedState The state object that was selected
+     */
+    onClick: (selectedState: T) => void;
+    /**
+     * Array of state objects to display
+     * Each state object should have code, name, region, and optional highlighted and icon properties
+     */
+    states: T[];
+};
+/**
+ * A component that displays US states organized by region in a card-based interface.
+ * Each state is represented as a clickable card, grouped by geographic region.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import type { UnitedState } from 'src/types/UnitedStates';
+ *
+ * const [selectedState, setSelectedState] = useState<UnitedState | null>(null);
+ *
+ * const states: UnitedState[] = [
+ *   { code: 'CA', name: 'California', region: 'West' },
+ *   { code: 'NY', name: 'New York', region: 'Northeast' },
+ *   { code: 'TX', name: 'Texas', region: 'South' },
+ *   { code: 'IL', name: 'Illinois', region: 'Midwest' }
+ * ];
+ *
+ * <RichCardStateSelect
+ *   onClick={setSelectedState}
+ *   states={states}
+ * />
+ * ```
+ *
+ * @example With highlighted state
+ * ```tsx
+ * const states = [
+ *   { code: 'CA', name: 'California', region: 'West', highlighted: true },
+ *   { code: 'NY', name: 'New York', region: 'Northeast' },
+ *   { code: 'TX', name: 'Texas', region: 'South' }
+ * ];
+ *
+ * <RichCardStateSelect
+ *   onClick={handleStateSelect}
+ *   states={states}
+ * />
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * const states = [
+ *   {
+ *     code: 'CA',
+ *     name: 'California',
+ *     region: 'West',
+ *     icon: <FlagIcon code="US-CA" />
+ *   },
+ *   {
+ *     code: 'NY',
+ *     name: 'New York',
+ *     region: 'Northeast',
+ *     icon: <FlagIcon code="US-NY" />
+ *   }
+ * ];
+ *
+ * <RichCardStateSelect
+ *   onClick={handleStateSelect}
+ *   states={states}
+ * />
+ * ```
+ */
+export declare const RichCardStateSelect: <T extends UnitedState = UnitedState>({ className, onClick, states, style, }: RichCardStateSelectProps<T>) => import("react").JSX.Element;