@startupjs-ui/item 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/item
+
+
+
+
+
+## [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))
+* **item:** refactor Item component ([a0ed18a](https://github.com/startupjs/startupjs-ui/commit/a0ed18aaca510446fbdad771a4f6418acc1aa63f))

package/README.mdx

@@ -0,0 +1,100 @@
+import { pug } from 'startupjs'
+import { Image } from 'react-native'
+import { u } from 'startupjs'
+import Icon from '@startupjs-ui/icon'
+import Item, { _PropsJsonSchema as ItemPropsJsonSchema } from './index'
+import Span from '@startupjs-ui/span'
+import { faTrashAlt, faShareAlt } from '@fortawesome/free-solid-svg-icons'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Item
+
+Item is a basic component that is a wrapper over the content with the ability to position it and the ability to display an icon or image.
+
+```jsx
+import { Item } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return pug`
+  Item Example
+`
+```
+
+## Icon
+
+The icon can be added using the `icon` property, which will be displayed on the left side of the component.
+
+```jsx example
+return pug`
+  Item(icon=faTrashAlt) Icon
+`
+```
+
+## Image
+
+The image can be added using the `url` property, which will be displayed on the left side of the component. The `url` property takes precedence over the `icon` property if both are passed.
+
+```jsx example
+return pug`
+  Item(url="https://i.pinimg.com/736x/95/30/41/953041070f000d45c05c912005f63724.jpg") Image
+`
+```
+
+## Item as link
+
+By passing the url to the `to` property, the component will behave like a link.
+
+```jsx example
+return pug`
+  Item(to='/docs/Icon') Icon component
+`
+```
+
+## Actions
+
+Passed handler to `onPress` property will be called when the user taps the component.
+
+```jsx example
+return pug`
+  Item(onPress=()=> alert('click')) Click me
+`
+```
+
+## Advanced usage
+
+Item consists of three parts - `Left`, `Content` and `Right`. These parts can be used to add custom markup, where:
+
+- `Left` part is used instead of `icon` and `url` properties and inserts its content into the left side of the component.
+
+- `Content` part is used instead of `children` and inserts its content between `Left` and `Right` parts.
+
+- `Right` part inserts its content into the right side of the component.
+
+```jsx example
+return pug`
+  Item(onPress=()=> alert('click'))
+    Item.Left
+      Image(
+        style={ width: u(3), height: u(3) }
+        source={ uri: 'https://i.pinimg.com/736x/95/30/41/953041070f000d45c05c912005f63724.jpg' }
+      )
+    Item.Content
+      Span Content
+    Item.Right
+      Icon(icon=faShareAlt)
+`
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Item}
+  propsJsonSchema={ItemPropsJsonSchema}
+  props={{
+    children: 'Item',
+    icon: faTrashAlt
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,18 @@
+.root
+  padding 1u 2u
+  flex-direction row
+  align-items center
+
+.image
+  width 4u
+  height 4u
+  radius(circle)
+
+.content
+  flex-grow 1
+
+.left
+  margin-right 1u
+
+.right
+  margin-left 1u

package/index.d.ts

@@ -0,0 +1,43 @@
+/* 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 { type IconProps } from '@startupjs-ui/icon';
+import './index.cssx.styl';
+export declare const _PropsJsonSchema: {};
+export interface ItemProps extends Omit<DivProps, 'style' | 'onPress'> {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside Item */
+    children?: ReactNode;
+    /** Navigation target passed to Link wrapper */
+    to?: string;
+    /** Image URL displayed on the left side */
+    url?: string;
+    /** Icon displayed on the left side when no image is provided */
+    icon?: IconProps['icon'];
+    /** onPress handler */
+    onPress?: (event: any) => void;
+}
+export interface ItemLeftProps {
+    /** Custom styles applied to the left part */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside left part */
+    children?: ReactNode;
+}
+export interface ItemContentProps {
+    /** Custom styles applied to the content wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside the content area */
+    children?: ReactNode;
+}
+export interface ItemRightProps {
+    /** Custom styles applied to the right part */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside right part */
+    children?: ReactNode;
+}
+declare const ObservedItem: any;
+export default ObservedItem;

package/index.tsx

@@ -0,0 +1,163 @@
+import { Children, type ReactNode } from 'react'
+import { Image, 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 Icon, { type IconProps } from '@startupjs-ui/icon'
+import Link from '@startupjs-ui/link'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* ItemProps */} // used in docs generation
+
+export interface ItemProps extends Omit<DivProps, 'style' | 'onPress'> {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside Item */
+  children?: ReactNode
+  /** Navigation target passed to Link wrapper */
+  to?: string
+  /** Image URL displayed on the left side */
+  url?: string
+  /** Icon displayed on the left side when no image is provided */
+  icon?: IconProps['icon']
+  /** onPress handler */
+  onPress?: (event: any) => void
+}
+
+function Item ({
+  style,
+  children,
+  to,
+  url,
+  icon,
+  onPress,
+  ...props
+}: ItemProps): ReactNode {
+  let Wrapper: any
+  const extraProps: Record<string, any> = {}
+
+  if (to) {
+    Wrapper = Link
+    extraProps.to = to
+    extraProps.block = true
+  } else {
+    Wrapper = Div
+  }
+
+  let left: ReactNode = null
+  let content: ReactNode = null
+  let right: ReactNode = null
+  const contentChildren: ReactNode[] = []
+
+  Children.toArray(children).forEach((child: any) => {
+    if (!child || typeof child !== 'object') {
+      contentChildren.push(child)
+      return
+    }
+
+    if (ItemLeft === child.type) {
+      left = child
+      return
+    }
+
+    if (ItemRight === child.type) {
+      right = child
+      return
+    }
+
+    if (ItemContent === child.type) {
+      content = child
+      return
+    }
+
+    contentChildren.push(child)
+  })
+
+  if (!left) {
+    if (icon) {
+      left = pug`
+        ItemLeft
+          Icon(icon=icon)
+      `
+    } else if (url) {
+      left = pug`
+        ItemLeft
+          Image.image(source={ uri: url })
+      `
+    }
+  }
+
+  content = content ??
+    (contentChildren.length === 1
+      ? pug`
+        ItemContent= contentChildren[0]
+      `
+      : pug`
+        ItemContent= contentChildren
+      `
+    )
+
+  return pug`
+    Wrapper.root(
+      style=style
+      variant="highlight"
+      onPress=onPress
+      ...extraProps
+      ...props
+    )
+      = left
+      = content
+      = right
+  `
+}
+
+export interface ItemLeftProps {
+  /** Custom styles applied to the left part */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside left part */
+  children?: ReactNode
+}
+
+function ItemLeft ({ style, children }: ItemLeftProps): ReactNode {
+  return pug`
+    Div.left(style=style)= children
+  `
+}
+
+export interface ItemContentProps {
+  /** Custom styles applied to the content wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside the content area */
+  children?: ReactNode
+}
+
+function ItemContent ({ style, children }: ItemContentProps): ReactNode {
+  return pug`
+    if typeof children === 'string'
+      Span.content(style=style numberOfLines=1)= children
+    else
+      Div.content(style=style)= children
+  `
+}
+
+export interface ItemRightProps {
+  /** Custom styles applied to the right part */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside right part */
+  children?: ReactNode
+}
+
+function ItemRight ({ style, children }: ItemRightProps): ReactNode {
+  return pug`
+    Div.right(style=style)= children
+  `
+}
+
+const ObservedItem: any = observer(themed('Item', Item))
+
+ObservedItem.Left = ItemLeft
+ObservedItem.Content = ItemContent
+ObservedItem.Right = ItemRight
+
+export default ObservedItem

package/package.json

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