8693hgkhc - fix aliases for web

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module',
   },
-  plugins: ['react', 'react-native', 'simple-import-sort', 'prettier'],
+  plugins: ['react', 'react-native', 'prettier'],
   rules: {
     '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '_' }],
     'prettier/prettier': [
@@ -33,8 +33,6 @@ module.exports = {
     ],
     'react/react-in-jsx-scope': 'off',
     'react-hooks/exhaustive-deps': 'warn',
-    'simple-import-sort/imports': 'warn',
-    'simple-import-sort/exports': 'warn',
     indent: ['warn', 2, { SwitchCase: 1 }],
     quotes: ['warn', 'single'],
     semi: ['warn', 'always'],

babel.config.js

@@ -2,5 +2,18 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['./src'],
+          alias: {
+            '@': './src',
+            style: './style.ts',
+            public: './public',
+          },
+        },
+      ],
+    ],
   };
 };

package.json

@@ -34,13 +34,13 @@
     "@testing-library/react-native": "^12.4.3",
     "@types/jest": "^29.5.11",
     "@types/react": "~18.2.14",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.54.0",
     "eslint-config-universe": "^12.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.1.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^29.7.0",
     "prettier": "^3.1.0",
     "react-dom": "18.2.0",

src/components/Button/PrimaryButton.tsx

@@ -1,28 +1,23 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text } from 'react-native';
-
-import { useTheme } from '@/hooks';
+import { universalColors } from 'style';
 
 type Props = React.ComponentProps<typeof Pressable> & {
   text: string;
   onPress: () => void;
 };
 
-const PrimaryButton = ({ text, onPress, ...passThroughProps }: Props) => {
-  const { themedStyles } = useTheme();
-
-  return (
-    <Pressable
-      {...passThroughProps}
-      style={{ ...styles.button, backgroundColor: themedStyles.button }}
-      onPress={onPress}
-    >
-      <Text style={{ ...styles.text, color: themedStyles.buttonText }}>
-        {text}
-      </Text>
-    </Pressable>
-  );
-};
+const PrimaryButton = ({ text, onPress, ...passThroughProps }: Props) => (
+  <Pressable
+    {...passThroughProps}
+    style={{ ...styles.button, backgroundColor: universalColors.primary }}
+    onPress={onPress}
+  >
+    <Text style={{ ...styles.text, color: universalColors.textOnPrimary }}>
+      {text}
+    </Text>
+  </Pressable>
+);
 
 export default PrimaryButton;
 

