Merge pull request #402 from Enterwell/feature/reactui-sidenav

Feature/reactui sidenav

Author: AleksandarDev

README.md

@@ -51,6 +51,8 @@ pnpm build
 
 ### Develop
 
+**Note:** Run `pnpm build` before `pnpm dev` to ensure that all packages have required files built and ready.
+
 To develop all apps and packages, run the following command:
 
 ```bash

apps/docs/components/ExampleSideNav.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { SideNav, SideNavItem, SideNavItemGroup } from '@enterwell/react-ui';
+import { Button } from '@mui/material';
+import { Stack } from '@mui/system';
+import Image from 'next/image';
+import { useSearchParams } from 'next/navigation';
+
+export function ExampleSideNav() {
+    const params = useSearchParams();
+    const selectedItem = params.get('item');
+    const show = params.get('show') === 'true';
+    function setShow(show: boolean) {
+        const url = new URL(window.location.href);
+        url.searchParams.set('show', show.toString());
+        window.history.pushState({}, '', url.toString());
+    }
+
+    return (
+        <>
+            {show && (
+                // @highlight-start
+                <SideNav header={(
+                    <Stack direction='row' alignItems='center' spacing={2}>
+                        <div className="flex flex-row gap-1 items-center whitespace-nowrap">
+                            <Image
+                                alt="Enterwell"
+                                width={32}
+                                height={32}
+                                src="https://enterwell.net/wp-content/uploads/2023/05/ew-logomark-monochrome-negative-64.x71089.svg" />
+                            <span className="text-xs sm:text-sm md:text-lg">Enterwell {'<'}UI{' \\>'}</span>
+                        </div>
+                    </Stack>
+                )}>
+                    <SideNavItem href="?item=1&show=true" selected={selectedItem === '1'}>Item 1</SideNavItem>
+                    <SideNavItem href="?item=2&show=true" selected={selectedItem === '2'}>Item 2</SideNavItem>
+                    <SideNavItemGroup label="Group 1" defaultExpanded={selectedItem === '3' || selectedItem === '4'}>
+                        <SideNavItem href="?item=3&show=true" selected={selectedItem === '3'}>Item 3</SideNavItem>
+                        <SideNavItem href="?item=4&show=true" selected={selectedItem === '4'}>Item 4</SideNavItem>
+                    </SideNavItemGroup>
+                </SideNav>
+                // @highlight-end
+            )}
+            <Button variant='contained' onClick={() => setShow(!show)}>Toggle SideNav</Button>
+        </>
+    )
+}

apps/docs/content/react-ui/components/side-nav.mdx

@@ -0,0 +1,33 @@
+---
+title: SideNav
+---
+
+import { SideNav } from '@enterwell/react-ui';
+import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
+import { ExampleSideNav } from '../../../components/ExampleSideNav.tsx';
+import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
+
+# SideNav
+
+## Description
+
+<ComponentDescription name="SideNav" />
+
+### Parameters
+
+<ComponentParameters name="SideNav" />
+
+## Example
+
+<ComponentWithSource component={ ExampleSideNav } centered />
+
+## Inspect
+
+<details>
+    <summary>Source code</summary>
+    <ComponentSource 
+        package="@enterwell/react-ui" 
+        directory="SideNav" 
+        name="SideNav"
+    />
+</details>

packages/react-hooks/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 _NOTE: This is an automatically generated file. Do not modify contents of this file manually._
 
+## [0.7.0] - 2025-04-02
+### Changed
+- Updated React to v19
+
+### Fixed
+- useResizeObserver not returns correct ref type
+
 ## [0.6.0] - 2025-04-01
 ### Changed
 - Updated packages

packages/react-hooks/changes/Fixed useResizeObserver not returns correct ref type

@@ -1,6 +1,6 @@
 {
   "name": "@enterwell/react-hooks",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",

packages/react-hooks/package.json

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 _NOTE: This is an automatically generated file. Do not modify contents of this file manually._
 
+## [0.10.0] - 2025-04-02
+### Changed
+- Migrated to MUI 7
+
 ## [0.9.0] - 2025-04-01
 ### Changed
 - Migrated to MUI 6

packages/react-mui-hooks/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@enterwell/react-mui-hooks",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",

packages/react-mui-hooks/changes/Changed Migrated to MUI 7

@@ -10,6 +10,7 @@
     "Select",
     "SplitButton",
     "TimeInput",
-    "ItemAccordion"
+    "ItemAccordion",
+    "SideNav"
   ]
 }