Table of Contents

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

StepBox


const [stepIndex, setStepIndex] = useState(0);

const steps = ["Information", "Ligue", "Paiement"];

const onStepClick = (index: number) => {
  setStepIndex(index);
};

return (
  <>
    <StepBox
      steps={steps}
      currentIndex={stepIndex}
      onStepClick={onStepClick}
    />
    <button
      className="p-2 bg-blue-600 rounded-lg"
      onClick={() =>
        setStepIndex((prev) => (prev + 1) % (steps.length + 1))
      }
    >
      Next Step
    </button>
  </>
);
StepBox component is used to display steps in form with multiple Step.
Preview

Étapes

Information

Ligue

Paiement


Usage

const [stepIndex, setStepIndex] = useState(0);

const steps = ["Information", "Ligue", "Paiement"];

const onStepClick = (index: number) => {
  setStepIndex(index);
};

return (
  <>
    <StepBox
      steps={steps}
      currentIndex={stepIndex}
      onStepClick={onStepClick}
    />
    <button
      className="p-2 bg-blue-600 rounded-lg"
      onClick={() =>
        setStepIndex((prev) => (prev + 1) % (steps.length + 1))
      }
    >
      Next Step
    </button>
  </>
);

FeedbackModal


const [isOpen, setIsOpen] = useState(false);

const handleClose = () => {
  setIsOpen(false);
};

return (
  <>
    <button
      className="px-4 py-2 bg-blue-500 text-white rounded"
      onClick={() => setIsOpen(true)}
    >
      Open Feedback
    </button>
    <FeedbackForm isOpen={isOpen} onClose={handleClose} />
  </>
);
The `FeedbackModal` component displays a modal dialog for collecting user feedback. It includes a screenshot capture feature and an embedded iframe for the feedback form.
Preview

Usage

const [isOpen, setIsOpen] = useState(false);

const handleClose = () => {
  setIsOpen(false);
};

return (
  <>
    <button
      className="px-4 py-2 bg-blue-500 text-white rounded"
      onClick={() => setIsOpen(true)}
    >
      Open Feedback
    </button>
    <FeedbackForm isOpen={isOpen} onClose={handleClose} />
  </>
);

Form


const methods = useForm();

const formContent = (
  <Form {...methods}>
    <form onSubmit={methods.handleSubmit((data) => console.log(data))}>
      <FormField
        name="email"
        control={methods.control}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <input
                {...field}
                type="email"
                placeholder="Enter your email"
                className="border rounded p-2 w-full"
              />
            </FormControl>
            <FormDescription>We'll never share your email.</FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />
      <button
        type="submit"
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Submit
      </button>
    </form>
  </Form>
);

return formContent;
The `Form` component provides a flexible and accessible way to build forms with validation, labels, descriptions, and error messages. It integrates seamlessly with `react-hook-form`.
Preview

We'll never share your email.


Usage

const methods = useForm();

const formContent = (
  <Form {...methods}>
    <form onSubmit={methods.handleSubmit((data) => console.log(data))}>
      <FormField
        name="email"
        control={methods.control}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <input
                {...field}
                type="email"
                placeholder="Enter your email"
                className="border rounded p-2 w-full"
              />
            </FormControl>
            <FormDescription>We'll never share your email.</FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />
      <button
        type="submit"
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Submit
      </button>
    </form>
  </Form>
);

return formContent;

CustomInputs


const fqcnBUI = { namespace: "example", component: "form" };

const formContent = (
  <Form {...methods}>
    <form onSubmit={methods.handleSubmit((data) => console.log(data))}>
      <CustomInput
        fqcnBUI={fqcnBUI}
        nameInSchema="email"
        label="Email"
        placeholder="Enter your email"
        required
      />
      <CustomUnitInput
        fqcnBUI={fqcnBUI}
        name="quantity"
        label="Quantity"
        placeholder="Enter quantity"
        unit="kg"
        required
      />
      <button
        type="submit"
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Submit
      </button>
    </form>
  </Form>
);

return formContent;
The `CustomInputs` components include `CustomInput` for standard input fields and `CustomUnitInput` for input fields with a unit display. Both integrate with `react-hook-form` and support validation, error messages, and dynamic attributes.
Preview
kg

Usage

const fqcnBUI = { namespace: "example", component: "form" };

const formContent = (
  <Form {...methods}>
    <form onSubmit={methods.handleSubmit((data) => console.log(data))}>
      <CustomInput
        fqcnBUI={fqcnBUI}
        nameInSchema="email"
        label="Email"
        placeholder="Enter your email"
        required
      />
      <CustomUnitInput
        fqcnBUI={fqcnBUI}
        name="quantity"
        label="Quantity"
        placeholder="Enter quantity"
        unit="kg"
        required
      />
      <button
        type="submit"
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Submit
      </button>
    </form>
  </Form>
);

return formContent;

Input


const fqcnBUI = { namespace: "example", component: "input" };

const inputFields = (
  <div className="flex flex-col gap-4">
    <Input
      fqcn_bui={fqcnBUI}
      type="text"
      placeholder="Enter your name"
      className="border-gray-300"
    />
    <Input
      fqcn_bui={fqcnBUI}
      type="password"
      placeholder="Enter your password"
      className="border-gray-300"
    />
  </div>
);

return inputFields;
The `Input` component is a versatile input field that supports various types, including password fields with toggle visibility. It integrates seamlessly with `react-hook-form` and supports dynamic styling and attributes.
Preview

