rn-vs-lb 1.0.55 → 1.0.57

package/README.md

@@ -1,7 +1,82 @@
-in  package.json change "main": "expo/AppEntry.js",  to   "main": "dist/index.js", and back when publish files
+![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
 
-delete   "extends": "expo/tsconfig.base" from tsconfig.json before npm publish
+# getting started
 
-change version on package.json  "version": "1.0.5", +one
+```sh
+npx create-expo-app --template expo-template-storybook AwesomeStorybook
+```
 
-run "npm publish"
+or
+
+```sh
+yarn create expo-app --template expo-template-storybook AwesomeStorybook
+```
+
+# app
+
+```sh
+yarn start
+```
+
+# RN Storybook (ondevice)
+
+In this template you can now run `yarn storybook` to start ondevice storybook or `yarn start` to start your expo app.
+This works via env variables and expo constants.
+
+```sh
+# either
+yarn storybook
+
+# ios
+yarn storybook:ios
+
+# android
+yarn storybook:android
+```
+
+If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader
+
+To update the stories one time
+
+```sh
+yarn storybook-generate
+```
+
+# Web
+
+Start react native web storybook:
+
+```
+yarn storybook:web
+```
+
+build react native web storybook:
+
+```sh
+yarn build-storybook
+```
+
+## Публикация в npm
+
+1. **Проверьте метаданные**. Обновите поля `name`, `version`, `description`, `keywords`, `author`, `repository` и `homepage` в `package.json`, чтобы они отражали вашу организацию и назначение пакета.
+2. **Подготовьте содержимое пакета**. В корне проекта уже настроено поле `files`, которое ограничивает набор публикуемых файлов. При необходимости добавьте или удалите пути, чтобы в npm попали только нужные артефакты.
+3. **Соберите и протестируйте**. Запустите важные проверки перед публикацией, например:
+   ```sh
+   npm install
+   npm run storybook-generate
+   npm run build-storybook
+   ```
+   Убедитесь, что команда `npm pack` создаёт корректный архив.
+4. **Авторизуйтесь в npm**. Выполните вход под своей учётной записью и убедитесь, что у вас есть права на публикацию пакета:
+   ```sh
+   npm login
+   ```
+5. **Проведите пробную упаковку** (опционально). Запустите dry‑run, чтобы убедиться, что публикуемый состав выглядит корректно:
+   ```sh
+   npm publish --access public --dry-run
+   ```
+6. **Опубликуйте релиз**. Убедившись, что версия не занята, выполните:
+   ```sh
+   npm publish --access public
+   ```
+7. **Проверьте публикацию**. После успешной публикации обновите теги в git (`git tag vX.Y.Z && git push --tags`) и убедитесь, что пакет появился на npmjs.com.

package/app/(pages)/index.tsx

@@ -0,0 +1,20 @@
+import { Link } from "expo-router";
+import { Text, View } from "react-native";
+
+export default function Index() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true" ? (
+        <Link href="/(storybook)">Open Storybook</Link>
+      ) : (
+        <Text>Hello World (storybook disabled)</Text>
+      )}
+    </View>
+  );
+}

package/app/(storybook)/index.tsx

@@ -0,0 +1,7 @@
+let StorybookUI = () => <></>;
+
+if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true") {
+  StorybookUI = require("../../.rnstorybook").default;
+}
+
+export default StorybookUI;

package/app/_layout.tsx

@@ -0,0 +1,19 @@
+import { Stack } from "expo-router";
+
+const StorybookEnabled = process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true";
+
+export const unstable_settings = {
+  initialRouteName: StorybookEnabled ? "(storybook)/index" : "(pages)/index",
+};
+
+export default function RootLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Protected guard={StorybookEnabled}>
+        <Stack.Screen name="(storybook)/index" />
+      </Stack.Protected>
+
+      <Stack.Screen name="(pages)/index" />
+    </Stack>
+  );
+}

package/app.json

@@ -0,0 +1,45 @@
+{
+  "name": "rn-vs-lb",
+  "slug": "rn-vs-lb",
+  "scheme": "rnvslb",
+  "version": "1.0.0",
+  "orientation": "portrait",
+  "icon": "./assets/icon.png",
+  "newArchEnabled": true,
+  "userInterfaceStyle": "automatic",
+  "ios": {
+    "supportsTablet": true,
+    "infoPlist": {
+      "ITSAppUsesNonExemptEncryption": false
+    }
+  },
+  "android": {
+    "adaptiveIcon": {
+      "foregroundImage": "./assets/adaptive-icon.png",
+      "backgroundColor": "#FFFFFF"
+    },
+    "edgeToEdgeEnabled": true
+  },
+  "web": {
+    "favicon": "./assets/favicon.png",
+    "bundler": "metro",
+    "output": "single"
+  },
+  "plugins": [
+    "expo-router",
+    [
+      "expo-splash-screen",
+      {
+        "image": "./assets/splash-icon.png",
+        "imageWidth": 200,
+        "resizeMode": "contain",
+        "backgroundColor": "#ffffff"
+      }
+    ]
+  ],
+  "experiments": {
+    "reactCompiler": true,
+    "typedRoutes": true,
+    "tsconfigPaths": true
+  }
+}

package/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [
+      ["babel-plugin-react-docgen-typescript", { exclude: "node_modules" }],
+      "@babel/plugin-transform-class-static-block",
+      "react-native-worklets/plugin",
+    ],
+  };
+};

package/components/Button/Button.stories.tsx

@@ -0,0 +1,131 @@
+// stories/Button/Button.stories.tsx
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import Button, { MyButtonProps } from './Button';
+
+const meta: Meta<MyButtonProps> = {
+  title: 'Button/Base',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16 }}>
+        <View>
+          <Story />
+        </View>
+      </View>
+    ),
+  ],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Text displayed on the button' },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'gray', 'primary-outline', 'gray-outline', 'report-outline'],
+      description: 'Visual style of the button',
+    },
+    loading: { control: 'boolean', description: 'Shows a loading indicator and disables the button' },
+    disabled: { control: 'boolean', description: 'Disables the button interaction' },
+    iconGap: { control: { type: 'number', min: 0, step: 1 }, description: 'Gap between icon and text' },
+    onPress: { action: 'onPress' },
+  },
+  args: {
+    title: 'Press me',
+    type: 'primary',
+    loading: false,
+    disabled: false,
+    iconGap: 8,
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type S = StoryObj<typeof Button>;
+
+/* Базовые */
+export const Primary: S = { args: { title: 'Continue', type: 'primary' } };
+export const Outline: S = { args: { title: 'Learn more', type: 'primary-outline' } };
+export const Gray: S = { args: { title: 'Cancel', type: 'gray' } };
+export const DangerOutline: S = { args: { title: 'Report content', type: 'report-outline' } };
+export const LoadingState: S = { args: { title: 'Submitting...', type: 'primary', loading: true } };
+
+/* Варианты с иконками — через render (React-ноды нельзя класть в args) */
+export const WithLeftIcon: S = {
+  render: (args) => (
+    <Button
+      {...args}
+      title="Upload"
+      type="primary"
+      leftIcon={<MaterialIcons name="cloud-upload" size={20} color="#fff" />}
+    />
+  ),
+};
+
+export const WithRightIcon: S = {
+  render: (args) => (
+    <Button
+      {...args}
+      title="Next"
+      type="primary-outline"
+      rightIcon={<MaterialIcons name="arrow-forward" size={20} color="#6f2da8" />}
+    />
+  ),
+};
+
+export const WithBothIcons: S = {
+  render: (args) => (
+    <Button
+      {...args}
+      title="Share"
+      type="gray"
+      leftIcon={<MaterialIcons name="share" size={20} color="#fff" />}
+      rightIcon={<MaterialIcons name="keyboard-arrow-right" size={20} color="#fff" />}
+      iconGap={6}
+    />
+  ),
+};
+
+/* Только иконка (icon-only) */
+export const IconOnlyPrimary: S = {
+  render: (args) => (
+    <View style={{ width: 64 }}>
+      <Button
+        {...args}
+        title={undefined}
+        type="primary"
+        leftIcon={<MaterialIcons name="settings" size={20} color="#fff" />}
+        accessibilityLabel="Open settings"
+        // title не передаём
+      />
+    </View>
+  ),
+};
+
+export const IconOnlyOutline: S = {
+  render: (args) => (
+    <View style={{ width: 64 }}>
+      <Button
+        {...args}
+        title={undefined}
+        type="primary-outline"
+        leftIcon={<MaterialIcons name="favorite-border" size={20} color="#6f2da8" />}
+        accessibilityLabel="Add to favorites"
+      />
+    </View>
+  ),
+};
+
+/* Disabled + Icon */
+export const DisabledWithIcon: S = {
+  render: (args) => (
+    <Button
+      {...args}
+      title="Download"
+      type="gray-outline"
+      disabled
+      leftIcon={<MaterialIcons name="download" size={20} color="#777" />}
+    />
+  ),
+};

package/components/Button/Button.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  ActivityIndicator,
+  TouchableOpacityProps,
+  StyleProp,
+  View,
+} from 'react-native';
+import { ThemeType, useTheme } from '../../theme';
+
+export interface MyButtonProps extends TouchableOpacityProps {
+  title?: string; // ← стал необязательным для icon-only
+  type?: 'primary' | 'gray' | 'primary-outline' | 'gray-outline' | 'report-outline';
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  loading?: boolean;
+
+  /** Иконки */
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  /** Отступ между иконкой и текстом */
+  iconGap?: number;
+}
+
+const Button: React.FC<MyButtonProps> = ({
+  title,
+  onPress,
+  type = 'primary',
+  style,
+  textStyle,
+  loading = false,
+  leftIcon,
+  rightIcon,
+  iconGap = 8,
+  ...props
+}) => {
+  const { theme } = useTheme();
+  const styles = getStyles({ theme });
+
+  const isIconOnly = !title && (leftIcon || rightIcon);
+
+  const buttonStyles = [
+    styles.button,
+    type === 'primary' && styles.primaryButton,
+    type === 'gray' && styles.grayButton,
+    type === 'primary-outline' && styles.primaryOutlineButton,
+    type === 'gray-outline' && styles.grayOutlineButton,
+    type === 'report-outline' && styles.reportOutlineButton,
+    isIconOnly && styles.iconOnlyButton,
+    style,
+    (loading || props.disabled) && styles.disabledButton,
+  ];
+
+  const textStyles = [
+    styles.buttonText,
+    type === 'primary' && styles.primaryButtonText,
+    type === 'gray' && styles.grayButtonText,
+    type === 'primary-outline' && styles.primaryOutlineButtonText,
+    type === 'gray-outline' && styles.grayOutlineButtonText,
+    type === 'report-outline' && styles.reportOutlineButtonText,
+    textStyle,
+  ];
+
+  return (
+    <TouchableOpacity
+      style={buttonStyles}
+      onPress={loading ? undefined : onPress}
+      disabled={loading || props.disabled}
+      {...props}
+    >
+      {loading ? (
+        <ActivityIndicator color={type.includes('outline') ? theme.primary : theme.white} />
+      ) : isIconOnly ? (
+        // Только иконка
+        leftIcon ? <View pointerEvents="none">{leftIcon}</View> : <View pointerEvents="none">{rightIcon}</View>
+      ) : (
+        // Иконка + текст (или просто текст)
+        <View style={[styles.contentRow, { columnGap: iconGap }]}>
+          {leftIcon ? <View pointerEvents="none">{leftIcon}</View> : null}
+          {title ? <Text style={textStyles}>{title}</Text> : null}
+          {rightIcon ? <View pointerEvents="none">{rightIcon}</View> : null}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const getStyles = ({ theme }: { theme: ThemeType }) =>
+  StyleSheet.create({
+    button: {
+      minHeight: 50,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 6,
+      paddingHorizontal: 16,
+      width: '100%',
+    },
+    contentRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+
+    // Варианты
+    primaryButton: { backgroundColor: theme.primary },
+    primaryOutlineButton: {
+      backgroundColor: theme.white,
+      borderWidth: 1,
+      borderColor: theme.primary,
+    },
+    grayButton: { backgroundColor: theme.backgroundBtn },
+    grayOutlineButton: {
+      backgroundColor: theme.backgroundBtn,
+      borderColor: theme.border,
+      borderWidth: 1,
+    },
+    reportOutlineButton: {
+      borderColor: theme.red,
+      borderWidth: 1,
+      backgroundColor: theme.white,
+    },
+
+    // Текст
+    buttonText: { fontSize: 16, fontWeight: '500' },
+    primaryButtonText: { color: 'white' },
+    primaryOutlineButtonText: { color: theme.primary },
+    grayButtonText: { color: theme.greyBtnText },
+    grayOutlineButtonText: { color: theme.greyBtnText },
+    reportOutlineButtonText: { color: theme.red },
+
+    // Состояния
+    disabledButton: { opacity: 0.7 },
+
+    // Icon-only
+    iconOnlyButton: {
+      width: 50,
+      minHeight: 50,
+      paddingHorizontal: 0,
+    },
+  });
+
+export default Button;

package/components/Button/DeleteAccountButton.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { DeleteAccountButton, DeleteAccountButtonProps } from './DeleteAccountButton';
+
+const meta: Meta<DeleteAccountButtonProps> = {
+  title: 'Button/DeleteAccountButton',
+  component: DeleteAccountButton,
+};
+
+export default meta;
+
+const Template: StoryFn<DeleteAccountButtonProps> = (args) => <DeleteAccountButton {...args} />;
+
+const createMockDelete = (delay = 800) => async () => {
+  await new Promise((resolve) => setTimeout(resolve, delay));
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  deleteAccount: createMockDelete(),
+};
+
+export const SlowNetwork = Template.bind({});
+SlowNetwork.args = {
+  deleteAccount: createMockDelete(2000),
+};

package/components/Button/DeleteAccountButton.tsx

@@ -0,0 +1,84 @@
+import React, { FC, useState } from 'react';
+import { View, Text, Modal, StyleSheet, TouchableOpacity } from 'react-native';
+import Spacer from '../UI/Spacer';
+import Button from './Button';
+import { ThemeType, useTheme } from '../../theme';
+
+export type DeleteAccountButtonProps = {
+  deleteAccount: () => Promise<void>;
+}
+
+export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({ deleteAccount }) => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const { theme, typography } = useTheme();
+  const styles = getStyles({ theme });
+
+  const handleDeleteAccount = async () => {
+    deleteAccount()
+    setModalVisible(false);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.deleteButton} onPress={() => setModalVisible(true)}>
+        <Text style={[typography.titleH6, { color: theme.red }]}>Delete account</Text>
+      </TouchableOpacity>
+
+      <Modal
+        transparent
+        visible={modalVisible}
+        animationType="slide"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <Text style={typography.titleH5}>Confirm Deletion</Text>
+            <Spacer size="xxs" />
+            <Text style={[typography.body, { textAlign: "center" }]}>
+              All your data, including profile, events, and chat history, will be permanently deleted.
+              This process is irreversible and will be completed within 24 hours.
+              Are you sure you want to proceed?
+            </Text>
+            <Spacer size="lg" />
+            <View style={styles.buttonRow}>
+              <Button onPress={() => setModalVisible(false)} style={styles.cancelButton} type="gray-outline" title="Cancel" />
+              <Button onPress={handleDeleteAccount} type="report-outline" style={styles.confirmButton} title="Delete" />
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const getStyles = ({ theme }: { theme: ThemeType }) =>
+  StyleSheet.create({
+    container: {
+      alignItems: 'center',
+    },
+    deleteButton: {
+      paddingVertical: 6,
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: theme.backgroundSemiTransparent,
+      justifyContent: 'center',
+      padding: 20,
+    },
+    modalContent: {
+      backgroundColor: theme.white,
+      borderRadius: 10,
+      padding: 20,
+      alignItems: 'center',
+    },
+    buttonRow: {
+      flexDirection: 'row',
+      gap: 10,
+    },
+    confirmButton: {
+      width: '50%',
+    },
+    cancelButton: {
+      width: '50%',
+    },
+  });

package/components/Button/PostButton.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import PostButton from './PostButton';
+
+const meta: Meta = {
+  title: 'Button/PostButton',
+  component: PostButton,
+  argTypes: {
+    title: {
+      control: 'text',
+      defaultValue: 'Create new event',
+    },
+    onPress: { action: 'press' },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<React.ComponentProps<typeof PostButton>> = (args) => <PostButton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Create post',
+};
+
+export const CustomStyling = Template.bind({});
+CustomStyling.args = {
+  title: 'Invite a friend',
+  buttonStyle: {
+    backgroundColor: '#FFE8D6',
+    borderRadius: 20,
+  },
+  textStyle: {
+    fontWeight: '700',
+  },
+};

package/components/Button/PostButton.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import { ThemeType, useTheme } from '../../theme';
+
+interface PostButtonProps {
+  title: string;
+  onPress: () => void;
+  buttonStyle?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+const PostButton: React.FC<PostButtonProps> = ({ title, onPress, buttonStyle, textStyle }) => {
+  const { theme } = useTheme();
+  const styles = getStyles({ theme });
+
+  return (
+    <TouchableOpacity style={[styles.button, buttonStyle]} onPress={onPress}>
+      <MaterialIcons name="add-circle-outline" size={20} color={theme.primaryLight} />
+      <Text style={[styles.buttonText, textStyle]}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const getStyles = ({ theme }: { theme: ThemeType }) => StyleSheet.create({
+  button: {
+    backgroundColor: theme.backgroundThird, // light grey background
+    paddingVertical: 13,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    width: "100%",
+    alignItems: 'center',
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  buttonText: {
+    color: theme.primaryLight,
+    fontSize: 16,
+    fontWeight: '500',
+    marginLeft: 4,
+  },
+});
+
+export default PostButton;