rn-vs-lb 1.0.65 → 1.0.67

package/components/Gallery/ProfileMediaGallery.tsx

@@ -0,0 +1,239 @@
+import React, { useMemo, useState, useEffect } from "react";
+import {
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from "react-native";
+import { ThemeType, SizesType, TypographytType, useTheme } from "../../theme";
+import { GalleryModal } from "../Modals";
+import { ProfileMediaNavigationItem, ProfileMediaNavigationItemProps } from "./ProfileMediaNavigationItem";
+
+type TabItem = Omit<ProfileMediaNavigationItemProps, "isActive" | "onPress"> & {
+  key: string;
+};
+
+export type ProfileMediaGalleryProps = {
+  tabs: TabItem[];
+  activeTabKey?: string;
+  onTabPress?: (tab: TabItem, index: number) => void;
+  images: string[];
+  extraInfoLabel?: string;
+  extraInfoActionLabel?: string;
+  onExtraInfoPress?: () => void;
+  uploadButtonLabel?: string;
+  showAllButtonLabel?: string;
+  onUploadPress?: () => void;
+  onShowAllPress?: () => void;
+};
+
+const FALLBACK_IMAGES = [
+  "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=600&q=60",
+  "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?auto=format&fit=crop&w=600&q=60",
+  "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=600&q=60",
+  "https://images.unsplash.com/photo-1557862921-37829c790f19?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-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=600&q=60",
+];
+
+export const ProfileMediaGallery: React.FC<ProfileMediaGalleryProps> = ({
+  tabs = [],
+  activeTabKey,
+  onTabPress,
+  images = [],
+  extraInfoLabel = "+14 photo tags",
+  extraInfoActionLabel = "View",
+  onExtraInfoPress,
+  uploadButtonLabel = "Upload photo",
+  showAllButtonLabel = "Show all",
+  onUploadPress,
+  onShowAllPress,
+}) => {
+  const { theme, sizes, typography } = useTheme();
+  const { width } = useWindowDimensions();
+  const styles = useMemo(() => getStyles(theme, sizes, typography), [theme, sizes, typography]);
+  const [internalActiveKey, setInternalActiveKey] = useState<string>(
+    activeTabKey ?? tabs[0]?.key ?? ""
+  );
+
+  useEffect(() => {
+    if (activeTabKey) {
+      setInternalActiveKey(activeTabKey);
+    }
+  }, [activeTabKey]);
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalInitialIndex, setModalInitialIndex] = useState(0);
+
+  const displayImages = images.length ? images.slice(0, 6) : FALLBACK_IMAGES;
+
+  const contentHorizontalPadding = (sizes.lg as number) * 2;
+  const gutter = (sizes.xs as number) * 2;
+  const imageSize = Math.max(
+    72,
+    Math.floor((width - contentHorizontalPadding - gutter * 2) / 3)
+  );
+
+  const handleTabPress = (tab: TabItem, index: number) => {
+    if (!activeTabKey) {
+      setInternalActiveKey(tab.key);
+    }
+    onTabPress?.(tab, index);
+  };
+
+  const handleOpenImage = (index: number) => {
+    setModalInitialIndex(index);
+    setModalVisible(true);
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.navigationContainer}
+      >
+        {tabs.map((tab, index) => (
+          <ProfileMediaNavigationItem
+            key={tab.key}
+            label={tab.label}
+            iconName={tab.iconName}
+            isActive={internalActiveKey === tab.key}
+            onPress={() => handleTabPress(tab, index)}
+          />
+        ))}
+      </ScrollView>
+
+      <View style={styles.galleryContainer}>
+        {displayImages.map((uri, index) => (
+          <Pressable
+            key={`${uri}-${index}`}
+            onPress={() => handleOpenImage(index)}
+            style={[styles.imageWrapper, { width: imageSize, height: imageSize }]}
+            android_ripple={{ color: "#00000022" }}
+          >
+            <Image
+              source={{ uri }}
+              style={styles.image}
+              resizeMode="cover"
+            />
+          </Pressable>
+        ))}
+      </View>
+
+      <View style={styles.infoRow}>
+        <Text style={styles.infoLabel}>{extraInfoLabel}</Text>
+        <Pressable onPress={onExtraInfoPress}>
+          <Text style={styles.infoLink}>{extraInfoActionLabel}</Text>
+        </Pressable>
+      </View>
+
+      <View style={styles.actionsRow}>
+        <Pressable
+          onPress={onUploadPress}
+          style={[styles.actionButton, styles.primaryActionButton]}
+        >
+          <Text style={[styles.actionButtonText, styles.primaryActionButtonText]}>
+            {uploadButtonLabel}
+          </Text>
+        </Pressable>
+        <Pressable
+          onPress={onShowAllPress}
+          style={[styles.actionButton, styles.secondaryActionButton]}
+        >
+          <Text style={[styles.actionButtonText, styles.secondaryActionButtonText]}>
+            {showAllButtonLabel}
+          </Text>
+        </Pressable>
+      </View>
+
+      <GalleryModal
+        visible={modalVisible}
+        images={displayImages}
+        initialIndex={modalInitialIndex}
+        onRequestClose={() => setModalVisible(false)}
+      />
+    </View>
+  );
+};
+
+const getStyles = (theme: ThemeType, sizes: SizesType, typography: TypographytType) =>
+  StyleSheet.create({
+    wrapper: {
+      backgroundColor: theme.card,
+      borderRadius: sizes.radius_lg as number,
+      paddingVertical: sizes.lg as number,
+      paddingHorizontal: sizes.lg as number,
+    },
+    navigationContainer: {
+      paddingBottom: sizes.sm as number,
+    },
+    galleryContainer: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "space-between",
+    },
+    imageWrapper: {
+      borderRadius: sizes.radius_sm as number,
+      overflow: "hidden",
+      marginBottom: sizes.sm as number,
+      backgroundColor: theme.backgroundSecond,
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+    },
+    infoRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginTop: sizes.xs as number,
+      marginBottom: sizes.md as number,
+    },
+    infoLabel: {
+      ...(typography.bodySm as object),
+      color: theme.text,
+      fontWeight: "500",
+    },
+    infoLink: {
+      ...(typography.textLink as object),
+      fontWeight: "600",
+    },
+    actionsRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: sizes.xs as number,
+    },
+    actionButton: {
+      flex: 1,
+      borderRadius: sizes.radius_sm as number,
+      paddingVertical: sizes.sm as number,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    primaryActionButton: {
+      backgroundColor: theme.primary,
+      marginRight: sizes.sm as number,
+    },
+    secondaryActionButton: {
+      backgroundColor: theme.backgroundSecond,
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    actionButtonText: {
+      ...(typography.bodySm as object),
+      fontWeight: "600",
+    },
+    primaryActionButtonText: {
+      color: theme.white,
+    },
+    secondaryActionButtonText: {
+      color: theme.text,
+    },
+  });
+
+export default ProfileMediaGallery;

