@wereform/pkgm-wire 1.0.0 → 1.0.2

package/README.md

@@ -1,28 +1,217 @@
-# @begenone/pkgm-wire
+# @wereform/pkgm-wire
 
-This package provides all functionality for the **"Wire" feature**, BEGENONE’s short-post or tweet-like system.
+Wire UI components and layouts for short-form text content in the WeReform / BEGENONE platform.
 
-## Overview
+This package provides building blocks for rendering, composing, and viewing “Wires” — lightweight, text-first posts with optional media, metadata, and interactions. It is designed for mobile-first usage with React Native and integrates seamlessly with shared menu and interaction components.
 
-The Wire is a lightweight social feed for thoughts, links, or discussions. This package handles:
+---
 
-- Rendering short posts
-- Creating and deleting wires
-- Displaying like counts and comments
-- Basic interactions (likes, replies)
+## Install
 
-## Features
+```bash
+npm install @wereform/pkgm-wire
+# or
+yarn add @wereform/pkgm-wire
+# or
+pnpm add @wereform/pkgm-wire
+```
 
-- 📝 Compose & post wires
-- 🧵 Thread-style replies
-- 💬 Comment & like logic
-- 📄 Clean and scrollable feed interface
+---
 
-## Usage
+## What this package gives you
 
-Used in the mobile app’s **Wire tab**, and may also appear on user profiles or notifications.
+- Wire UI components:
 
-## Tech Stack
+  - Channel metadata header for wires
+  - Compact wire card layout
+  - Full wire view layout
+  - Wire upload / composer layout
 
-- React Native FlatList
-- Shared formatting tools from `@begenone/pkgm-shared`
+- Features:
+
+  - Multiline text rendering with line preservation
+  - Media attachment support (images + videos)
+  - Thumbnail generation for video attachments
+  - Interaction menu integration (like, comment, share, more)
+
+- Built for:
+
+  - React Native / Expo
+  - Text-centric social feeds
+  - Composition with shared UI and menu packages
+
+---
+
+## Exports
+
+From `@wereform/pkgm-wire` you can import:
+
+```ts
+import {
+  WireChannelMetadata,
+  WireCardLayout,
+  WireUploadLayout,
+  WireViewLayout,
+} from "@wereform/pkgm-wire";
+```
+
+---
+
+## Core components
+
+## WireChannelMetadata
+
+Displays channel-level metadata for a wire post.
+
+### Props
+
+```ts
+WireChannelMetadata({
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  containerStyles,
+});
+```
+
+- `channelLogo` Channel profile image URL
+- `userName` Channel or user display name
+- `subscribersCount` Subscriber count text
+- `timeAgo` Relative publish time
+- `viewsText` View count text
+- `containerStyles` Optional style overrides
+
+---
+
+## WireCardLayout
+
+Compact wire preview card used in feeds and lists.
+
+### Props
+
+```ts
+WireCardLayout({
+  content,
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  onPress,
+});
+```
+
+- Truncates long wire content
+- Preserves line breaks
+- Displays “See more” affordance
+- Integrates interaction menu
+
+---
+
+## WireUploadLayout
+
+Composer layout for creating and publishing new wires.
+
+### Props
+
+```ts
+WireUploadLayout({
+  profilePic,
+  userName,
+  onPressVideoUploadScreen,
+  onPressWireUpload,
+});
+```
+
+- Supports:
+
+  - Multiline text input
+  - Image and video attachments
+  - Multiple media selection
+  - Automatic video thumbnail generation
+
+- Returns wire text and heading via callback
+
+---
+
+## WireViewLayout
+
+Full wire detail view for reading and interacting with a single wire.
+
+### Props
+
+```ts
+WireViewLayout({
+  content,
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  isItMe,
+  onPressDeleteButton,
+});
+```
+
+- Renders full wire content with preserved formatting
+- Shows interaction menu
+- Conditionally exposes delete action for owner
+
+---
+
+## Typical usage
+
+```ts
+<WireCardLayout
+  content={wire.text}
+  userName={wire.user.name}
+  subscribersCount={wire.subscribers}
+  timeAgo={wire.timeAgo}
+  viewsText={wire.views}
+/>
+
+<WireUploadLayout
+  userName="Areesh"
+  onPressWireUpload={(text, heading) => createWire(text, heading)}
+/>
+```
+
+---
+
+## Design philosophy
+
+- Text-first, lightweight content
+- UI-only package
+- No API calls or persistence logic
+- Preserves author formatting and intent
+- Designed to scale with feeds and detail views
+
+---
+
+## License
+
+```
+MIT License
+
+Copyright (c) 2025 WeReform / BEGENONE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@wereform/pkgm-wire",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/index.js",
-  "scripts": {
-    "build": "babel src --out-dir dist --extensions .js,.jsx"
-  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -14,10 +15,10 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@wereform/pkgm-channel": "^1.0.0",
-    "@wereform/pkgm-settings": "^1.0.0",
-    "@wereform/pkgm-shared": "^1.0.0",
-    "@wereform/pkgm-video": "^1.0.0",
+    "@wereform/pkgm-channel": "^1.0.3",
+    "@wereform/pkgm-settings": "^1.0.2",
+    "@wereform/pkgm-shared": "^1.0.2",
+    "@wereform/pkgm-video": "^1.0.2",
     "expo-image-picker": "^17.0.8",
     "expo-video-thumbnails": "^10.0.7"
   },
@@ -26,5 +27,8 @@
     "@babel/core": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
     "metro-react-native-babel-preset": "^0.77.0"
+  },
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions .js,.jsx"
   }
-}
+}

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
-};

package/packageJSON.md

@@ -1,29 +0,0 @@
-{
-"name": "@begenone/pkgm-wire",
-"version": "1.0.0",
-"private": true,
-"main": "dist/index.js",
-"peerDependencies": {
-"@expo/vector-icons": "_",
-"react": "_",
-"react-native": "_"
-},
-"scripts": {
-"build": "babel src --out-dir dist --extensions .js,.jsx"
-},
-"dependencies": {
-"@begenone/pkgm-channel": "workspace:_",
-"@begenone/pkgm-settings": "workspace:_",
-"@begenone/pkgm-shared": "workspace:_",
-"@begenone/pkgm-video": "workspace:_",
-"@begenone/pkgm-wire": "workspace:_",
-"expo-image-picker": "^17.0.8",
-"expo-video-thumbnails": "^10.0.7"
-},
-"devDependencies": {
-"@babel/cli": "^7.28.3",
-"@babel/core": "^7.28.5",
-"@babel/preset-env": "^7.28.5",
-"metro-react-native-babel-preset": "^0.77.0"
-}
-}

package/src/components/WireChannelMetadata.jsx

@@ -1,58 +0,0 @@
-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

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

package/src/layout/WireCardLayout.jsx

@@ -1,66 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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,
-  },
-};