Dumb components

🦄 Dumb components focus on how things look.

• Dumb components are also called ‘presentational’ components because their only responsibility is to present something to the DOM. Once that is done, the component is done with it.
• There will be no logic at all inside this component, therefore it is called a dumb component. Because dumb components only focus on the presentation (UI Component), it is ideally the most reusable component.
• This component is often just Javascript functions and only has a render() method. It also does not have any state or lifecycle hooks. However, it still can receive some data and function from the parents via props.

LinkButton

This component allows you to create a Button with NextJS Link in order to redirect a user to click. Use it when you need to make redirection.

LinkButton - Props

export interface ILinkButtonProps {
    title?: string;
    replace?: boolean;
    path:
        | string
        | {
                pathname: string;
                query: any;
          };
    type?:
        | "link"
        | "text"
        | "ghost"
        | "default"
        | "primary"
        | "dashed"
        | undefined;
    icon?: ReactNode;
}

replace - Replace the current history state instead of adding a new url into the stack. Defaults to false. see all here

type -Type correspond to Ant Design button style, see all here

DetailsList

It creates a legible set of key/value information.

DetailsList - Props

export interface IDetailsListProps {
    details: any;
    nbColumns?: {
        xxl?: number;
        xl?: number;
        lg?: number;
        md?: number;
        sm?: number;
        xs?: number;
    };
}

It requires an object to be passed as props. You can also specify how many columns you want for different screen size.

It's will automatically generate the details of the element and it will also display custom render for certain value:

Value	Render
true	Green circle check
false	Red square "X" close
null	-

GlobalBreadcrumb

Automatically create a Breadcrumb from routes props.

GlobalBreadcrumb - Props

export interface IBreadcrumbProps {
    routes: Array<BreadcrumbType>;
}

Routes - Object

export const articlesRoutes = [
    {
        breadcrumbName: "menu:configuration",
    },
    {
        path: "/articles",
        breadcrumbName: "menu:articles",
    },
];

If a path key is present it will add a link to the Breadcrumb item.

Logo

Logo Component returns an Ant Design Icon component from an SVG image. It has a customizable width.

ProfileMenu

This component is used in the ride drop-down menu on the top right of the user interface. It automatically creates a menu link specified in profileMenu props.

Spinners

Spinner loading for improved user experience:

• ContentSpin to use inside of a content page
• ScreenSpin to use when loading is requiered for the entire screen

StepsPanel

Displaying a basic stepper. It needs a steps object with a key and a title and also the current step in order to show the active step.

StepsPanel - Props

interface IStepsPanelProps {
    steps: any;
    currentStep: number;
}