package/components/Gallery/ProfileMediaNavigationItem.tsx

@@ -0,0 +1,73 @@
+import React, { memo, useMemo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import { ThemeType, SizesType, TypographytType, useTheme } from "../../theme";
+
+type IconName = React.ComponentProps<typeof MaterialIcons>["name"];
+
+export type ProfileMediaNavigationItemProps = {
+  label: string;
+  iconName?: IconName;
+  isActive?: boolean;
+  onPress?: () => void;
+};
+
+export const ProfileMediaNavigationItem = memo(
+  ({ label, iconName = "photo", isActive = false, onPress }: ProfileMediaNavigationItemProps) => {
+    const { theme, sizes, typography } = useTheme();
+
+    const styles = useMemo(() => getStyles(theme, sizes, typography), [theme, sizes, typography]);
+
+    return (
+      <Pressable
+        onPress={onPress}
+        style={[styles.container, isActive ? styles.containerActive : styles.containerInactive]}
+        accessibilityRole="button"
+        accessibilityState={{ selected: isActive }}
+      >
+        {iconName ? (
+          <View style={styles.iconWrapper}>
+            <MaterialIcons
+              name={iconName}
+              size={20}
+              color={isActive ? theme.primary : theme.greyText}
+            />
+          </View>
+        ) : null}
+        <Text style={[styles.label, { color: isActive ? theme.primary : theme.greyText }]}>{label}</Text>
+      </Pressable>
+    );
+  }
+);
+
+ProfileMediaNavigationItem.displayName = "ProfileMediaNavigationItem";
+
+const getStyles = (theme: ThemeType, sizes: SizesType, typography: TypographytType) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      borderRadius: sizes.radius_sm as number,
+      paddingHorizontal: sizes.md as number,
+      paddingVertical: sizes.xs as number,
+      marginRight: sizes.sm as number,
+      borderWidth: 1,
+    },
+    containerActive: {
+      backgroundColor: theme.white,
+      borderColor: theme.primary,
+    },
+    containerInactive: {
+      backgroundColor: theme.backgroundSecond,
+      borderColor: theme.border,
+    },
+    iconWrapper: {
+      marginRight: sizes.xs as number,
+    },
+    label: {
+      ...(typography.bodySm as object),
+      fontWeight: "500",
+    },
+  });
+
+export default ProfileMediaNavigationItem;

package/components/Gallery/ProfileSelfiesGallery.pure.tsx

