certego · rootp1 · Feb 20, 2026 · Feb 20, 2026 · Feb 20, 2026 · Feb 20, 2026
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>@certego/certego-ui examples</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -4,23 +4,19 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
-    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
-    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
-    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
+    "start": "node ../node_modules/vite/bin/vite.js",
+    "build": "node ../node_modules/vite/bin/vite.js build",
+    "test": "node ../node_modules/vitest/vitest.mjs run --config vitest.config.mjs"
   },
   "dependencies": {
     "@certego/certego-ui": "file:..",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
-    "react-scripts": "file:../node_modules/react-scripts"
+    "vite": "file:../node_modules/vite"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": [
     ">0.2%",
     "not dead",

diff --git a/example/src/App.test.js b/example/src/App.test.js
diff --git a/example/src/App.test.jsx b/example/src/App.test.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "./App";
+
+it("renders without crashing", () => {
+  render(<App />);
+});
diff --git a/example/src/index.js b/example/src/index.js
diff --git a/example/src/index.jsx b/example/src/index.jsx
@@ -0,0 +1,8 @@
+import "./index.scss";
+
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
diff --git a/example/src/layouts/AppFooter.jsx b/example/src/layouts/AppFooter.jsx
@@ -39,7 +39,7 @@ function AppFooter() {
           <Col className="text-muted small standout">
             <a
               className="text-muted link"
-              href={`https://github.com/certego/certego-ui`}
+              href="https://github.com/certego/certego-ui"
               target="_blank"
               rel="noreferrer noopener"
             >
@@ -50,7 +50,7 @@ function AppFooter() {
         <Row className="mt-3 text-center g-0">
           <Col>
             <a
-              href={`https://twitter.com/Certego_IRT?ref_src=twsrc%5Etfw`}
+              href="https://twitter.com/Certego_IRT?ref_src=twsrc%5Etfw"
               target="_blank"
               rel="noopener noreferrer"
               className="twitter-follow-button"

diff --git a/example/src/layouts/AppMain.jsx b/example/src/layouts/AppMain.jsx
@@ -100,7 +100,7 @@ export default function AppMain() {
   );
 
   // call hook
-  const { activeKey, renderNavItems, renderRoutes } = useRouterTabs({
+  const { activeKey, renderNavItems, renderRoutes, } = useRouterTabs({
     routes,
     redirect: true,
   });

diff --git a/example/src/sections/Buttons.jsx b/example/src/sections/Buttons.jsx
@@ -13,7 +13,7 @@ import {
   MdDelete,
   MdInfo,
   MdModeEdit,
-  MdVisibility,
+  MdVisibility
 } from "react-icons/md";
 import { Form, Formik } from "formik";
 
@@ -25,7 +25,7 @@ import {
   PopupFormButton,
   ScrollToTopButton,
   SocialShareBtn,
-  SyncButton,
+  SyncButton
 } from "@certego/certego-ui";
 
 import ComponentAsExample from "./ComponentAsExample";
@@ -116,9 +116,9 @@ export default function Buttons(props) {
               titlePlacement="top"
               popOverPlacement="top"
               Icon={MdModeEdit}
-              Form={({ onFormSubmit }) => (
+              Form={({ onFormSubmit, }) => (
                 <Formik
-                  initialValues={{ name: "" }}
+                  initialValues={{ name: "", }}
                   onSubmit={onFormSubmit}
                 >
                   {(formik) => (

diff --git a/example/src/sections/Containers.jsx b/example/src/sections/Containers.jsx
@@ -5,7 +5,7 @@ import {
   ContentSection,
   SmallInfoCard,
   Loader,
-  LoadingBoundary,
+  LoadingBoundary
 } from "@certego/certego-ui";
 
 import ComponentAsExample from "./ComponentAsExample";
@@ -80,7 +80,7 @@ export default function Containers(props) {
         name="SmallInfoCard"
         bodyNode={
           <SmallInfoCard
-            header={"Example Header"}
+            header="Example Header"
             body={
               <p className="pt-2 pb-0 px-2">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque

diff --git a/example/src/sections/Form.jsx b/example/src/sections/Form.jsx
@@ -22,20 +22,20 @@ import {
   MultiSelectTextInput,
   InputCheckBox,
   CustomJsonInput,
-  NewJsonRenderer,
+  NewJsonRenderer
 } from "@certego/certego-ui";
 
 // constants
 const asyncSelectProps = {
   url: "https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-name.json",
-  mapFn: (x) => ({ label: x["country"], value: x["country"] }),
+  mapFn: (x) => ({ label: x.country, value: x.country, }),
 };
 const occupationChoices = [
-  { label: "Software Engineer", value: "swe" },
-  { label: "Super Shadowy Coder", value: "ssc" },
-  { label: "Data Engineer", value: "dee" },
-  { label: "ML engineer", value: "mle" },
-  { label: "Security engineer", value: "se" },
+  { label: "Software Engineer", value: "swe", },
+  { label: "Super Shadowy Coder", value: "ssc", },
+  { label: "Data Engineer", value: "dee", },
+  { label: "ML engineer", value: "mle", },
+  { label: "Security engineer", value: "se", },
 ];
 const hearAboutUsChoices = [
   {
@@ -66,7 +66,7 @@ const initialValues = {
   gender: genderChoices[0],
   likeUI: true,
   likeUIRange: [1, 10],
-  occupation: occupationChoices[0]["value"],
+  occupation: occupationChoices[0].value,
   pastOccupations: [],
   techTags: [],
   discover_from: "",

diff --git a/example/src/sections/Icons.jsx b/example/src/sections/Icons.jsx
@@ -4,7 +4,7 @@ import {
   ContentSection,
   ArrowToggleIcon,
   BooleanIcon,
-  LinkOpenViewIcon,
+  LinkOpenViewIcon
 } from "@certego/certego-ui";
 
 import ComponentAsExample from "./ComponentAsExample";

diff --git a/example/src/sections/Lists.jsx b/example/src/sections/Lists.jsx
@@ -4,7 +4,7 @@ import {
   ContentSection,
   useAxiosComponentLoader,
   InfiniteScrollList,
-  KvList,
+  KvList
 } from "@certego/certego-ui";
 
 import ComponentAsExample from "./ComponentAsExample";
@@ -38,7 +38,7 @@ export default function Lists(props) {
                   renderListItem={(todo) => (
                     <KvList
                       key={`kvlist-${todo.id}`}
-                      object={{ [todo.id]: todo }}
+                      object={{ [todo.id]: todo, }}
                     />
                   )}
                 />

diff --git a/example/src/sections/Misc.jsx b/example/src/sections/Misc.jsx
@@ -7,7 +7,7 @@ import {
   Details,
   Toaster,
   UserBubble,
-  FallBackLoading,
+  FallBackLoading
 } from "@certego/certego-ui";
 
 import ComponentAsExample from "./ComponentAsExample";
@@ -21,11 +21,11 @@ const statusColorMap = {
   incomplete: "warning",
 };
 const exampleToasts = [
-  { header: "Info", body: "Example text", color: "info" },
-  { header: "Light", body: "Example text", color: "light" },
-  { header: "Primary", body: "Example text", color: "primary" },
-  { header: "Success", body: "Example text", color: "success" },
-  { header: "Danger", body: "Example text", color: "danger", showToggle: true },
+  { header: "Info", body: "Example text", color: "info", },
+  { header: "Light", body: "Example text", color: "light", },
+  { header: "Primary", body: "Example text", color: "primary", },
+  { header: "Success", body: "Example text", color: "success", },
+  { header: "Danger", body: "Example text", color: "danger", showToggle: true, },
   {
     header: "Warning",
     body: "Example text",

diff --git a/example/src/sections/Nav.jsx b/example/src/sections/Nav.jsx
@@ -5,7 +5,7 @@ import {
   ContentSection,
   HoverDropdown,
   DropdownNavLink,
-  NavLink,
+  NavLink
 } from "@certego/certego-ui";
 
 import ComponentAsExample from "./ComponentAsExample";

diff --git a/example/src/sections/Stores.jsx b/example/src/sections/Stores.jsx
@@ -12,7 +12,7 @@ const stateSelector = (state) => ({
 });
 
 export default function Stores(props) {
-  const { addToast } = useToastr(stateSelector);
+  const { addToast, } = useToastr(stateSelector);
 
   return (
     <ContentSection {...props}>

diff --git a/example/src/sections/Table.jsx b/example/src/sections/Table.jsx
@@ -10,7 +10,7 @@ import {
   SelectOptionsFilter,
   DataTable,
   useDataTable,
-  TableHintIcon,
+  TableHintIcon
 } from "@certego/certego-ui";
 
 import ComponentAsExample from "./ComponentAsExample";
@@ -35,13 +35,13 @@ const columns = [
     Filter: SelectOptionsFilter,
     selectOptions: ["true", "false"],
     disableSortBy: true,
-    Cell: ({ value }) => <BooleanIcon truthy={value} />,
+    Cell: ({ value, }) => <BooleanIcon truthy={value} />,
     maxWidth: 40,
   },
 ];
 const initialState = {
   pageSize: 5,
-  sortBy: [{ id: "id", desc: false }],
+  sortBy: [{ id: "id", desc: false, }],
 };
 
 export default function Table(props) {
@@ -64,7 +64,7 @@ export default function Table(props) {
         enableFlexLayout: true,
         enableExpanded: true,
       },
-      SubComponent: ({ row }) => (
+      SubComponent: ({ row, }) => (
         <pre className="text-gradient">
           {JSON.stringify(row.original, null, 4)}
         </pre>

diff --git a/example/src/sections/Text.jsx b/example/src/sections/Text.jsx
@@ -13,16 +13,12 @@ export default function Texts(props) {
           <div className="d-flex justify-content-around">
             <SlicedText
               id="slicedtext-example-1"
-              value={
-                "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus sunt tempore consectetur"
-              }
+              value="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus sunt tempore consectetur"
               cutoffLength={20}
             />
             <SlicedText
               id="slicedtext-example-2"
-              value={
-                "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus sunt tempore consectetur"
-              }
+              value="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus sunt tempore consectetur"
               cutoffLength={50}
             />
           </div>

diff --git a/example/src/sections/Time.jsx b/example/src/sections/Time.jsx
@@ -4,14 +4,14 @@ import {
   ContentSection,
   ElasticTimePicker,
   DateHoverable,
-  useTimePickerStore,
+  useTimePickerStore
 } from "@certego/certego-ui";
 
 import ComponentAsExample from "./ComponentAsExample";
 
 
 export default function Time(props) {
-  const { range, fromTimeIsoStr, onTimeIntervalChange } = useTimePickerStore();
+  const { range, fromTimeIsoStr, onTimeIntervalChange, } = useTimePickerStore();
 
   return (
     <ContentSection {...props}>

diff --git a/example/src/utils.js b/example/src/utils.js
@@ -1,4 +1,4 @@
-export const buildGitHubPath = dirName => dirName ? "https://github.com/certego/certego-ui/tree/main/src/components/" + dirName : "";
+export const buildGitHubPath = dirName => dirName ? `https://github.com/certego/certego-ui/tree/main/src/components/${  dirName}` : "";
 
-export const capitalize = str => str?.length ? str.charAt(0).toUpperCase() + str.slice(1) : "";
+export const capitalize = str => str?.length ? `${str.charAt(0).toUpperCase()}${str.slice(1)}` : "";
 
diff --git a/example/vite.config.mjs b/example/vite.config.mjs
@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,
+    fs: {
+      allow: [".."],
+    },
+  },
+});
diff --git a/example/vitest.config.mjs b/example/vitest.config.mjs
@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath } from "url";
+import path from "path";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react({ include: /\.(jsx?|tsx?)$/ })],
+  server: {
+    fs: {
+      allow: [".."],
+    },
+  },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: [path.resolve(__dirname, "vitest.setup.mjs")],
+    include: ["src/**/*.{test,spec}.{js,jsx}"],
+  },
+});
diff --git a/example/vitest.setup.mjs b/example/vitest.setup.mjs
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";