@wereform/pkgm-shared 1.0.0 → 1.0.2

package/README.md

@@ -1,30 +1,294 @@
 # @begenone/pkgm-shared
 
-This is the **shared utility and components** package used across all BEGENONE modules.
+Shared UI components and utilities for the BEGENONE / WeReform ecosystem.
 
-## Overview
+This package contains reusable, design-system–level building blocks used across mobile and web experiences. It includes buttons, inputs, dropdowns, headers, menus, metadata components, and small utilities that standardize interaction and presentation across the platform.
 
-It holds **reusable code** that needs to be accessed from multiple packages — reducing duplication and ensuring consistent logic.
+---
 
-## Contents
+## Install
 
-- 🧩 UI components (buttons, cards, loaders)
-- 🔁 Utility functions (formatting, parsing, validators)
-- 🔐 Auth context & hooks
-- 🌐 API layer helpers
+```bash
+npm install @begenone/pkgm-shared
+# or
+yarn add @begenone/pkgm-shared
+# or
+pnpm add @begenone/pkgm-shared
+```
 
-## Features
+---
 
-- Single source of truth for design components
-- Shared logic between channel, video, wire, and settings packages
-- Centralized error and logging utilities
+## What this package gives you
 
-## Usage
+- Core UI components:
 
-Imported by all other packages that require consistent behavior or style.
+  - Customizable buttons
+  - Input fields and comment inputs
+  - Dropdown selector
+  - Global header
+  - Navigation menus
+  - Interaction menus
+  - Channel metadata blocks
+  - Title and date/views helpers
 
-## Tech Stack
+- Utilities:
 
-- React + React Native
-- TypeScript
-- React Context & Hooks
+  - URL normalization helper
+
+- Built for:
+
+  - React Native / Expo
+  - Mobile-first layouts
+  - Reuse across multiple packages (`pkgm-channel`, `pkgm-settings`, etc.)
+
+---
+
+## Exports
+
+From `@begenone/pkgm-shared` you can import:
+
+```ts
+import {
+  CustomizedButton,
+  DropDown,
+  InputField,
+  InputComment,
+  HeaderGlobal,
+  MenuNav,
+  MenuInteraction,
+  MenuChannelMeta,
+  CustomizedTitle,
+  DateViews,
+  normalizeUrl,
+} from "@begenone/pkgm-shared";
+```
+
+---
+
+## Core components
+
+## CustomizedButton
+
+Highly flexible button component with press feedback and optional icons.
+
+### Props
+
+```ts
+CustomizedButton({
+  label,
+  onPress,
+  onPressStyle,
+  textColor,
+  fontSize,
+  fontFamily,
+  fontWeight,
+  customIcon,
+  style,
+  isDisabled,
+});
+```
+
+- Supports press-in visual feedback
+- Allows custom icons and typography
+- Gracefully warns if required props are missing
+
+---
+
+## InputField
+
+Reusable text input component with icon support and multiline handling.
+
+### Props
+
+```ts
+InputField({
+  placeholder,
+  error,
+  iconLeft,
+  iconRight,
+  onIconPress,
+  iconRightColor,
+  inputStyle,
+  inputWrapper,
+  multiline,
+  onChangeText,
+  isEditable,
+  secureTextEntry,
+});
+```
+
+- Uses Inter font via Expo
+- Supports left and right icons
+- Handles single-line and multi-line inputs
+
+---
+
+## DropDown
+
+Modal-based dropdown selector built on `react-native-modal-selector`.
+
+### Props
+
+```ts
+DropDown({
+  selectText,
+  data,
+  styles,
+  iconStyles,
+});
+```
+
+- Displays label-based selections
+- Fully stylable container and icon
+
+---
+
+## HeaderGlobal
+
+Top-level header with brand logo and action icons.
+
+```ts
+HeaderGlobal({
+  aiIcon,
+  notificationIcon,
+  searchIcon,
+});
+```
+
+---
+
+## MenuNav
+
+Bottom or primary navigation bar component.
+
+```ts
+MenuNav({
+  homeIcon,
+  wireIcon,
+  uploadIcon,
+  channelIcon,
+  profileIcon,
+  onPressHome,
+  onPressWire,
+  onPressUpload,
+  onPressChannel,
+  onPressProfile,
+});
+```
+
+---
+
+## MenuInteraction
+
+Interaction menu for content actions such as share, comment, repost, like, and dislike.
+
+```ts
+MenuInteraction({
+  containerStyles,
+  columnMainIconStyles,
+  pressed,
+});
+```
+
+---
+
+## MenuChannelMeta
+
+Displays channel metadata including logo, username, subscriber count, and subscribe action.
+
+```ts
+MenuChannelMeta({
+  timeAgo,
+  viewsText,
+  channelLogo,
+  userName,
+  subscribersCount,
+  containerStyles,
+  channelContainerStyles,
+});
+```
+
+---
+
+## CustomizedTitle
+
+Title renderer with automatic truncation and typography control.
+
+```ts
+CustomizedTitle({
+  title,
+  fontSize,
+  fontFamily,
+  textColor,
+  style,
+  textStyle,
+});
+```
+
+---
+
+## Utilities
+
+## DateViews
+
+Displays publish date and view count metadata.
+
+```ts
+DateViews({
+  timeAgo,
+  viewsText,
+  containerStyles,
+  dateTextStyles,
+  viewsTextStyles,
+  dateContainerStyles,
+});
+```
+
+---
+
+## normalizeUrl
+
+Normalizes user-provided URLs into safe, clickable links.
+
+```ts
+normalizeUrl(url): string | null
+```
+
+- Adds `https://` when missing
+- Returns `null` for invalid inputs
+
+---
+
+## Design philosophy
+
+- Single source of truth for shared UI
+- No API calls or business logic
+- Consistent visual language across packages
+- Mobile-first, composable components
+- Designed to scale with the BEGENONE ecosystem
+
+---
+
+## License
+
+MIT License
+
+Copyright (c) 2025 BEGENONE / WeReform
+
+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-shared",
-  "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"
   },
