@wereform/pkgm-shared 1.0.2 → 1.0.4

package/src/components/menus/MenuInteraction.jsx

@@ -0,0 +1,68 @@
+import { TouchableOpacity, View } from "react-native";
+import { MenuInteractionStyles } from "../../styles/MenuInteractionStyles";
+import { Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+
+/**
+ * MenuInteraction
+ *
+ * Renders the primary interaction controls for a post or wire.
+ * Includes share, comment, repost, like, dislike recognized actions.
+ *
+ * Props:
+ * - containerStyles: override styles for root container
+ * - columnMainIconStyles: override styles for icon column
+ * - pressed: callback to trigger overflow / context menu
+ *
+ * Notes:
+ * - Icons are presentation-only
+ * - Interaction handlers are expected to be wired upstream
+ */
+
+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

@@ -0,0 +1,48 @@
+import { TouchableOpacity, View } from "react-native";
+import { menuNavStyles } from "../../styles/menuNavStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+/**
+ * MenuNav
+ *
+ * Bottom navigation bar for core app sections.
+ * Icons and handlers are injected to keep this component stateless.
+ *
+ * Props:
+ * - homeIcon, wireIcon, uploadIcon, channelIcon, profileIcon: ReactNodes
+ * - onPressHome, onPressWire, onPressUpload, onPressChannel, onPressProfile: callbacks
+ *
+ * Notes:
+ * - Falls back to default profile icon if none is provided
+ * - Designed to be reusable across screens
+ */
+
+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

@@ -0,0 +1,62 @@
+import { Text, View } from "react-native";
+
+/**
+ * CustomizedTitle
+ *
+ * Reusable title-rendering component with built-in truncation
+ * and flexible typography control.
+ *
+ * Behavior:
+ * - Automatically truncates long titles to 75 characters
+ * - Appends an ellipsis (…) when truncation occurs
+ * - Falls back to a default title when no title is provided
+ * - Limits rendering to two lines for layout stability
+ *
+ * Props:
+ * - title: string (raw title text)
+ * - fontSize: number (text size override)
+ * - fontFamily: string (font family override)
+ * - textColor: string (text color override)
+ * - style: ViewStyle (outer container style override)
+ * - textStyle: TextStyle (text style override)
+ * - dateTextStyles: reserved for future extensions
+ *
+ * Notes:
+ * - Designed for feed cards, headers, and compact layouts
+ * - Uses flexShrink and wrapping to avoid layout overflow
+ */
+
+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

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

@@ -0,0 +1,127 @@
+import { Platform, StyleSheet, useWindowDimensions } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+/* Channel metadata styles for menu/feed context */
+export const MenuChannelMetaStyles = StyleSheet.create({
+  container: {
+    // Outer metadata wrapper
+    width: "auto",
+    marginRight: 12,
+    marginLeft: 12,
+  },
+
+  dateViewsContainer: {
+    // Row for date and view count
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 12,
+    paddingRight: 6,
+    paddingLeft: 6,
+  },
+
+  dateContainer: {
+    // Date icon and text container
+    flexDirection: "row",
+    rowGap: 20,
+  },
+
+  dateIcon: {
+    // Date icon spacing
+    marginRight: 8,
+  },
+
+  viewsContainer: {
+    // Views icon and text container
+    flexDirection: "row",
+    alignItems: "center",
+  },
+
+  eyeIcon: {
+    // Eye icon spacing
+    marginRight: 8,
+    marginLeft: 8,
+  },
+
+  dateText: {
+    // Date text style
+    color: globalStyles.colors.colorPrimary600,
+  },
+
+  viewsText: {
+    // Views count text style
+    color: globalStyles.colors.colorPrimary600,
+  },
+
+  channelMetaContainer: {
+    // Channel identity and subscribe container
+    flexDirection: "row",
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    padding: 12,
+    marginBottom: 6,
+    marginTop: 12,
+    borderRadius: globalStyles.borders.borderPrimary100,
+    justifyContent: "space-between",
+  },
+
+  channelMetaContainer_ColumnOne: {
+    // Left column with avatar and name
+    flexDirection: "row",
+  },
+
+  userImage: {
+    // Channel avatar image
+    width: 40,
+    height: 40,
+    borderRadius: globalStyles.borders.borderPrimary50,
+  },
+
+  nameSubcountContainer: {
+    // Username and subscriber count stack
+    flexDirection: "column",
+    paddingLeft: 12,
+  },
+
+  userName: {
+    // Channel display name
+    color: "#fff",
+    fontSize: Platform.OS === "ios" ? 16 : 14,
+    paddingBottom: 4,
+    fontWeight: "bold",
+  },
+
+  subCountContainer: {
+    // Subscriber count row
+    flexDirection: "row",
+  },
+
+  subCount: {
+    // Numeric subscriber count
+    color: globalStyles.colors.colorPrimary600,
+    paddingRight: 6,
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+
+  subText: {
+    // Subscriber label text
+    color: "#fff",
+    fontSize: 12,
+  },
+
+  subscribeButtonContainer: {
+    // Subscribe action button
+    backgroundColor: globalStyles.colors.colorPrimary600,
+    width: Platform.OS === "ios" ? 100 : 80,
+    borderRadius: globalStyles.borders.borderPrimary400,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  subscribeButtonText: {
+    // Subscribe button label
+    color: "#fff",
+    fontWeight: "bold",
+    fontSize: Platform === "ios" ? 18 : 12,
+  },
+});

package/src/styles/MenuInteractionStyles.js

@@ -0,0 +1,23 @@
+/* Interaction bar styles for menu actions */
+export const MenuInteractionStyles = {
+  container: {
+    // Interaction bar container
+    width: "100%",
+    height: 40,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingRight: 16,
+  },
+
+  column_mainIcons: {
+    // Primary interaction icons row
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+  },
+
+  icon: {
+    // Individual icon spacing
+    paddingLeft: 18,
+  },
+};

package/src/styles/commentInputStyles.js

@@ -0,0 +1,27 @@
+import { globalStyles } from "./globalStyles";
+
+/* Comment input field layout styles */
+export const commentInputStyles = {
+  container: {
+    // Comment input 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: {
+    // Comment text input
+    paddingLeft: 8,
+    paddingRight: 8,
+    color: "#fff",
+  },
+};

package/src/styles/customizableButtonStyles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+/* Reusable customizable button styles */
+export const customizableButtonStyles = StyleSheet.create({
+  container: {
+    // Outer wrapper container
+  },
+
+  buttonContainer: {
+    // Button surface container
+    height: 50,
+    width: "auto",
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: globalStyles.borders.borderPrimary100,
+    backgroundColor: "#fff",
+  },
+
+  buttonText: {
+    // Button label text
+    flexDirection: "row",
+    color: "#000",
+    fontSize: 16,
+    textAlign: "center",
+    textAlignVertical: "center",
+    alignItems: "center",
+  },
+});

package/src/styles/dropDownStyles.js

@@ -0,0 +1,57 @@
+import { globalStyles } from "./globalStyles";
+
+/* Dropdown selection component styles */
+export const dropDownStyles = {
+  container: {
+    // Outer dropdown wrapper
+    width: "auto",
+  },
+
+  picker: {
+    // Native picker control
+    height: 40,
+    flex: 1,
+  },
+
+  overlayStyle: {
+    // Modal overlay background
+    backgroundColor: globalStyles.colors.colorPrimary50,
+  },
+
+  optionTextStyle: {
+    // Dropdown option text
+    color: "#fff",
+  },
+
+  optionContainerStyle: {
+    // Dropdown option container
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    borderWidth: 1,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    justifyContent: "space-between",
+  },
+
+  cancelContainerStyle: {
+    // Cancel action container
+    backgroundColor: "#fff",
+  },
+
+  dropDownContainer: {
+    // Selected value display container
+    flexDirection: "row",
+    width: "100%",
+    justifyContent: "space-between",
+    borderRadius: globalStyles.borders.borderPrimary200,
+    height: 50,
+    alignItems: "center",
+    paddingRight: 12,
+    paddingLeft: 12,
+    backgroundColor: globalStyles.colors.colorPrimary200,
+  },
+
+  dropDownText: {
+    // Selected value text
+    color: "#fff",
+    paddingLeft: 12,
+  },
+};

package/src/styles/globalStyles.js

@@ -0,0 +1,27 @@
+/* Global design tokens for colors and border radii */
+export const globalStyles = {
+  colors: {
+    // Primary background shades
+    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",
+
+    // Accent and action colors
+    colorPrimary600: "#ff6600ff",
+    colorPrimary700: "#FF8800",
+  },
+
+  borders: {
+    // Standard border radius scale
+    borderPrimary50: 8,
+    borderPrimary100: 10,
+    borderPrimary200: 12,
+    borderPrimary300: 15,
+    borderPrimary400: 30,
+  },
+};

package/src/styles/headerGlobalStyles.js

@@ -0,0 +1,30 @@
+/* Global header layout styles */
+export const headerGlobalStyles = {
+  container: {
+    // Main header container
+    height: 75,
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: -5,
+  },
+
+  iconsContainer: {
+    // Right-side icon group
+    flexDirection: "row",
+  },
+
+  icons: {
+    // Individual icon spacing
+    paddingRight: 20,
+  },
+
+  image: {
+    // Header logo image
+    width: 120,
+    height: 120,
+    resizeMode: "contain",
+    marginLeft: 24,
+  },
+};

package/src/styles/inputStyles.js

@@ -0,0 +1,41 @@
+/* Reusable input field styles */
+export const inputStyles = {
+  label: {
+    // Input label text
+    fontSize: 14,
+    marginBottom: 5,
+    color: "#333",
+  },
+
+  inputWrapper: {
+    // Input container with icon support
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(37, 37, 37, 0)",
+    overflow: "hidden",
+  },
+
+  input: {
+    // Text input field
+    width: "auto",
+    paddingLeft: 14,
+    paddingRight: 14,
+    fontFamily: "Inter",
+    fontWeight: "700",
+    color: "#3c3c3c",
+  },
+
+  icon: {
+    // Input icon spacing
+    marginHorizontal: 5,
+  },
+
+  error: {
+    // Validation error text
+    color: "red",
+    fontSize: 12,
+    marginTop: 4,
+  },
+};

package/src/styles/menuNavStyles.js

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

package/src/utils/DateViews.jsx

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

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