@startupjs-ui/sidebar 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# 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/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))
+* **sidebar:** refactor Sidebar component ([8663a5e](https://github.com/startupjs/startupjs-ui/commit/8663a5eb3a75eca1e895d0e434a3d78ecd37eccb))

package/README.mdx

@@ -0,0 +1,189 @@
+import Sidebar, { _PropsJsonSchema as SidebarPropsJsonSchema } 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 { useMedia } from '@startupjs-ui/core'
+import { Sandbox } from '@startupjs-ui/docs'
+import './index.mdx.cssx.styl'
+
+# Sidebar
+
+Sidebar is typically used for nagivation. It initially not visible on the screen.
+
+```jsx
+import { Sidebar } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const media = useMedia()
+const $open = $()
+
+return (
+  <Sidebar
+    $open={$open}
+    width={media.tablet ? 264 : 120}
+    renderContent={() => (
+      <Span>
+        Sidebar
+      </Span>
+    )}
+  >
+    <Button onPress={() => $open.set(!$open.get())}>
+      Toggle sidebar
+    </Button>
+  </Sidebar>
+)
+```
+
+## 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 media = useMedia()
+const $open = $()
+
+return (
+  <Sidebar
+    $open={$open}
+    width={media.tablet ? 264 : 120}
+    position='right'
+    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.Item onPress={() => null}>Nav-4</Menu.Item>
+        <Menu.Item onPress={() => null}>Nav-5</Menu.Item>
+        <Menu.Item onPress={() => null}>Nav-6</Menu.Item>
+      </Menu>
+    )}
+  >
+    <Content
+      padding
+      width='full'
+      style={{
+        backgroundColor: 'white'
+      }}
+    >
+      <Div row>
+        <Button
+          variant='flat'
+          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>
+  </Sidebar>
+)
+```
+
+## Lazy rendering
+
+By default the sidebar content are not destroyed when it is closed. To change this behavior pass `lazy=true`.
+
+```jsx example
+const media = useMedia()
+const $open = $()
+
+return (
+  <Sidebar
+    $open={$open}
+    width={media.tablet ? 264 : 120}
+    renderContent={() => (
+      <Span>
+        Lazy sidebar
+      </Span>
+    )}
+    lazy
+  >
+    <Button onPress={() => $open.set(!$open.get())}>
+      Toggle sidebar
+    </Button>
+  </Sidebar>
+)
+```
+
+## Complex example
+
+```jsx example noscroll
+const media = useMedia()
+const $open = $()
+
+return (
+  <Sidebar
+    $open={$open}
+    width={media.tablet ? 264 : 120}
+    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.Item onPress={() => null}>Nav-4</Menu.Item>
+        <Menu.Item onPress={() => null}>Nav-5</Menu.Item>
+        <Menu.Item onPress={() => null}>Nav-6</Menu.Item>
+      </Menu>
+    )}
+  >
+    <Content
+      padding
+      width='full'
+      style={{
+        backgroundColor: 'white'
+      }}
+    >
+      <Div row>
+        <Button variant='flat' onPress={() => $open.set(!$open.get())}>
+          Toggle 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>
+  </Sidebar>
+)
+```
+
+## Sandbox
+
+<Sandbox Component={Sidebar}
+  props={{
+    // TODO: $open is not working here probably because Sandbox doesn't accept model props correctly
+    $open: $.session.Sandbox.Sidebar,
+    renderContent: () => {
+      return pug`
+        Div.sidebar
+          Span Sidebar content
+      `
+    },
+    children: (
+      <Div styleName='content'>
+        <Button
+          styleName='button'
+          onPress={() => {
+            console.log('Toggle sidebar')
+            const value = $.session.Sandbox.Sidebar.get()
+            $.session.Sandbox.Sidebar.set(!value)
+          }}
+        >Toggle</Button>
+        <Br />
+        <Span>Children content</Span>
+      </Div>
+    )
+  }}
+  propsJsonSchema={SidebarPropsJsonSchema}
+  block
+/>

package/index.cssx.styl

@@ -0,0 +1,18 @@
+.root
+  height 100%
+  flex-direction row
+  flex-shrink 1
+
+  &.right
+    flex-direction row-reverse
+
+.sidebar
+  flex-direction column
+  display none
+  flex-grow 0
+  &.open
+    display flex
+
+.main
+  flex-direction column
+  flex 1

package/index.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<SidebarProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface SidebarProps {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the sidebar container */
+    sidebarStyle?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the main content container */
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Content rendered inside the main area */
+    children?: ReactNode;
+    /** Model controlling sidebar open state */
+    $open?: any;
+    /** Sidebar position relative to the content @default 'left' */
+    position?: 'left' | 'right';
+    /** Disable sidebar toggling @default false */
+    disabled?: boolean;
+    /** Sidebar width in density-independent pixels @default 264 */
+    width?: number;
+    /** Render sidebar content only when open @default false */
+    lazy?: boolean;
+    /** Custom renderer for sidebar content */
+    renderContent?: () => ReactNode;
+}

package/index.mdx.cssx.styl

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

package/index.tsx

@@ -0,0 +1,69 @@
+import { type ReactNode } from 'react'
+import { ScrollView, View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed, useColors } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import './index.cssx.styl'
+
+export default observer(themed('Sidebar', Sidebar))
+
+export const _PropsJsonSchema = {/* SidebarProps */}
+
+export interface SidebarProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the sidebar container */
+  sidebarStyle?: StyleProp<ViewStyle>
+  /** Custom styles applied to the main content container */
+  contentStyle?: StyleProp<ViewStyle>
+  /** Content rendered inside the main area */
+  children?: ReactNode
+  /** Model controlling sidebar open state */
+  $open?: any
+  /** Sidebar position relative to the content @default 'left' */
+  position?: 'left' | 'right'
+  /** Disable sidebar toggling @default false */
+  disabled?: boolean
+  /** Sidebar width in density-independent pixels @default 264 */
+  width?: number
+  /** Render sidebar content only when open @default false */
+  lazy?: boolean
+  /** Custom renderer for sidebar content */
+  renderContent?: () => ReactNode
+}
+
+function Sidebar ({
+  style = [],
+  sidebarStyle,
+  contentStyle,
+  children,
+  $open,
+  position = 'left',
+  disabled = false,
+  width = 264,
+  lazy = false,
+  renderContent
+}: SidebarProps): ReactNode {
+  const getColor = useColors()
+
+  const flattenedStyle = StyleSheet.flatten(style) || {}
+  const { backgroundColor = getColor('bg-main-strong'), ...restStyle } = flattenedStyle
+
+  const open = disabled ? false : $open?.get()
+
+  function renderSidebarContent (): ReactNode {
+    const render = lazy ? open : true
+    if (!render) return null
+    return renderContent && renderContent()
+  }
+
+  return pug`
+    Div.root(style=restStyle styleName=[position])
+      ScrollView.sidebar(
+        contentContainerStyle=[{ flex: 1 }, sidebarStyle]
+        styleName={open}
+        style={ width, backgroundColor }
+      )= renderSidebarContent()
+      View.main(style=contentStyle)= children
+  `
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@startupjs-ui/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/div": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}