rn-vs-lb 1.0.69 → 1.0.71

package/components/Chat/ChatItem.stories.tsx

@@ -28,6 +28,8 @@ const meta: Meta<ChatItemProps> = {
 export default meta;
 
 const Template: StoryFn<ChatItemProps> = (args) => <ChatItem {...args} />;
+const getItemLabel = (item: ChatItemProps, idx: number) =>
+  item.variant === 'person' ? item.chatName ?? item.senderFullName : item.chatName ?? `chat-${idx}`;
 
 export const PersonOnline = Template.bind({});
 PersonOnline.args = {
@@ -38,7 +40,7 @@ PersonOnline.args = {
   isUserOnline: true,
   lastMessage: 'See you at 6pm near the station',
   createdAt: '10:42',
-  unread: '+',
+  unread: 'new',
 };
 
 export const PersonOffline = Template.bind({});
@@ -61,7 +63,7 @@ GroupWithSender.args = {
     'https://images.unsplash.com/photo-1519340241574-2cec6aef0c01?auto=format&fit=crop&w=200&q=60',
   lastMessage: 'Slides are uploaded to Drive, check the link above.',
   createdAt: 'Yesterday',
-  unread: '+',
+  unread: 'new',
 };
 
 export const Bot = Template.bind({});
@@ -94,7 +96,7 @@ export const ListOfItems: StoryFn = () => {
       isUserOnline: true,
       lastMessage: 'See you soon!',
       createdAt: '10:42',
-      unread: '+',
+      unread: 'new',
     },
     {
       variant: 'person',
@@ -113,7 +115,7 @@ export const ListOfItems: StoryFn = () => {
         'https://images.unsplash.com/photo-1519340241574-2cec6aef0c01?auto=format&fit=crop&w=200&q=60',
       lastMessage: 'Standup in 5 minutes.',
       createdAt: '08:55',
-      unread: '+',
+      unread: 'new',
     },
     {
       variant: 'group',
@@ -166,7 +168,7 @@ export const ListOfItems: StoryFn = () => {
         <ChatItem
           key={idx}
           {...item}
-          onPress={createPressHandler(item.chatName ?? item.senderFullName ?? `chat-${idx}`)}
+          onPress={createPressHandler(getItemLabel(item, idx))}
         />
       ))}
     </ScrollView>

package/components/Chat/ChatItem.styles.ts

@@ -3,65 +3,98 @@ import { ThemeType } from '../../theme';
 
 export const getStyles = (theme: ThemeType) => StyleSheet.create({
   userContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    backgroundColor: theme.white,
   },
   profileSection: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     flex: 1,
   },
   avatar: {
-    width: 60,
-    height: 60,
-    borderRadius: 40,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
   },
   userInfo: {
     flex: 1,
     marginLeft: 12,
+    minHeight: 56,
+    justifyContent: 'center',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
   },
-  senderContainer: {
+  headerRight: {
     flexDirection: 'row',
-    alignItems: "center",
-    // justifyContent: "space-between",
-  },
-  unread: {
-    // top:10,
-    marginLeft: 8,
-    width:18,
-    height: 18,
-    textAlign:"center",
+    alignItems: 'center',
+    gap: 8,
+  },
+  chatTitle: {
+    flex: 1,
+  },
+  unreadBadge: {
+    minHeight: 20,
+    paddingHorizontal: 8,
+    borderRadius: 999,
     backgroundColor: theme.success,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+  unreadDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: theme.white,
+  },
+  unreadText: {
     color: theme.white,
-    borderRadius: 20,
-    fontSize: 12,
-    lineHeight: 16,
+    fontSize: 10,
+    lineHeight: 12,
+    fontWeight: '700',
+    letterSpacing: 0.3,
+    textTransform: 'uppercase',
+  },
+  messageRow: {
+    marginTop: 4,
   },
   senderName: {
     fontSize: 14,
-    marginRight: 4,
+    color: theme.placeholder,
+  },
+  senderNameUnread: {
     color: theme.text,
+    fontWeight: '500',
   },
   senderMessage: {
     fontSize: 13,
     fontStyle: 'italic',
+    color: theme.placeholder,
   },
   timeAgo: {
-    fontSize: 13,
+    fontSize: 12,
     color: theme.placeholder,
+    fontWeight: '500',
+  },
+  timeAgoUnread: {
+    color: theme.text,
   },
 
   status: {
-    position: "absolute",
-    width:12,
+    position: 'absolute',
+    width: 12,
     height: 12,
     borderWidth: 2,
     borderColor: theme.white,
     borderRadius: 10,
     bottom: 0,
-    right:1,
+    right: 1,
   },
   online: {
     backgroundColor: theme.success,

package/components/Chat/ChatItem.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '../../theme';
 import { getStyles } from './ChatItem.styles';
 
 type BaseProps = {
-  unread?: string;
+  unread?: string | boolean;
   onPress?: () => void;
   createdAt?: string;
   lastMessage?: string;
@@ -40,26 +40,42 @@ export type ChatItemProps = PersonProps | GroupProps | BotProps;
 export const ChatItem: FC<ChatItemProps> = (props) => {
   const { theme, typography } = useTheme();
   const styles = getStyles(theme);
+  const hasUnread = Boolean(props.unread);
+  const unreadLabel =
+    typeof props.unread === 'string' && props.unread.trim().length > 0 && props.unread.trim() !== '+'
+      ? props.unread.trim().toUpperCase()
+      : 'NEW';
 
   const handlePress = () => props.onPress?.();
 
-  // Общий заголовок (верхняя строка) + бейдж непрочитанного
+  // Общий заголовок (верхняя строка) + время + бейдж непрочитанного
   const renderHeader = (title: string) => (
-    <View style={styles.senderContainer}>
-      <Text numberOfLines={1} ellipsizeMode="tail" style={typography.titleH6}>
+    <View style={styles.headerRow}>
+      <Text numberOfLines={1} ellipsizeMode="tail" style={[typography.titleH6, styles.chatTitle]}>
         {title}
       </Text>
-      {props.unread ? <Text style={styles.unread}>+</Text> : null}
+      <View style={styles.headerRight}>
+        {props.createdAt ? (
+          <Text style={[styles.timeAgo, hasUnread && styles.timeAgoUnread]}>{props.createdAt}</Text>
+        ) : null}
+        {hasUnread ? (
+          <View style={styles.unreadBadge}>
+            <View style={styles.unreadDot} />
+            <Text style={styles.unreadText}>{unreadLabel}</Text>
+          </View>
+        ) : null}
+      </View>
     </View>
   );
 
   // Превью последнего сообщения (нижний блок)
   const renderLastMessage = () => {
     if (!props.lastMessage) return null;
+    const previewStyle = [styles.senderName, hasUnread && styles.senderNameUnread];
 
     if (props.variant === 'person') {
       return (
-        <Text numberOfLines={2} ellipsizeMode="tail" style={styles.senderName}>
+        <Text numberOfLines={2} ellipsizeMode="tail" style={previewStyle}>
           {props.senderFullName}: <Text style={styles.senderMessage}>{props.lastMessage}</Text>
         </Text>
       );
@@ -67,7 +83,7 @@ export const ChatItem: FC<ChatItemProps> = (props) => {
 
     if (props.variant === 'group' && props.senderFullName) {
       return (
-        <Text numberOfLines={2} ellipsizeMode="tail" style={styles.senderName}>
+        <Text numberOfLines={2} ellipsizeMode="tail" style={previewStyle}>
           {props.senderFullName}: <Text style={styles.senderMessage}>{props.lastMessage}</Text>
         </Text>
       );
@@ -75,7 +91,7 @@ export const ChatItem: FC<ChatItemProps> = (props) => {
 
     // bot или group без senderFullName
     return (
-      <Text numberOfLines={2} ellipsizeMode="tail" style={styles.senderName}>
+      <Text numberOfLines={2} ellipsizeMode="tail" style={previewStyle}>
         {props.lastMessage}
       </Text>
     );
@@ -118,12 +134,7 @@ export const ChatItem: FC<ChatItemProps> = (props) => {
         {renderAvatar()}
         <View style={styles.userInfo}>
           {renderHeader(titleText)}
-
-          <View style={styles.senderContainer}>{renderLastMessage()}</View>
-
-          {props.lastMessage ? (
-            <Text style={styles.timeAgo}>{props.createdAt}</Text>
-          ) : null}
+          <View style={styles.messageRow}>{renderLastMessage()}</View>
         </View>
       </TouchableOpacity>
     </View>

package/components/Header/HeaderDefault.stories.tsx

@@ -13,6 +13,8 @@ const meta: Meta = {
     onBackPress: { action: 'back' },
     children: { control: false },
     infoTooltip: { control: false },
+    customBackButton: { control: false },
+    background: { control: 'color' },
   },
 };
 
@@ -77,3 +79,23 @@ WithInfoTooltip.render = (args) => (
     />
   </View>
 );
+
+export const WithCustomBackButton = Template.bind({});
+WithCustomBackButton.args = {
+  background: '#EAF5FF',
+};
+WithCustomBackButton.render = (args) => (
+  <View style={{ padding: 16, backgroundColor: '#f8f8f8' }}>
+    <HeaderDefault
+      {...args}
+      customBackButton={(
+        <TouchableOpacity
+          onPress={args.onBackPress}
+          style={{ backgroundColor: '#D7E9FF', borderRadius: 12, paddingHorizontal: 10, paddingVertical: 6 }}
+        >
+          <Text style={{ fontSize: 12, fontWeight: '600' }}>{'< Back'}</Text>
+        </TouchableOpacity>
+      )}
+    />
+  </View>
+);

package/components/Header/HeaderDefault.tsx

@@ -12,21 +12,35 @@ export enum AccessType {
 
 interface HeaderProps {
   title: string;
-  onBackPress: () => void;
+  onBackPress?: () => void;
   acceessType?: AccessType;
   children?: React.ReactNode;
   infoTooltip?: React.ReactNode;
+  background?: string;
+  customBackButton?: React.ReactNode;
 }
 
-const HeaderDefault: React.FC<HeaderProps> = ({ title, onBackPress, children, acceessType, infoTooltip }) => {
+const HeaderDefault: React.FC<HeaderProps> = ({
+  title,
+  onBackPress,
+  children,
+  acceessType,
+  infoTooltip,
+  background,
+  customBackButton,
+}) => {
   const { globalStyleSheet, theme, sizes, commonStyles, typography } = useTheme();
   const styles = getStyles({ globalStyleSheet, theme, sizes, commonStyles });
 
   return (
-    <View style={styles.container}>
-      <TouchableOpacity onPress={onBackPress}>
-        <Ionicons name="arrow-back" size={25} color={theme.text} />
-      </TouchableOpacity>
+    <View style={[styles.container, background ? { backgroundColor: background } : undefined]}>
+      {customBackButton ? (
+        customBackButton
+      ) : (
+        <TouchableOpacity onPress={onBackPress}>
+          <Ionicons name="arrow-back" size={25} color={theme.text} />
+        </TouchableOpacity>
+      )}
       <View style={[styles.titleContainer, !children && { paddingRight: sizes.xl }]}>
         <Text style={typography.titleH5}>{title}</Text>
         {acceessType && acceessType !== AccessType.COMMON && <Text style={styles.access}>{'\u2014'} {acceessType}</Text>}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-vs-lb",
-  "version": "1.0.69",
+  "version": "1.0.71",
   "description": "Expo Router + Storybook template ready for npm distribution.",
   "keywords": [
     "expo",