rn-vs-lb 1.0.65 → 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,
 };
 

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: {

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) => (

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: {

package/components/Chat/InputMessage.stories.tsx

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

package/components/Chat/MessageItem/MessageItem.stories.tsx

@@ -7,7 +7,7 @@ import MessageItem from './MessageItem';
 import { LinkPreviewData, MessageDTO, MessageItemProps } from './types';
 
 const meta: Meta<MessageItemProps> = {
-  title: 'Chat/MessageItem',
+  title: 'Features/Chat/MessageItem',
   component: MessageItem,
   decorators: [
     (Story) => (

package/components/Chat/PinnedMessagesBar/PinnedMessagesBar.stories.tsx

@@ -8,7 +8,7 @@ import { MessageDTO } from '../../../types/message';
 type Props = React.ComponentProps<typeof PinnedMessagesBar>;
 
 const meta: Meta<Props> = {
-  title: 'Chat/PinnedMessagesBar',
+  title: 'Features/Chat/PinnedMessagesBar',
   component: PinnedMessagesBar,
   decorators: [
     (Story) => (

package/components/Gallery/AiAgentGallery.stories.tsx

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

package/components/Gallery/ProfileMediaGallery.stories.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import { View } from "react-native";
+import { ThemeProvider } from "../../theme";
+import { ProfileMediaGallery, ProfileMediaGalleryProps } from "./ProfileMediaGallery";
+
+const meta: Meta<typeof ProfileMediaGallery> = {
+  title: 'Features/Gallery/ProfileMediaGallery',
+  component: ProfileMediaGallery,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ padding: 24 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+const TABS: ProfileMediaGalleryProps["tabs"] = [
+  { key: "photos", label: "Photos", iconName: "collections" },
+  { key: "videos", label: "Videos", iconName: "videocam" },
+  { key: "music", label: "Music", iconName: "music-note" },
+  { key: "albums", label: "Albums", iconName: "photo-album" },
+];
+
+const Template: StoryFn<ProfileMediaGalleryProps> = (args) => (
+  <ProfileMediaGallery {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  tabs: TABS,
+  images: [
+    "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=600&q=60",
+  ],
+};
+
+export const ControlledTabs: StoryFn<ProfileMediaGalleryProps> = ({ ...rest }) => {
+  const [activeTabKey, setActiveTabKey] = useState(rest.activeTabKey ?? TABS[0].key);
+
+  return (
+    <ProfileMediaGallery
+      {...rest}
+      tabs={rest.tabs ?? TABS}
+      activeTabKey={activeTabKey}
+      onTabPress={(tab, index) => {
+        setActiveTabKey(tab.key);
+        rest.onTabPress?.(tab, index);
+      }}
+    />
+  );
+};
+
+ControlledTabs.args = {
+  tabs: TABS,
+  images: Default.args?.images ?? [],
+};