@rarcifa/cronos-design-system/dist/components/Navbar/interface.d.ts

A typescript react component library following the Cronos branding standards

import { ReactNode } from 'react';
export interface NavbarProps {
    /**
     * The source URL for the logo image displayed in the Navbar.
     */
    logo: string;
    /**
     * An array of objects representing the links in the Navbar. Each object should
     * contain a `to` property representing the URL of the link and a `title` property
     * representing the title or label of the link.
     */
    links: {
        to: string;
        title: string;
    }[];
    /**
     * Optional children components to be rendered inside the Navbar. These components
     * can include additional elements such as search bars or menus.
     */
    children?: React.ReactNode;
    /**
     * Optional search bar component to be rendered inside the Navbar. Natively supports the Cronos
     * Design System search component.
     */
    searchBar?: React.ReactNode;
    /**
     * Optional theme to specify the color pairs for the Navbar theme.
     * Example: { primary: '#000000', secondary: '#FFFFFF' }
     */
    theme?: {
        primary: string;
        secondary: string;
    };
    /**
     * A component for handling routing. This allows for integration with multiple routing systems like react-router or Next.js.
     * Depending on the routing system, the component should accept either a `to` or `href` prop for the URL.
     * React Router uses `to`, and Next.js uses `href`.
     * Children should be passed according to the routing system's requirements.
     * Example usage (React Router): <RouterLink to="/home">Home</RouterLink>
     * Example usage (Next.js): <RouterLink href="/home"><a>Home</a></RouterLink>
     */
    RouterLink: React.ComponentType<any>;
}
export interface MenuItem {
    /**
     * The title or label of the menu.
     */
    title: string;
    /**
     * Optional description of the menu. Provides additional context or information.
     */
    description?: string;
    /**
     * The URL or routing path that the menu links to.
     */
    to: string;
    /**
     * Optional array of MenuItem objects that represent a nested menu structure.
     */
    menu?: MenuItem[];
    /**
     * Optional array of MenuItem objects representing a submenu.
     */
    submenu?: MenuItem[];
    /**
     * Optional array of tag strings associated with the menu for categorization or description.
     */
    tags?: string[];
    /**
     * Optional URL for an icon representing the menu.
     */
    icon?: string;
    /**
     * Optional array of widget identifiers or names associated with the menu.
     */
    widgets?: {
        image: string;
        to: string;
    }[];
}
export interface NavigationMenuProps {
    /**
     * Array of Menu objects to be rendered as part of the navigation.
     */
    items: MenuItem[];
    /**
     * Indicates whether the navigation should be rendered as a menu.
     */
    isMenu?: boolean;
    /**
     * Indicates whether the navigation should be rendered as a submenu.
     */
    isSubmenu?: boolean;
    /**
     * Optional theme specifying primary and secondary colors used in the navigation menu.
     */
    theme?: {
        primary: string;
        secondary: string;
    };
    /**
     * A component for handling routing. This allows for integration with multiple routing systems like react-router or Next.js.
     * Depending on the routing system, the component should accept either a `to` or `href` prop for the URL.
     * React Router uses `to`, and Next.js uses `href`.
     * Children should be passed according to the routing system's requirements.
     * Example usage (React Router): <RouterLink to="/home">Home</RouterLink>
     * Example usage (Next.js): <RouterLink href="/home"><a>Home</a></RouterLink>
     */
    RouterLink: React.ComponentType<any>;
}
export interface NavigationProps {
    /**
     * Indicates if the current context is within a menu.
     */
    isMenu?: boolean;
    /**
     * Indicates if the current context is within a submenu.
     */
    isSubmenu?: boolean;
    /**
     * Indicates if the current context is a tab component.
     */
    isTab?: boolean;
    /**
     * Indicates if the current context involves a widget.
     */
    hasWidget?: boolean;
    /**
     * Indicates if there is a submenu associated with the current menu item.
     */
    hasSubmenu?: boolean;
    /**
     * Indicates if the navigation is being rendered on a mobile device.
     */
    isMobile?: boolean;
    /**
     * Optional theme specifying primary and secondary colors.
     */
    theme?: {
        primary: string;
        secondary: string;
    };
    /**
     * A component for handling routing. This allows for integration with multiple routing systems like react-router or Next.js.
     * Depending on the routing system, the component should accept either a `to` or `href` prop for the URL.
     * React Router uses `to`, and Next.js uses `href`.
     * Children should be passed according to the routing system's requirements.
     * Example usage (React Router): <RouterLink to="/home">Home</RouterLink>
     * Example usage (Next.js): <RouterLink href="/home"><a>Home</a></RouterLink>
     */
    RouterLink?: React.ComponentType<any>;
}
export interface MobileNavigationMenuProps {
    /**
     * The Menu object being rendered.
     */
    item: MenuItem;
    /**
     * The index of the currently focused or selected menu item.
     */
    idx: string;
    /**
     * Function to toggle the expanded state of a menu item identified by its index.
     */
    toggleItem: (index: string) => void;
    /**
     * Object representing the expanded state of each menu item where the key is the item index.
     */
    expandedMenu: ExpandedMenuState;
    /**
     * Indicates if the current context is within a submenu.
     */
    isSubmenu?: boolean;
    /**
     * A component for handling routing. This allows for integration with multiple routing systems like react-router or Next.js.
     * Depending on the routing system, the component should accept either a `to` or `href` prop for the URL.
     * React Router uses `to`, and Next.js uses `href`.
     * Children should be passed according to the routing system's requirements.
     * Example usage (React Router): <RouterLink to="/home">Home</RouterLink>
     * Example usage (Next.js): <RouterLink href="/home"><a>Home</a></RouterLink>
     */
    RouterLink: React.ComponentType<any>;
}
export interface ExpandedMenuState {
    /**
     * Maps a string key (index) to a boolean indicating whether the corresponding menu item is expanded.
     */
    [key: string]: boolean;
}
export interface SmartLinkProps {
    to: string;
    children: ReactNode;
    RouterLink: React.ComponentType<any>;
    [key: string]: any;
}