@@ -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,28 +0,0 @@
-{
-"name": "@begenone/pkgm-shared",
-"version": "1.0.0",
-"private": true,
-"main": "dist/index.js",
-"scripts": {
-"build": "babel src --out-dir dist --extensions .js,.jsx"
-},
-"peerDependencies": {
-"@react-native-picker/picker": "^2.11.4",
-"react": "19.1.0",
-"react-native": "^0.81.4"
-},
-"dependencies": {
-"@expo-google-fonts/inter": "^0.4.2",
-"@expo/vector-icons": "^15.0.3",
-"expo-font": "^14.0.9",
-"react-native-dropdown-select-list": "^2.0.5",
-"react-native-modal-selector": "^2.1.2",
-"react-native-picker-select": "^9.3.1"
-},
-"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/buttons/CustomizableButton.jsx

@@ -1,69 +0,0 @@
-import { Text, TouchableOpacity, View } from "react-native";
-import { customizableButtonStyles } from "../../styles/customizableButtonStyles";
-import { useState } from "react";
-
-export function CustomizedButton({
-  label,
-  onPress,
-  onPressStyle,
-  textColor,
-  fontSize,
-  fontFamily,
-  fontWeight,
-  customIcon,
-  style,
-  isDisabled,
-}) {
-  if (!label) {
-    console.warn("CustomizedButton: 'label' prop is missing.");
-  }
-
-  const [pressed, setPressed] = useState(false);
-
-  return (
-    <TouchableOpacity
-      onPress={
-        onPress ||
-        (() => console.warn("CustomizedButton: onPress not provided"))
-      }
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}
-      style={[
-        customizableButtonStyles.buttonContainer,
-        style,
-        pressed && onPressStyle,
-      ]}
-      activeOpacity={1}
-      disabled={isDisabled}
-    >
-      <View
-        style={
-          customIcon
-            ? {
-                flexDirection: "row",
-                width: "100%",
-                justifyContent: "space-between",
-                alignItems: "center",
-                paddingRight: 12,
-              }
-            : {}
-        }
-      >
-        <Text
-          style={[
-            customizableButtonStyles.buttonText,
-            {
-              color: textColor || "#fff",
-              fontSize: fontSize || 16,
-              fontFamily: fontFamily,
-              fontWeight: fontWeight,
-            },
-          ]}
-        >
-          {label || "Default Button"}
-        </Text>
-        <View>{customIcon && customIcon}</View>
-      </View>
-    </TouchableOpacity>
-  );
-}

