rn-vs-lb 1.0.65 → 1.0.66

package/components/Specialist/PortfolioCarousel.stories.tsx

@@ -11,7 +11,7 @@ const IMAGES = [
 ];
 
 const meta = {
-  title: 'Specialist/PortfolioCarousel',
+  title: 'Features/Specialist/PortfolioCarousel',
   component: PortfolioCarousel,
   decorators: [(Story) => <View style={{ paddingVertical: 12 }}><Story /></View>],
   argTypes: { onPressImage: { action: 'onPressImage' } },

package/components/Specialist/ServicesList.stories.tsx

@@ -30,7 +30,7 @@ const SERVICES: ServiceItem[] = [
 ];
 
 const meta = {
-  title: 'Specialist/ServicesList',
+  title: 'Features/Specialist/ServicesList',
   component: ServicesList,
   decorators: [(Story) => <View style={{ paddingVertical: 12 }}><Story /></View>],
   argTypes: {

package/components/Tooltip/DangerTooltip.stories.tsx

@@ -39,7 +39,7 @@ const renderTooltip = ({ contentKey, ...args }: DangerTooltipStoryProps) => (
 );
 
 const meta: Meta<DangerTooltipStoryProps> = {
-  title: 'Tooltip/DangerTooltip',
+  title: 'UI/Tooltip/DangerTooltip',
   component: DangerTooltip,
   argTypes: {
     contentKey: {

package/components/Tooltip/InfoTooltip.stories.tsx

@@ -42,7 +42,7 @@ const renderTooltip = ({ contentKey, ...args }: InfoTooltipStoryProps) => (
 );
 
 const meta: Meta<InfoTooltipStoryProps> = {
-  title: 'Tooltip/InfoTooltip',
+  title: 'UI/Tooltip/InfoTooltip',
   component: InfoTooltip,
   argTypes: {
     contentKey: {

package/components/Tooltip/InfoTooltipBase.stories.tsx

@@ -34,7 +34,7 @@ const renderTooltip = ({ contentKey, ...args }: InfoTooltipBaseStoryProps) => (
 );
 
 const meta: Meta<InfoTooltipBaseStoryProps> = {
-  title: 'Tooltip/InfoTooltipBase',
+  title: 'UI/Tooltip/InfoTooltipBase',
   component: InfoTooltipBase,
   argTypes: {
     contentKey: {

package/components/Tooltip/SucceedTooltip.stories.tsx

@@ -39,7 +39,7 @@ const renderTooltip = ({ contentKey, ...args }: SucceedTooltipStoryProps) => (
 );
 
 const meta: Meta<SucceedTooltipStoryProps> = {
-  title: 'Tooltip/SucceedTooltip',
+  title: 'UI/Tooltip/SucceedTooltip',
   component: SucceedTooltip,
   argTypes: {
     contentKey: {

package/components/Tooltip/WarningTooltip.stories.tsx

@@ -41,7 +41,7 @@ const renderTooltip = ({ contentKey = 'pendingReview', ...args }: WarningTooltip
 );
 
 const meta: Meta<WarningTooltipStoryProps> = {
-  title: 'Tooltip/WarningTooltip',
+  title: 'UI/Tooltip/WarningTooltip',
   component: WarningTooltip,
   argTypes: {
     contentKey: {

package/components/UI/HorizontalCardSection.stories.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ThemeProvider } from "../../theme";
+import HorizontalCardSection, { HorizontalCard } from "./HorizontalCardSection";
+
+const cards: HorizontalCard[] = [
+  {
+    id: "1",
+    title: "AI Agents Meetup",
+    image: {
+      uri: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=600&q=80",
+    },
+  },
+  {
+    id: "2",
+    title: "Design Sprint Workshop",
+    image: {
+      uri: "https://images.unsplash.com/photo-1521737604893-0f34a1f438b8?auto=format&fit=crop&w=600&q=80",
+    },
+  },
+  {
+    id: "3",
+    title: "Community Hack Night",
+    image: {
+      uri: "https://images.unsplash.com/photo-1521737604893-9d53e79e4d4a?auto=format&fit=crop&w=600&q=80",
+    },
+  },
+];
+
+const meta: Meta<typeof HorizontalCardSection> = {
+  title: "UI/Cards/HorizontalCardSection",
+  component: HorizontalCardSection,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  argTypes: {
+    onPressSeeAll: { action: "see all press" },
+    onPressCard: { action: "card press" },
+    isDark: { control: "boolean" },
+  },
+  parameters: {
+    backgrounds: {
+      default: "light",
+      values: [
+        { name: "light", value: "#f4f4f6" },
+        { name: "dark", value: "#070C1F" },
+      ],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HorizontalCardSection>;
+
+export const Default: Story = {
+  args: {
+    title: "Popular this week",
+    cards,
+    seeAllLabel: "See all",
+  },
+};
+
+export const WithCustomLabel: Story = {
+  args: {
+    ...Default.args,
+    title: "Recommended spaces",
+    seeAllLabel: "View more",
+  },
+};
+
+export const DarkModePreview: Story = {
+  args: {
+    ...Default.args,
+    isDark: true,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};

package/components/UI/HorizontalCardSection.tsx

@@ -0,0 +1,199 @@
+import React, { memo, useCallback, useMemo } from "react";
+import {
+  FlatList,
+  ImageBackground,
+  ImageSourcePropType,
+  ListRenderItemInfo,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+
+import { SizesType, ThemeType, useTheme } from "../../theme";
+
+export type HorizontalCard = {
+  id?: string | number;
+  title: string;
+  image: ImageSourcePropType;
+};
+
+export interface HorizontalCardSectionProps {
+  title: string;
+  cards: HorizontalCard[];
+  onPressSeeAll?: () => void;
+  onPressCard?: (card: HorizontalCard, index: number) => void;
+  seeAllLabel?: string;
+  /**
+   * Force dark styles regardless of the theme. Useful for previewing in storybook.
+   */
+  isDark?: boolean;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+const CARD_WIDTH = 152;
+const CARD_HEIGHT = 230;
+
+const HorizontalCardSectionComponent: React.FC<HorizontalCardSectionProps> = ({
+  title,
+  cards,
+  onPressSeeAll,
+  onPressCard,
+  seeAllLabel = "See All",
+  isDark,
+  style,
+  contentContainerStyle,
+}) => {
+  const { theme, typography, sizes, isDark: themeIsDark } = useTheme();
+  const resolvedIsDark = isDark ?? themeIsDark;
+
+  const styles = useMemo(
+    () => getStyles({ theme, sizes, isDark: resolvedIsDark }),
+    [resolvedIsDark, sizes, theme],
+  );
+
+  const gradientColors = useMemo(
+    () => ["rgba(0,0,0,0)", resolvedIsDark ? "rgba(7,12,31,0.85)" : "rgba(0,0,0,0.75)"],
+    [resolvedIsDark],
+  );
+
+  const handleCardPress = useCallback(
+    (card: HorizontalCard, index: number) => () => {
+      if (onPressCard) {
+        onPressCard(card, index);
+      }
+    },
+    [onPressCard],
+  );
+
+  const renderCard = useCallback(
+    ({ item, index }: ListRenderItemInfo<HorizontalCard>) => (
+      <TouchableOpacity
+        accessibilityLabel={item.title}
+        accessibilityRole={onPressCard ? "button" : undefined}
+        activeOpacity={0.85}
+        disabled={!onPressCard}
+        onPress={handleCardPress(item, index)}
+        style={styles.cardWrapper}
+      >
+        <ImageBackground source={item.image} style={styles.card} imageStyle={styles.cardImage}>
+          <LinearGradient colors={gradientColors} style={styles.gradient} />
+          <Text style={[typography.titleH6, styles.cardTitle]} numberOfLines={2}>
+            {item.title}
+          </Text>
+        </ImageBackground>
+      </TouchableOpacity>
+    ),
+    [gradientColors, handleCardPress, onPressCard, styles, typography.titleH6],
+  );
+
+  const keyExtractor = useCallback(
+    (item: HorizontalCard, index: number) => `${item.id ?? index}`,
+    [],
+  );
+
+  const listFooter = useMemo(
+    () => (cards.length > 0 ? <View style={styles.footerSpacer} /> : null),
+    [cards.length, styles.footerSpacer],
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.header}>
+        <Text style={[typography.titleH4, styles.title]} numberOfLines={1}>
+          {title}
+        </Text>
+
+        {onPressSeeAll ? (
+          <TouchableOpacity
+            accessibilityRole="button"
+            activeOpacity={0.7}
+            onPress={onPressSeeAll}
+            style={styles.seeAllButton}
+          >
+            <Text style={[typography.bodySm, styles.seeAllText]}>{seeAllLabel}</Text>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+
+      <FlatList
+        horizontal
+        data={cards}
+        keyExtractor={keyExtractor}
+        renderItem={renderCard}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[styles.listContent, contentContainerStyle]}
+        ListFooterComponent={listFooter}
+      />
+    </View>
+  );
+};
+
+const getStyles = ({
+  theme,
+  sizes,
+  isDark,
+}: {
+  theme: ThemeType;
+  sizes: SizesType;
+  isDark: boolean;
+}) =>
+  StyleSheet.create({
+    container: {
+      gap: sizes.md,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingHorizontal: sizes.xs,
+    },
+    title: {
+      color: theme.title,
+    },
+    seeAllButton: {
+      paddingVertical: sizes.xs,
+      paddingHorizontal: sizes.sm,
+      borderRadius: sizes.radius_sm,
+    },
+    seeAllText: {
+      color: isDark ? theme.white : theme.primary,
+      fontWeight: "500",
+    },
+    listContent: {
+      paddingHorizontal: sizes.xs,
+    },
+    cardWrapper: {
+      marginRight: sizes.md,
+    },
+    card: {
+      width: CARD_WIDTH,
+      height: CARD_HEIGHT,
+      borderRadius: sizes.radius_lg,
+      overflow: "hidden",
+      justifyContent: "flex-end",
+      backgroundColor: theme.background,
+    },
+    cardImage: {
+      borderRadius: sizes.radius_lg,
+    },
+    gradient: {
+      ...StyleSheet.absoluteFillObject,
+    },
+    cardTitle: {
+      color: theme.white,
+      paddingHorizontal: sizes.sm,
+      paddingBottom: sizes.sm,
+    },
+    footerSpacer: {
+      width: sizes.md,
+    },
+  });
+
+export const HorizontalCardSection = memo(HorizontalCardSectionComponent);
+
+export default HorizontalCardSection;

package/components/UI/TabBar/BottomTabBar.stories.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
+import BottomTabBar, { BottomTabBarItem } from './BottomTabBar';
+
+const ITEMS: BottomTabBarItem[] = [
+  {
+    key: 'overview',
+    renderIcon: ({ color, size }) => (
+      <MaterialCommunityIcons name="view-grid-outline" size={size} color={color} />
+    ),
+  },
+  {
+    key: 'private',
+    renderIcon: ({ color, size }) => <MaterialIcons name="lock-outline" size={size} color={color} />,
+  },
+  {
+    key: 'bookmarks',
+    renderIcon: ({ color, size }) => (
+      <MaterialCommunityIcons name="bookmark-off-outline" size={size} color={color} />
+    ),
+  },
+  {
+    key: 'favorites',
+    renderIcon: ({ color, size }) => (
+      <MaterialCommunityIcons name="heart-off-outline" size={size} color={color} />
+    ),
+  },
+];
+
+const meta = {
+  title: 'UI/BottomTabBar',
+  component: BottomTabBar,
+  decorators: [(Story) => <View style={{ paddingTop: 24 }}><Story /></View>],
+  argTypes: {
+    onChange: { action: 'onChange' },
+  },
+  args: {
+    items: ITEMS,
+  },
+} satisfies Meta<typeof BottomTabBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof BottomTabBar>;
+
+const Controlled = (props: React.ComponentProps<typeof BottomTabBar>) => {
+  const [active, setActive] = useState(0);
+
+  return (
+    <BottomTabBar
+      {...props}
+      activeIndex={active}
+      onChange={(index) => {
+        setActive(index);
+        props.onChange?.(index);
+      }}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <Controlled {...args} />,
+};
+
+export const CustomColors: Story = {
+  render: (args) => <Controlled {...args} />,
+  args: {
+    activeColor: '#111',
+    inactiveColor: '#B0B0B0',
+    indicatorColor: '#111',
+    indicatorWidth: 36,
+  },
+};
+
+export const WithDisabled: Story = {
+  render: (args) => <Controlled {...args} />,
+  args: {
+    items: [
+      ITEMS[0],
+      ITEMS[1],
+      { ...ITEMS[2], disabled: true },
+      ITEMS[3],
+    ],
+  },
+};

package/components/UI/TabBar/BottomTabBar.tsx

@@ -0,0 +1,128 @@
+import React, { FC, memo, useMemo } from 'react';
+import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { useTheme, ThemeType } from '../../../theme';
+
+export type BottomTabBarIconProps = {
+  color: string;
+  size: number;
+};
+
+export type BottomTabBarItem = {
+  key: string;
+  renderIcon: (props: BottomTabBarIconProps) => React.ReactNode;
+  disabled?: boolean;
+};
+
+type BottomTabBarProps = {
+  items: BottomTabBarItem[];
+  activeIndex: number;
+  onChange: (index: number) => void;
+  style?: StyleProp<ViewStyle>;
+  activeColor?: string;
+  inactiveColor?: string;
+  indicatorColor?: string;
+  indicatorWidth?: number;
+  indicatorHeight?: number;
+  iconSize?: number;
+  pressableStyle?: StyleProp<ViewStyle>;
+};
+
+const BottomTabBar: FC<BottomTabBarProps> = memo(
+  ({
+    items,
+    activeIndex,
+    onChange,
+    style,
+    pressableStyle,
+    activeColor,
+    inactiveColor,
+    indicatorColor,
+    indicatorWidth = 32,
+    indicatorHeight = 3,
+    iconSize = 26,
+  }) => {
+    const { theme } = useTheme();
+    const styles = useMemo(() => getStyles({ theme, indicatorHeight }), [theme, indicatorHeight]);
+
+    const resolvedActiveColor = activeColor ?? theme.black;
+    const resolvedInactiveColor = inactiveColor ?? theme.greyText;
+    const resolvedIndicatorColor = indicatorColor ?? theme.black;
+
+    return (
+      <View style={[styles.container, style]} accessibilityRole="tablist">
+        {items.map((item, index) => {
+          const isActive = index === activeIndex;
+          const color = isActive ? resolvedActiveColor : resolvedInactiveColor;
+
+          return (
+            <Pressable
+              key={item.key}
+              onPress={() => onChange(index)}
+              disabled={item.disabled}
+              style={({ pressed }) => [
+                styles.item,
+                pressableStyle,
+                item.disabled && styles.disabled,
+                pressed && !item.disabled ? styles.pressed : null,
+              ]}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: isActive, disabled: !!item.disabled }}
+            >
+              <View style={styles.iconWrapper}>{item.renderIcon({ color, size: iconSize })}</View>
+              <View
+                style={[
+                  styles.indicator,
+                  {
+                    backgroundColor: isActive ? resolvedIndicatorColor : 'transparent',
+                    width: indicatorWidth,
+                  },
+                ]}
+              />
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  },
+);
+
+BottomTabBar.displayName = 'BottomTabBar';
+
+const getStyles = ({ theme, indicatorHeight }: { theme: ThemeType; indicatorHeight: number }) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      paddingTop: 12,
+      paddingBottom: 6,
+      backgroundColor: theme.white,
+      borderTopWidth: 1,
+      borderTopColor: theme.border,
+    },
+    item: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 4,
+    },
+    iconWrapper: {
+      height: 28,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    indicator: {
+      height: indicatorHeight,
+      borderRadius: indicatorHeight / 2,
+      marginTop: 2,
+    },
+    pressed: {
+      opacity: 0.7,
+    },
+    disabled: {
+      opacity: 0.4,
+    },
+  });
+
+export default BottomTabBar;

package/components/UI/index.ts

@@ -10,6 +10,8 @@ export { LinkPreview } from './LinkPreview';
 export { default as ListBlockItem } from './ListBlockItem';
 export { default as ListItem } from './ListItem';
 export { default as LoadingScreen } from './LoadingScreen';
+export { default as HorizontalCardSection } from './HorizontalCardSection';
+export type { HorizontalCardSectionProps, HorizontalCard } from './HorizontalCardSection';
 export { NoAuth } from './NoAuth';
 export { ParticipantItem } from './ParticipantItem';
 export * from './Social';
@@ -20,6 +22,8 @@ export { default as TabBar } from './TabBar/TabBar';
 export type { TabItem } from './TabBar/TabBar';
 export { default as TabBarAi } from './TabBar/TabBarAi';
 export type { TabItem as TabItemAi } from './TabBar/TabBarAi';
+export { default as BottomTabBar } from './TabBar/BottomTabBar';
+export type { BottomTabBarItem, BottomTabBarIconProps } from './TabBar/BottomTabBar';
 export { default as TabButton } from './TabButton/TabButton';
 export type { TabButtonProps } from './TabButton/TabButton';
 export { default as TextWithLinks } from './TextWithLinks';

package/components/UserCards/AiAgentHeroCard.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+
+import AiAgentHeroCard from './AiAgentHeroCard';
+
+const meta = {
+  title: 'Features/UserCards/AiAgentHeroCard',
+  component: AiAgentHeroCard,
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
+  args: {
+    avatarUri: 'https://i.pravatar.cc/150?img=47',
+    displayName: 'Алина Лебедева',
+    profession: 'HR-аналитик и карьерный консультант',
+    categories: ['HR', 'Карьера', 'AI-инструменты'],
+    followButtonTitle: 'Подписаться',
+    isFollowUpdating: false,
+    disableFollowAction: false,
+    isChatLoading: false,
+    aiBotId: 'ai-agent-42',
+    isFollowing: false,
+  },
+  argTypes: {
+    onToggleFollow: { action: 'toggle-follow' },
+    onStartChat: { action: 'start-chat' },
+    onAvatarPress: { action: 'avatar-press' },
+  },
+} satisfies Meta<typeof AiAgentHeroCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof AiAgentHeroCard>;
+
+export const Default: Story = {};
+
+export const Following: Story = {
+  args: {
+    isFollowing: true,
+    followButtonTitle: 'Отписаться',
+  },
+};
+
+export const LoadingStates: Story = {
+  args: {
+    isFollowUpdating: true,
+    isChatLoading: true,
+  },
+};
+
+export const WithoutCategories: Story = {
+  args: {
+    categories: [],
+  },
+};
+
+export const ChatUnavailable: Story = {
+  args: {
+    aiBotId: undefined,
+  },
+};