src/components/ConversationTile/Avatar.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Image, ImageProps, StyleSheet, View } from 'react-native';
+
+import { Status } from '@/types/status';
+import { mapStatusToColor } from '@/utils';
+
+type Props = {
+  image: ImageProps;
+  conversationStatus: Status;
+};
+
+const Avatar = ({ image, conversationStatus }: Props) => {
+  return (
+    <View style={styles.container}>
+      <Image style={styles.image} {...image} />
+      <View
+        style={{
+          ...styles.status,
+          backgroundColor: mapStatusToColor(conversationStatus),
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 51,
+    height: 51,
+    position: 'relative',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 51 / 2,
+  },
+  status: {
+    width: 11,
+    height: 11,
+    borderRadius: 11 / 2,
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  },
+});
+
+export default Avatar;

src/components/ConversationTile/ConverationTile.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { globalStyles, universalColors } from 'style';
+
+import Avatar from './Avatar';
+
+import { useTheme } from '@/hooks';
+
+type Props = React.ComponentProps<typeof Avatar> & {
+  conversationTitle: string;
+  lastMessage: string;
+  lastMessageAuthor: string;
+  messageRead?: boolean;
+};
+
+const ConversationTile = ({
+  conversationTitle,
+  lastMessage,
+  lastMessageAuthor,
+  messageRead,
+  ...passThroughProps
+}: Props) => {
+  const { themedStyles } = useTheme();
+
+  return (
+    <View style={styles.container}>
+      <Avatar {...passThroughProps} />
+      <View style={styles.contentContainer}>
+        <Text style={{ ...styles.title, color: themedStyles.text }}>
+          {conversationTitle}
+        </Text>
+        <View style={styles.lastMessageContainer}>
+          <Text
+            style={{
+              ...styles.lastMessageAuthor,
+              color: themedStyles.textSecondary,
+            }}
+          >
+            {lastMessageAuthor}:
+          </Text>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={{
+              ...styles.lastMessage,
+              color: themedStyles.textSecondary,
+              fontWeight: messageRead ? '400' : '600',
+            }}
+          >
+            {/* to create empty space between author and message */}
+            {` ${lastMessage}`}
+          </Text>
+        </View>
+      </View>
+      {/* if message is not read, display icon */}
+      {!messageRead && (
+        <View
+          style={{
+            ...styles.unreadIcon,
+            backgroundColor: universalColors.primary,
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    ...globalStyles.horizontalFlex,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 11,
+    width: '100%',
+    height: 73,
+    backgroundColor: 'transparent',
+    paddingVertical: 12,
+    paddingLeft: 8,
+  },
+  contentContainer: {
+    ...globalStyles.verticalFlex,
+    gap: 4,
+    flex: 1,
+    height: 42,
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  lastMessageContainer: {
+    ...globalStyles.horizontalFlex,
+  },
+  lastMessageAuthor: {
+    fontSize: 12,
+  },
+  lastMessage: {
+    flex: 1,
+    fontSize: 12,
+  },
+  unreadIcon: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+});
+
+export default ConversationTile;

src/components/ConversationTile/index.ts

@@ -0,0 +1 @@
+export { default as ConversationTile } from './ConverationTile';

src/screens/Components.tsx

@@ -5,6 +5,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { globalStyles } from 'style';
 
 import { PrimaryButton } from '@/components/Button';
+import { ConversationTile } from '@/components/ConversationTile';
 import { SwitchTheme } from '@/components/Theme';
 import { RootStackParamList } from '@/types/param';
 
@@ -20,7 +21,31 @@ const Home = ({ navigation }: Props) => {
         text="Wróć do Home Screen"
         onPress={() => navigation.navigate('Home')}
       />
+      <PrimaryButton text="primary button" onPress={() => {}} />
       <SwitchTheme />
+      <ConversationTile
+        image={{
+          source: {
+            uri: 'https://images.pexels.com/photos/11073147/pexels-photo-11073147.jpeg?cs=srgb&dl=pexels-merve-t%C3%BClek-11073147.jpg&fm=jpg',
+          },
+        }}
+        conversationStatus="available"
+        conversationTitle="Marek Kowalski"
+        lastMessage="lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum"
+        lastMessageAuthor="Marek Kowalski"
+        messageRead
+      />
+      <ConversationTile
+        image={{
+          source: {
+            uri: 'https://images.pexels.com/photos/11073147/pexels-photo-11073147.jpeg?cs=srgb&dl=pexels-merve-t%C3%BClek-11073147.jpg&fm=jpg',
+          },
+        }}
+        conversationStatus="be right back"
+        conversationTitle="Marek Kowalski"
+        lastMessage="lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum"
+        lastMessageAuthor="Marek Kowalski"
+      />
       <PrimaryButton text="primary button" onPress={() => {}} />
     </View>
   );

src/types/status.ts

@@ -0,0 +1,5 @@
+export type Status =
+  | 'available'
+  | 'do not disturb'
+  | 'unavailable'
+  | 'be right back';

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './mapStatusToColor';

src/utils/mapStatusToColor.ts

@@ -0,0 +1,16 @@
+import { universalColors } from 'style';
+
+import { Status } from '@/types/status';
+
+export const mapStatusToColor = (status: Status): string => {
+  switch (status) {
+    case 'available':
+      return universalColors.americanGreen;
+    case 'do not disturb':
+      return universalColors.permanentGeraniumLake;
+    case 'unavailable':
+      return universalColors.lightSilver;
+    case 'be right back':
+      return universalColors.metallicYellow;
+  }
+};

style.ts

@@ -7,28 +7,31 @@ export const globalStyles = StyleSheet.create({
   },
   horizontalFlex: {
     display: 'flex',
+    flexDirection: 'row',
   },
   centerFlex: {
     justifyContent: 'center',
     alignItems: 'center',
   },
 });
 
+export const universalColors = {
+  permanentGeraniumLake: '#DF2B2B',
+  americanGreen: '#37B744',
+  lightSilver: '#D9D9D9',
+  metallicYellow: '#FED815',
+  primary: '#5964AB',
+  textOnPrimary: '#FFFFFF',
+};
+
 export const darkColors = {
-  button: '#5964AB',
-  buttonText: '#FFF',
-  buttonActive: '#1F1F1F',
   background: '#2F2F2F',
-  text: '#FFF',
+  text: '#FFFFFF',
+  textSecondary: '#FFFFFF',
 };
 
 export const lightColors = {
-  button: '#5964AB',
-  buttonText: '#FFF',
-  stroke: '#BDC1DD',
-  icon: '#A7AAC0',
-  iconBackground: '#EDEEF4',
-  buttonSettings: '#F5F5F5',
-  buttonSettingsActive: '#E4E4E4',
-  text: '#000',
+  background: '#FFFFFF',
+  text: '#010000',
+  textSecondary: '#73828A',
 };