package/src/components/dropdowns/DropDown.jsx

@@ -1,44 +0,0 @@
-import { Text, View } from "react-native";
-import ModalSelector from "react-native-modal-selector";
-import { useState } from "react";
-import { dropDownStyles } from "../../styles/dropDownStyles";
-import { Ionicons } from "@expo/vector-icons";
-
-export function DropDown({ selectText, data, styles, iconStyles }) {
-  const [selected, setSelected] = useState(selectText);
-  return (
-    <View style={[dropDownStyles.container, styles]}>
-      <ModalSelector
-        data={data}
-        initValue={selectText || "Select Option"}
-        onChange={option => {
-          console.log("Selected option:", option); // <-- key + label!
-          setSelected(option);
-        }}
-        overlayStyle={dropDownStyles.overlayStyle}
-        optionTextStyle={{ color: "#fff", fontWeight: "500" }}
-        optionContainerStyle={dropDownStyles.optionContainerStyle}
-        cancelTextStyle={{
-          color: "#000",
-          fontFamily: "Inter",
-          fontWeight: "800",
-        }}
-        cancelStyle={dropDownStyles.cancelContainerStyle}
-      >
-        <View style={dropDownStyles.dropDownContainer}>
-          <Text style={dropDownStyles.dropDownText}>
-            {typeof selected === "string"
-              ? selected // shows default selectText
-              : selected?.label || "Select Option"}
-          </Text>
-          <Ionicons
-            name="caret-down"
-            size={16}
-            color={"white"}
-            style={iconStyles}
-          />
-        </View>
-      </ModalSelector>
-    </View>
-  );
-}

package/src/components/headers/HeaderGlobal.jsx

