@wereform/pkgm-wire 1.0.2 → 1.0.3

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@wereform/pkgm-wire",
-  "version": "1.0.2",
+  "version": "1.0.3",
+  "source": "src/index.js",
   "main": "dist/index.js",
+  "react-native": "src/index.js",
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "publishConfig": {

package/src/components/WireChannelMetadata.jsx

@@ -0,0 +1,58 @@
+import { Image, Pressable, Text, View } from "react-native";
+import { WireChannelMetadataStyles } from "../styles/WireChannelMetadataStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function WireChannelMetadata({
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  containerStyles,
+}) {
+  return (
+    <View style={WireChannelMetadataStyles.channelMetaContainer}>
+      <View style={WireChannelMetadataStyles.channelMetaContainer_ColumnOne}>
+        <Image
+          source={{
+            uri:
+              channelLogo ||
+              "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+          }}
+          style={WireChannelMetadataStyles.userImage}
+        />
+        <View style={WireChannelMetadataStyles.nameSubcountContainer}>
+          <Text style={WireChannelMetadataStyles.userName}>
+            {userName || "Default Username"}
+          </Text>
+          <View style={WireChannelMetadataStyles.subCountContainer}>
+            <Text style={WireChannelMetadataStyles.subCount}>
+              {subscribersCount || "0"}
+            </Text>
+            <Text style={WireChannelMetadataStyles.subText}>Subscribers</Text>
+          </View>
+        </View>
+      </View>
+      <View
+        style={[WireChannelMetadataStyles.dateViewsContainer, containerStyles]}
+      >
+        <View style={WireChannelMetadataStyles.dateContainer}>
+          <Text style={WireChannelMetadataStyles.dateText}>
+            {timeAgo || "14 Hours Ago"}
+          </Text>
+          <View style={WireChannelMetadataStyles.dateIcon}>
+            <Ionicons name="calendar" size={16} color="white" />
+          </View>
+        </View>
+        <View style={WireChannelMetadataStyles.viewsContainer}>
+          <Text style={WireChannelMetadataStyles.viewsText}>
+            {viewsText || "0"}
+          </Text>
+          <View style={WireChannelMetadataStyles.eyeIcon}>
+            <Ionicons name="eye-outline" size={16} color="white" />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { WireCardLayout } from "./layout/WireCardLayout.jsx";
+export { WireViewLayout } from "./layout/WireViewLayout.jsx";
+export { WireUploadLayout } from "./layout/WireUploadLayout.jsx";

package/src/layout/WireCardLayout.jsx

@@ -0,0 +1,66 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import { MenuChannelMeta, MenuInteraction } from "@wereform/pkgm-shared";
+import { Ionicons } from "@expo/vector-icons";
+import { WireChannelMetadata } from "../components/WireChannelMetadata";
+import { WireCardLayoutStyles } from "../styles/WireCardLayoutStyles";
+
+export function WireCardLayout({
+  content,
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  onPress,
+}) {
+  const limit = 8;
+
+  const contentText =
+    content ??
+    `Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quidem
+            distinctio porro qui minus totam eius. Sed laudantium nisi expedita
+            distinctio dignissimos dicta praesentium nihil iste velit cumque!
+            Assumenda illum veritatis, ipsam sint
+            
+            vero corporis distinctio rem
+            quisquam natus iste. Unde esse consequuntur maiores repellendus, cum
+            voluptatem vero incidunt temporibus.`;
+
+  // Only compute finalText if we actually have content
+  const finalText = contentText
+    ? contentText.replace(/\r\n/g, "\n").split("\n")
+    : [];
+
+  return (
+    <TouchableOpacity style={WireCardLayoutStyles.container} onPress={onPress}>
+      <View>
+        <WireChannelMetadata
+          channelLogo={
+            channelLogo ||
+            "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"
+          }
+          userName={userName}
+          subscribersCount={subscribersCount}
+          timeAgo={timeAgo}
+          viewsText={viewsText}
+        />
+
+        <View style={WireCardLayoutStyles.mainTextContainer}>
+          {finalText.length > 0 && (
+            <Text numberOfLines={limit} style={WireCardLayoutStyles.mainText}>
+              {finalText.map((text, index) => (
+                <Text key={index}>
+                  {text.trim().replace(/\s+/g, " ")}
+                  {index < finalText.length - 1 ? "\n" : ""}
+                </Text>
+              ))}
+            </Text>
+          )}
+          <Text> </Text>
+          <Text style={WireCardLayoutStyles.seeMore}>See more →</Text>
+        </View>
+      </View>
+      <MenuInteraction containerStyles={{ marginBottom: 12 }} />
+    </TouchableOpacity>
+  );
+}

package/src/layout/WireUploadLayout.jsx

@@ -0,0 +1,241 @@
+import { useState } from "react";
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import * as ImagePicker from "expo-image-picker";
+import * as VideoThumbnails from "expo-video-thumbnails";
+import { Ionicons } from "@expo/vector-icons";
+import { WireUploadStyles } from "../styles/WireUploadStyles";
+import { CustomizedButton, DropDown, InputField } from "@wereform/pkgm-shared";
+
+export function WireUploadLayout({
+  profilePic,
+  userName,
+  onPressVideoUploadScreen,
+  onPressWireUpload,
+}) {
+  const [wireText, setWireText] = useState(``);
+  const [media, setMedia] = useState(null); // image/video URI
+  const [thumbnails, setThumbnails] = useState([]);
+  const [heading, setHeading] = useState("Default Heading!");
+
+  const pickMedia = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images", "videos"],
+      allowsMultipleSelection: true,
+      selectionLimit: 4,
+      quality: 1,
+    });
+
+    if (result.canceled) return;
+
+    const assets = result.assets;
+
+    // Save raw assets
+    setMedia(assets);
+
+    // Generate thumbnails for videos, or use image URI directly
+    const finalThumbs = await Promise.all(
+      assets.map(async asset => {
+        const isVideo =
+          asset.type === "video" || asset.mimeType?.startsWith("video");
+
+        if (isVideo) {
+          try {
+            const { uri } = await VideoThumbnails.getThumbnailAsync(asset.uri, {
+              time: 1000,
+            });
+            return uri;
+          } catch (err) {
+            console.log("Video thumbnail error:", err);
+            return null;
+          }
+        }
+
+        // Image → use directly
+        return asset.uri;
+      })
+    );
+
+    console.log(finalThumbs);
+
+    setThumbnails(finalThumbs);
+  };
+
+  console.log(wireText);
+
+  return (
+    <ScrollView>
+      <View style={WireUploadStyles.container}>
+        <View style={WireUploadStyles.profileSection}>
+          <Image
+            source={{
+              uri:
+                profilePic ||
+                "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+            }}
+            style={WireUploadStyles.userImage}
+          />
+
+          <View style={WireUploadStyles.userInfo}>
+            <Text style={WireUploadStyles.userName}>
+              {userName || "Default Username"}
+            </Text>
+
+            {/* Link to user's public-facing channel page */}
+            {/* <TouchableOpacity
+              onPress={() => Linking.openURL("https://begenone.com")}
+            >
+              <Text style={WireUploadStyles.channelSettingsText}>
+                View Channel
+              </Text>
+            </TouchableOpacity> */}
+          </View>
+        </View>
+        {/* 1 — Composer Input */}
+        <View style={WireUploadStyles.wireInputContainer}>
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Text
+              style={{
+                color: "#fff",
+                fontWeight: "900",
+                fontSize: 24,
+                paddingBottom: 12,
+                flexGrow: 1,
+                justifyContent: "flex-start",
+              }}
+            >
+              Create <Text style={{ color: "#ff6000" }}>Wire</Text>
+            </Text>
+            <TouchableOpacity onPress={onPressVideoUploadScreen}>
+              <Text
+                style={{
+                  color: "#fff",
+                  fontWeight: "500",
+                  fontSize: 14,
+                  paddingBottom: 12,
+                  // flexGrow: 1,
+
+                  alignSelf: "center",
+                }}
+              >
+                Upload <Text style={{ color: "#ff6000" }}>Video</Text>
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View style={WireUploadStyles.wireInputTextContainer}>
+            <InputField
+              multiline
+              placeholder="Write your Wire..."
+              inputWrapper={WireUploadStyles.inputWrapper}
+              inputStyle={WireUploadStyles.aboutTextArea}
+              value={wireText}
+              onChangeText={setWireText}
+            />
+
+            {/* 2 — Media Preview (always below text) */}
+            <View style={WireUploadStyles.mediaContainer}>
+              {thumbnails.map((uri, index) => (
+                <TouchableOpacity key={index} onPress={pickMedia}>
+                  <Image
+                    source={{ uri }}
+                    style={WireUploadStyles.mediaThumb}
+                    resizeMode="cover"
+                  />
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            {/* 3 — Upload Button */}
+            <View style={WireUploadStyles.uploadButtonContainer}>
+              <TouchableOpacity style={WireUploadStyles.AIGenerateButton}>
+                <Ionicons name="sparkles-outline" size={24} color="#fff" />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={pickMedia}
+                style={WireUploadStyles.uploadImageButton}
+              >
+                <Ionicons name="image" size={24} color="#fff" />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <DropDown
+            styles={{
+              marginLeft: 0,
+              marginRight: 0,
+              marginTop: 18,
+              // paddingRight: 24,
+            }}
+            iconStyles={{ paddingRight: 16 }}
+            selectText={"Select Age Group"}
+            data={[
+              { key: 1, label: "Under 14 of age" },
+              { key: 2, label: "Above 14 of age" },
+            ]}
+          />
+
+          <DropDown
+            styles={{ marginLeft: 0, marginRight: 0, marginTop: 18 }}
+            selectText={"Comments"}
+            iconStyles={{ paddingRight: 16 }}
+            data={[
+              { key: 1, label: "Turn — ON" },
+              { key: 2, label: "Turn — OFF" },
+            ]}
+          />
+        </View>
+
+        <View
+          style={{
+            flexDirection: "row",
+            width: "auto",
+            justifyContent: "space-between",
+
+            marginTop: 60,
+            marginLeft: 24,
+            marginRight: 24,
+          }}
+        >
+          <CustomizedButton
+            label={"Post Wire"}
+            style={{
+              backgroundColor: "#ff6000",
+              marginRight: 6,
+            }}
+            fontWeight={"900"}
+            textColor={"#fff"}
+            onPress={() => onPressWireUpload(wireText, heading)}
+          />
+          {/* <CustomizedButton
+            label={"Schedule"}
+            style={{
+              backgroundColor: "#202020",
+              marginLeft: 6,
+            }}
+            fontWeight={"900"}
+            textColor={"#404040"}
+          /> */}
+        </View>
+
+        {/* 4 — Future AI Row */}
+        {/* <WireAIBar text={text} onChange={setText} /> */}
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({});

package/src/layout/WireViewLayout.jsx

@@ -0,0 +1,105 @@
+import { ScrollView, Text, View } from "react-native";
+import { WireChannelMetadata } from "../components/WireChannelMetadata";
+import { WireCardLayoutStyles } from "../styles/WireCardLayoutStyles";
+import {
+  MenuInteraction,
+  MenuChannelMeta,
+  CustomizedButton,
+} from "@wereform/pkgm-shared";
+import { WireViewLayoutStyles } from "../styles/WireViewLayoutStyles";
+import { useState } from "react";
+
+export function WireViewLayout({
+  content,
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  isItMe,
+  onPressDeleteButton,
+}) {
+  const [isPressed, setPressed] = useState(false);
+
+  const contentText =
+    content ??
+    `Curiosity is the real engine of progress. You don’t need certainty — you need movement. Every experiment, every failure, every weird idea you chase sharpens your understanding of reality. 
+
+Stop waiting to “figure it out” first. Dive in, break things, rebuild smarter. The mind grows through friction, not comfort. 
+
+Mastery isn’t perfection; it’s the relentless act of returning to the edge — again and again — until the unknown feels like home. The goal isn’t to win. It’s to keep becoming.
+
+#curiosity #growth #mindset #learning`;
+
+  // Only compute finalText if we actually have content
+  const finalText = contentText
+    ? contentText.replace(/\r\n/g, "\n").split("\n")
+    : [];
+
+  function togglePressed() {
+    setPressed(prev => !prev);
+  }
+
+  return (
+    <ScrollView
+      style={WireViewLayoutStyles.container}
+      contentContainerStyle={{ flexGrow: 1 }}
+    >
+      <View style={WireViewLayoutStyles.secondaryContainer}>
+        <MenuChannelMeta
+          containerStyles={{
+            marginTop: 0,
+            paddingBottom: 12,
+            marginLeft: 0,
+            marginRight: 0,
+          }}
+          channelLogo={channelLogo}
+          userName={userName}
+          subscribersCount={subscribersCount}
+          timeAgo={timeAgo}
+          viewsText={viewsText}
+        />
+        <View>
+          <Text style={WireViewLayoutStyles.mainText}>
+            {finalText.length > 0 && (
+              <Text style={WireViewLayoutStyles.mainText}>
+                {finalText.map((text, index) => (
+                  <Text key={index}>
+                    {text.trim().replace(/\s+/g, " ")}
+                    {index < finalText.length - 1 ? "\n" : ""}
+                  </Text>
+                ))}
+              </Text>
+            )}
+          </Text>
+        </View>
+      </View>
+      <View>
+        <MenuInteraction pressed={togglePressed} />
+
+        {isItMe && isPressed && (
+          <CustomizedButton
+            label={"Delete"}
+            textColor={"white"}
+            style={[
+              { backgroundColor: "red", marginTop: 12 },
+              isItMe
+                ? {
+                    position: "absolute",
+                    width: 80,
+                    height: 35,
+                    right: 24,
+                    bottom: 48,
+                  }
+                : "",
+            ]}
+            onPress={() => {
+              console.log("DELETE PRESSED");
+              onPressDeleteButton();
+            }}
+          />
+        )}
+      </View>
+    </ScrollView>
+  );
+}

package/src/styles/WireCardLayoutStyles.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireCardLayoutStyles = StyleSheet.create({
+  container: {
+    width: "auto",
+    minHeight: 200,
+    justifyContent: "space-between",
+    // aspectRatio: 1 / 1,
+    margin: 12,
+    padding: 12,
+    backgroundColor: globalStyles.colors.colorPrimary350,
+    borderRadius: globalStyles.borders.borderPrimary100,
+  },
+
+  mainTextContainer: {
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    marginTop: 10,
+    maxHeight: 360,
+  },
+
+  mainText: {
+    color: "#ddd",
+    fontSize: 15,
+    lineHeight: 22,
+    letterSpacing: 0.3,
+  },
+
+  seeMore: {
+    color: "#fff",
+    fontWeight: "600",
+    marginTop: 4,
+    fontSize: 14,
+  },
+});

package/src/styles/WireChannelMetadataStyles.js

@@ -0,0 +1,104 @@
+import { Platform, StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireChannelMetadataStyles = StyleSheet.create({
+  dateViewsContainer: {
+    flexDirection: "column",
+    width: "auto",
+    justifyContent: "center",
+    alignItems: "flex-end",
+  },
+
+  dateContainer: {
+    flexDirection: "row",
+    paddingBottom: 4,
+    // rowGap: 20,
+  },
+
+  // dateIcon: {
+  //   marginRight: 8,
+  // },
+
+  viewsContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+  },
+
+  // eyeIcon: {
+  //   marginRight: 8,
+  // },
+
+  dateText: {
+    color: globalStyles.colors.colorPrimary600,
+    marginRight: 8,
+    fontSize: Platform.OS === "ios" ? 14 : 12,
+  },
+
+  viewsText: {
+    color: globalStyles.colors.colorPrimary600,
+    marginRight: 8,
+    fontSize: Platform.OS === "ios" ? 14 : 12,
+  },
+
+  channelMetaContainer: {
+    width: "auto",
+    flexDirection: "row",
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    justifyContent: "space-between",
+    // margin: 12,
+    padding: 12,
+    borderRadius: globalStyles.borders.borderPrimary100,
+  },
+
+  channelMetaContainer_ColumnOne: {
+    flexDirection: "row",
+  },
+
+  userImage: {
+    width: 40,
+    height: 40,
+    borderRadius: globalStyles.borders.borderPrimary50,
+  },
+
+  nameSubcountContainer: {
+    flexDirection: "column",
+    justifyContent: "center",
+    paddingLeft: 12,
+  },
+
+  userName: {
+    color: "#fff",
+    fontSize: 16,
+    paddingBottom: 4,
+    fontWeight: "bold",
+  },
+
+  subCountContainer: {
+    flexDirection: "row",
+  },
+
+  subCount: {
+    color: globalStyles.colors.colorPrimary600,
+    paddingRight: 6,
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+
+  subText: {
+    color: "#fff",
+    fontSize: 12,
+  },
+
+  subscribeButtonContainer: {
+    backgroundColor: globalStyles.colors.colorPrimary600,
+    width: 100,
+    borderRadius: globalStyles.borders.borderPrimary400,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  subscribeButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+  },
+});

package/src/styles/WireUploadStyles.js

@@ -0,0 +1,132 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireUploadStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#141414",
+    marginBottom: 120,
+    // paddingHorizontal: 16,
+    // paddingTop: 20,
+  },
+
+  profileSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    // paddingHorizontal: 36,
+
+    borderBottomWidth: 1,
+    paddingTop: 18,
+    paddingBottom: 18,
+    marginLeft: 36,
+    marginRight: 36,
+    borderColor: globalStyles.colors.colorPrimary450,
+  },
+  userImage: {
+    width: 60,
+    height: 60,
+    borderRadius: 12,
+    marginRight: 16,
+  },
+  userInfo: {
+    flexDirection: "column",
+    justifyContent: "center",
+  },
+  userName: {
+    color: "white",
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  channelSettingsText: {
+    color: "#ff6600",
+    marginTop: 4,
+  },
+
+  // /////////////////
+
+  wireInputContainer: {
+    marginRight: 24,
+    marginLeft: 24,
+    marginTop: 24,
+  },
+
+  wireInputTextContainer: {
+    backgroundColor: "#202020",
+    borderRadius: 12,
+  },
+
+  inputWrapper: {
+    backgroundColor: "#202020",
+    width: "auto",
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  aboutTextArea: {
+    textAlignVertical: "top",
+    // whiteSpace: "pre-line",
+    whiteSpace: "pre",
+
+    height: "auto",
+    minHeight: 200,
+    color: "white",
+    paddingTop: 16,
+    marginTop: 0,
+    lineHeight: 24,
+    fontWeight: 400,
+    fontSize: 18,
+    paddingBottom: 36,
+  },
+
+  media: {
+    width: "auto",
+    height: 200,
+    borderRadius: 14,
+    // marginBottom: 16,
+    backgroundColor: "#000",
+  },
+
+  uploadButtonContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+  },
+
+  AIGenerateButton: {
+    paddingRight: 24,
+  },
+
+  uploadImageButton: {
+    paddingRight: 24,
+    // backgroundColor: "#252525",
+    paddingVertical: 24,
+    borderRadius: 12,
+    // marginBottom: 20,
+    // marginTop: 20,
+  },
+
+  uploadButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "600",
+    marginLeft: 8,
+  },
+
+  mediaContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10,
+    width: "auto",
+    marginBottom: 16,
+    paddingLeft: 6,
+    paddingRight: 6,
+    justifyContent: "space-evenly",
+  },
+
+  mediaThumb: {
+    width: 120,
+    height: 120,
+    borderRadius: 12,
+    backgroundColor: "#000",
+  },
+});

package/src/styles/WireViewLayoutStyles.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireViewLayoutStyles = StyleSheet.create({
+  container: {
+    width: "auto",
+    margin: 12,
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 18,
+    paddingRight: 18,
+    backgroundColor: globalStyles.colors.colorPrimary350,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    marginBottom: 96,
+  },
+
+  secondaryContainer: {
+    flexDirection: "column",
+    paddingBottom: 24,
+  },
+
+  mainText: {
+    color: "#fff",
+    lineHeight: 28,
+    fontSize: 18,
+  },
+});

package/src/styles/globalStyles.js

@@ -0,0 +1,28 @@
+export const globalStyles = {
+  colors: {
+    colorPrimary50: "rgba(21, 21, 21, .7)",
+    colorPrimary100: "#151515",
+
+    colorPrimary200: "#252525",
+    colorPrimary250: "rgba(37, 37, 37, .9)",
+
+    colorPrimary300: "#3C3C3C",
+    colorPrimary350: "rgba(60,60,60,.2)",
+
+    colorPrimary400: "#7F7F7F",
+    colorPrimary450: "rgba(127, 127, 127, .3)",
+
+    colorPrimary500: "#D3D3D3",
+
+    colorPrimary600: "#ff6600ff",
+
+    colorPrimary700: "#FF8800",
+  },
+  borders: {
+    borderPrimary50: 8,
+    borderPrimary100: 10,
+    borderPrimary200: 12,
+    borderPrimary300: 15,
+    borderPrimary400: 30,
+  },
+};