rn-vs-lb 1.0.66 → 1.0.67

package/README.md

@@ -78,5 +78,6 @@ yarn build-storybook
 6. **Опубликуйте релиз**. Убедившись, что версия не занята, выполните:
    ```sh
    npm publish --access public
+   npm publish --access public --otp=RECOVERY_CODE
    ```
 7. **Проверьте публикацию**. После успешной публикации обновите теги в git (`git tag vX.Y.Z && git push --tags`) и убедитесь, что пакет появился на npmjs.com.

package/components/Chat/InputMessage.tsx

@@ -265,11 +265,12 @@ export const getStyles = (theme: ThemeType) =>
       paddingHorizontal: 10,
       paddingVertical: 6,
       borderRadius: 4,
+      top:4,
       borderColor: theme.white,
     },
     sendButton: {
       position: 'absolute',
-      bottom: 9,
+      bottom: 8,
       right: 8,
       borderRadius: 4,
       justifyContent: 'center',

package/components/Chat/MessageItem/LinkyText.tsx

@@ -3,6 +3,7 @@ import React, { FC, useMemo } from 'react';
 import { Text } from 'react-native';
 import { ThemeType } from '../../../theme';
 import { getStyles } from './styles';
+import { formatBoldText } from '../../../utils';
 
 interface LinkyTextProps {
   text: string;
@@ -21,6 +22,13 @@ export const LinkyText: FC<LinkyTextProps> = ({ text, theme, onLinkPress, onLong
     onLinkPress?.(url);
   };
 
+  const renderBoldParts = (segment: string, keyPrefix: string) =>
+    formatBoldText(segment).map((part, index) => (
+      <Text key={`${keyPrefix}-${index}`} style={part.bold ? styles.messageTextBold : undefined}>
+        {part.text}
+      </Text>
+    ));
+
   return (
     <Text style={styles.messageText}>
       {parts.map((part, i) =>
@@ -35,7 +43,7 @@ export const LinkyText: FC<LinkyTextProps> = ({ text, theme, onLinkPress, onLong
             {part}
           </Text>
         ) : (
-          <Text key={i}>{part}</Text>
+          renderBoldParts(part, `text-${i}`)
         )
       )}
     </Text>

package/components/Chat/MessageItem/styles.ts

@@ -68,6 +68,9 @@ export const getStyles = ({ theme }: { theme: ThemeType }) =>
       fontSize: 15,
       color: theme.black,
     },
+    messageTextBold: {
+      fontWeight: 'bold',
+    },
     messageFooter: {
       flexDirection: 'row',
       alignItems: 'center',

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/Screens/HoroscopeScreen.stories.tsx

@@ -0,0 +1,299 @@
+import React, { useMemo, useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { FlatList, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Feather, MaterialCommunityIcons } from '@expo/vector-icons';
+
+import { ThemeProvider, createAppTheme, useTheme } from '../../theme';
+import HeaderDefault from '../Header/HeaderDefault';
+import TabBar from '../UI/TabBar/TabBarAi';
+import { darkTheme, SIZES } from '../../theme/theme';
+import { HeaderHome } from '../Header';
+
+const darkAppTheme = createAppTheme({
+  light: darkTheme,
+  dark: darkTheme,
+});
+
+const previewStyles = StyleSheet.create({
+  previewBackground: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 48,
+    backgroundColor: '#050A1B',
+  },
+});
+
+const meta: Meta = {
+  title: 'Screens/Horoscope/DailyOverview',
+  component: () => null,
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={darkAppTheme}>
+        <View style={previewStyles.previewBackground}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryFn;
+
+type HoroscopeCardData = {
+  key: string;
+  title: string;
+  description: string;
+  icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
+  accent: string;
+};
+
+const cards: HoroscopeCardData[] = [
+  {
+    key: 'career',
+    title: 'Карьера',
+    description:
+      'Луна во Льве помогает сфокусироваться на долгосрочных целях и заметить новые возможности роста.',
+    icon: 'briefcase-variant-outline',
+    accent: '#63B3FF',
+  },
+  {
+    key: 'love',
+    title: 'Любовь',
+    description:
+      'В отношениях сегодня больше тепла. Откровенный разговор сделает связь сильнее.',
+    icon: 'heart-outline',
+    accent: '#FF7AB8',
+  },
+  {
+    key: 'health',
+    title: 'Здоровье',
+    description:
+      'Добавьте к привычному распорядку короткую разминку — организм отблагодарит энергией.',
+    icon: 'heart-pulse',
+    accent: '#7DE2AC',
+  },
+  {
+    key: 'family',
+    title: 'Семья',
+    description:
+      'Совместный вечер укрепит доверие. Запланируйте семейный ритуал, чтобы повторить его позже.',
+    icon: 'account-group-outline',
+    accent: '#F7C977',
+  },
+];
+
+const tabs = [
+  { key: 'yesterday', label: 'Вчера' },
+  { key: 'today', label: 'Сегодня' },
+  { key: 'tomorrow', label: 'Завтра' },
+  { key: 'week', label: 'На неделю' },
+  { key: 'month', label: 'На месяц' },
+];
+
+const ScreenSurface: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { theme, sizes } = useTheme();
+  const surfaceStyles = useMemo(
+    () =>
+      StyleSheet.create({
+        surface: {
+          backgroundColor: theme.background,
+          borderRadius: sizes.radius_lg as number,
+          paddingHorizontal: sizes.xs as number,
+          paddingVertical: sizes.xs as number,
+          width: 360,
+          minHeight: 640,
+          gap: sizes.lg as number,
+        },
+      }),
+    [theme, sizes],
+  );
+
+  return <View style={surfaceStyles.surface}>{children}</View>;
+};
+
+const HoroscopeDescription: React.FC = () => {
+  const { theme, sizes, typography } = useTheme();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          backgroundColor: theme.card,
+          borderRadius: sizes.radius_lg as number,
+          paddingHorizontal: sizes.lg as number,
+          paddingVertical: sizes.lg as number,
+          gap: sizes.sm as number,
+        },
+        title: {
+          ...typography.titleH5,
+        },
+        text: {
+          ...typography.body,
+          lineHeight: 20,
+        },
+      }),
+    [theme, sizes, typography],
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Понедельник, 10 ноября</Text>
+      <Text style={styles.text}>
+        Сегодня, Козерог, энергия Луны во Льве помогает смело заявить о себе. Используйте этот заряд, чтобы показать
+        свои идеи и таланты, а также поддержать тех, кто рядом с вами.
+      </Text>
+      <Text style={styles.text}>
+        День отлично подходит для проектов, что зажигают вас изнутри. Делитесь вдохновением и не бойтесь инициативы —
+        это поможет получить заслуженное внимание.
+      </Text>
+    </View>
+  );
+};
+
+const CARD_WIDTH = 280;
+
+const HoroscopeCard: React.FC<{ item: HoroscopeCardData }> = ({ item }) => {
+  const { theme, sizes, typography } = useTheme();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        card: {
+          backgroundColor: theme.card,
+          borderRadius: sizes.radius_lg as number,
+          padding: sizes.lg as number,
+          width: CARD_WIDTH,
+          minHeight: 156,
+          justifyContent: 'space-between',
+        },
+        header: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+        },
+        iconWrapper: {
+          backgroundColor: item.accent,
+          borderRadius: sizes.radius as number,
+          padding: sizes.sm as number,
+        },
+        title: {
+          marginTop: sizes.sm as number,
+          ...typography.titleH6,
+        },
+        description: {
+          marginTop: sizes.xs as number,
+          ...typography.body,
+        },
+      }),
+    [theme, sizes, typography, item.accent],
+  );
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        <View style={styles.iconWrapper}>
+          <MaterialCommunityIcons name={item.icon} size={24} color={theme.background} />
+        </View>
+        <Feather name="lock" size={18} color={theme.greyText} />
+      </View>
+      <Text style={styles.title}>{item.title}</Text>
+      <Text numberOfLines={3} style={styles.description}>
+        {item.description}
+      </Text>
+    </View>
+  );
+};
+
+const HoroscopeCardsCarousel: React.FC = () => {
+  const { sizes } = useTheme();
+  const GAP = 16;
+  const contentPad = 0;
+
+  const getItemLayout = (_: unknown, index: number) => ({
+    length: CARD_WIDTH + GAP,
+    offset: (CARD_WIDTH + GAP) * index + contentPad,
+    index,
+  });
+
+  return (
+    <FlatList
+      horizontal
+      data={cards}
+      keyExtractor={(it) => it.key}
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ paddingHorizontal: contentPad }}
+      ItemSeparatorComponent={() => <View style={{ width: GAP }} />}
+      renderItem={({ item }) => <HoroscopeCard item={item} />}
+      getItemLayout={getItemLayout}
+      snapToAlignment="start"
+      decelerationRate="fast"
+      snapToInterval={CARD_WIDTH + GAP}
+    />
+  );
+};
+
+const HoroscopeTabBar: React.FC<{
+  activeIndex: number;
+  onChange: (index: number) => void;
+}> = ({ activeIndex, onChange }) => {
+  const { theme } = useTheme();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        wrapper: {
+          backgroundColor: 'transparent',
+          paddingVertical: 4,
+        },
+        divider: {
+          height: 1,
+          backgroundColor: theme.border,
+          marginTop: 8,
+        },
+      }),
+    [theme],
+  );
+
+  return (
+    <View>
+      <View style={styles.wrapper}>
+        <TabBar
+          tabs={tabs}
+          activeIndex={activeIndex}
+          onChange={onChange}
+          activeColor={theme.title}
+          inactiveColor="rgba(255,255,255,0.45)"
+          indicatorColor="#F7C977"
+          indicatorHeight={3}
+          fontSize={16}
+          fontWeightActive="700"
+          fontWeightInactive="500"
+          tabHorizontalPadding={8}
+          gap={20}
+        />
+      </View>
+      <View style={styles.divider} />
+    </View>
+  );
+};
+
+export const HoroscopeDailyOverview: Story = () => {
+  const [activeTab, setActiveTab] = useState(1);
+
+  return (
+    <ScreenSurface>
+      <HeaderHome
+        logo={<Text style={{ paddingHorizontal: SIZES.xs, fontSize: 24, fontWeight: '700', letterSpacing: 1, color: 'white' }}>CityLife</Text>}
+        onPress={() => console.log('filters')}
+      />
+      <HoroscopeTabBar activeIndex={activeTab} onChange={setActiveTab} />
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ gap: 24, paddingBottom: 32 }}
+      >
+        <HoroscopeDescription />
+        <HoroscopeCardsCarousel />
+      </ScrollView>
+    </ScreenSurface>
+  );
+};

package/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-vs-lb",
-  "version": "1.0.66",
+  "version": "1.0.67",
   "description": "Expo Router + Storybook template ready for npm distribution.",
   "keywords": [
     "expo",
@@ -79,6 +79,7 @@
     "@types/react": "~19.1.10",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "cross-env": "^10.0.0",
+    "react-icons": "^5.5.0",
     "storybook": "^9.1.8",
     "typescript": "~5.9.2",
     "vite": "^7.1.7"

package/theme/index.ts

@@ -4,6 +4,8 @@ export {
   FONTS,
   SIZES,
   createAppTheme,
+  lightTheme,
+  darkTheme,
   default as appTheme,
 } from "./theme";
 export type { AppThemeConfig, ThemeColors, ThemeOverrides, ThemeShape } from "./theme";