@@ -1,26 +0,0 @@
-import { Image, TouchableOpacity, View } from "react-native";
-import { headerGlobalStyles } from "../../styles/headerGlobalStyles";
-
-export function HeaderGlobal({ aiIcon, notificationIcon, searchIcon }) {
-  return (
-    <View style={headerGlobalStyles.container}>
-      <Image
-        source={{
-          uri: "https://begenone-images.s3.us-east-1.amazonaws.com/begenone-white-transparent-logo-beta-min.png",
-        }}
-        style={headerGlobalStyles.image}
-      />
-      <View style={headerGlobalStyles.iconsContainer}>
-        <TouchableOpacity style={headerGlobalStyles.icons}>
-          {aiIcon}
-        </TouchableOpacity>
-        <TouchableOpacity style={headerGlobalStyles.icons}>
-          {notificationIcon}
-        </TouchableOpacity>
-        <TouchableOpacity style={headerGlobalStyles.icons}>
-          {searchIcon}
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-}

package/src/components/inputs/InputComment.jsx

@@ -1,16 +0,0 @@
-import { Pressable, TextInput, View } from "react-native";
-import { commentInputStyles } from "../../styles/commentInputStyles";
-
-export function InputComment({ placeholder, submitIcon, props }) {
-  return (
-    <View style={commentInputStyles.container}>
-      <TextInput
-        placeholder={placeholder}
-        placeholderTextColor="#999"
-        style={[commentInputStyles.input]}
-        {...props}
-      />
-      <Pressable>{submitIcon}</Pressable>
-    </View>
-  );
-}

package/src/components/inputs/InputField.jsx

@@ -1,85 +0,0 @@
-// packages/begenone-pkgm-shared/src/components/inputs/InputField.jsx
-import React, { useState } from "react";
-import {
-  View,
-  TextInput,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-} from "react-native";
-import { inputStyles } from "../../styles/inputStyles";
-import {
-  useFonts,
-  Inter_400Regular,
-  Inter_700Bold,
-} from "@expo-google-fonts/inter";
-import { Ionicons } from "@expo/vector-icons";
-
-export function InputField({
-  placeholder,
-  error,
-  iconLeft,
-  iconRight,
-  onIconPress,
-  iconRightColor,
-  inputStyle,
-  inputWrapper,
-  multiline,
-  onChangeText,
-  isEditable,
-  secureTextEntry,
-  Children,
-  // onPressFunction,
-  ...props
-}) {
-  const [fontsLoaded] = useFonts({
-    Inter_400Regular,
-    Inter_700Bold,
-  });
-
-  if (!fontsLoaded) {
-    return null; // or <AppLoading />
-  }
-
-  // console.log(`Multi Line CHECK`, multiline);
-
-  const isMultiline = multiline || false;
-
-  return (
-    <View>
-      <View style={[inputStyles.inputWrapper, inputWrapper]}>
-        {iconLeft && <View style={inputStyles.icon}>{iconLeft}</View>}
-        <TextInput
-          editable={isEditable}
-          placeholder={placeholder}
-          placeholderTextColor="#999"
-          multiline={isMultiline}
-          style={[
-            inputStyles.input,
-            inputStyle,
-            isMultiline && { textAlignVertical: "top" },
-          ]}
-          onChangeText={onChangeText}
-          secureTextEntry={secureTextEntry}
-          {...props}
-        />
-        {iconRight && (
-          <TouchableOpacity
-            style={inputStyles.icon}
-            onPress={onIconPress}
-            disabled={!onIconPress}
-          >
-            <Ionicons
-              name={iconRight}
-              size={18}
-              color={iconRightColor || "#fff"}
-            />
-          </TouchableOpacity>
-        )}
-      </View>
-      {error && <Text style={customErrorStyle}>{error}</Text>}
-    </View>
-  );
-}
-// ~2.28.0
-// ~4.16.0

package/src/components/menus/MenuChannelMeta.jsx

@@ -1,94 +0,0 @@
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  useWindowDimensions,
-  View,
-} from "react-native";
-import { MenuChannelMetaStyles } from "../../styles/MenuChannelMetaStyles";
-import { Ionicons } from "@expo/vector-icons";
-import { useEffect } from "react";
-
-let calcWidth;
-let calcHeight;
-
-export const MenuChannelMeta = ({
-  timeAgo,
-  viewsText,
-  channelLogo,
-  userName,
-  subscribersCount,
-  containerStyles,
-  channelContainerStyles,
-}) => {
-  return (
-    <View style={[MenuChannelMetaStyles.container, containerStyles]}>
-      <View style={MenuChannelMetaStyles.dateViewsContainer}>
-        <View style={MenuChannelMetaStyles.dateContainer}>
-          <View style={MenuChannelMetaStyles.dateIcon}>
-            <Ionicons name="calendar" size={16} color="white" />
-          </View>
-          <Text style={MenuChannelMetaStyles.dateText}>
-            {timeAgo || "14 Hours Ago"}
-          </Text>
-        </View>
-        {/* <View style={MenuChannelMetaStyles.viewsContainer}>
-          <Text style={MenuChannelMetaStyles.viewsText}>
-            {viewsText || "0"}
-          </Text>
-          <View style={MenuChannelMetaStyles.eyeIcon}>
-            <Ionicons name="eye" size={16} color="white" />
-          </View>
-        </View> */}
-      </View>
-      <View style={MenuChannelMetaStyles.channelMetaContainer}>
-        <View style={MenuChannelMetaStyles.channelMetaContainer_ColumnOne}>
-          <Image
-            source={{
-              uri:
-                channelLogo ||
-                "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
-            }}
-            style={MenuChannelMetaStyles.userImage}
-          />
-          <View style={MenuChannelMetaStyles.nameSubcountContainer}>
-            <Text
-              style={[MenuChannelMetaStyles.userName, inlineStyles.userName]}
-            >
-              {userName || "Default Username"}
-            </Text>
-            <View style={MenuChannelMetaStyles.subCountContainer}>
-              <Text style={MenuChannelMetaStyles.subCount}>
-                {subscribersCount || "0"}
-              </Text>
-              <Text style={MenuChannelMetaStyles.subText}>Subscribers</Text>
-            </View>
-          </View>
-        </View>
-        <Pressable
-          style={[
-            MenuChannelMetaStyles.subscribeButtonContainer,
-            { backgroundColor: "#303030" },
-          ]}
-        >
-          <Text
-            style={[
-              MenuChannelMetaStyles.subscribeButtonText,
-              { color: "#7f7f7f" },
-            ]}
-          >
-            Subscribe
-          </Text>
-        </Pressable>
-      </View>
-    </View>
-  );
-};
-
-const inlineStyles = StyleSheet.create({
-  userName: {
-    width: "",
-  },
-});