@@ -0,0 +1,97 @@
+import React, { memo, useMemo } from "react";
+import { Image, Pressable, StyleSheet, View, StyleProp, ViewStyle } from "react-native";
+import { GalleryModal } from "../Modals";
+import { ThemeType, SizesType, useTheme } from "../../theme";
+
+type BaseProps = {
+  photos: string[];
+  columns?: number;
+  itemSize: number;
+  gap?: number;
+  visible: boolean;
+  initialIndex: number;
+  onOpenAt: (index: number) => void;
+  onClose: () => void;
+};
+
+export type ProfileSelfiesGalleryViewProps = BaseProps & {
+  style?: StyleProp<ViewStyle>;
+};
+
+export const ProfileSelfiesGalleryView = memo(
+  ({
+    photos,
+    columns = 2,
+    itemSize,
+    gap,
+    visible,
+    initialIndex,
+    onOpenAt,
+    onClose,
+    style,
+  }: ProfileSelfiesGalleryViewProps) => {
+    const { theme, sizes } = useTheme();
+    const spacing = gap ?? ((sizes.sm as number) * 1.25);
+
+    const styles = useMemo(() => getStyles(theme, sizes, spacing), [theme, sizes, spacing]);
+
+    return (
+      <View style={[styles.wrapper, style]}>
+        <View style={styles.grid}>
+          {photos.map((photo, index) => {
+            const isLastInRow = (index + 1) % columns === 0;
+
+            return (
+              <Pressable
+                key={`${photo}-${index}`}
+                onPress={() => onOpenAt(index)}
+                android_ripple={{ color: "#00000022" }}
+                style={[
+                  styles.imageWrapper,
+                  { width: itemSize, height: itemSize, marginRight: isLastInRow ? 0 : spacing },
+                ]}
+              >
+                <Image source={{ uri: photo }} style={styles.image} resizeMode="cover" />
+              </Pressable>
+            );
+          })}
+        </View>
+
+        <GalleryModal
+          visible={visible}
+          images={photos}
+          initialIndex={initialIndex}
+          onRequestClose={onClose}
+        />
+      </View>
+    );
+  }
+);
+
+ProfileSelfiesGalleryView.displayName = "ProfileSelfiesGalleryView";
+
+const getStyles = (theme: ThemeType, sizes: SizesType, spacing: number) =>
+  StyleSheet.create({
+    wrapper: {
+      backgroundColor: theme.card,
+      borderRadius: (sizes.radius_lg as number) + 4,
+      padding: sizes.lg as number,
+    },
+    grid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "flex-start",
+    },
+    imageWrapper: {
+      borderRadius: (sizes.radius_lg as number) + 2,
+      overflow: "hidden",
+      marginBottom: spacing,
+      backgroundColor: theme.backgroundSecond,
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+    },
+  });
+
+export default ProfileSelfiesGalleryView;

package/components/Gallery/ProfileSelfiesGallery.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useMemo } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Dimensions, View } from 'react-native';
+import { ThemeProvider } from '../../theme';
+import { ProfileSelfiesGalleryView } from './ProfileSelfiesGallery.pure';
+
+type Props = React.ComponentProps<typeof ProfileSelfiesGalleryView>;
+
+const WINDOW_WIDTH = Dimensions.get('window').width;
+
+const meta: Meta<Props> = {
+  title: 'Features/Gallery/ProfileSelfiesGallery',
+  component: ProfileSelfiesGalleryView,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ paddingVertical: 24, paddingHorizontal: 16 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+  args: {
+    columns: 2,
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<Props> = ({
+  visible: _visible,
+  initialIndex: _initialIndex,
+  onOpenAt: _onOpenAt,
+  onClose: _onClose,
+  itemSize: _itemSize,
+  ...rest
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [initialIndex, setInitialIndex] = useState(0);
+
+  const itemSize = useMemo(() => {
+    const decoratorPadding = 32; // paddingHorizontal from decorator View (16 * 2)
+    const wrapperPadding = 40; // padding from component wrapper (20 * 2)
+    const gap = rest.gap ?? 15; // default spacing from component
+    const columns = rest.columns ?? 2;
+
+    return Math.floor((WINDOW_WIDTH - decoratorPadding - wrapperPadding - gap * (columns - 1)) / columns);
+  }, [rest.columns, rest.gap]);
+
+  return (
+    <ProfileSelfiesGalleryView
+      {...rest}
+      itemSize={itemSize}
+      visible={visible}
+      initialIndex={initialIndex}
+      onOpenAt={(index) => {
+        setInitialIndex(index);
+        setVisible(true);
+      }}
+      onClose={() => setVisible(false)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  photos: [
+    'https://images.unsplash.com/photo-1690733583113-10a2dbd4c3fb?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=800&q=80',
+  ],
+};
+
+export const WithCustomGap = Template.bind({});
+WithCustomGap.args = {
+  gap: 12,
+  photos: [
+    'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1531256456869-ce942a665e80?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?auto=format&fit=crop&w=800&q=80',
+  ],
+};

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',

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

@@ -24,7 +24,7 @@ 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' },

package/components/Modals/ReportModal.stories.tsx

@@ -31,7 +31,7 @@ const postReasonOptions = [
 ];
 
 const meta: Meta<ReportModalProps> = {
-  title: 'Modals/ReportModal',
+  title: 'Features/Modals/ReportModal',
   component: ReportModal,
   argTypes: {
     type: {

package/components/Modals/ReportModal.tsx

@@ -62,7 +62,7 @@ const ReportModal: React.FC<Props> = ({
         <View style={styles.container}>
           <Text style={styles.title}>{title}</Text>
           <ScrollView style={styles.reasonsContainer}>
-            {reasons.map((reason) => (
+            {reasons?.map((reason) => (
               <TouchableOpacity
                 key={reason}
                 style={[

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

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'),
+  },
+};