rn-vs-lb 1.0.64 → 1.0.66

package/components/Button/Button.stories.tsx

@@ -6,7 +6,7 @@ import { MaterialIcons } from '@expo/vector-icons';
 import Button, { MyButtonProps } from './Button';
 
 const meta: Meta<MyButtonProps> = {
-  title: 'Button/Base',
+  title: 'UI/Buttons/Base',
   component: Button,
   decorators: [
     (Story) => (

package/components/Button/DeleteAccountButton.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import { DeleteAccountButton, DeleteAccountButtonProps } from './DeleteAccountButton';
 
 const meta: Meta<DeleteAccountButtonProps> = {
-  title: 'Button/DeleteAccountButton',
+  title: 'UI/Buttons/DeleteAccountButton',
   component: DeleteAccountButton,
 };
 
@@ -18,9 +18,21 @@ const createMockDelete = (delay = 800) => async () => {
 export const Default = Template.bind({});
 Default.args = {
   deleteAccount: createMockDelete(),
+  triggerLabel: 'Delete account',
+  modalTitle: 'Confirm Deletion',
+  modalDescription:
+    'All your data, including profile, events, and chat history, will be permanently deleted. This process is irreversible and will be completed within 24 hours. Are you sure you want to proceed?',
+  cancelButtonLabel: 'Cancel',
+  confirmButtonLabel: 'Delete',
 };
 
 export const SlowNetwork = Template.bind({});
 SlowNetwork.args = {
   deleteAccount: createMockDelete(2000),
+  triggerLabel: 'Delete account',
+  modalTitle: 'Confirm Deletion',
+  modalDescription:
+    'All your data, including profile, events, and chat history, will be permanently deleted. This process is irreversible and will be completed within 24 hours. Are you sure you want to proceed?',
+  cancelButtonLabel: 'Cancel',
+  confirmButtonLabel: 'Delete',
 };

package/components/Button/DeleteAccountButton.tsx

@@ -6,9 +6,21 @@ import { ThemeType, useTheme } from '../../theme';
 
 export type DeleteAccountButtonProps = {
   deleteAccount: () => Promise<void>;
+  triggerLabel: string;
+  modalTitle: string;
+  modalDescription: string;
+  cancelButtonLabel: string;
+  confirmButtonLabel: string;
 }
 
-export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({ deleteAccount }) => {
+export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({
+  deleteAccount,
+  triggerLabel,
+  modalTitle,
+  modalDescription,
+  cancelButtonLabel,
+  confirmButtonLabel,
+}) => {
   const [modalVisible, setModalVisible] = useState(false);
   const { theme, typography } = useTheme();
   const styles = getStyles({ theme });
@@ -21,7 +33,7 @@ export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({ deleteAccoun
   return (
     <View style={styles.container}>
       <TouchableOpacity style={styles.deleteButton} onPress={() => setModalVisible(true)}>
-        <Text style={[typography.titleH6, { color: theme.red }]}>Delete account</Text>
+        <Text style={[typography.titleH6, { color: theme.red }]}>{triggerLabel}</Text>
       </TouchableOpacity>
 
       <Modal
@@ -32,17 +44,25 @@ export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({ deleteAccoun
       >
         <View style={styles.modalOverlay}>
           <View style={styles.modalContent}>
-            <Text style={typography.titleH5}>Confirm Deletion</Text>
+            <Text style={typography.titleH5}>{modalTitle}</Text>
             <Spacer size="xxs" />
             <Text style={[typography.body, { textAlign: "center" }]}>
-              All your data, including profile, events, and chat history, will be permanently deleted.
-              This process is irreversible and will be completed within 24 hours.
-              Are you sure you want to proceed?
+              {modalDescription}
             </Text>
             <Spacer size="lg" />
             <View style={styles.buttonRow}>
-              <Button onPress={() => setModalVisible(false)} style={styles.cancelButton} type="gray-outline" title="Cancel" />
-              <Button onPress={handleDeleteAccount} type="report-outline" style={styles.confirmButton} title="Delete" />
+              <Button
+                onPress={() => setModalVisible(false)}
+                style={styles.cancelButton}
+                type="gray-outline"
+                title={cancelButtonLabel}
+              />
+              <Button
+                onPress={handleDeleteAccount}
+                type="report-outline"
+                style={styles.confirmButton}
+                title={confirmButtonLabel}
+              />
             </View>
           </View>
         </View>

package/components/Button/PostButton.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import PostButton from './PostButton';
 
 const meta: Meta = {
-  title: 'Button/PostButton',
+  title: 'UI/Buttons/PostButton',
   component: PostButton,
   argTypes: {
     title: {

package/components/Button/TelegramFeedbackLink.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import { TelegramFeedbackLink, TelegramFeedbackLinkProps } from './TelegramFeedbackLink';
 
 const meta: Meta<TelegramFeedbackLinkProps> = {
-  title: 'Button/TelegramFeedbackLink',
+  title: 'UI/Buttons/TelegramFeedbackLink',
   component: TelegramFeedbackLink,
   argTypes: {
     link: {
@@ -20,9 +20,15 @@ const Template: StoryFn<TelegramFeedbackLinkProps> = (args) => <TelegramFeedback
 export const Default = Template.bind({});
 Default.args = {
   link: 'https://t.me/volunteer_support_bot',
+  title: 'Feedback & Bugs',
+  subtitle: 'Tap to write us in Telegram',
+  unsupportedLinkMessage: "Can't open Telegram URL",
 };
 
 export const CustomRoom = Template.bind({});
 CustomRoom.args = {
   link: 'https://t.me/joinchat/ExampleRoom',
+  title: 'Report an Issue',
+  subtitle: 'Reach out to the team on Telegram',
+  unsupportedLinkMessage: "Can't open Telegram URL",
 };

package/components/Button/TelegramFeedbackLink.tsx

@@ -6,9 +6,17 @@ import { useTheme } from '../../theme';
 
 export type TelegramFeedbackLinkProps = {
   link: string;
+  title: string;
+  subtitle: string;
+  unsupportedLinkMessage: string;
 }
 
-export const TelegramFeedbackLink: React.FC<TelegramFeedbackLinkProps> = ({ link }) => {
+export const TelegramFeedbackLink: React.FC<TelegramFeedbackLinkProps> = ({
+  link,
+  title,
+  subtitle,
+  unsupportedLinkMessage,
+}) => {
   const { theme, typography } = useTheme();
 
   const handlePress = async () => {
@@ -16,7 +24,7 @@ export const TelegramFeedbackLink: React.FC<TelegramFeedbackLinkProps> = ({ link
     if (supported) {
       await Linking.openURL(link);
     } else {
-      console.warn("Can't open Telegram URL");
+      console.warn(unsupportedLinkMessage);
     }
   };
 
@@ -24,8 +32,8 @@ export const TelegramFeedbackLink: React.FC<TelegramFeedbackLinkProps> = ({ link
     <TouchableOpacity style={styles.container} onPress={handlePress}>
       <FontAwesome name={'telegram'} size={26} color={theme.primaryLight} />
       <View style={styles.textContainer}>
-        <Text style={[typography.titleH6, { color: theme.text }]}>Feedback & Bugs</Text>
-        <Text style={typography.bodySm}>Tap to write us in Telegram</Text>
+        <Text style={[typography.titleH6, { color: theme.text }]}>{title}</Text>
+        <Text style={typography.bodySm}>{subtitle}</Text>
       </View>
     </TouchableOpacity>
   );

package/components/Cards/BusinessIdeaCard.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import BusinessIdeaCard from './BusinessIdeaCard';
+import { ThemeProvider } from '../../theme/themeContext';
+
+const meta: Meta<typeof BusinessIdeaCard> = {
+  title: 'UI/Cards/BusinessIdeaCard',
+  component: BusinessIdeaCard,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  argTypes: {
+    avatarUri: { control: 'text' },
+    channelLabel: { control: 'text' },
+    imageUri: { control: 'text' },
+    quote: { control: 'text' },
+    likes: { control: 'number' },
+    comments: { control: 'number' },
+    shares: { control: 'number' },
+    timeAgo: { control: 'text' },
+    liked: { control: 'boolean' },
+    showMore: { control: 'boolean' },
+    showMoreLabel: { control: 'text' },
+    onPressLike: { action: 'like pressed' },
+    onPressComment: { action: 'comment pressed' },
+    onPressShare: { action: 'share pressed' },
+    onPressMore: { action: 'more pressed' },
+    onPressShowMore: { action: 'show more pressed' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BusinessIdeaCard>;
+
+export const Default: Story = {
+  args: {
+    avatarUri: 'https://i.pravatar.cc/100?img=65',
+    channelLabel: 'Бизнес идеи',
+    imageUri:
+      'https://images.wsj.net/im-861283?width=700&height=467',
+    quote:
+      '«Я думаю, что мы будем жить в мире, где появятся сотни миллионов и миллиарды разных ИИ-агентов, и, возможно, их будет больше, чем людей»',
+    likes: 13,
+    comments: 7,
+    shares: 5,
+    timeAgo: '2 d ago',
+    showMoreLabel: 'Show more',
+    showMore: true,
+  },
+};
+
+export const WithoutAvatar: Story = {
+  args: {
+    ...Default.args,
+    avatarUri: '',
+    channelLabel: 'AI news',
+  },
+};
+
+export const LongQuote: Story = {
+  args: {
+    ...Default.args,
+    quote:
+      '«Мы видим, как искусственный интеллект постепенно перестает быть инструментом и становится полноценным партнером в работе. В ближайшие годы появится огромное количество агентов, которые будут помогать людям решать бытовые и профессиональные задачи, освобождая время для творчества и стратегического мышления.»',
+    showMore: false,
+    liked: true,
+  },
+};

package/components/Cards/BusinessIdeaCard.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+  ImageSourcePropType,
+  TextStyle,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useTheme, ThemeType, SizesType } from '../../theme';
+import Spacer from '../UI/Spacer';
+import { GlobalStyleSheetType } from '../../theme/styles/styleSheet';
+
+export interface BusinessIdeaCardProps {
+  avatarUri: string;
+  channelLabel: string;
+  imageUri: string;
+  quote: string;
+  likes: number;
+  comments: number;
+  shares: number;
+  timeAgo: string;
+  showMore?: boolean;
+  showMoreLabel?: string;
+  liked?: boolean;
+  onPressLike?: () => void;
+  onPressComment?: () => void;
+  onPressShare?: () => void;
+  onPressMore?: () => void;
+  onPressShowMore?: () => void;
+  avatarPlaceholder?: ImageSourcePropType;
+}
+
+const BusinessIdeaCard: React.FC<BusinessIdeaCardProps> = ({
+  avatarUri,
+  channelLabel,
+  imageUri,
+  quote,
+  likes,
+  comments,
+  shares,
+  timeAgo,
+  showMore = true,
+  showMoreLabel = 'Show more',
+  liked = false,
+  onPressLike,
+  onPressComment,
+  onPressShare,
+  onPressMore,
+  onPressShowMore,
+  avatarPlaceholder,
+}) => {
+  const { theme, sizes, commonStyles, typography, globalStyleSheet } = useTheme();
+  const styles = getStyles({ theme, sizes, globalStyleSheet });
+
+  const renderAvatar = () => {
+    if (avatarUri) {
+      return <Image source={{ uri: avatarUri }} style={styles.avatar} />;
+    }
+
+    if (avatarPlaceholder) {
+      return <Image source={avatarPlaceholder} style={styles.avatar} />;
+    }
+
+    return (
+      <View style={[styles.avatar, styles.avatarFallback]}>
+        <Ionicons name="bulb" size={18} color={theme.primary} />
+      </View>
+    );
+  };
+
+  return (
+    <View style={[commonStyles.card, commonStyles.shadow, styles.container]}>
+      <View style={styles.header}>
+        <View style={styles.headerLeft}>
+          {renderAvatar()}
+          <Text style={styles.channelLabel}>{channelLabel}</Text>
+        </View>
+        {onPressMore ? (
+          <TouchableOpacity onPress={onPressMore} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <Ionicons name="ellipsis-horizontal" size={20} color={theme.greyText} />
+          </TouchableOpacity>
+        ) : (
+          <Ionicons name="ellipsis-horizontal" size={20} color={theme.greyText} />
+        )}
+      </View>
+
+      <Spacer size="xs" />
+
+      <Image source={{ uri: imageUri }} style={styles.coverImage} resizeMode="cover" />
+
+      <Spacer size="sm" />
+
+      <Text style={[typography.body, styles.quote]} numberOfLines={4} ellipsizeMode="tail">
+        {quote}
+      </Text>
+
+      {showMore && (
+        <>
+          <Spacer size="xxs" />
+          {onPressShowMore ? (
+            <TouchableOpacity onPress={onPressShowMore} activeOpacity={0.7}>
+              <Text style={styles.showMore}>{showMoreLabel}</Text>
+            </TouchableOpacity>
+          ) : (
+            <Text style={styles.showMore}>{showMoreLabel}</Text>
+          )}
+        </>
+      )}
+
+      <Spacer size="sm" />
+
+      <View style={styles.footer}>
+        <View style={styles.actionsRow}>
+          <ActionButton
+            iconName={liked ? 'heart' : 'heart-outline'}
+            iconColor={liked ? theme.danger : theme.greyText}
+            label={likes}
+            onPress={onPressLike}
+          />
+          <ActionButton
+            iconName="chatbubble-ellipses-outline"
+            iconColor={theme.greyText}
+            label={comments}
+            onPress={onPressComment}
+          />
+          <ActionButton
+            iconName="arrow-redo-outline"
+            iconColor={theme.greyText}
+            label={shares}
+            onPress={onPressShare}
+          />
+        </View>
+        <Text style={styles.timeAgo}>{timeAgo}</Text>
+      </View>
+    </View>
+  );
+};
+
+interface StyleParams {
+  theme: ThemeType;
+  sizes: SizesType;
+  globalStyleSheet: GlobalStyleSheetType;
+}
+
+const getStyles = ({ theme, sizes, globalStyleSheet }: StyleParams) =>
+  StyleSheet.create({
+    container: {
+      padding: sizes.md,
+      borderRadius: sizes.radius_lg,
+      backgroundColor: theme.white,
+    },
+    header: {
+      ...globalStyleSheet.flexRowCenterBetween,
+    },
+    headerLeft: {
+      ...globalStyleSheet.flexRowCenterStart,
+      gap: sizes.xs,
+    },
+    avatar: {
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      backgroundColor: theme.backgroundSecond,
+      overflow: 'hidden',
+    },
+    avatarFallback: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    channelLabel: {
+      ...globalStyleSheet.descriptionCard,
+      color: theme.title,
+      fontWeight: '600',
+      textTransform: 'uppercase',
+      letterSpacing: 0.8,
+    },
+    coverImage: {
+      width: '100%',
+      height: 220,
+      borderRadius: sizes.radius_sm,
+      backgroundColor: theme.backgroundSecond,
+    },
+    quote: {
+      color: theme.title,
+      fontStyle: 'italic',
+    },
+    showMore: {
+      color: theme.greyText,
+      fontSize: sizes.fontSm,
+      fontWeight: '500',
+    } as TextStyle,
+    footer: {
+      ...globalStyleSheet.flexRowCenterBetween,
+      alignItems: 'center',
+    },
+    actionsRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      columnGap: sizes.md,
+      gap: sizes.md,
+    },
+    timeAgo: {
+      color: theme.greyText,
+      fontSize: sizes.fontSm,
+    } as TextStyle,
+  });
+
+type ActionButtonProps = {
+  iconName: React.ComponentProps<typeof Ionicons>['name'];
+  iconColor: string;
+  label: number;
+  onPress?: () => void;
+};
+
+const ActionButton: React.FC<ActionButtonProps> = ({ iconName, iconColor, label, onPress }) => {
+  const { theme, sizes } = useTheme();
+  const styles = StyleSheet.create({
+    action: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      columnGap: sizes.xs,
+      gap: sizes.xs,
+    },
+    label: {
+      color: theme.text,
+      fontSize: sizes.fontSm,
+      fontWeight: '500',
+    },
+  });
+
+  if (!onPress) {
+    return (
+      <View style={styles.action}>
+        <Ionicons name={iconName} size={18} color={iconColor} />
+        <Text style={styles.label}>{label}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <TouchableOpacity onPress={onPress} activeOpacity={0.7} style={styles.action}>
+      <Ionicons name={iconName} size={18} color={iconColor} />
+      <Text style={styles.label}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default BusinessIdeaCard;

package/components/Cards/EventCard.stories.tsx

@@ -4,7 +4,7 @@ import EventCard from './EventCard';
 import { ThemeProvider } from '../../theme/themeContext';
 
 const meta: Meta<React.ComponentProps<typeof EventCard>> = {
-  title: 'Cards/EventCard',
+  title: 'UI/Cards/EventCard',
   component: EventCard,
   decorators: [
     (Story) => (
@@ -57,12 +57,15 @@ export const Default: Story = {
       'Crash Drum Studio — пространство, где можно почувствовать силу ритма и научиться играть на ударных в любой форме.',
     organizerAvatarUri: 'https://i.pravatar.cc/150?img=11',
     organizerName: 'Admin Belgrade',
+    organizerRoleLabel: 'Organizer',
     likes: 42,
     views: 313,
     hasLike: false,
     isUserParticipantInPost: false,
     participantsCount: 0,
     visible: true,
+    participantLabel: 'You’re participating',
+    demoLabel: 'DEMO',
   },
 };
 

package/components/Cards/EventCard.tsx

@@ -13,6 +13,7 @@ interface EventCardProps {
   description: string;
   organizerAvatarUri: string;
   organizerName: string;
+  organizerRoleLabel: string;
   onPress: () => void;
   likes: number;
   views: number;
@@ -24,6 +25,8 @@ interface EventCardProps {
   maxParticipants?: number;
   categories?: string[];
   price?: string;
+  participantLabel: string;
+  demoLabel: string;
 
   /** Новое: видимость карточки сообщает родитель (FlatList/ScrollView и т.д.) */
   visible?: boolean;
@@ -39,6 +42,7 @@ const EventCard: React.FC<EventCardProps> = ({
   description,
   organizerAvatarUri,
   organizerName,
+  organizerRoleLabel,
   onPress,
   likes,
   views,
@@ -50,6 +54,8 @@ const EventCard: React.FC<EventCardProps> = ({
   maxParticipants,
   categories,
   price,
+  participantLabel,
+  demoLabel,
   visible = false,
   triggerOnce = true,
 }) => {
@@ -77,7 +83,7 @@ const EventCard: React.FC<EventCardProps> = ({
         <Image source={{ uri: imageUri }} style={styles.image} resizeMode="cover" />
         {isUserParticipantInPost && (
           <View style={styles.participantOverlay}>
-            <Text style={styles.participantText}>You’re participating</Text>
+            <Text style={styles.participantText}>{participantLabel}</Text>
           </View>
         )}
       </View>
@@ -86,7 +92,7 @@ const EventCard: React.FC<EventCardProps> = ({
         <View style={globalStyleSheet.flexRowCenterStart}>
           {date && <Text style={[typography.body, styles.date]}>{date}</Text>}
           {categories?.includes('bot') && (
-            <Text style={[typography.body, styles.demo]}>DEMO</Text>
+            <Text style={[typography.body, styles.demo]}>{demoLabel}</Text>
           )}
           {price && <Text style={[typography.body, styles.demo]}>{price}</Text>}
         </View>
@@ -107,6 +113,7 @@ const EventCard: React.FC<EventCardProps> = ({
         <Organizer
           avatarUri={organizerAvatarUri}
           organizerName={organizerName}
+          roleLabel={organizerRoleLabel}
           onPress={onPress}
         />
         <SocialStatsEvent onLike={onLike} hasLike={hasLike} likes={likes} views={views} />

package/components/Cards/PlaceCard.stories.tsx

@@ -4,7 +4,7 @@ import PlaceCard from './PlaceCard';
 import { ThemeProvider } from '../../theme/themeContext';
 
 const meta: Meta<React.ComponentProps<typeof PlaceCard>> = {
-  title: 'Cards/PlaceCard',
+  title: 'UI/Cards/PlaceCard',
   component: PlaceCard,
   decorators: [
     (Story) => (

package/components/Cards/index.tsx

@@ -2,3 +2,4 @@ export { default as PlaceCard } from './PlaceCard';
 export { default as EventCard } from './EventCard';
 export { default as Organazer } from '../UserCards/Organazer';
 export { default as SpecialistCard } from '../UserCards/SpecialistCard';
+export { default as BusinessIdeaCard } from './BusinessIdeaCard';

package/components/Chat/ChatItem.stories.tsx

@@ -10,7 +10,7 @@ const createPressHandler = (label: string) => () => {
 };
 
 const meta: Meta<ChatItemProps> = {
-  title: 'Chat/ChatItem',
+  title: 'Features/Chat/ChatItem',
   component: ChatItem,
   decorators: [
     (Story) => (

package/components/Chat/ChatTab/ChatTabs.stories.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import ChatTabs, { type ChatTab, type BotSubTab } from './ChatTabs';
 
 const meta = {
-  title: 'Chat/ChatTabs',
+  title: 'Features/Chat/ChatTabs',
   component: ChatTabs,
   decorators: [(Story) => <View style={{ paddingVertical: 12 }}><Story /></View>],
   argTypes: {

package/components/Chat/ChatTab/SubTabButton.stories.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import SubTabButton from './SubTabButton';
 
 const meta = {
-  title: 'Chat/SubTabButton',
+  title: 'Features/Chat/SubTabButton',
   component: SubTabButton,
   decorators: [(Story) => <View style={{ padding: 12 }}><Story /></View>],
   argTypes: {