package/src/components/menus/MenuInteraction.jsx

@@ -1,52 +0,0 @@
-import { TouchableOpacity, View } from "react-native";
-import { MenuInteractionStyles } from "../../styles/MenuInteractionStyles";
-import { Ionicons } from "@expo/vector-icons";
-import { useState } from "react";
-
-export const MenuInteraction = ({
-  containerStyles,
-  columnMainIconStyles,
-  pressed,
-}) => {
-  return (
-    <View style={[MenuInteractionStyles.container, containerStyles]}>
-      <View
-        style={[MenuInteractionStyles.column_mainIcons, columnMainIconStyles]}
-      >
-        <TouchableOpacity>
-          <View style={MenuInteractionStyles.icon}>
-            <Ionicons name="arrow-redo" size={24} color="white" />
-          </View>
-        </TouchableOpacity>
-
-        <TouchableOpacity>
-          <View style={MenuInteractionStyles.icon}>
-            <Ionicons name="chatbubble-ellipses" size={24} color="white" />
-          </View>
-        </TouchableOpacity>
-
-        <TouchableOpacity>
-          <View style={MenuInteractionStyles.icon}>
-            <Ionicons name="repeat-outline" size={24} color="white" />
-          </View>
-        </TouchableOpacity>
-
-        <TouchableOpacity>
-          <View style={MenuInteractionStyles.icon}>
-            <Ionicons name="thumbs-up-outline" size={24} color="white" />
-          </View>
-        </TouchableOpacity>
-
-        <TouchableOpacity>
-          <View style={MenuInteractionStyles.icon}>
-            <Ionicons name="thumbs-down-outline" size={24} color="white" />
-          </View>
-        </TouchableOpacity>
-      </View>
-
-      <TouchableOpacity onPress={() => pressed(true)}>
-        <Ionicons name="ellipsis-vertical-outline" size={24} color="white" />
-      </TouchableOpacity>
-    </View>
-  );
-};

package/src/components/menus/MenuNav.jsx

