@overmap-ai/blocks 0.0.9 → 0.0.10-alpha.1

package/README.md

@@ -1,3 +1,3 @@
-# overmap-ai blocks
-
-Contains basic components used by overmap-ai libraries.
+# overmap-ai blocks
+
+Contains basic components used by overmap-ai libraries.

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,27 @@
+import { Link } from "@radix-ui/themes";
+import { FlexProps } from "../Flex";
+import { ComponentProps, HTMLProps, ReactNode } from "react";
+import { Severity } from "../typings.ts";
+export interface BreadcrumbItemProps extends Omit<HTMLProps<HTMLAnchorElement>, "size" | "ref" | "color"> {
+}
+export declare const Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLAnchorElement>>>;
+export interface BreadcrumbGroupProps extends Omit<HTMLProps<HTMLDivElement>, "height" | "width" | "wrap" | "ref" | "size"> {
+    children: ReactNode;
+    /** The separator used in between Breadcrumb items*/
+    separator: ReactNode;
+    /** The severity of the items in the Breadcrumb
+     * @default "info"
+     * */
+    severity?: Severity;
+    /** The text size of the items in the Breadcrumb */
+    size?: ComponentProps<typeof Link>["size"];
+    /** The gap between Breadcrumb items
+     * @default "2"
+     * */
+    gap?: FlexProps["gap"];
+}
+export declare const Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BreadcrumbGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Breadcrumb: {
+    Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BreadcrumbGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
+    Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLAnchorElement>>>;
+};

package/dist/Breadcrumb/context.d.ts

@@ -0,0 +1,10 @@
+import type { Severity } from "../typings.ts";
+import { ComponentProps } from "react";
+import { Link } from "@radix-ui/themes";
+interface IBreadcrumbContext {
+    severity: Severity;
+    size: ComponentProps<typeof Link>["size"];
+}
+export declare const BreadcrumbContext: import("react").Context<IBreadcrumbContext>;
+export declare const useBreadcrumbContext: () => IBreadcrumbContext;
+export {};

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from "./Breadcrumb";
+export type { BreadcrumbGroupProps, BreadcrumbItemProps } from "./Breadcrumb";

package/dist/DropdownSelect/DropdownSelect.d.ts

@@ -0,0 +1,58 @@
+import { DropdownMenu as RadixDropdownMenu } from "@radix-ui/themes";
+import { ComponentProps, FC, ReactElement, ReactNode } from "react";
+import { Severity } from "../typings.ts";
+export interface DropdownSelectIconProps {
+    leftInputIcon?: ReactNode;
+    rightInputIcon?: ReactNode;
+    selectedItemIcon?: ReactNode;
+}
+export interface DropdownSelectItemProps {
+    /** the content to rendered for the dropdown select item */
+    content: ReactNode;
+    value: string;
+    /** the disabled state of the dropdown select item
+     * @default false
+     * */
+    disabled?: boolean;
+}
+export type DropdownSelectProps = {
+    /** currently selected value of the dropdown select*/
+    value: string | undefined;
+    /** callback fired when an item in the dropdown select is clicked*/
+    onValueChange: (value: string | undefined) => void;
+    /** a ReactElement representing the trigger for the dropdown select, must be clickable*/
+    trigger: ReactElement;
+    /** the selectable items to be displayed in the dropdown select */
+    items: DropdownSelectItemProps[];
+    /** the disabled state of the dropdown select
+     * @default false
+     * */
+    disabled?: boolean;
+    /** placeholder for the user input contained within the dropdown select */
+    placeholder?: string;
+    /** determines if the dropdown select should close after selecting an item
+     * @default true
+     * */
+    closeOnSelect?: boolean;
+    /** a set of icons to be fill the different icon spots within the dropdown select */
+    icons?: DropdownSelectIconProps;
+    /** determines on which side of the trigger the dropdown select renders on, if open space
+     * @default "bottom"
+     * */
+    side?: ComponentProps<typeof RadixDropdownMenu.Content>["side"];
+    /** severity of the dropdown select
+     * @default "info"
+     * */
+    severity?: Severity;
+} & ({
+    /** the current value in the user input contained within the dropdown select */
+    filterValue: undefined;
+    /** callback fired when an item in the dropdown select is clicked*/
+    onFilterValueChange: undefined;
+} | {
+    /** the current value in the user input contained within the dropdown select */
+    filterValue: string;
+    /** callback fired when an item in the dropdown select is clicked*/
+    onFilterValueChange: (value: string) => void;
+});
+export declare const DropdownSelect: FC<DropdownSelectProps>;

package/dist/DropdownSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownSelect } from "./DropdownSelect";
+export type { DropdownSelectProps, DropdownSelectItemProps, DropdownSelectIconProps } from "./DropdownSelect";

