GreedyBear-Project · regulartim · Apr 23, 2026 · Feb 20, 2026 · Feb 20, 2026 · Feb 20, 2026
diff --git a/.eslintrc b/.eslintrc
@@ -1,4 +1,5 @@
 {
+  "root": true,
   "parserOptions": {
     "ecmaVersion": 2021,
     "ecmaFeatures": {
@@ -18,10 +19,9 @@
     "airbnb",
     "prettier"
   ],
-  "settings": { "react": { "version": "17" } },
+  "settings": { "react": { "version": "detect" } },
   "rules": {
-    "react/prop-types": ["warn"],
-    "react/forbid-prop-types": "off",
+    "react/prop-types": "off",
     "react/jsx-props-no-spreading": "off",
     "react/jsx-fragments": ["off"],
     "semi": ["error", "always"],
@@ -40,5 +40,35 @@
     "no-undef": "error",
     "no-use-before-define": "off",
     "import/no-unresolved": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["example/**"],
+      "rules": {
+        "import/no-extraneous-dependencies": "off",
+        "react/no-unstable-nested-components": "off",
+        "jsx-a11y/click-events-have-key-events": "off",
+        "jsx-a11y/no-static-element-interactions": "off",
+        "jsx-a11y/no-noninteractive-element-interactions": "off"
+      }
+    },
+    {
+      "files": ["**/*.test.{js,jsx}", "vitest.setup.{js,mjs}", "example/vitest.setup.{js,mjs}"],
+      "env": { "node": true },
+      "globals": {
+        "describe": "readonly",
+        "it": "readonly",
+        "test": "readonly",
+        "expect": "readonly",
+        "beforeEach": "readonly",
+        "afterEach": "readonly",
+        "beforeAll": "readonly",
+        "afterAll": "readonly",
+        "vi": "readonly"
+      },
+      "rules": {
+        "import/no-extraneous-dependencies": "off"
+      }
+    }
+  ]
 }
diff --git a/.github/workflows/pull_request_automation.yml b/.github/workflows/pull_request_automation.yml
@@ -28,7 +28,7 @@ jobs:
           npm
     - name: Install dependencies
       run: |
-        npm i --no-optional --no-audit --no-fund
+        npm ci --no-audit --no-fund
       working-directory: .
     - name: Lint with eslint
       run: |

diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,8 @@ dist
 .env.development.local
 .env.test.local
 .env.production.local
+playwright-report
+test-results
 
 npm-debug.log*
 yarn-debug.log*

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
@@ -3,23 +3,20 @@
   "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",
+    "start:ci": "PLAYWRIGHT=true node ../node_modules/vite/bin/vite.js --host 127.0.0.1 --strictPort --port 3000",
+    "build": "node ../node_modules/vite/bin/vite.js build",
+    "test": "node ../node_modules/vitest/vitest.mjs run --config vitest.config.mjs"
   },
   "dependencies": {
     "@greedybear/gb-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,12 @@
+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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/example/src/index.scss b/example/src/index.scss
@@ -1,4 +1,4 @@
-@import "@greedybear/gb-ui/src/styles/root.scss";
+@import "../../src/styles/root.scss";
 
 // App.jsx
 * {

diff --git a/example/src/layouts/AppFooter.jsx b/example/src/layouts/AppFooter.jsx
@@ -8,7 +8,7 @@
 const selector = (state) => state.toasts;

 function AppFooter() {
  console.debug("AppFooter rendered!");

  // consume store
  const toasts = useToastr(selector);
@@ -38,7 +38,7 @@
           <Col className="text-muted small standout">
             <a
               className="text-muted link"
-              href={`https://github.com/GreedyBear-Project/gb-ui`}
+              href="https://github.com/GreedyBear-Project/gb-ui"
               target="_blank"
               rel="noreferrer noopener"
             >

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 @@
   MdDelete,
   MdInfo,
   MdModeEdit,
-  MdVisibility,
+  MdVisibility
 } from "react-icons/md";
 import { Form, Formik } from "formik";
 
@@ -25,7 +25,7 @@
   PopupFormButton,
   ScrollToTopButton,
   SocialShareBtn,
-  SyncButton,
+  SyncButton
 } from "@greedybear/gb-ui";
 
 import ComponentAsExample from "./ComponentAsExample";
@@ -78,11 +78,11 @@
        name="SyncButton"
        bodyNode={
          <div className="d-flex justify-content-around">
            <SyncButton onClick={async () => alert("Example Alert #1")} />
            <SyncButton
              title="Custom title"
              className="btn btn-info"
              onClick={async () => alert("Example Alert #2")}
            />
          </div>
        }
@@ -116,32 +116,30 @@
               titlePlacement="top"
               popOverPlacement="top"
               Icon={MdModeEdit}
-              Form={({ onFormSubmit }) => (
+              Form={({ onFormSubmit, }) => (
                 <Formik
-                  initialValues={{ name: "" }}
+                  initialValues={{ name: "", }}
                   onSubmit={onFormSubmit}
                 >
-                  {(formik) => (
-                    <Form className="p-2 ">
-                      <FormGroup>
-                        <Label className="required" for="email">
-                          Name
-                        </Label>
-                        <Input
-                          autoFocus
-                          type="text"
-                          name="name"
-                          size="sm"
-                        />
-                      </FormGroup>
-                      <Button type="submit" color="darker" className="btn-sm">
-                        Submit
-                      </Button>
-                    </Form>
-                  )}
+                  <Form className="p-2 ">
+                    <FormGroup>
+                      <Label className="required" for="email">
+                        Name
+                      </Label>
+                      <Input
+                        autoFocus
+                        type="text"
+                        name="name"
+                        size="sm"
+                      />
+                    </FormGroup>
+                    <Button type="submit" color="darker" className="btn-sm">
+                      Submit
+                    </Button>
+                  </Form>
                 </Formik>
               )}
               onFormSuccess={() => alert("onFormSuccess callback")}
            />
          </div>
        }

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 "@greedybear/gb-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 @@
   MultiSelectTextInput,
   InputCheckBox,
   CustomJsonInput,
-  NewJsonRenderer,
+  NewJsonRenderer
 } from "@greedybear/gb-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 @@
   gender: genderChoices[0],
   likeUI: true,
   likeUIRange: [1, 10],
-  occupation: occupationChoices[0]["value"],
+  occupation: occupationChoices[0].value,
   pastOccupations: [],
   techTags: [],
   discover_from: "",
@@ -78,7 +78,7 @@
 export default function FormExample(props) {
  const onFormSubmit = React.useCallback(async (values, formik) => {
    try {
      await alert(JSON.stringify(values));
    } catch (e) {
      // redundant catch
    } finally {

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 "@greedybear/gb-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 "@greedybear/gb-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 "@greedybear/gb-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 "@greedybear/gb-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}>