@startupjs-ui/drawer-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/drawer-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))
+* **drawer-sidebar:** refactor DrawerSidebar component ([f323bdd](https://github.com/startupjs/startupjs-ui/commit/f323bdddab7c8dabecf224a5b35c1a75a483556f))

package/README.mdx

@@ -0,0 +1,163 @@
+import DrawerSidebar, { _PropsJsonSchema as DrawerSidebarPropsJsonSchema } from './index'
+import Br from '@startupjs-ui/br'
+import Button from '@startupjs-ui/button'
+import Content from '@startupjs-ui/content'
+import Div from '@startupjs-ui/div'
+import Menu from '@startupjs-ui/menu'
+import Span from '@startupjs-ui/span'
+import { $ } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import './index.mdx.cssx.styl'
+
+# DrawerSidebar
+
+Drawer is typically used for nagivation. It initially not visible on the screen, but it can be pulled in from the edge of the window.
+
+```jsx
+import { DrawerSidebar } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <DrawerSidebar
+      $open={$open}
+      renderContent={() => (
+        <Span>
+          DrawerSidebar
+        </Span>)
+      }
+    >
+      <Button onPress={() => $open.set(true)}>Open</Button>
+    </DrawerSidebar>
+  </Div>
+)
+```
+
+## Position
+
+The `position` property specifies the side of the window from which the drawer will slide in. Possible values of `position` property are `left` (default) and `right`.
+
+```jsx example noscroll
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <DrawerSidebar
+      $open={$open}
+      position='right'
+      renderContent={() => (
+        <Menu>
+          <Menu.Item>Nav-1</Menu.Item>
+          <Menu.Item>Nav-2</Menu.Item>
+          <Menu.Item>Nav-3</Menu.Item>
+          <Menu.Item>Nav-4</Menu.Item>
+        </Menu>
+      )}
+    >
+      <Content
+        padding
+        width='full'
+        style={{ backgroundColor: 'white' }}
+      >
+        <Div row>
+          <Button onPress={() => $open.set(true)}>Open</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>
+    </DrawerSidebar>
+  </Div>
+)
+```
+
+## Lazy rendering
+
+By default the drawer content are not destroyed when it is closed. To change this behavior pass `lazy=true`.
+
+```jsx example
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <DrawerSidebar
+      $open={$open}
+      renderContent={() => (
+        <Span>
+          Lazy DrawerSidebar
+        </Span>)
+      }
+      lazy
+    >
+      <Button onPress={() => $open.set(true)}>Open</Button>
+    </DrawerSidebar>
+  </Div>
+)
+```
+
+## Complex example
+
+```jsx example noscroll
+const $open = $()
+return (
+  <Div style={{overflow: 'hidden'}}>
+    <DrawerSidebar
+      $open={$open}
+      renderContent={() => (
+        <Menu>
+          <Menu.Item>Nav-1</Menu.Item>
+          <Menu.Item>Nav-2</Menu.Item>
+          <Menu.Item>Nav-3</Menu.Item>
+          <Menu.Item>Nav-4</Menu.Item>
+        </Menu>
+      )}
+    >
+      <Content
+        padding
+        width='full'
+        style={{ backgroundColor: 'white' }}
+      >
+        <Div row>
+          <Button onPress={() => $open.set(true)}>Open</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>
+    </DrawerSidebar>
+  </Div>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={DrawerSidebar}
+  props={{
+    $open: $.session.Sandbox.DrawerSidebar,
+    renderContent: () => (
+      <Div styleName='sidebar'>
+        <Span>Sidebar content</Span>
+      </Div>
+    ),
+    children: (
+      <Div styleName='content'>
+        <Button
+          onPress={()=> {
+            const value = $.session.Sandbox.DrawerSidebar.get()
+            $.session.Sandbox.DrawerSidebar.set(!value)
+          }}
+        >Open</Button>
+        <Br />
+        <Span>Children content</Span>
+      </Div>
+    )
+  }}
+  rendererStyleName='renderer'
+  block
+  propsJsonSchema={DrawerSidebarPropsJsonSchema}
+/>

package/index.d.ts

@@ -0,0 +1,26 @@
+/* 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 DrawerSidebarProps {
+    /** Custom styles applied to the root DrawerLayout */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside the main area */
+    children?: ReactNode;
+    /** Model controlling drawer open state */
+    $open?: any;
+    /** Drawer position relative to the screen @default 'left' */
+    position?: 'left' | 'right';
+    /** Render drawer content only when open @default false */
+    lazy?: boolean;
+    /** Disable drawer interactions @default false */
+    disabled?: boolean;
+    /** Drawer width in density-independent pixels @default 264 */
+    width?: number;
+    /** Renderer for drawer content */
+    renderContent?: () => ReactNode;
+}
+declare const _default: React.ComponentType<DrawerSidebarProps>;
+export default _default;

package/index.mdx.cssx.styl

@@ -0,0 +1,9 @@
+.sidebar
+  padding 2u
+
+.content
+  padding 2u
+  height 20u
+
+.renderer
+  overflow hidden

package/index.tsx

@@ -0,0 +1,102 @@
+import React, { useRef, type ReactNode } from 'react'
+import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native'
+import DrawerLayoutModule from 'react-native-drawer-layout-polyfill'
+import { pug, observer, $, useDidUpdate } from 'startupjs'
+import { themed, useColors } from '@startupjs-ui/core'
+
+const DrawerLayout = DrawerLayoutModule.default || DrawerLayoutModule
+if (!DrawerLayout) throw Error("> Can't load DrawerLayout module. Issues with bundling.")
+
+let isEffectRunning: boolean | undefined
+
+export const _PropsJsonSchema = {/* DrawerSidebarProps */}
+
+export interface DrawerSidebarProps {
+  /** Custom styles applied to the root DrawerLayout */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside the main area */
+  children?: ReactNode
+  /** Model controlling drawer open state */
+  $open?: any
+  /** Drawer position relative to the screen @default 'left' */
+  position?: 'left' | 'right'
+  /** Render drawer content only when open @default false */
+  lazy?: boolean
+  /** Disable drawer interactions @default false */
+  disabled?: boolean
+  /** Drawer width in density-independent pixels @default 264 */
+  width?: number
+  /** Renderer for drawer content */
+  renderContent?: () => ReactNode
+}
+
+function DrawerSidebar ({
+  style = [],
+  children,
+  $open,
+  position = 'left',
+  lazy = false,
+  disabled = false,
+  width = 264,
+  renderContent,
+  ...props
+}: DrawerSidebarProps): ReactNode {
+  const getColor = useColors()
+
+  if (!$open) $open = $()
+
+  const flattenedStyle = StyleSheet.flatten(style) || {}
+  const { backgroundColor = getColor('bg-main-strong'), ...restStyle } =
+    flattenedStyle as Record<string, any>
+
+  const open = $open.get()
+
+  const drawerRef = useRef<any>(null)
+
+  useDidUpdate(() => {
+    if (disabled) return
+    const drawer = drawerRef.current
+
+    isEffectRunning = true
+
+    if (open) {
+      drawer.openDrawer()
+    } else {
+      drawer.closeDrawer()
+    }
+  }, [!!open])
+
+  const renderNavigationView = (): ReactNode => {
+    const render = lazy ? open : true
+    if (!render) return null
+    return pug`
+      ScrollView(contentContainerStyle={flex: 1})
+        = renderContent && renderContent()
+    `
+  }
+
+  // drawer callback's are scheduled and not called synchronously
+  // and when the open state changes several times in a short period of time
+  // these scheduled callback's can create an infinite loop
+  function onDrawerCallback (openState: boolean) {
+    if (typeof isEffectRunning === 'undefined') $open.set(openState)
+    isEffectRunning = undefined
+  }
+
+  return pug`
+    DrawerLayout.root(
+      style=restStyle
+      drawerPosition=position
+      drawerWidth=width
+      drawerBackgroundColor=backgroundColor
+      ref=drawerRef
+      renderNavigationView=renderNavigationView
+      onDrawerClose=() => onDrawerCallback(false)
+      onDrawerOpen=() => onDrawerCallback(true)
+      drawerLockMode=disabled ? 'locked-closed' : undefined
+      ...props
+    )= children
+  `
+}
+
+export default observer(themed('DrawerSidebar', DrawerSidebar))

package/package.json

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

package/react-native-drawer-layout-polyfill.d.ts

@@ -0,0 +1,4 @@
+declare module 'react-native-drawer-layout-polyfill' {
+  const DrawerLayout: any
+  export default DrawerLayout
+}