TextEditor (No Toolbar)


<div className="flex flex-col gap-4">
    <TextEditor
        id="fqcn..."
        onChange={(value) => {
          console.log("Editor content:", value);
        }}
        value="<p>Initial content</p>"
        hideToolbar
        helperText="Test"
        label="Test"
    />
</div>

Preview

Test

Usage


<div className="flex flex-col gap-4">
    <TextEditor
        id="fqcn..."
        onChange={(value) => {
          console.log("Editor content:", value);
        }}
        value="<p>Initial content</p>"
        hideToolbar
        helperText="Test"
        label="Test"
    />
</div>

TextEditor (Basic text editing)


<div className="flex flex-col gap-4">
    <TextEditor
        id="fqcn..."
        onChange={(value) => {
          console.log("Editor content:", value);
        }}
        helperText="Test"
        label="Test"
        basicUsage
    />
</div>

Preview

Test

Usage


<div className="flex flex-col gap-4">
    <TextEditor
        id="fqcn..."
        onChange={(value) => {
          console.log("Editor content:", value);
        }}
        helperText="Test"
        label="Test"
        basicUsage
    />
</div>

TextEditor (Full featured editor)


<div className="flex flex-col gap-4">
    <TextEditor
        id="fqcn..."
        onChange={(value) => {
          console.log("Editor content:", value);
        }}
        helperText="Test"
        label="Test"
        placeholder="Testing placeholder"
    />
</div>

Preview

Test

Usage


<div className="flex flex-col gap-4">
    <TextEditor
        id="fqcn..."
        onChange={(value) => {
          console.log("Editor content:", value);
        }}
        helperText="Test"
        label="Test"
        placeholder="Testing placeholder"
    />
</div>

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

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

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}  roles={{ ROLE_USER: "ROLE_USER" }}>
    <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}  roles={{ ROLE_USER: "ROLE_USER" }}>
    <div className="p-4">
      <h1>Welcome to the Dashboard</h1>
      <p>This is the main content area.</p>
    </div>
  </LayoutClient>
);

return layoutContent;

Logo


const fqcnBUI = { namespace: "example", component: "logo" };
const logoPath = "/custom-logo.png";

const logoComponent = (
  <Logo fqcnBUI={fqcnBUI} logoPath={logoPath} />
);

return logoComponent;

The `Logo` component displays a responsive logo with support for light and dark modes. It links to the homepage based on the current locale and allows customization of the logo path.

Preview

Usage


const fqcnBUI = { namespace: "example", component: "logo" };
const logoPath = "/custom-logo.png";

const logoComponent = (
  <Logo fqcnBUI={fqcnBUI} logoPath={logoPath} />
);

return logoComponent;

Navbar


const fqcnBUI = {
  Bundle: "navbarBundle",
  Unit: "navBar",
  Interface: "modeToggle",
};

const handleSidebarToggle = () => console.log("Sidebar toggled");

return (
  <Navbar
    fqcn_bui={fqcnBUI}
    sidebarMenu={true}
    setSidebarOpen={handleSidebarToggle}
    showLogout={true}
    pathName={"/fr/component/2"}
  />
);

The `Navbar` component provides a responsive navigation bar with support for a sidebar toggle, user greeting, logout functionality, and theme switching. It integrates seamlessly with other components like `ModeToggle`, `Tooltip`, and `Popover`.

Preview

Usage


const fqcnBUI = {
  Bundle: "navbarBundle",
  Unit: "navBar",
  Interface: "modeToggle",
};

const handleSidebarToggle = () => console.log("Sidebar toggled");

return (
  <Navbar
    fqcn_bui={fqcnBUI}
    sidebarMenu={true}
    setSidebarOpen={handleSidebarToggle}
    showLogout={true}
    pathName={"/fr/component/2"}
  />
);

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>
);

Footer


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

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

The `Footer` component provides a responsive footer with language selection, a feedback button, and a clock. It supports dynamic locale changes and integrates with the `FeedbackModal` component.

Preview

Usage


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

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

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;

PageTitle


const pageTitleContent = (
  <div className="flex flex-col gap-4">
    <PageTitle>PageTitle</PageTitle>
    <PageTitle className="text-center">PageTitle</PageTitle>
  </div>
);
return pageTitleContent;

Preview

PageTitle

Usage


const pageTitleContent = (
  <div className="flex flex-col gap-4">
    <PageTitle>PageTitle</PageTitle>
    <PageTitle className="text-center">PageTitle</PageTitle>
  </div>
);
return pageTitleContent;

Table of Contents

TextEditor (No Toolbar)

Preview

Usage

TextEditor (Basic text editing)

Preview

Usage

TextEditor (Full featured editor)

Preview

Usage

StepBox

Preview

Étapes

Information

Ligue

Paiement

Usage

FeedbackModal

Preview

Usage

Form

Preview

Usage

CustomInputs

Preview

Usage

Input

Preview

Usage

LayoutClient

Preview

Welcome to the Dashboard

Usage

Logo

Preview

Usage

Navbar

Preview

Usage

SidebarMenu

Preview

Usage

Footer

Preview

Usage

Popover

Preview

Usage

Tooltip

Preview

Usage

PageTitle

Preview

PageTitle

PageTitle

Usage