@startupjs-ui/smart-sidebar 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/smart-sidebar
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **smart-sidebar:** refactor SmartSidebar component ([3ac7b79](https://github.com/startupjs/startupjs-ui/commit/3ac7b79386491a166e4d15577a784d52996fe7d2))

package/README.mdx

@@ -0,0 +1,270 @@
+import SmartSidebar, { _PropsJsonSchema as SmartSidebarPropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Menu from '@startupjs-ui/menu'
+import Button from '@startupjs-ui/button'
+import Br from '@startupjs-ui/br'
+import Content from '@startupjs-ui/content'
+import Span from '@startupjs-ui/span'
+import { pug, $ } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import './index.mdx.cssx.styl'
+
+# SmartSidebar
+
+SmartSidebar is typically used for navigation. It provides a desktop-mobile friendly interface. Based on a fixed layout breakpoint, it decides to stay as a [sidebar](/docs/components/Sidebar) or to turn into an [drawer sidebar](/docs/components/DrawerSidebar). By default it not visible on the screen.
+
+```jsx
+import { SmartSidebar } from 'startupjs-ui'
+```
+
+## Simple Example
+
+```jsx example
+const $open = $()
+
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <SmartSidebar
+      $open={$open}
+      renderContent={() => (
+        <Span>SmartSidebar</Span>
+      )}
+    >
+      <Button onPress={() => $open.set(!$open.get())}>Toggle Sidebar</Button>
+    </SmartSidebar>
+  </Div>
+)
+```
+
+## Fixed Layout Breakpoint
+
+The `fixedLayoutBreakpoint` property specifies the screen width breakpoint below which the [sidebar](/docs/components/Sidebar) switches to a [drawer sidebar](/docs/components/DrawerSidebar). `fixedLayoutBreakpoint` is a number type with a default value of `1024`.
+
+```jsx example noscroll
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <SmartSidebar
+      $open={$open}
+      renderContent={() => (
+        <Menu>
+          <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
+          <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
+          <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
+        </Menu>
+      )}
+      fixedLayoutBreakpoint={10000}
+    >
+      <Content
+        padding
+        width='full'
+        style={{ backgroundColor: 'white' }}
+      >
+        <Div row>
+          <Button onPress={() => $open.set(!$open.get())}>Toggle</Button>
+        </Div>
+        <Br />
+        <Span>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
+        </Span>
+      </Content>
+    </SmartSidebar>
+  </Div>
+)
+```
+
+## Position
+
+The `position` property specifies the side of the window from which the sidebar will show. Possible values of `position` property are `left` (default) and `right`.
+
+```jsx example noscroll
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <SmartSidebar
+      $open={$open}
+      renderContent={() => (
+        <Div>
+          <Br />
+          <Menu>
+            <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
+            <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
+            <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
+          </Menu>
+        </Div>
+      )}
+      position={'right'}
+    >
+      <Content
+        padding
+        width='full'
+        style={{ backgroundColor: 'white' }}
+      >
+        <Div row>
+          <Button onPress={() => $open.set(!$open.get())}>Toggle right sidebar</Button>
+        </Div>
+        <Br />
+        <Span>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
+        </Span>
+      </Content>
+    </SmartSidebar>
+  </Div>
+)
+```
+
+## Default visibility (desktop only)
+
+To control default visibility use `defaultOpen` property.
+
+```jsx example
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <SmartSidebar
+      $open={$open}
+      renderContent={() => (
+        <Div>
+          <Br />
+          <Menu>
+            <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
+            <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
+            <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
+          </Menu>
+        </Div>
+      )}
+      defaultOpen
+    >
+      <Content
+        padding
+        width='full'
+        style={{ backgroundColor: 'white' }}
+      >
+        <Div row>
+          <Button onPress={() => $open.set(!$open.get())}>Toggle</Button>
+        </Div>
+      </Content>
+    </SmartSidebar>
+  </Div>
+)
+```
+
+## Locked SmartSidebar
+
+Specifying `disabled` property will keep the sidebar closed and it won't respond to `open` property.
+
+```jsx example
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <SmartSidebar
+      $open={$open}
+      renderContent={() => (
+        <Div>
+          <Br />
+          <Menu>
+            <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
+            <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
+            <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
+          </Menu>
+        </Div>
+      )}
+      disabled
+    >
+      <Content
+        padding
+        width='full'
+        style={{ backgroundColor: 'white' }}
+      >
+        <Div row>
+          <Button onPress={() => $open.set(!$open.get())}>Toggle</Button>
+        </Div>
+      </Content>
+    </SmartSidebar>
+  </Div>
+)
+```
+
+## Lazy rendering
+
+By default the smart sidebar content are not destroyed when it is closed. To change this behavior pass `lazy=true`.
+
+```jsx example
+const $open = $()
+
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <SmartSidebar
+      $open={$open}
+      renderContent={() => (
+        <Span>Lazy SmartSidebar</Span>
+      )}
+      lazy
+    >
+      <Button onPress={() => $open.set(!$open.get())}>Toggle Sidebar</Button>
+    </SmartSidebar>
+  </Div>
+)
+```
+
+## Complex example
+
+```jsx example noscroll
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <SmartSidebar
+      $open={$open}
+      renderContent={() => (
+        <Menu>
+          <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
+          <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
+          <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
+        </Menu>
+      )}
+    >
+      <Content
+        padding
+        width='full'
+        style={{ backgroundColor: 'white' }}
+      >
+        <Div row>
+          <Button onPress={() => $open.set(!$open.get())}>Toggle</Button>
+        </Div>
+        <Br />
+        <Span>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
+        </Span>
+      </Content>
+    </SmartSidebar>
+  </Div>
+)
+```
+
+## Sandbox
+
+<Sandbox Component={SmartSidebar}
+  props={{
+    $open: $.session.Sandbox.SmartSidebar,
+    renderContent: () => {
+      return pug`
+        Div.sidebar
+          Span Sidebar content
+      `
+    },
+    children: pug`
+      Div.content
+        Button.button(
+          onPress=() => {
+            const value = $.session.Sandbox.SmartSidebar.get()
+            $.session.Sandbox.SmartSidebar.set(!value)
+          }
+        ) Toggle
+        Br
+        Span Children content
+    `
+  }}
+  propsJsonSchema={SmartSidebarPropsJsonSchema}
+  rendererStyleName='renderer'
+  block
+/>

package/index.d.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import React, { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export declare const _PropsJsonSchema: {};
+export interface SmartSidebarProps {
+    /** Custom styles applied to the root wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the sidebar container when using fixed layout */
+    sidebarStyle?: StyleProp<ViewStyle>;
+    /** Model controlling sidebar open state */
+    $open?: any;
+    /** Open sidebar by default on desktop @default false */
+    defaultOpen?: boolean;
+    /** Destroy sidebar content when closed @default false */
+    lazy?: boolean;
+    /** Disable sidebar interactions @default false */
+    disabled?: boolean;
+    /** Breakpoint width after which sidebar switches to fixed layout @default 1024 */
+    fixedLayoutBreakpoint?: number;
+    /** Sidebar position relative to the screen @default 'left' */
+    position?: 'left' | 'right';
+    /** Sidebar width in density-independent pixels @default 264 */
+    width?: number;
+    /** Content rendered inside the main area */
+    children?: ReactNode;
+    /** Renderer for sidebar content */
+    renderContent?: () => ReactNode;
+}
+declare const _default: React.ComponentType<SmartSidebarProps>;
+export default _default;

package/index.mdx.cssx.styl

@@ -0,0 +1,14 @@
+.sidebar
+  padding 2u
+  height 20u
+
+.content
+  padding 2u
+  height 20u
+  background-color var(--color-bg-main)
+
+.button
+  width 10u
+
+.renderer
+  overflow hidden

package/index.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, type ReactNode } from 'react'
+import { Dimensions, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, $, useBind } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Sidebar from '@startupjs-ui/sidebar'
+import DrawerSidebar from '@startupjs-ui/drawer-sidebar'
+
+const FIXED_LAYOUT_BREAKPOINT = 1024
+
+export const _PropsJsonSchema = {/* SmartSidebarProps */}
+
+export interface SmartSidebarProps {
+  /** Custom styles applied to the root wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the sidebar container when using fixed layout */
+  sidebarStyle?: StyleProp<ViewStyle>
+  /** Model controlling sidebar open state */
+  $open?: any
+  /** Open sidebar by default on desktop @default false */
+  defaultOpen?: boolean
+  /** Destroy sidebar content when closed @default false */
+  lazy?: boolean
+  /** Disable sidebar interactions @default false */
+  disabled?: boolean
+  /** Breakpoint width after which sidebar switches to fixed layout @default 1024 */
+  fixedLayoutBreakpoint?: number
+  /** Sidebar position relative to the screen @default 'left' */
+  position?: 'left' | 'right'
+  /** Sidebar width in density-independent pixels @default 264 */
+  width?: number
+  /** Content rendered inside the main area */
+  children?: ReactNode
+  /** Renderer for sidebar content */
+  renderContent?: () => ReactNode
+}
+
+function SmartSidebar ({
+  style,
+  sidebarStyle,
+  defaultOpen = false,
+  lazy = false,
+  disabled = false,
+  fixedLayoutBreakpoint = FIXED_LAYOUT_BREAKPOINT,
+  $open,
+  position = 'left',
+  width = 264,
+  children,
+  renderContent,
+  ...props
+}: SmartSidebarProps): ReactNode {
+  if (!$open) $open = $()
+
+  let open: boolean | undefined
+  let onChange: ((value: boolean) => void) | undefined
+  ;({ open, onChange } = useBind({ $open, open, onChange }) as any) // eslint-disable-line prefer-const
+
+  const $fixedLayout = $(isFixedLayout(fixedLayoutBreakpoint))
+  const fixedLayout = $fixedLayout.get()
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    if (!$fixedLayout.get()) return
+    // or we can save open state before disabling
+    // to open it with this state when enabling
+    $open.set(defaultOpen)
+  }, [disabled])
+
+  useEffect(() => {
+    if (disabled) return
+    if ($fixedLayout.get()) {
+      // when change dimensions from mobile
+      // to desktop resolution or when rendering happen on desktop resolution
+      // we open sidebar if it was opened on mobile resolution or default value
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      $open.set(open || defaultOpen)
+    } else {
+      // when change dimensions from desktop
+      // to mobile resolution or when rendering heppen for mobile resolution
+      // we always close sidebars
+      $open.set(false)
+    }
+  }, [$fixedLayout.get()])
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', handleWidthChange)
+
+    return () => {
+      subscription?.remove()
+    }
+  }, [])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  function handleWidthChange () {
+    $fixedLayout.set(isFixedLayout(fixedLayoutBreakpoint))
+  }
+
+  return pug`
+    if fixedLayout
+      Sidebar(
+        style=style
+        sidebarStyle=sidebarStyle
+        $open=$open
+        position=position
+        width=width
+        disabled=disabled
+        renderContent=renderContent
+        ...props
+      )= children
+    else
+      DrawerSidebar(
+        style=style
+        $open=$open
+        position=position
+        width=width
+        renderContent=renderContent
+        disabled=disabled
+        ...props
+      )= children
+  `
+}
+
+export default observer(themed('SmartSidebar', SmartSidebar))
+
+function isFixedLayout (fixedLayoutBreakpoint: number) {
+  const dim = Dimensions.get('window')
+  return dim.width > fixedLayoutBreakpoint
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@startupjs-ui/smart-sidebar",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/drawer-sidebar": "^0.1.3",
+    "@startupjs-ui/sidebar": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}