@@ -1,33 +0,0 @@
-import { TouchableOpacity, View } from "react-native";
-import { menuNavStyles } from "../../styles/menuNavStyles";
-import { Ionicons } from "@expo/vector-icons";
-
-export function MenuNav({
-  homeIcon,
-  wireIcon,
-  uploadIcon,
-  channelIcon,
-  profileIcon,
-
-  onPressHome,
-  onPressWire,
-  onPressUpload,
-  onPressChannel,
-  onPressProfile,
-}) {
-  return (
-    <View style={menuNavStyles.container}>
-      <TouchableOpacity onPress={onPressHome}>{homeIcon}</TouchableOpacity>
-      <TouchableOpacity onPress={onPressWire}>{wireIcon}</TouchableOpacity>
-      <TouchableOpacity onPress={onPressUpload}>{uploadIcon}</TouchableOpacity>
-      <TouchableOpacity onPress={onPressChannel}>
-        {channelIcon}
-      </TouchableOpacity>
-      <TouchableOpacity onPress={onPressProfile}>
-        {profileIcon || (
-          <Ionicons name="person-outline" size={24} color="white" />
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-}

package/src/components/titles/CustomizedTitle.jsx

@@ -1,36 +0,0 @@
-import { Text, View } from "react-native";
-
-export function CustomizedTitle({
-  title,
-  fontSize,
-  fontFamily,
-  textColor,
-  style,
-  textStyle,
-  dateTextStyles,
-}) {
-  const displayTitle =
-    title && title.length > 75
-      ? title.slice(0, 75) + "…" // adds an ellipsis when truncated
-      : title || "Here is your default Title!";
-
-  return (
-    <View style={[{ width: "100%" }, style]}>
-      <Text
-        style={[
-          {
-            flexShrink: 1,
-            fontFamily: fontFamily,
-            fontSize: fontSize,
-            color: textColor,
-            flexWrap: "wrap",
-          },
-          textStyle,
-        ]}
-        numberOfLines={2}
-      >
-        {displayTitle}
-      </Text>
-    </View>
-  );
-}

package/src/index.js

@@ -1,11 +0,0 @@
-export { InputField } from "./components/inputs/InputField";
-export { MenuNav } from "./components/menus/MenuNav";
-export { HeaderGlobal } from "./components/headers/HeaderGlobal";
-export { MenuInteraction } from "./components/menus/MenuInteraction";
-export { MenuChannelMeta } from "./components/menus/MenuChannelMeta";
-export { InputComment } from "./components/inputs/InputComment.jsx";
-export { DropDown } from "./components/dropdowns/DropDown.jsx";
-export { CustomizedTitle } from "./components/titles/CustomizedTitle.jsx";
-export { CustomizedButton } from "./components/buttons/CustomizableButton.jsx";
-export { DateViews } from "./utils/DateViews.jsx";
-export { default as normalizeUrl } from "./utils/normalizeUrl.js";

package/src/styles/MenuChannelMetaStyles.js

@@ -1,114 +0,0 @@
-import { Platform, StyleSheet, useWindowDimensions } from "react-native";
-import { globalStyles } from "./globalStyles";
-
-export const checkDimensions = () => {};
-
-// checkDimensions();
-
-export const MenuChannelMetaStyles = StyleSheet.create({
-  container: {
-    width: "auto",
-    marginRight: 12,
-    marginLeft: 12,
-  },
-
-  dateViewsContainer: {
-    width: "100%",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: 12,
-    paddingRight: 6,
-    paddingLeft: 6,
-  },
-
-  dateContainer: {
-    flexDirection: "row",
-    rowGap: 20,
-  },
-
-  dateIcon: {
-    marginRight: 8,
-  },
-
-  viewsContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-
-  eyeIcon: {
-    marginRight: 8,
-    marginLeft: 8,
-  },
-
-  dateText: {
-    color: globalStyles.colors.colorPrimary600,
-  },
-
-  viewsText: {
-    color: globalStyles.colors.colorPrimary600,
-  },
-
-  channelMetaContainer: {
-    flexDirection: "row",
-    backgroundColor: globalStyles.colors.colorPrimary200,
-    // width: "100%",
-    // margin: 12,
-    padding: 12,
-    marginBottom: 6,
-    marginTop: 12,
-    borderRadius: globalStyles.borders.borderPrimary100,
-    justifyContent: "space-between",
-  },
-
-  channelMetaContainer_ColumnOne: {
-    flexDirection: "row",
-  },
-
-  userImage: {
-    width: 40,
-    height: 40,
-    borderRadius: globalStyles.borders.borderPrimary50,
-  },
-
-  nameSubcountContainer: {
-    flexDirection: "column",
-    paddingLeft: 12,
-  },
-
-  userName: {
-    color: "#fff",
-    fontSize: Platform.OS === "ios" ? 16 : 14,
-    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: Platform.OS === "ios" ? 100 : 80,
-    borderRadius: globalStyles.borders.borderPrimary400,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-
-  subscribeButtonText: {
-    color: "#fff",
-    fontWeight: "bold",
-    fontSize: Platform === "ios" ? 18 : 12,
-  },
-});

package/src/styles/MenuInteractionStyles.js

@@ -1,21 +0,0 @@
-export const MenuInteractionStyles = {
-  container: {
-    width: "100%",
-    height: 40,
-    // backgroundColor: "#be2e2eff",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingRight: 16,
-  },
-
-  column_mainIcons: {
-    flexDirection: "row",
-    // width: "100%",
-    justifyContent: "space-evenly",
-  },
-
-  icon: {
-    paddingLeft: 18,
-  },
-};

package/src/styles/commentInputStyles.js

@@ -1,30 +0,0 @@
-import { globalStyles } from "./globalStyles";
-
-export const commentInputStyles = {
-  container: {
-    flexDirection: "row",
-    width: "auto",
-    backgroundColor: globalStyles.colors.colorPrimary350,
-    borderRadius: globalStyles.borders.borderPrimary200,
-    height: 50,
-
-    justifyContent: "space-between",
-    alignItems: "center",
-
-    justifySelf: "center",
-
-    marginRight: 12,
-    marginLeft: 12,
-
-    paddingLeft: 12,
-    paddingRight: 24,
-  },
-
-  input: {
-    // width: "100%",
-
-    paddingLeft: 8,
-    paddingRight: 8,
-    color: "#fff",
-  },
-};

package/src/styles/customizableButtonStyles.js

@@ -1,25 +0,0 @@
-import { StyleSheet } from "react-native";
-import { globalStyles } from "./globalStyles";
-
-export const customizableButtonStyles = StyleSheet.create({
-  container: {},
-
-  buttonContainer: {
-    height: 50,
-    width: "auto",
-    flexGrow: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: globalStyles.borders.borderPrimary100,
-    backgroundColor: "#fff",
-  },
-
-  buttonText: {
-    flexDirection: "row",
-    color: "#000",
-    fontSize: 16,
-    textAlign: "center",
-    textAlignVertical: "center",
-    alignItems: "center",
-  },
-});

package/src/styles/dropDownStyles.js

@@ -1,54 +0,0 @@
-import { globalStyles } from "./globalStyles";
-
-export const dropDownStyles = {
-  container: {
-    width: "auto",
-    // marginLeft: 16,
-    // marginRight: 16,
-    // justifyContent: "start",
-  },
-
-  picker: {
-    height: 40,
-    flex: 1,
-
-    // color: "#151515",
-  },
-
-  overlayStyle: {
-    backgroundColor: globalStyles.colors.colorPrimary50,
-  },
-
-  optionTextStyle: {
-    color: "#fff",
-  },
-
-  optionContainerStyle: {
-    backgroundColor: globalStyles.colors.colorPrimary200,
-    borderWidth: 1,
-    borderRadius: globalStyles.borders.borderPrimary200,
-    justifyContent: "space-between",
-  },
-
-  cancelContainerStyle: {
-    backgroundColor: "#fff",
-  },
-
-  dropDownContainer: {
-    flexDirection: "row",
-    width: "100%",
-    justifyContent: "space-between",
-    // borderWidth: 1,
-    borderRadius: globalStyles.borders.borderPrimary200,
-    height: 50,
-    alignItems: "center",
-    paddingRight: 12,
-    paddingLeft: 12,
-    backgroundColor: globalStyles.colors.colorPrimary200,
-  },
-
-  dropDownText: {
-    color: "#fff",
-    paddingLeft: 12,
-  },
-};

package/src/styles/globalStyles.js

@@ -1,27 +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",
-
-    colorPrimary500: "#D3D3D3",
-
-    colorPrimary600: "#ff6600ff",
-
-    colorPrimary700: "#FF8800",
-  },
-  borders: {
-    borderPrimary50: 8,
-    borderPrimary100: 10,
-    borderPrimary200: 12,
-    borderPrimary300: 15,
-    borderPrimary400: 30,
-  },
-};

package/src/styles/headerGlobalStyles.js

@@ -1,26 +0,0 @@
-export const headerGlobalStyles = {
-  container: {
-    height: 75,
-    width: "100%",
-    // backgroundColor: "#fffffff",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginTop: -5,
-  },
-
-  iconsContainer: {
-    flexDirection: "row",
-  },
-
-  icons: {
-    paddingRight: 20,
-  },
-
-  image: {
-    width: 120,
-    height: 120,
-    resizeMode: "contain",
-    marginLeft: 24,
-  },
-};

package/src/styles/inputStyles.js

@@ -1,36 +0,0 @@
-export const inputStyles = {
-  label: {
-    fontSize: 14,
-    marginBottom: 5,
-    color: "#333",
-  },
-  inputWrapper: {
-    flexDirection: "row",
-    alignItems: "center",
-
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: "rgba(37, 37, 37, 0)",
-    // backgroundColor: "#fff",
-    // width: 320,
-    overflow: "hidden", // necessary for clipping children
-  },
-  input: {
-    // height: 50,
-    width: "auto",
-    paddingLeft: 14,
-    paddingRight: 14,
-    fontFamily: "Inter",
-    fontWeight: "700",
-    color: "#3c3c3c",
-  },
-
-  icon: {
-    marginHorizontal: 5,
-  },
-  error: {
-    color: "red",
-    fontSize: 12,
-    marginTop: 4,
-  },
-};

package/src/styles/menuNavStyles.js

@@ -1,23 +0,0 @@
-import { StyleSheet } from "react-native";
-import { globalStyles } from "./globalStyles";
-
-export const menuNavStyles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    justifyContent: "space-evenly",
-
-    backgroundColor: globalStyles.colors.colorPrimary200,
-
-    height: 60,
-    width: "80%",
-
-    alignSelf: "center",
-    alignItems: "center",
-
-    borderRadius: globalStyles.borders.borderPrimary300,
-  },
-
-  uploadIcon: {
-    color: globalStyles.colors.colorPrimary600,
-  },
-});

package/src/utils/DateViews.jsx

@@ -1,72 +0,0 @@
-import { StyleSheet, Text, View } from "react-native";
-import { globalStyles } from "../styles/globalStyles";
-import { Ionicons } from "@expo/vector-icons";
-
-export function DateViews({
-  timeAgo,
-  viewsText,
-  containerStyles,
-  dateTextStyles,
-  viewsTextStyles,
-  dateContainerStyles,
-}) {
-  return (
-    <View style={[styles.dateViewsContainer, containerStyles]}>
-      <View style={[styles.dateContainer, dateContainerStyles]}>
-        <View style={[styles.dateIcon]}>
-          <Ionicons name="calendar-clear-outline" size={16} color="white" />
-        </View>
-        <Text style={[styles.dateText, dateTextStyles]}>
-          {timeAgo || "14 Hours Ago"}
-        </Text>
-      </View>
-      <View style={styles.viewsContainer}>
-        <View style={[styles.eyeIcon]}>
-          <Ionicons name="eye-outline" size={16} color="white" />
-        </View>
-        <Text style={[styles.viewsText, viewsTextStyles]}>
-          {viewsText || "123.400"}
-          <Text style={{ color: "white" }}>{" Views"}</Text>
-        </Text>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  dateViewsContainer: {
-    width: "100%",
-    height: 30,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: 12,
-    paddingRight: 8,
-    // paddingLeft: 8,
-  },
-
-  dateContainer: {
-    flexDirection: "row",
-    rowGap: 20,
-    paddingRight: 16,
-  },
-
-  dateIcon: {
-    marginRight: 8,
-  },
-
-  viewsContainer: {
-    flexDirection: "row",
-  },
-
-  eyeIcon: {
-    marginRight: 8,
-  },
-
-  dateText: {
-    color: globalStyles.colors.colorPrimary600,
-  },
-
-  viewsText: {
-    color: globalStyles.colors.colorPrimary600,
-  },
-});

package/src/utils/normalizeUrl.js

@@ -1,14 +0,0 @@
-const normalizeUrl = url => {
-  if (!url) return null;
-
-  // If it already starts with http:// or https://, return as-is
-  if (/^https?:\/\//i.test(url)) return url;
-
-  // If it looks like a domain (e.g. google.com or mysite.org)
-  if (/^[\w.-]+\.[a-z]{2,}$/i.test(url)) return `https://${url}`;
-
-  // Otherwise, not a valid link — return null or handle differently
-  return null;
-};
-
-export default normalizeUrl;