package/dist/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TableProps } from "./typings";
+export declare const Table: FC<TableProps>;

package/dist/Table/constants.d.ts

@@ -0,0 +1,151 @@
+export declare const TableData: string[][];
+export declare const DefaultTableColumns: (sort?: boolean, search?: boolean, filter?: boolean) => ({
+    id: string;
+    label: string;
+    sort: boolean;
+    search: boolean;
+    filter?: undefined;
+} | {
+    id: string;
+    label: string;
+    sort: boolean;
+    search: boolean;
+    filter: boolean;
+} | {
+    id: string;
+    label: string;
+    sort: boolean;
+    search?: undefined;
+    filter?: undefined;
+})[];
+export declare const DefaultTableRows: (len: number) => {
+    id: string;
+    columns: {
+        full_name: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+        job_title: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+        gender: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+        age: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+        annual_salary: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+        country: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+    };
+}[];
+export declare const AdvancedTableColumns: () => ({
+    id: string;
+    label: string;
+    sort: boolean;
+    search: boolean;
+    width: string;
+    filter?: undefined;
+    filterValues?: undefined;
+} | {
+    id: string;
+    label: string;
+    search: boolean;
+    filter: boolean;
+    width: string;
+    sort?: undefined;
+    filterValues?: undefined;
+} | {
+    id: string;
+    label: string;
+    sort: boolean;
+    filter: boolean;
+    search?: undefined;
+    width?: undefined;
+    filterValues?: undefined;
+} | {
+    id: string;
+    label: string;
+    sort: boolean;
+    search?: undefined;
+    width?: undefined;
+    filter?: undefined;
+    filterValues?: undefined;
+} | {
+    id: string;
+    label: string;
+    sort: boolean;
+    filter: boolean;
+    filterValues: {
+        value: number;
+        label: import("react/jsx-runtime").JSX.Element;
+    }[];
+    search?: undefined;
+    width?: undefined;
+} | {
+    id: string;
+    label: string;
+    sort?: undefined;
+    search?: undefined;
+    width?: undefined;
+    filter?: undefined;
+    filterValues?: undefined;
+})[];
+export declare const AdvancedTableRows: (len: number) => {
+    id: string;
+    onClick: () => void;
+    columns: {
+        full_name: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+        job_title: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+        gender: {
+            id: string;
+            value: string | undefined;
+            label: import("react/jsx-runtime").JSX.Element;
+            sortValue: number;
+        };
+        age: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+        };
+        annual_salary: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+            filterValue: number;
+        };
+        country: {
+            id: string;
+            value: string | undefined;
+            label: string | undefined;
+            searchValue: string;
+        };
+        remove_user: {
+            id: string;
+            value: number;
+            label: import("react/jsx-runtime").JSX.Element;
+        };
+    };
+}[];

package/dist/Table/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./typings.ts";
+export * from "./constants.tsx";

package/dist/Table/typings.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from "react";
+export type IdLabel = string | number;
+export type ValueLabel = IdLabel | null | undefined;
+export type TableLabel = ValueLabel | ReactNode;
+export interface FilterValue {
+    value: ValueLabel;
+    label: ReactNode;
+}
+export interface TableCell {
+    id: IdLabel;
+    value: ValueLabel;
+    label: TableLabel;
+    onClick?: (cell: TableCell) => void;
+    filterValue?: ValueLabel;
+    sortValue?: ValueLabel;
+    searchValue?: ValueLabel;
+    className?: string;
+}
+export interface TableColumn {
+    id: IdLabel;
+    label: TableLabel;
+    sort?: boolean;
+    search?: boolean;
+    filter?: boolean;
+    width?: string;
+    className?: string;
+    filterValues?: FilterValue[];
+}
+export interface TableRow {
+    id: IdLabel;
+    onClick?: (row: TableRow) => void;
+    className?: string;
+    columns: {
+        [columnId: string]: TableCell;
+    };
+}
+export interface TableProps {
+    columns: TableColumn[];
+    data: TableRow[];
+    color?: "light" | "dark";
+    title?: string | ReactNode;
+    description?: string | ReactNode;
+    rowsPerPage?: number[];
+    showSearchBar?: boolean;
+    searchBarPlaceholder?: string;
+    showSelect?: boolean;
+    showFilterButton?: boolean;
+    showContainer?: boolean;
+    showRowsPerPage?: boolean;
+    showPageNumber?: boolean;
+    showPageNavigation?: boolean;
+    children?: ReactNode;
+    /**
+     * Show top bar content which includes search bar, filter button, and edit and delete buttons
+     * @default false
+     */
+    showTopBar?: boolean;
+    showBottomBar?: boolean;
+    className?: string;
+    columnClassName?: string;
+    rowClassName?: string;
+    cellClassName?: string;
+}