Fully Controlled ReactPatterUI (#55)

Co-authored-by: GitHub Release Bot <[email protected]>

CHANGELOG.md

@@ -7,6 +7,41 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Possibility to dinamically open or close `sidebar`
+- Possibility to dinamically toggle `menu items`
+- Added support for `light`, `dark` and `blue` theme in PanelSideBarLayout.
+
+### Changed
+
+- `menuItems properties` are not locked by any states during the render process anymore. Changing externally the menu items will provide the correct menu
+- :boom: `topBarLeftCustomItems` and `topBarRigthCustomItems` renamed to `navbarLeftItems` and `navbarRightItems`
+- `navbarLeftItems` and `navbarRightItems` have not default margin by default
+- default sidebar `width` to `16rem`
+- :boom: `UI elements` are now parameter of `SidebarLayout` and not of the context anymore
+- PanelItem Id type changed from `string` to being strongly typed
+
+### Fixed
+
+- When `footer` is null, the whole section will not be rendered
+- Unique key prop in a list warning
+- menu items provided with `expanded` to true are correctly displayed in `PanelSideBarLayout`
+- Active panel is now recognized recursively and not until the third deep level anymore
+
+### Removed
+
+- :boom: `DeleteAction` component.
+- :boom: Built-in support for `userDropdown`. It should provided in the `navbarRightItems` items and define your style in your solution.
+- :boom: `localItems` property as menuItems can be fully controlled by the consumer.
+- :boom: removed `PanelSideBar` component and its relative contexts and should be replaced with `PanelSideBarLayout`. In order to migrate:
+  - assign `items` to `menuItems` in the `PanelSideBarProvider`
+  - set `renderFirstItemsLevelAsTiles` to false
+  - set `useToggleButton` in `PanelSideBarLayout` to true
+  - set `useResponsiveLayout` in `PanelSideBarLayout` to true
+  - move `brand` to `PanelSideBarLayout`
+  - move `footer` to `PanelSideBarLayout`
+
 ## [3.4.0] - 2024-03-12
 
 ### Added

cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx

@@ -2,35 +2,42 @@ import React from "react";
 import { PanelSideBarProvider, PanelSideBarLayout, PanelItem, PanelLinkRendererProps } from "react-pattern-ui";
 import { faBars, faCogs } from "@fortawesome/free-solid-svg-icons";
 
-type CustomPanelItem<TLocalPanelIds = ""> = {
-  id: "home" | "settings" | TLocalPanelIds;
+type AppRoutes = "home" | "settings" | "dropdownTest" | "dropdown-test1" | "dropdown-test2";
+type TSideBarMenuItem = PanelItem<AppRoutes>;
+
+// Configuration object for avoiding duplicated code
+interface PanelSideBarConfiguration {
+  renderFirstItemsLevelAsTiles?: boolean;
+  useToggleButton?: boolean;
+}
+
+const getPanelSidebarInternal = (items: TSideBarMenuItem[], config?: PanelSideBarConfiguration) => {
+  const { renderFirstItemsLevelAsTiles = true, useToggleButton = false } = config ?? {};
+  return (
+    <PanelSideBarProvider
+      menuItems={items}
+      renderFirstItemsLevelAsTiles={renderFirstItemsLevelAsTiles}
+      LinkRenderer={(elem: PanelLinkRendererProps<AppRoutes, Record<string, unknown>>) => (
+        <div
+          id={elem.item.id}
+          onClick={() => {
+            const pageContent = document.getElementById("pageContent");
+            if (pageContent) {
+              pageContent.innerText = elem.item.id;
+            }
+          }}
+        >
+          <>{elem.item.title}</>
+        </div>
+      )}
+    >
+      <PanelSideBarLayout useToggleButton={useToggleButton}>
+        <div id="pageContent">Cypress</div>
+      </PanelSideBarLayout>
+    </PanelSideBarProvider>
+  );
 };
 
-type TSideBarMenuItem<TLocalPanelIds = ""> = PanelItem<CustomPanelItem<TLocalPanelIds>>;
-
-const PanelSidebar = (items: TSideBarMenuItem[]) => (
-  <PanelSideBarProvider
-    globalItems={items}
-    LinkRenderer={(elem: PanelLinkRendererProps<Record<string, unknown>>) => (
-      <div
-        id={elem.item.id}
-        onClick={() => {
-          const pageContent = document.getElementById("pageContent");
-          if (pageContent) {
-            pageContent.innerText = elem.item.id;
-          }
-        }}
-      >
-        <>{elem.item.title}</>
-      </div>
-    )}
-  >
-    <PanelSideBarLayout>
-      <div id="pageContent">Cypress</div>
-    </PanelSideBarLayout>
-  </PanelSideBarProvider>
-);
-
 const getSidebarItems = (active?: boolean, disabled?: boolean): TSideBarMenuItem[] => [
   {
     id: "home",
@@ -74,10 +81,20 @@ const getSidebarItems = (active?: boolean, disabled?: boolean): TSideBarMenuItem
   },
 ];
 
+const PanelSideBarWithTiles = (props: { active?: boolean; disabled?: boolean }) => {
+  const { active, disabled } = props;
+  return getPanelSidebarInternal(getSidebarItems(active, disabled));
+};
+
+const PanelSideBarNoTiles = (props: { active?: boolean; disabled?: boolean }) => {
+  const { active, disabled } = props;
+  return getPanelSidebarInternal(getSidebarItems(active, disabled), { renderFirstItemsLevelAsTiles: false, useToggleButton: true });
+};
+
 describe("PanelSidebar.cy.tsx", () => {
   it("icon and titles rendered correctly", () => {
     const sidebarItems = getSidebarItems();
-    cy.mount(PanelSidebar(sidebarItems));
+    cy.mount(<PanelSideBarWithTiles />);
 
     // Check if icon are rendered
     cy.get('[data-icon="bars"]').should("be.visible");
@@ -90,8 +107,7 @@ describe("PanelSidebar.cy.tsx", () => {
   });
 
   it("flat menu entry", () => {
-    const sidebarItems = getSidebarItems();
-    cy.mount(PanelSidebar(sidebarItems));
+    cy.mount(<PanelSideBarWithTiles />);
 
     // Check page content changes
     cy.get("#home").click();
@@ -102,8 +118,7 @@ describe("PanelSidebar.cy.tsx", () => {
   });
 
   it("nested menu entries", () => {
-    const sidebarItems = getSidebarItems();
-    cy.mount(PanelSidebar(sidebarItems));
+    cy.mount(<PanelSideBarWithTiles />);
 
     // Check page content changes
     cy.get("button[title=Settings]").click();
@@ -116,8 +131,7 @@ describe("PanelSidebar.cy.tsx", () => {
   });
 
   it("disabled entries", () => {
-    const sidebarItems = getSidebarItems(false, true);
-    cy.mount(PanelSidebar(sidebarItems));
+    cy.mount(<PanelSideBarWithTiles disabled />);
 
     // Check are disabled and page content not doesn't change
     cy.get("button[title=Home]").should("have.attr", "disabled");
@@ -130,7 +144,7 @@ describe("PanelSidebar.cy.tsx", () => {
 
   it("toggle sidebar", () => {
     const sidebarItems = getSidebarItems();
-    cy.mount(PanelSidebar(sidebarItems));
+    cy.mount(<PanelSideBarWithTiles />);
 
     // Check toggle sidebar
     cy.get('[data-icon="angle-left"]').should("be.visible");
@@ -141,10 +155,21 @@ describe("PanelSidebar.cy.tsx", () => {
   });
 
   it("selected flat entry", () => {
-    const sidebarItems = getSidebarItems(true);
-    cy.mount(PanelSidebar(sidebarItems));
+    cy.mount(<PanelSideBarWithTiles active />);
 
     // Check active entries
     cy.get("#home").parent("div").parent("li").should("have.class", "active");
   });
+
+  it("render correctly menu without tiles", () => {
+    cy.mount(<PanelSideBarNoTiles />);
+    cy.get("#main-section").should("have.class", "section-no-tiles");
+    cy.get(".side.nav__tiles").should("not.exist");
+  });
+
+  it("render correctly toggle button", () => {
+    cy.mount(<PanelSideBarNoTiles />);
+    cy.get("#sidebar-toggle").click();
+    cy.get("#side-nav").should("have.css", "width", "0px");
+  });
 });

src/index.ts

@@ -1,14 +1,8 @@
-export * from "./lib/DeleteAction/DeleteAction";
 export * from "./lib/Layout/AuthenticationLayout";
+export * from "./lib/Paging/Paging";
 
 // Panel sidebar layout
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBarLayout";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelItem";
-
-// Sidebar layout
-export * from "./lib/Layout/SideBarLayout/SideBarLayout";
-export * from "./lib/Layout/SideBarLayout/SideBarLayoutContext";
-export * from "./lib/SideBar/SideBarMenuContext";
-export * from "./lib/Paging/Paging";
-export * from "./lib/SideBar/ISideBarMenuItem";
+export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelLinkRenderer";