rn-vs-lb 1.0.0

package/.storybook/index.ts

@@ -0,0 +1,11 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { view } from './storybook.requires';
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

package/.storybook/main.ts

@@ -0,0 +1,8 @@
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
+};
+
+export default main;

package/.storybook/preview.tsx

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/stories/Button/Button.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MyButton } from '../../../src/components/buttons/Button';
+
+const MyButtonMeta: Meta<typeof MyButton> = {
+  title: 'MyButton',
+  component: MyButton,
+  argTypes: {
+    onPress: { action: 'pressed the button' },
+  },
+  args: {
+    text: 'Hello world',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default MyButtonMeta;
+
+export const Basic: StoryObj<typeof MyButton> = {};
+
+export const AnotherExample: StoryObj<typeof MyButton> = {
+  args: {
+    text: 'Another example',
+  },
+};

package/.storybook/stories/eventCard/EventCard.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { EventCard } from '../../../src/components/eventCard';
+
+export default {
+  title: 'EventCard',
+  component: EventCard,
+  argTypes: {
+    imageUri: { control: 'text', description: 'URL of the event image' },
+    date: { control: 'text', description: 'Date and time of the event' },
+    title: { control: 'text', description: 'Title of the event' },
+    description: { control: 'text', description: 'Description of the event' },
+    organizerAvatarUri: { control: 'text', description: 'URL of the organizer\'s avatar' },
+    organizerName: { control: 'text', description: 'Name of the organizer' },
+    organizerLink: { control: 'text', description: 'Link to Organizer Profile' },
+    likes: { control: 'number', description: 'Number of likes' },
+    views: { control: 'number', description: 'Number of views' },
+    tags: {
+      control: 'object',
+      description: 'Array of tag objects with label, backgroundColor, textColor, and borderColor',
+    },
+  },
+} as Meta<typeof EventCard>;
+
+export const Default: StoryObj<typeof EventCard> = {
+  args: {
+    imageUri: 'https://pllace.online:5001/images/6511ee57e3578ef445159ed6/posts/65c7ae1354def36407b72362/DSC_8251.jpg',
+    date: '20:45 25 Feb, 2025',
+    title: 'Crash Drums Studio',
+    description: 'Crash Drum Studio — это место, где звуки становятся настоящими, где каждый может найти своё вдохновение и воплотить свои музыкальные мечты в жизнь. Присоединяйтесь к нам и почувствуйте силу музыки!',
+    organizerAvatarUri: 'https://pllace.online:5001/images/6511ee57e3578ef445159ed6/ahjq2678qem61.png',
+    organizerName: 'Admin Belgrade',
+    organizerLink: 'https://pllace.online/profile/6511ee57e3578ef445159ed6',
+    likes: 12,
+    views: 13,
+    tags: [
+      { label: 'event', backgroundColor: '#FFF7E5', textColor: '#D78902', borderColor: '#FFD480' },
+      { label: 'place', backgroundColor: '#F3E8FF', textColor: '#8A2BE2', borderColor: '#CBA3FF' },
+    ],
+    
+  },
+  render: (args) => (
+    <EventCard
+      imageUri={args.imageUri}
+      date={args.date}
+      tags={args.tags}
+      title={args.title}
+      description={args.description}
+      organizerAvatarUri={args.organizerAvatarUri}
+      organizerName={args.organizerName}
+      organizerLink={args.organizerLink}
+      likes={args.likes}
+      views={args.views}
+    />
+  ),
+};

package/.storybook/storybook.requires.ts

@@ -0,0 +1,34 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import { start } from '@storybook/react-native';
+
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-actions/register';
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: './.storybook/stories',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      './stories',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+];
+
+// @ts-ignore
+global.STORIES = normalizedStories;
+
+export const view = start({
+  annotations: [
+    require('./preview'),
+    require('@storybook/react-native/dist/preview'),
+    require('@storybook/addon-actions/preview'),
+  ],
+  storyEntries: normalizedStories,
+});

package/App.tsx

@@ -0,0 +1,5 @@
+import { EventCard } from "./src/components";
+
+export {
+  EventCard
+}

package/App2.tsx

@@ -0,0 +1 @@
+export { default } from './.storybook'; 

package/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "rn-vs-lb",
+    "slug": "rn-vs-lb",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "rn-vs-lb",
+  "version": "1.0.0",
+  "main": "expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "storybook-generate": "sb-rn-get-stories"
+  },
+  "dependencies": {
+    "@ant-design/react-native": "^5.2.2",
+    "@react-native-async-storage/async-storage": "^1.24.0",
+    "expo": "~51.0.28",
+    "expo-status-bar": "~1.12.1",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-gesture-handler": "^2.18.1",
+    "react-native-reanimated": "^3.15.0",
+    "react-native-safe-area-context": "^4.10.9",
+    "react-native-screens": "^3.34.0",
+    "react-native-vector-icons": "^10.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@react-native-community/datetimepicker": "^8.2.0",
+    "@react-native-community/slider": "^4.5.2",
+    "@storybook/addon-ondevice-actions": "^7.6.20",
+    "@storybook/addon-ondevice-controls": "^7.6.20",
+    "@storybook/react-native": "^7.6.20",
+    "@types/react": "~18.2.45",
+    "babel-loader": "^8.3.0",
+    "react-dom": "18.2.0",
+    "typescript": "^5.1.3"
+  },
+  "private": false
+}

package/src/components/buttons/Button.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+
+export type MyButtonProps = {
+  onPress: () => void;
+  text: string;
+};
+
+export const MyButton = ({ onPress, text }: MyButtonProps) => {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
+      <Text style={styles.text}>{text}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: 'purple',
+    borderRadius: 8,
+  },
+  text: { color: 'white' },
+});

package/src/components/eventCard/EventCard.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import Tag from './Tag';
+import OrganizerContainer from './OrganizerContainer';
+import Footer from './Footer';
+
+interface EventCardProps {
+    imageUri: string;
+    date: string;
+    tags: { label: string; backgroundColor: string; textColor: string; borderColor: string; }[];
+    title: string;
+    description: string;
+    organizerAvatarUri: string;
+    organizerName: string;
+    organizerLink: string;
+    likes: number;
+    views: number;
+}
+
+const EventCard: React.FC<EventCardProps> = ({
+    imageUri,
+    date,
+    tags,
+    title,
+    description,
+    organizerAvatarUri,
+    organizerName,
+    organizerLink,
+    likes,
+    views
+}) => {
+    return (
+        <View style={styles.container}>
+            <View style={styles.imageContainer}>
+                <Image
+                    source={{ uri: imageUri }}
+                    style={styles.image}
+                    resizeMode="cover"
+                />
+            </View>
+            <View style={styles.content}>
+                <View style={styles.dateAndTags}>
+                    <Text style={styles.date}>{date}</Text>
+                    {tags.map((tag, index) => (
+                        <Tag
+                            key={index}
+                            label={tag.label}
+                            backgroundColor={tag.backgroundColor}
+                            textColor={tag.textColor}
+                            borderColor={tag.borderColor}
+                        />
+                    ))}
+                </View>
+                <Text 
+                    style={styles.title}
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                >{title}</Text>
+                <Text
+                    style={styles.description}
+                    numberOfLines={2}
+                    ellipsizeMode="tail"
+                >
+                    {description}
+                </Text>
+                <View style={styles.organizerContainer}>
+                <OrganizerContainer
+                    avatarUri={organizerAvatarUri}
+                    organizerName={organizerName}
+                    organizerLink={organizerLink}
+                />
+                </View>
+                <Footer likes={likes} views={views} />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: '#fff',
+        borderRadius: 10,
+        overflow: 'hidden',
+        margin: 10,
+        elevation: 3, // For Android shadow
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 3,
+    },
+    imageContainer: {
+        width: '100%',
+        height: 270,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    content: {
+        padding: 14,
+    },
+    dateAndTags: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+    },
+    date: {
+        fontSize: 14,
+        color: '#888',
+        marginRight: 10,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        marginBottom: 5,
+    },
+    description: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 14,
+    },
+    organizerContainer: {
+        marginBottom: 16,
+    }
+});
+
+export default EventCard;

package/src/components/eventCard/Footer.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+interface FooterProps {
+  likes: number;
+  views: number;
+}
+
+const Footer: React.FC<FooterProps> = ({ likes, views }) => {
+  const [isLiked, setIsLiked] = useState(false);
+
+  const handleLikePress = () => {
+    setIsLiked(!isLiked);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={handleLikePress} style={styles.item}>
+        <Icon name={isLiked ? "heart" : "heart-outline"} size={20} color={isLiked ? "#ff0000" : "#666"} />
+        <Text style={styles.text}>{isLiked ? likes + 1 : likes} {likes + (isLiked ? 1 : 0) === 1 ? 'Like' : 'Likes'}</Text>
+      </TouchableOpacity>
+      <View style={styles.item}>
+        <Icon name="eye-outline" size={20} color="#666" />
+        <Text style={styles.text}>{views} Views</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    paddingTop: 10,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 14,
+    color: '#666',
+    marginLeft: 5,
+  },
+});
+
+export default Footer;

package/src/components/eventCard/OrganizerContainer.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Text, Image, StyleSheet, TouchableOpacity, Linking } from 'react-native';
+
+interface OrganizerContainerProps {
+  avatarUri: string;
+  organizerName: string;
+  organizerLink: string;
+}
+
+const OrganizerContainer: React.FC<OrganizerContainerProps> = ({ avatarUri, organizerName, organizerLink }) => {
+
+  const handlePress = () => {
+    if (organizerLink) {
+      Linking.openURL(organizerLink).catch(err => console.error("Couldn't load page", err));
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress} style={styles.container}>
+      <Image source={{ uri: avatarUri }} style={styles.avatar} />
+      <View style={styles.organizerTextContainer}>
+        <Text style={styles.organizerTitle}>Organizer</Text>
+        <Text
+          style={styles.organizerText}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {organizerName}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    avatar: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        marginRight: 10,
+    },
+    organizerTextContainer: {
+        flex: 1,
+        paddingRight: 10,
+    },
+    organizerTitle: {
+        fontSize: 14,
+        color: '#666',
+    },
+    organizerText: {
+        fontSize: 16,
+    },
+});
+
+export default OrganizerContainer;

package/src/components/eventCard/Tag.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const Tag = ({ label, backgroundColor, textColor, borderColor }) => (
+    <View style={[styles.tagContainer, { backgroundColor, borderColor }]}>
+        <Text style={[styles.tagText, { color: textColor }]}>{label}</Text>
+    </View>
+);
+
+const styles = StyleSheet.create({
+    tagContainer: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 8,
+        borderWidth: 1,
+        marginLeft: 5,
+    },
+    tagText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+
+
+export default Tag;

package/src/components/eventCard/index.ts

@@ -0,0 +1,6 @@
+import EventCard from "./EventCard";
+
+
+export {
+    EventCard
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+import { EventCard } from "./eventCard";
+
+export {
+    EventCard
+}

package/src/utils/formatDate.ts

@@ -0,0 +1,13 @@
+export const formatDate = (isoDate: string): string => {
+  const date = new Date(isoDate);
+
+  const options: Intl.DateTimeFormatOptions = {
+    hour: '2-digit',
+    minute: '2-digit',
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  };
+
+  return date.toLocaleDateString('en-GB', options);
+}

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+import { formatDate } from "./formatDate"
+
+export {
+    formatDate
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}