Usage

const fqcnBUI = { namespace: "example", component: "input" };

const inputFields = (
  <div className="flex flex-col gap-4">
    <Input
      fqcn_bui={fqcnBUI}
      type="text"
      placeholder="Enter your name"
      className="border-gray-300"
    />
    <Input
      fqcn_bui={fqcnBUI}
      type="password"
      placeholder="Enter your password"
      className="border-gray-300"
    />
  </div>
);

return inputFields;

LayoutClient


const tenant = "exampleTenant";
const primaryLinks = [
  { title: "Home", icon: <span>🏠</span>, link: "/", externalLink: false },
  { title: "About", icon: <span>ℹ️</span>, link: "/about", externalLink: false },
];

const layoutContent = (
  <LayoutClient tenant={tenant} primaryLinks={primaryLinks}>
    <div className="p-4">
      <h1>Welcome to the Dashboard</h1>
      <p>This is the main content area.</p>
    </div>
  </LayoutClient>
);

return layoutContent;
The `LayoutClient` component provides a responsive layout with a sidebar, navbar, footer, and support for conditional rendering of layouts based on the current route. It integrates seamlessly with theming and navigation.
Preview

Welcome to the Dashboard

This is the main content area.


Usage

const tenant = "exampleTenant";
const primaryLinks = [
  { title: "Home", icon: <span>🏠</span>, link: "/", externalLink: false },
  { title: "About", icon: <span>ℹ️</span>, link: "/about", externalLink: false },
];

const layoutContent = (
  <LayoutClient tenant={tenant} primaryLinks={primaryLinks}>
    <div className="p-4">
      <h1>Welcome to the Dashboard</h1>
      <p>This is the main content area.</p>
    </div>
  </LayoutClient>
);

return layoutContent;

ModeToggle


const fqcnBUI = { namespace: "example", component: "mode-toggle" };

return (
  <ModeToggle fqcnBUI={fqcnBUI} />
);
The `ModeToggle` component allows users to switch between light, dark, and system themes. It integrates with `next-themes` and provides a dropdown menu with tooltips for better accessibility.
Preview

Usage

const fqcnBUI = { namespace: "example", component: "mode-toggle" };

return (
  <ModeToggle fqcnBUI={fqcnBUI} />
);

SidebarMenu


const tenant = "exampleTenant";
const primaryLinks = [
  {
    title: "Dashboard",
    icon: <span>📊</span>,
    link: "/dashboard",
    externalLink: false,
    subMenus: [
      { title: "Reports", icon: <span>📄</span>, link: "/reports" },
      { title: "Analytics", icon: <span>📈</span>, link: "/analytics" },
    ],
  },
  {
    title: "Settings",
    icon: <span>⚙️</span>,
    link: "/settings",
    externalLink: false,
  },
];

return (
  <div className="w-fit">
    <SidebarMenu
      tenant={tenant}
      isOpen={isOpen}
      setIsOpen={setIsOpen}
      primaryLinks={primaryLinks}
    />
  </div>
);
The `SidebarMenu` component provides a responsive and collapsible sidebar menu with support for nested submenus, tooltips, and feedback reporting. It integrates seamlessly with localization and theming.
Preview

Usage

const tenant = "exampleTenant";
const primaryLinks = [
  {
    title: "Dashboard",
    icon: <span>📊</span>,
    link: "/dashboard",
    externalLink: false,
    subMenus: [
      { title: "Reports", icon: <span>📄</span>, link: "/reports" },
      { title: "Analytics", icon: <span>📈</span>, link: "/analytics" },
    ],
  },
  {
    title: "Settings",
    icon: <span>⚙️</span>,
    link: "/settings",
    externalLink: false,
  },
];

return (
  <div className="w-fit">
    <SidebarMenu
      tenant={tenant}
      isOpen={isOpen}
      setIsOpen={setIsOpen}
      primaryLinks={primaryLinks}
    />
  </div>
);

Popover


const popoverContent = (
  <Popover>
    <PopoverTrigger className="px-4 py-2 bg-blue-500 text-white rounded">
      Open Popover
    </PopoverTrigger>
    <PopoverContent>
      <p>This is the content inside the popover.</p>
    </PopoverContent>
  </Popover>
);

return popoverContent;
The `Popover` component provides a flexible and accessible way to display additional content in a floating panel. It supports animations, alignment, and customizable content.
Preview

Usage

const popoverContent = (
  <Popover>
    <PopoverTrigger className="px-4 py-2 bg-blue-500 text-white rounded">
      Open Popover
    </PopoverTrigger>
    <PopoverContent>
      <p>This is the content inside the popover.</p>
    </PopoverContent>
  </Popover>
);

return popoverContent;

Tooltip


const tooltipContent = (
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger className="px-4 py-2 bg-blue-500 text-white rounded">
        Hover me
      </TooltipTrigger>
      <TooltipContent>
        <p>This is a tooltip message.</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
);

return tooltipContent;
The `Tooltip` component provides a lightweight and accessible way to display additional information when users hover or focus on an element. It supports animations and customizable content.
Preview

Usage

const tooltipContent = (
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger className="px-4 py-2 bg-blue-500 text-white rounded">
        Hover me
      </TooltipTrigger>
      <TooltipContent>
        <p>This is a tooltip message.</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
);

return tooltipContent;