@startupjs-ui/user 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# 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/user
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Bug Fixes
+
+* **user/readme:** minor ([56b16c1](https://github.com/startupjs/startupjs-ui/commit/56b16c1ebce2e5b5ce98ae672901866544e47dba))
+
+
+### 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))
+* **user:** refactor User component ([c8d5494](https://github.com/startupjs/startupjs-ui/commit/c8d5494d2d709cb5f676118b524893e8207b39de))

package/README.mdx

@@ -0,0 +1,175 @@
+import { useState, useCallback } from 'react'
+import { pug, styl } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import Div from '@startupjs-ui/div'
+import Br from '@startupjs-ui/br'
+import Span from '@startupjs-ui/span'
+import User, { _PropsJsonSchema as UserPropsJsonSchema } from './index'
+
+# User
+
+Inherits [Div props](/docs/components/Div).
+
+User is used to display information about users. It uses [Avatar](/docs/components/Avatar) component to display user avatar.
+
+```jsx
+import { User } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return (
+  <User avatarUrl='/img/avatar1.jpeg' />
+)
+```
+
+## Sizes
+
+Size is `m` by default. It can be changed by changing `size` prop. Possible values of property can be found in the `Sandbox` section at the bottom of the page.
+
+```jsx example
+return (
+  <Div>
+    <User
+      size='s'
+      avatarUrl='/img/avatar2.jpeg'
+      name='John Doe'
+      description='s size'
+    />
+    <Br />
+    <User
+      avatarUrl='/img/avatar3.jpeg'
+      name='John Doe'
+      description='m size, this is the default size'
+    />
+    <Br />
+    <User
+      size='l'
+      avatarUrl='/img/avatar1.jpeg'
+      name='John Doe'
+      description='l size'
+    />
+  </Div>
+)
+```
+
+## User status
+
+To display user online status on avatar you can pass string `online` or `away` to property `status`.
+
+```jsx example
+return (
+  <Div>
+    <User
+      status='online'
+      avatarUrl='/img/avatar1.jpeg'
+      name='John Doe'
+      description='Online description'
+    />
+    <Br />
+    <User
+      status='away'
+      avatarUrl='/img/avatar2.jpeg'
+      name='John Doe'
+      description='Offline description'
+    />
+  </Div>
+)
+```
+
+## User avatar position
+
+Avatar position can be modified by passing string `left` (default) or `right` to `avatarPosition` property.
+
+```jsx example
+return (
+  <User
+    avatarPosition='right'
+    avatarUrl='/img/avatar1.jpeg'
+    name='John Doe'
+    description='The cat is a domestic species of small carnivorous mammal'
+  />
+)
+```
+
+## Actions
+
+Passed handler to `onPress` property will be called when the user taps the component.
+
+```jsx example
+const [clicked, setClicked] = useState(0)
+return (
+  <Div>
+    <User
+      avatarUrl='/img/avatar1.jpeg'
+      name='John Doe'
+      description='The cat is a domestic species of small carnivorous mammal'
+      onPress={() => setClicked(clicked + 1)}
+    />
+    <Br />
+    <Span>
+      {clicked ? `User clicked ${clicked} ${clicked === 1 ? 'time' : 'times'}` : 'Click on user'}
+    </Span>
+  </Div>
+)
+```
+
+## Custom status icon
+
+You can provide custom components for the status icon using `statusComponents` prop.
+
+```jsx example
+const AbsentStatus = useCallback(({ style }) => (
+  <Div style={style} styleName='absent'>
+    <Div styleName='absent-line absent-line-1' />
+    <Div styleName='absent-line absent-line-2' />
+  </Div>
+))
+
+return pug`
+  Div
+    User(
+      name='John Doe'
+      description='The cat is a domestic species of small carnivorous mammal'
+      avatarUrl='/img/avatar1.jpeg'
+      status='online'
+    )
+    Br
+    User(
+      name='John Doe'
+      description='The cat is a domestic species of small carnivorous mammal'
+      avatarUrl='/img/avatar2.jpeg'
+      status='absent'
+      statusComponents={
+        absent: AbsentStatus
+      }
+    )
+`
+
+styl`
+  .absent
+    background-color white
+    justify-content center
+    &-line
+      position absolute
+      height 2px
+      left 0
+      right 0
+      background-color red
+      &-1
+        transform rotate(45deg)
+      &-2
+        transform rotate(-45deg)
+`
+```
+
+## Sandbox
+
+<Sandbox
+  Component={User}
+  propsJsonSchema={UserPropsJsonSchema}
+  props={{
+    onPress: () => alert('"onPress" event on "User" component'),
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,47 @@
+.root
+  flex-direction row
+  align-items center
+
+  &.right
+    flex-direction row-reverse
+
+.avatar
+  &.left
+    margin-right 1u
+
+  &.right
+    margin-left 1u
+
+.userInfo
+  flex-shrink 1
+
+.name
+.description
+  &.right
+    text-align right
+
+.name,
+  &.xs
+  &.s
+  &.m
+    font(body2)
+
+  &.l
+  &.xl
+    font(body1)
+
+  &.xxl
+    font(h5)
+
+.description
+  &.xs
+  &.s
+  &.m
+    font(caption)
+
+  &.l
+  &.xl
+    font(body2)
+
+  &.xxl
+    font(body1)

package/index.d.ts

@@ -0,0 +1,34 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type AvatarProps } from '@startupjs-ui/avatar';
+import { type DivProps } from '@startupjs-ui/div';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<UserProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface UserProps extends DivProps {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the name text */
+    nameStyle?: StyleProp<TextStyle>;
+    /** Custom styles applied to the description text */
+    descriptionStyle?: StyleProp<TextStyle>;
+    /** Avatar image source URL */
+    avatarUrl?: string;
+    /** Additional description text below the name */
+    description?: string;
+    /** Maximum number of lines for the description */
+    descriptionNumberOfLines?: number;
+    /** User name displayed next to the avatar */
+    name?: string;
+    /** Position of the avatar relative to text @default 'left' */
+    avatarPosition?: 'left' | 'right';
+    /** Size preset forwarded to avatar and texts @default 'm' */
+    size?: 's' | 'm' | 'l';
+    /** Status indicator name for the avatar */
+    status?: 'online' | 'away' | string;
+    /** Custom components for avatar statuses */
+    statusComponents?: AvatarProps['statusComponents'];
+}

package/index.tsx

@@ -0,0 +1,81 @@
+import { type ReactNode } from 'react'
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Avatar, { type AvatarProps } from '@startupjs-ui/avatar'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+export default observer(themed('User', User))
+
+export const _PropsJsonSchema = {/* UserProps */} // used in docs generation
+
+export interface UserProps extends DivProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the name text */
+  nameStyle?: StyleProp<TextStyle>
+  /** Custom styles applied to the description text */
+  descriptionStyle?: StyleProp<TextStyle>
+  /** Avatar image source URL */
+  avatarUrl?: string
+  /** Additional description text below the name */
+  description?: string
+  /** Maximum number of lines for the description */
+  descriptionNumberOfLines?: number
+  /** User name displayed next to the avatar */
+  name?: string
+  /** Position of the avatar relative to text @default 'left' */
+  avatarPosition?: 'left' | 'right'
+  /** Size preset forwarded to avatar and texts @default 'm' */
+  size?: 's' | 'm' | 'l'
+  /** Status indicator name for the avatar */
+  status?: 'online' | 'away' | string
+  /** Custom components for avatar statuses */
+  statusComponents?: AvatarProps['statusComponents']
+}
+
+function User ({
+  style,
+  nameStyle,
+  descriptionStyle,
+  avatarUrl,
+  description,
+  descriptionNumberOfLines,
+  name,
+  avatarPosition = 'left',
+  size = 'm',
+  status,
+  statusComponents,
+  ...props
+}: UserProps): ReactNode {
+  return pug`
+    Div.root(
+      style=style
+      styleName=[avatarPosition]
+      ...props
+    )
+      Avatar.avatar(
+        styleName=[avatarPosition]
+        size=size
+        status=status
+        src=avatarUrl
+        statusComponents=statusComponents
+      )= name
+      View.userInfo
+        Span.name(
+          style=nameStyle
+          styleName=[size, avatarPosition]
+          numberOfLines=1
+          bold
+        )= name
+        if description
+          Span.description(
+            style=descriptionStyle
+            styleName=[size, avatarPosition]
+            numberOfLines=descriptionNumberOfLines
+            description
+          )= description
+  `
+}

package/package.json

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