@startupjs-ui/menu 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/menu
+
+
+
+
+
+## [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))
+* **menu:** refactor Menu component. Fix useColors types. ([ffd4671](https://github.com/startupjs/startupjs-ui/commit/ffd46719c308f99d856d8020ebfc070bb479ab28))

package/MenuItem/index.cssx.styl

@@ -0,0 +1,28 @@
+_borderSize = 2px
+
+.border
+  position absolute
+
+  &.top
+  &.bottom
+    left 0
+    right 0
+    height _borderSize
+
+  &.top
+    top 0
+
+  &.bottom
+    bottom 0
+
+  &.left
+  &.right
+    top 0
+    bottom 0
+    width _borderSize
+
+  &.left
+    left 0
+
+  &.right
+    right 0

package/MenuItem/index.tsx

@@ -0,0 +1,83 @@
+import { useContext, type ReactNode } from 'react'
+import { 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 Icon, { type IconProps } from '@startupjs-ui/icon'
+import Item, { type ItemProps } from '@startupjs-ui/item'
+import Span from '@startupjs-ui/span'
+import MenuContext from '../context'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* MenuItemProps */} // used in docs generation
+
+export interface MenuItemProps extends Omit<ItemProps, 'style' | 'onPress' | 'icon' | 'to'> {
+  /** Custom styles applied to the content wrapper */
+  containerStyle?: StyleProp<ViewStyle>
+  /** Content rendered inside the item */
+  children?: ReactNode
+  /** Highlight item as active @default false */
+  active?: boolean
+  /** Active border position @default 'none' */
+  activeBorder?: 'top' | 'bottom' | 'left' | 'right' | 'none'
+  /** Color applied to active item text, icon and border */
+  activeColor?: string
+  /** Render text in bold */
+  bold?: boolean
+  /** Icon displayed alongside the label */
+  icon?: IconProps['icon']
+  /** Icon position relative to the label @default 'left' */
+  iconPosition?: 'left' | 'right'
+  /** Text/icon color override */
+  color?: string
+  /** Navigation target passed to underlying Item */
+  to?: string
+  /** Handler called on item press */
+  onPress?: ItemProps['onPress']
+}
+
+function MenuItem ({
+  children,
+  containerStyle,
+  active = false,
+  bold,
+  icon,
+  ...props
+}: MenuItemProps): ReactNode {
+  const context = useContext(MenuContext)
+  const getColor = useColors()
+
+  // TODO
+  // we should think about a better api
+  // and remove color, activeColor, activeBorder props
+  let color: string | undefined = props.color ?? context.color
+  color = getColor(color) ?? color
+  let activeColor = props.activeColor ?? context.activeColor
+  activeColor = getColor(activeColor) ?? activeColor
+  const activeBorder = props.activeBorder ?? context.activeBorder ?? 'none'
+  const iconPosition = props.iconPosition ?? context.iconPosition ?? 'left'
+
+  // TODO: prevent click if already active (for link and for div)
+  color = active ? (activeColor ?? getColor('text-primary')) : (color ?? getColor('text-main'))
+  const borderStyle: StyleProp<ViewStyle> = { backgroundColor: activeColor ?? getColor('border-primary') }
+
+  return pug`
+    Div
+      Item(...props)
+        if icon && iconPosition === 'left'
+          Item.Left
+            Icon(icon=icon style={ color })
+
+        Item.Content(style=[containerStyle])
+          Span(bold=bold style={ color })= children
+
+        if icon && iconPosition === 'right'
+          Item.Right
+            Icon(icon=icon style={ color })
+
+      if activeBorder !== 'none' && active
+        Div.border(styleName=[activeBorder] style=borderStyle)
+  `
+}
+
+export default observer(themed('MenuItem', MenuItem))

package/README.mdx

@@ -0,0 +1,311 @@
+import { useState } from 'react'
+import { pug, u } from 'startupjs'
+import useRouter from 'startupjs/useRouter'
+import { faShareAlt, faHouseUser, faTable } from '@fortawesome/free-solid-svg-icons'
+import Menu, { _PropsJsonSchema as MenuPropsJsonSchema } from './index'
+import MenuItem, { _PropsJsonSchema as MenuItemPropsJsonSchema } from './MenuItem'
+import Collapse from '@startupjs-ui/collapse'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Menu
+
+Inherits [Div props](/docs/components/Div).
+
+Menu displays a list of choices and also can be used for navigation.
+
+```jsx
+import { Menu } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [active, setActive] = useState('option-1')
+return (
+  <Menu>
+    <Menu.Item
+      active={active === 'option-1'}
+      onPress={() => setActive('option-1')}
+    >
+      Option-1
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-2'}
+      onPress={() => setActive('option-2')}
+    >
+      Option-2
+    </Menu.Item>
+  </Menu>
+)
+```
+
+## Highlighted active item
+
+By default the active menu item is not highlighted. To highlight it use the `activeBorder` property.
+
+```jsx example
+const [active, setActive] = useState('option-1')
+return (
+  <Menu activeBorder='left'>
+    <Menu.Item
+      active={active === 'option-1'}
+      onPress={() => setActive('option-1')}
+    >
+      Option-1
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-2'}
+      onPress={() => setActive('option-2')}
+    >
+      Option-2
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-3'}
+      onPress={() => setActive('option-3')}
+    >
+      Option-3
+    </Menu.Item>
+  </Menu>
+)
+```
+
+## Horizontal menu
+
+By default the menu shows vertically. To make it horizontal, you need pass the string `horizontal` to the `variant` property.
+
+```jsx example
+const [active, setActive] = useState('option-1')
+return (
+  <Menu variant='horizontal'>
+    <Menu.Item
+      active={active === 'option-1'}
+      onPress={() => setActive('option-1')}
+    >
+      Option-1
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-2'}
+      onPress={() => setActive('option-2')}
+    >
+      Option-2
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-3'}
+      onPress={() => setActive('option-3')}
+    >
+      Option-3
+    </Menu.Item>
+  </Menu>
+)
+```
+
+## Menu item icon
+
+To display icon in menu item pass the `icon` property to it. Position of icon can be changed by passing `iconPosition` to `Menu` component (`left` by default) and can be override in menu item.
+
+```jsx example
+const [active, setActive] = useState('option-1')
+return (
+  <Menu variant='horizontal'>
+    <Menu.Item
+      active={active === 'option-1'}
+      icon={faShareAlt}
+      onPress={() => setActive('option-1')}
+    >
+      Option-1
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-2'}
+      icon={faHouseUser}
+      onPress={() => setActive('option-2')}
+    >
+      Option-2
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-3'}
+      icon={faTable}
+      onPress={() => setActive('option-3')}
+    >
+      Option-3
+    </Menu.Item>
+  </Menu>
+)
+```
+
+## Change color of active item
+
+By default, the active menu item has a `primary` color. Use the `activeColor` property to set the desired color for the active element. This property will also change the color of border and icon (if you passed an `activeBorder` property for a Menu or an `icon` for a Menu.Item). `activeColor` accepts color as a string which will be compatible with the CSS color property.(ex. `red`, `#fff`, `rgb(123, 23, 122)`)
+
+```jsx example
+const [active, setActive] = useState('option-1')
+return (
+  <Menu
+    activeBorder='bottom'
+    variant='horizontal'
+    activeColor='rgb(123, 23, 122)'
+  >
+    <Menu.Item
+      active={active === 'option-1'}
+      icon={faShareAlt}
+      onPress={() => setActive('option-1')}
+    >
+      Option-1
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-2'}
+      icon={faHouseUser}
+      onPress={() => setActive('option-2')}
+    >
+      Option-2
+    </Menu.Item>
+    <Menu.Item
+      active={active === 'option-3'}
+      icon={faTable}
+      onPress={() => setActive('option-3')}
+    >
+      Option-3
+    </Menu.Item>
+  </Menu>
+)
+```
+
+## Menu item as link
+
+Sometimes you want using menu item as link, for example in navigation menu. See below how you can do this.
+
+```jsx example
+const { usePathname } = useRouter()
+const url = usePathname()
+const components = [
+  { label: 'Menu', to: '/docs/Menu' },
+  { label: 'Div', to: '/docs/Div' },
+  { label: 'Button', to: '/docs/Button' }
+]
+return pug`
+  Menu(activeBorder='left')
+    each component, index in components
+      - const to = component.to
+      Menu.Item(
+        key=index
+        active=to === url
+        to=to
+      )= component.label
+`
+```
+
+## Complex interaction (integration with other components)
+
+An example of a collapsible menu with submenus nested in.
+
+```jsx example
+const [showMenu, setShowMenu] = useState(true)
+const [showSubMenu, setShowSubMenu] = useState(false)
+const [active, setActive] = useState('option-1')
+return (
+  <Collapse
+    variant='pure'
+    open={showMenu}
+    onChange={() => setShowMenu(!showMenu)}
+  >
+    <Collapse.Header>
+      <Menu.Item
+        style={{ paddingLeft: 0 }}
+        active={showMenu}
+      >
+        Main menu
+      </Menu.Item>
+    </Collapse.Header>
+    <Collapse.Content>
+      <Menu activeBorder='left'>
+        <Menu.Item
+          active={active === 'option-1'}
+          onPress={() => setActive('option-1')}
+        >
+          Option-1
+        </Menu.Item>
+        <Menu.Item
+          active={active === 'option-2'}
+          onPress={() => setActive('option-2')}
+        >
+          Option-2
+        </Menu.Item>
+        <Collapse
+          style={{ marginLeft: u(2) }}
+          variant='pure'
+          open={showSubMenu}
+          onChange={() => setShowSubMenu(!showSubMenu)}
+        >
+          <Collapse.Header>
+            <Menu.Item
+              style={{ paddingLeft: 0 }}
+              active={showSubMenu}
+            >
+              Option-3
+            </Menu.Item>
+          </Collapse.Header>
+          <Collapse.Content>
+            <Menu activeBorder='left'>
+              <Menu.Item
+                active={active === 'option-4'}
+                onPress={() => setActive('option-4')}
+              >
+                Option-4
+              </Menu.Item>
+              <Menu.Item
+                active={active === 'option-5'}
+                onPress={() => setActive('option-5')}
+              >
+                Option-5
+              </Menu.Item>
+            </Menu>
+          </Collapse.Content>
+        </Collapse>
+      </Menu>
+    </Collapse.Content>
+  </Collapse>
+)
+```
+
+## Sandbox
+
+### Menu
+
+<Sandbox
+  Component={Menu}
+  propsJsonSchema={MenuPropsJsonSchema}
+  props={{
+    children: [
+      <MenuItem
+        key='option-1'
+        icon={faHouseUser}
+        active={true}
+        onPress={() => alert('"onPress" event on "Option-1"')}
+      >
+        Option-1
+      </MenuItem>,
+      <MenuItem
+        key='option-2'
+        active={false}
+        onPress={() => alert('"onPress" event on "Option-2"')}
+      >
+        Option-2
+      </MenuItem>
+    ]
+  }}
+/>
+
+### Menu.Item
+
+<Sandbox
+  Component={Menu.Item}
+  propsJsonSchema={MenuItemPropsJsonSchema}
+  extraParams={{
+    icon: {
+      showIconSelect: true
+    }
+  }}
+  props={{
+    children: 'Option-1',
+    onPress: () => alert('"onPress" event on "Option-1"')
+  }}
+/>

package/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+export interface MenuContextValue {
+  activeBorder?: 'top' | 'bottom' | 'left' | 'right' | 'none'
+  activeColor?: string
+  iconPosition?: 'left' | 'right'
+  color?: string
+}
+
+export default createContext<MenuContextValue>({})

package/index.cssx.styl

@@ -0,0 +1,3 @@
+.root
+  &.horizontal
+    flex-direction row

package/index.d.ts

@@ -0,0 +1,25 @@
+/* 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 { type DivProps } from '@startupjs-ui/div';
+import './index.cssx.styl';
+export declare const _PropsJsonSchema: {};
+export interface MenuProps extends Omit<DivProps, 'variant' | 'style'> {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside Menu */
+    children?: ReactNode;
+    /** Active border position passed to Menu items */
+    activeBorder?: 'top' | 'bottom' | 'left' | 'right' | 'none';
+    /** Color applied to active Menu items */
+    activeColor?: string;
+    /** Icon position applied to nested Menu items @default 'left' */
+    iconPosition?: 'left' | 'right';
+    /** Layout orientation @default 'vertical' */
+    variant?: 'vertical' | 'horizontal';
+}
+declare const ObservedMenu: any;
+export { default as MenuItem } from './MenuItem';
+export default ObservedMenu;

package/index.tsx

@@ -0,0 +1,55 @@
+import { useMemo, type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import MenuItem from './MenuItem'
+import Context, { type MenuContextValue } from './context'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* MenuProps */} // used in docs generation
+
+export interface MenuProps extends Omit<DivProps, 'variant' | 'style'> {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside Menu */
+  children?: ReactNode
+  /** Active border position passed to Menu items */
+  activeBorder?: 'top' | 'bottom' | 'left' | 'right' | 'none'
+  /** Color applied to active Menu items */
+  activeColor?: string
+  /** Icon position applied to nested Menu items @default 'left' */
+  iconPosition?: 'left' | 'right'
+  /** Layout orientation @default 'vertical' */
+  variant?: 'vertical' | 'horizontal'
+}
+
+function Menu ({
+  style,
+  children,
+  variant = 'vertical',
+  activeBorder,
+  iconPosition,
+  activeColor,
+  ...props
+}: MenuProps): ReactNode {
+  const value = useMemo<MenuContextValue>(() => {
+    return { activeBorder, activeColor, iconPosition }
+  }, [activeBorder, activeColor, iconPosition])
+
+  return pug`
+    Context.Provider(value=value)
+      Div.root(
+        style=style
+        styleName=[variant]
+        ...props
+      )= children
+  `
+}
+
+const ObservedMenu: any = observer(themed('Menu', Menu))
+
+ObservedMenu.Item = MenuItem
+
+export { default as MenuItem } from './MenuItem'
+export default ObservedMenu

package/package.json

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