rn-vs-lb 1.0.64 → 1.0.66

package/components/Gallery/index.ts

@@ -1 +1,4 @@
-export * from "./AiAgentGallery.pure"
+export * from "./AiAgentGallery.pure";
+export * from "./ProfileMediaGallery";
+export * from "./ProfileMediaNavigationItem";
+export * from "./ProfileSelfiesGallery.pure";

package/components/Header/HeaderDefault.stories.tsx

@@ -4,7 +4,7 @@ import { Text, TouchableOpacity, View } from 'react-native';
 import HeaderDefault, { AccessType } from './HeaderDefault';
 
 const meta: Meta = {
-  title: 'Header/HeaderDefault',
+  title: 'Layout/Header/HeaderDefault',
   component: HeaderDefault,
   args: {
     title: 'Community event',

package/components/Header/HeaderEdit.stories.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { HeaderEdit } from './HeaderEdit';
 
 const meta: Meta = {
-  title: 'Header/HeaderEdit',
+  title: 'Layout/Header/HeaderEdit',
   component: HeaderEdit,
   args: {
     isPinned: false,

package/components/Header/HeaderHome.stories.tsx

@@ -4,7 +4,7 @@ import { Text, View } from 'react-native';
 import { HeaderHome } from './HeaderHome';
 
 const meta: Meta<typeof HeaderHome> = {
-  title: 'Header/HeaderHome',
+  title: 'Layout/Header/HeaderHome',
   component: HeaderHome,
   argTypes: {
     onPress: { action: 'header press' },

package/components/Header/HeaderSwitcher.stories.tsx

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native';
 import { HeaderSwitcher } from './HeaderSwitcher';
 
 const meta: Meta<typeof HeaderSwitcher> = {
-  title: 'Header/HeaderSwitcher',
+  title: 'Layout/Header/HeaderSwitcher',
   component: HeaderSwitcher,
   args: {
     isFirst: true,

package/components/Header/HeaderWithImg.stories.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import HeaderWithImg from './HeaderWithImg';
 
 const meta: Meta = {
-  title: 'Header/HeaderWithImg',
+  title: 'Layout/Header/HeaderWithImg',
   component: HeaderWithImg,
   args: {
     imgUrl: 'https://placekitten.com/200/200',
@@ -16,6 +16,15 @@ const meta: Meta = {
         userName: 'Alex Johnson',
       },
     ],
+    typingText: 'typing…',
+    onlineText: 'Online',
+    offlineText: 'Offline',
+    groupTypingSuffix: ': typing…',
+    backAccessibilityLabel: 'Back',
+    imageAccessibilityLabel: 'Open chat image',
+    actionsAccessibilityLabel: 'More actions',
+    onlineStatusAccessibilityLabel: 'online',
+    offlineStatusAccessibilityLabel: 'offline',
   },
   argTypes: {
     onBackPress: { action: 'back' },

package/components/Header/HeaderWithImg.tsx

@@ -22,6 +22,15 @@ interface HeaderProps {
   isOnline?: boolean;
   isTyping?: boolean;
   typingUserName?: string;
+  typingText: string;
+  onlineText: string;
+  offlineText: string;
+  groupTypingSuffix: string;
+  backAccessibilityLabel: string;
+  imageAccessibilityLabel: string;
+  actionsAccessibilityLabel: string;
+  onlineStatusAccessibilityLabel: string;
+  offlineStatusAccessibilityLabel: string;
 }
 
 const HeaderWithImg: React.FC<HeaderProps> = ({
@@ -35,6 +44,15 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
   isOnline = false,
   isTyping = false,
   typingUserName,
+  typingText,
+  onlineText,
+  offlineText,
+  groupTypingSuffix,
+  backAccessibilityLabel,
+  imageAccessibilityLabel,
+  actionsAccessibilityLabel,
+  onlineStatusAccessibilityLabel,
+  offlineStatusAccessibilityLabel,
 }) => {
   const { globalStyleSheet, theme, sizes, commonStyles, typography } = useTheme();
   const styles = useMemo(
@@ -46,7 +64,7 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={onBackPress} accessibilityRole="button" accessibilityLabel="Back">
+      <TouchableOpacity onPress={onBackPress} accessibilityRole="button" accessibilityLabel={backAccessibilityLabel}>
         <Ionicons name="arrow-back" size={24} color={theme.text} />
       </TouchableOpacity>
 
@@ -56,7 +74,7 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
             style={globalStyleSheet.flexRowCenter}
             onPress={onImgPress}
             accessibilityRole="imagebutton"
-            accessibilityLabel="Open chat image"
+            accessibilityLabel={imageAccessibilityLabel}
             activeOpacity={0.8}
           >
             <Image source={{ uri: imgUrl }} style={styles.photo} />
@@ -69,15 +87,17 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
               {/* отображение статусов */}
               {!isGroupChat ? (
                 isTyping ? (
-                  <Text style={[typography.body, styles.subtitleItalic]}>typing…</Text>
+                  <Text style={[typography.body, styles.subtitleItalic]}>{typingText}</Text>
                 ) : (
                   <View style={styles.statusRow}>
                     <Text style={[typography.body, styles.subtitleItalic]}>
-                      {isOnline ? 'Online' : 'Offline'}
+                      {isOnline ? onlineText : offlineText}
                     </Text>
                     <View
                       style={[styles.statusDot, isOnline ? styles.online : styles.offline]}
-                      accessibilityLabel={isOnline ? 'online' : 'offline'}
+                      accessibilityLabel={
+                        isOnline ? onlineStatusAccessibilityLabel : offlineStatusAccessibilityLabel
+                      }
                     />
                   </View>
                 )
@@ -87,7 +107,7 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
                   ellipsizeMode="tail"
                   style={[typography.body, styles.subtitleItalic]}
                 >
-                  {typingUserName}: typing…
+                  {`${typingUserName}${groupTypingSuffix}`}
                 </Text>
               ) : null}
             </View>
@@ -99,7 +119,7 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
                 style={styles.actionButton}
                 onPress={onActionPress}
                 accessibilityRole="button"
-                accessibilityLabel="More actions"
+                accessibilityLabel={actionsAccessibilityLabel}
                 hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
               >
                 <Ionicons name="ellipsis-horizontal-sharp" size={20} color={theme.primary} />

package/components/Modals/GalleryModal.stories.tsx

@@ -10,7 +10,7 @@ const IMAGES = [
 ];
 
 const meta = {
-  title: 'Modals/GalleryModal',
+  title: 'Features/Modals/GalleryModal',
   component: GalleryModal,
   decorators: [(Story) => <View style={{ flex: 1 }}><Story /></View>],
   argTypes: { onRequestClose: { action: 'onRequestClose' } },

package/components/Modals/GuestAiChatModal.stories.tsx

@@ -21,8 +21,10 @@ const sampleMessages: PureChatMessage[] = [
   },
 ];
 
+const defaultLimitLabel = (remaining: number, limit: number) => `Осталось сообщений: ${remaining} / ${limit}`;
+
 const meta = {
-  title: 'Modals/GuestAiChatModal',
+  title: 'Features/Modals/GuestAiChatModal',
   component: GuestAiChatModalView,
   argTypes: {
     onClose: { action: 'close modal' },
@@ -36,6 +38,7 @@ const meta = {
     theme: { table: { disable: true } },
     typography: { table: { disable: true } },
     sizes: { table: { disable: true } },
+    limitLabel: { table: { disable: true } },
   },
   args: {
     visible: true,
@@ -49,6 +52,9 @@ const meta = {
     theme,
     typography,
     sizes: SIZES,
+    defaultBotName: 'AI-бот',
+    limitLabel: defaultLimitLabel,
+    inputPlaceholder: 'Спросите что-нибудь...'
   },
   decorators: [
     (StoryComponent) => (
@@ -174,9 +180,11 @@ Playground.args = {
   remaining: 5,
 };
 
-export const DefaultOpen: StoryFn<GuestAiChatProps> = (args) => Template({ ...args, visible: true });
-DefaultOpen.args = {
-  visible: true,
+export const DefaultOpen: StoryFn<GuestAiChatProps> = {
+  render: Template,
+  args: {
+    visible: true,
+  },
 };
 
 export const WithErrorState: StoryFn<GuestAiChatProps> = (args) => (

package/components/Modals/GuestAiChatModal.tsx

@@ -32,6 +32,9 @@ export type GuestAiChatViewProps = {
   isSending: boolean;
   limit?: number;
   remaining?: number;
+  defaultBotName: string;
+  limitLabel: (remaining: number, limit: number) => string;
+  inputPlaceholder: string;
 
   // экшены
   onChangeInput: (v: string) => void;
@@ -57,6 +60,9 @@ export const GuestAiChatModalView: FC<GuestAiChatViewProps> = memo(
     isSending,
     limit,
     remaining,
+    defaultBotName,
+    limitLabel,
+    inputPlaceholder,
     onChangeInput,
     onSend,
     listRef,
@@ -92,10 +98,10 @@ export const GuestAiChatModalView: FC<GuestAiChatViewProps> = memo(
           <View style={styles.modalContainer}>
             <View style={styles.header}>
               <View>
-                <Text style={typography.titleH6}>{botName || 'AI-бот'}</Text>
+                <Text style={typography.titleH6}>{botName || defaultBotName}</Text>
                 {limit !== undefined && remaining !== undefined && (
                   <Text style={styles.limitText}>
-                    Осталось сообщений: {remaining} / {limit}
+                    {limitLabel(remaining, limit)}
                   </Text>
                 )}
               </View>
@@ -118,7 +124,7 @@ export const GuestAiChatModalView: FC<GuestAiChatViewProps> = memo(
             <View style={styles.inputRow}>
               <TextInput
                 style={styles.input}
-                placeholder="Спросите что-нибудь..."
+                placeholder={inputPlaceholder}
                 placeholderTextColor={theme.greyText}
                 value={inputValue}
                 onChangeText={onChangeInput}

package/components/Modals/ReportModal.stories.tsx

@@ -13,8 +13,25 @@ const submitLogger = (payload: { reason: string; details?: string }) => {
   console.log('[storybook:report-modal:submit]', payload);
 };
 
+const userReasonOptions = [
+  'Spam or scam',
+  'Harassment or bullying',
+  'Inappropriate content',
+  'Fake profile',
+  'Other',
+];
+
+const postReasonOptions = [
+  'Spam or misleading',
+  'Hate speech or discrimination',
+  'Violence or threats',
+  'Sexually explicit content',
+  'Harassment or bullying',
+  'Other',
+];
+
 const meta: Meta<ReportModalProps> = {
-  title: 'Modals/ReportModal',
+  title: 'Features/Modals/ReportModal',
   component: ReportModal,
   argTypes: {
     type: {
@@ -92,9 +109,18 @@ const Template: StoryFn<ReportModalProps> = (args) => {
   );
 };
 
-const baseArgs: Pick<ReportModalProps, 'visible' | 'type'> = {
+const baseArgs: Pick<
+  ReportModalProps,
+  'visible' | 'type' | 'title' | 'userReasons' | 'postReasons' | 'inputPlaceholder' | 'cancelText' | 'submitText'
+> = {
   visible: true,
   type: 'user',
+  title: 'Report User',
+  userReasons: userReasonOptions,
+  postReasons: postReasonOptions,
+  inputPlaceholder: 'Additional details (optional)',
+  cancelText: 'Cancel',
+  submitText: 'Send',
 };
 
 export const UserReport: StoryFn<ReportModalProps> = Template.bind({});
@@ -113,6 +139,7 @@ export const PostReport: StoryFn<ReportModalProps> = Template.bind({});
 PostReport.args = {
   ...baseArgs,
   type: 'post',
+  title: 'Report Post',
 };
 PostReport.parameters = {
   docs: {
@@ -160,6 +187,7 @@ export const InteractivePlayground: StoryFn<ReportModalProps> = (args) => {
         {...args}
         visible={isVisible}
         type={reportType}
+        title={reportType === 'user' ? 'Report User' : 'Report Post'}
         onClose={() => {
           closeLogger();
           setIsVisible(false);
@@ -170,6 +198,11 @@ export const InteractivePlayground: StoryFn<ReportModalProps> = (args) => {
           setIsVisible(false);
           args.onSubmit(reason, details);
         }}
+        userReasons={userReasonOptions}
+        postReasons={postReasonOptions}
+        inputPlaceholder={args.inputPlaceholder}
+        cancelText={args.cancelText}
+        submitText={args.submitText}
       />
     </View>
   );

package/components/Modals/ReportModal.tsx

@@ -16,26 +16,25 @@ type Props = {
   onClose: () => void;
   onSubmit: (reason: string, details: string) => void;
   type: "user" | "post";
+  title: string;
+  userReasons: string[];
+  postReasons: string[];
+  inputPlaceholder: string;
+  cancelText: string;
+  submitText: string;
 };
-
-const userReportReasons = [
-  'Spam or scam',
-  'Harassment or bullying',
-  'Inappropriate content',
-  'Fake profile',
-  'Other',
-];
-
-const postReportReasons = [
-  'Spam or misleading',
-  'Hate speech or discrimination',
-  'Violence or threats',
-  'Sexually explicit content',
-  'Harassment or bullying',
-  'Other',
-];
-
-const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
+const ReportModal: React.FC<Props> = ({
+  visible,
+  onClose,
+  onSubmit,
+  type,
+  title,
+  userReasons,
+  postReasons,
+  inputPlaceholder,
+  cancelText,
+  submitText,
+}) => {
   const { theme } = useTheme();
   const styles = getStyles({ theme });
 
@@ -50,7 +49,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
     onClose();
   };
 
-  const reasons = type === "user" ? userReportReasons : postReportReasons
+  const reasons = type === "user" ? userReasons : postReasons;
 
   return (
     <Modal
@@ -61,7 +60,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
     >
       <View style={styles.overlay}>
         <View style={styles.container}>
-          <Text style={styles.title}>Report User</Text>
+          <Text style={styles.title}>{title}</Text>
           <ScrollView style={styles.reasonsContainer}>
             {reasons.map((reason) => (
               <TouchableOpacity
@@ -86,7 +85,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
 
           <TextInput
             style={styles.input}
-            placeholder="Additional details (optional)"
+            placeholder={inputPlaceholder}
             placeholderTextColor="#888"
             value={details}
             onChangeText={setDetails}
@@ -96,7 +95,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
 
           <View style={styles.actions}>
             <TouchableOpacity style={styles.cancelBtn} onPress={onClose}>
-              <Text style={styles.cancelText}>Cancel</Text>
+              <Text style={styles.cancelText}>{cancelText}</Text>
             </TouchableOpacity>
             <TouchableOpacity
               style={[
@@ -106,7 +105,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
               disabled={!selectedReason}
               onPress={handleSend}
             >
-              <Text style={styles.submitText}>Send</Text>
+              <Text style={styles.submitText}>{submitText}</Text>
             </TouchableOpacity>
           </View>
         </View>

package/components/Poll/CommentItem.stories.tsx

@@ -46,7 +46,7 @@ const generateComments = (count: number): Comment[] =>
     }));
 
 const meta: Meta<Props> = {
-    title: 'Poll/CommentItem',
+    title: 'Features/Poll/CommentItem',
     component: CommentItem,
     decorators: [
         (Story) => (

package/components/Poll/PollCardList.stories.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import PollCardList from './PollCardList';
 
 const meta: Meta<React.ComponentProps<typeof PollCardList>> = {
-  title: 'Poll/PollCardList',
+  title: 'Features/Poll/PollCardList',
   component: PollCardList,
   decorators: [
     (Story) => (
@@ -29,6 +29,7 @@ Default.args = {
   creatorAvatar: 'https://i.pravatar.cc/150?img=11',
   votesCount: 42,
   createdAt: '2 days ago',
+  votesLabel: 'votes',
 };
 
 export const WithLongQuestion = Template.bind({});
@@ -39,6 +40,7 @@ WithLongQuestion.args = {
   creatorAvatar: 'https://i.pravatar.cc/150?img=5',
   votesCount: 128,
   createdAt: '5 hours ago',
+  votesLabel: 'votes',
 };
 
 export const WithoutDate = Template.bind({});
@@ -48,6 +50,7 @@ WithoutDate.args = {
   creatorAvatar: 'https://i.pravatar.cc/150?img=24',
   votesCount: 8,
   createdAt: null,
+  votesLabel: 'votes',
 };
 
 export const MinimalInfo = Template.bind({});
@@ -57,4 +60,5 @@ MinimalInfo.args = {
   creatorAvatar: 'https://i.pravatar.cc/150?img=36',
   votesCount: 230,
   createdAt: 'just now',
+  votesLabel: 'votes',
 };

package/components/Poll/PollCardList.tsx

@@ -9,6 +9,7 @@ interface PollCardProps {
   votesCount: number;
   onPress?: () => void;
   createdAt: string | null;
+  votesLabel: string;
 }
 
 const PollCardList: React.FC<PollCardProps> = ({
@@ -17,7 +18,8 @@ const PollCardList: React.FC<PollCardProps> = ({
   creatorAvatar,
   votesCount,
   onPress,
-  createdAt
+  createdAt,
+  votesLabel,
 }) => {
   const { globalStyleSheet, commonStyles, typography } = useTheme();
   const styles = getStyles({ commonStyles });
@@ -33,7 +35,7 @@ const PollCardList: React.FC<PollCardProps> = ({
         </View>
         <Text style={typography.bodyXs}>{creatorName}</Text>
         <View style={globalStyleSheet.flexRowCenterBetween}>
-          <Text style={typography.bodyXs}>{votesCount} votes</Text>
+          <Text style={typography.bodyXs}>{votesCount} {votesLabel}</Text>
           <Text style={typography.bodyXs}>{createdAt}</Text>
         </View>
       </View>

package/components/Posts/EventCardList.stories.tsx

@@ -7,7 +7,7 @@ import EventCardList from './EventCardList';
 type Props = React.ComponentProps<typeof EventCardList>;
 
 const meta: Meta<Props> = {
-  title: 'Posts/EventCardList',
+  title: 'Features/Posts/EventCardList',
   component: EventCardList,
   decorators: [
     (Story) => (

package/components/Posts/PlaceCardList.stories.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import PlaceCardList from './PlaceCardList';
 
 const meta: Meta<React.ComponentProps<typeof PlaceCardList>> = {
-  title: 'Posts/PlaceCardList',
+  title: 'Features/Posts/PlaceCardList',
   component: PlaceCardList,
   decorators: [
     (Story) => (

package/components/Prank/HeroPrankCard.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View } from 'react-native';
+
+import { ThemeProvider } from '../../theme';
+import HeroPrankCard from './HeroPrankCard';
+
+const meta: Meta<typeof HeroPrankCard> = {
+  title: 'Features/Prank/HeroPrankCard',
+  component: HeroPrankCard,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ padding: 24, backgroundColor: '#070C1F', flex: 1 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+  args: {
+    imageUri:
+      'https://images.unsplash.com/photo-1621447462558-42b4d8bc5d9b?auto=format&fit=crop&w=900&q=80',
+    title: 'Homeless Prank',
+    description: 'Prank your loved ones with a unknown guest in your home!',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#070C1F' },
+        { name: 'light', value: '#f5f5f5' },
+      ],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HeroPrankCard>;
+
+export const Default: Story = {};
+
+export const WithAction: Story = {
+  args: {
+    onPress: () => console.log('Hero card pressed'),
+  },
+};

package/components/Prank/HeroPrankCard.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  ImageBackground,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+
+import { ThemeType, SizesType, useTheme } from '../../theme';
+
+export interface HeroPrankCardProps {
+  imageUri: string;
+  title: string;
+  description: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const HeroPrankCard: React.FC<HeroPrankCardProps> = ({
+  imageUri,
+  title,
+  description,
+  onPress,
+  style,
+  testID,
+}) => {
+  const { theme, sizes } = useTheme();
+  const styles = React.useMemo(() => getStyles({ theme, sizes }), [theme, sizes]);
+
+  const content = (
+    <ImageBackground
+      source={{ uri: imageUri }}
+      style={styles.imageBackground}
+      imageStyle={styles.image}
+      accessibilityLabel={title}
+    >
+      <LinearGradient
+        colors={['rgba(0,0,0,0.05)', 'rgba(0,0,0,0.7)', 'rgba(0,0,0,0.95)']}
+        style={StyleSheet.absoluteFillObject}
+      />
+      <View style={styles.textContainer}>
+        <Text style={styles.title} numberOfLines={2}>
+          {title}
+        </Text>
+        <Text style={styles.description} numberOfLines={2}>
+          {description}
+        </Text>
+      </View>
+    </ImageBackground>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.85}
+        onPress={onPress}
+        style={[styles.container, style]}
+        testID={testID}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {content}
+    </View>
+  );
+};
+
+interface StyleParams {
+  theme: ThemeType;
+  sizes: SizesType;
+}
+
+const getStyles = ({ theme, sizes }: StyleParams) =>
+  StyleSheet.create({
+    container: {
+      borderRadius: sizes.radius_lg,
+      overflow: 'hidden',
+      backgroundColor: theme.black,
+    },
+    imageBackground: {
+      height: 320,
+      justifyContent: 'flex-end',
+    },
+    image: {
+      borderRadius: sizes.radius_lg,
+    },
+    textContainer: {
+      paddingHorizontal: sizes.lg,
+      paddingVertical: sizes.xl,
+    },
+    title: {
+      fontSize: sizes.h4,
+      lineHeight: 30,
+      fontWeight: '700',
+      color: theme.white,
+    },
+    description: {
+      marginTop: sizes.xs,
+      fontSize: sizes.font,
+      lineHeight: 22,
+      color: 'rgba(255,255,255,0.82)',
+    },
+  });
+
+export default HeroPrankCard;