From dea2e079308afd59d9b3ba1634195b4f083bc887 Mon Sep 17 00:00:00 2001 From: Gianmarco Manni Date: Fri, 20 Jun 2025 12:42:49 +0200 Subject: [PATCH 1/2] x --- .gitignore | 5 +- CHANGELOG.md | 4 + package.json | 4 +- src/index.ts | 1 + .../Context/PanelSideBarContextProps.ts | 33 ++-- .../PanelSideBarLayout/PanelSideBarLayout.tsx | 8 +- .../PanelSideBarLayout/PanelSideBarNavbar.tsx | 24 ++- yarn.lock | 159 +----------------- 8 files changed, 53 insertions(+), 185 deletions(-) diff --git a/.gitignore b/.gitignore index ef7eccd..ead5092 100644 --- a/.gitignore +++ b/.gitignore @@ -25,4 +25,7 @@ yarn-error.log* coverage -storybook-static \ No newline at end of file +storybook-static + +# Ignore vs folder +.vs \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index cc5c529..b518999 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- Export for `PanelSidebarNavbar` component. It can be used to render only the Navbar without need of context. + ## [5.1.0] - 2025-06-11 ### Changed diff --git a/package.json b/package.json index ef90bbf..97974e7 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "copy-sass": "shx cp -r styles dist/scss", "lint": "eslint --cache", "prepack": "yarn build", - "prepare-pr": "yarn prettier . --write && yarn lint && yarn build && yarn test\"", + "prepare-pr": "yarn prettier . --write && yarn lint && yarn build", "prettier-check": "prettier --check .", "start": "rollup -c -w", "start-all": "concurrently \"yarn start\" \"yarn start-yalc\"", @@ -62,8 +62,6 @@ "@types/node": "^18.16.3", "@types/react": "^18.2.5", "@types/react-dom": "^18.2.3", - "@typescript-eslint/eslint-plugin": "^5.59.2", - "@typescript-eslint/parser": "^5.59.2", "bootstrap": "^5.2.3", "concurrently": "^8.0.1", "cross-env": "^7.0.3", diff --git a/src/index.ts b/src/index.ts index 75f49b6..9210fac 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,6 +2,7 @@ export * from "./lib/Layout/AuthenticationLayout"; export * from "./lib/Paging/Paging"; // Panel sidebar layout +export { PanelSidebarNavbar, PanelSidebarNavbarProps } from "./lib/Layout/PanelSideBarLayout/PanelSideBarNavbar"; export * from "./lib/Layout/PanelSideBarLayout/PanelSideBarLayout"; export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext"; export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelItem"; diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts index 730c8e3..caf4873 100644 --- a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts +++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts @@ -3,7 +3,24 @@ import { PanelItem } from "../Definitions/PanelItem"; import { PanelLinkRenderer } from "../Definitions/PanelLinkRenderer"; import { MenuItemToggleFn } from "./PanelSideBarContext"; -export interface PanelSideBarContextProps { +export interface SidebarProps { + /** + * If the sidebar is currently open or not + */ + isSidebarOpen: boolean; + + /** + * Function for toggling sidebar + */ + toggleSidebar: () => void; + + /** + * The theme + */ + theme?: "light" | "dark" | "blue"; +} + +export interface PanelSideBarContextProps extends SidebarProps { /** * The active panel id. */ @@ -37,20 +54,6 @@ export interface PanelSideBarContextProps void; - /** - * If the sidebar is currently open or not - */ - isSidebarOpen: boolean; - /** - * Function for toggling sidebar - */ - toggleSidebar: () => void; - - /** - * The theme - */ - theme?: "light" | "dark" | "blue"; - /** * Boolean indicating if you want to render first items level as icons or directly as menu entries */ diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx index 973ffc7..c4ec0b9 100644 --- a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx +++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx @@ -4,7 +4,7 @@ import "../../../../styles/Layout/index.scss"; import { PanelSideBar } from "./PanelSideBar/PanelSidebar"; import { PanelSideBarLayoutContent } from "./PanelSideBarLayoutContent"; import { PanelSideBarToggle } from "./PanelSideBar/PanelSideBarToggle"; -import { PanelSidebarNavbar } from "./PanelSideBarNavbar"; +import { PanelSidebarNavbarInternal, PanelSidebarNavbarInternalProps } from "./PanelSideBarNavbar"; import { usePanelSideBarContext } from "./PanelSideBar/Context/PanelSideBarContext"; export interface PanelSideBarLayoutProps extends PropsWithChildren { @@ -40,6 +40,12 @@ export interface PanelSideBarLayoutProps extends PropsWithChildren { useResponsiveLayout?: boolean; } +const PanelSidebarNavbar = (props: Omit) => { + const { toggleSidebar, theme } = usePanelSideBarContext(); + + return ; +}; + export const PanelSideBarLayout = (props: PanelSideBarLayoutProps) => { const { brand, diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBarNavbar.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBarNavbar.tsx index 6f1005e..36f07c2 100644 --- a/src/lib/Layout/PanelSideBarLayout/PanelSideBarNavbar.tsx +++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBarNavbar.tsx @@ -2,10 +2,10 @@ import { faBars } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { ReactNode } from "react"; import { Nav, NavItem } from "reactstrap"; -import { usePanelSideBarContext } from "./PanelSideBar/Context/PanelSideBarContext"; import classNames from "classnames"; +import { SidebarProps } from "./PanelSideBar/Context/PanelSideBarContextProps"; -interface PanelSidebarNavbarProps { +export interface PanelSidebarNavbarInternalProps extends Pick, "theme" | "toggleSidebar"> { /** * The brand content shown on the top navigation bar. */ @@ -25,9 +25,13 @@ interface PanelSidebarNavbarProps { useToggleButton?: boolean; } -const PanelSidebarNavbar = (props: PanelSidebarNavbarProps) => { - const { brand, navbarRightItems, navbarLeftItems, useToggleButton } = props; - const { toggleSidebar, theme } = usePanelSideBarContext(); +const PanelSidebarNavbarInternal = (props: PanelSidebarNavbarInternalProps) => { + const { brand, navbarRightItems, navbarLeftItems, useToggleButton, toggleSidebar, theme } = props; + + if (useToggleButton && !toggleSidebar) { + throw new Error("You must provide the toggleSidebar function when useToggleButton is true."); + } + return (