@wereform/pkgm-shared 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/buttons/CustomizableButton.js +1 -1
- package/dist/components/dropdowns/DropDown.js +1 -1
- package/dist/components/headers/HeaderGlobal.js +1 -1
- package/dist/components/inputs/InputComment.js +1 -1
- package/dist/components/inputs/InputField.js +1 -1
- package/dist/components/menus/MenuChannelMeta.js +1 -1
- package/dist/components/menus/MenuInteraction.js +1 -1
- package/dist/components/menus/MenuNav.js +1 -1
- package/dist/components/titles/CustomizedTitle.js +1 -1
- package/dist/styles/MenuChannelMetaStyles.js +1 -1
- package/dist/utils/DateViews.js +1 -1
- package/package.json +38 -37
- package/src/components/buttons/CustomizableButton.jsx +16 -0
- package/src/components/dropdowns/DropDown.jsx +16 -0
- package/src/components/headers/HeaderGlobal.jsx +12 -0
- package/src/components/inputs/InputComment.jsx +11 -0
- package/src/components/inputs/InputField.jsx +28 -0
- package/src/components/menus/MenuChannelMeta.jsx +21 -0
- package/src/components/menus/MenuInteraction.jsx +16 -0
- package/src/components/menus/MenuNav.jsx +15 -0
- package/src/components/titles/CustomizedTitle.jsx +26 -0
- package/src/styles/MenuChannelMetaStyles.js +19 -6
- package/src/styles/MenuInteractionStyles.js +4 -2
- package/src/styles/commentInputStyles.js +3 -6
- package/src/styles/customizableButtonStyles.js +6 -1
- package/src/styles/dropDownStyles.js +9 -6
- package/src/styles/globalStyles.js +5 -5
- package/src/styles/headerGlobalStyles.js +5 -1
- package/src/styles/inputStyles.js +10 -5
- package/src/styles/menuNavStyles.js +3 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CustomizedButton=CustomizedButton;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _customizableButtonStyles=require("../../styles/customizableButtonStyles");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CustomizedButton=CustomizedButton;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _customizableButtonStyles=require("../../styles/customizableButtonStyles");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\buttons\\CustomizableButton.jsx";function CustomizedButton(_ref){var label=_ref.label,onPress=_ref.onPress,onPressStyle=_ref.onPressStyle,textColor=_ref.textColor,fontSize=_ref.fontSize,fontFamily=_ref.fontFamily,fontWeight=_ref.fontWeight,customIcon=_ref.customIcon,style=_ref.style,isDisabled=_ref.isDisabled;if(!label){console.warn("CustomizedButton: 'label' prop is missing.");}var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),pressed=_useState2[0],setPressed=_useState2[1];return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPress||function(){return console.warn("CustomizedButton: onPress not provided");},onPressIn:function onPressIn(){return setPressed(true);},onPressOut:function onPressOut(){return setPressed(false);},style:[_customizableButtonStyles.customizableButtonStyles.buttonContainer,style,pressed&&onPressStyle],activeOpacity:1,disabled:isDisabled,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:customIcon?{flexDirection:"row",width:"100%",justifyContent:"space-between",alignItems:"center",paddingRight:12}:{},children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_customizableButtonStyles.customizableButtonStyles.buttonText,{color:textColor||"#fff",fontSize:fontSize||16,fontFamily:fontFamily,fontWeight:fontWeight}],children:label||"Default Button"}),(0,_jsxRuntime.jsx)(_reactNative.View,{children:customIcon&&customIcon})]})});}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.DropDown=DropDown;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _reactNativeModalSelector=_interopRequireDefault(require("react-native-modal-selector"));var _react=require("react");var _dropDownStyles=require("../../styles/dropDownStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.DropDown=DropDown;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _reactNativeModalSelector=_interopRequireDefault(require("react-native-modal-selector"));var _react=require("react");var _dropDownStyles=require("../../styles/dropDownStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\dropdowns\\DropDown.jsx";function DropDown(_ref){var selectText=_ref.selectText,data=_ref.data,styles=_ref.styles,iconStyles=_ref.iconStyles;var _useState=(0,_react.useState)(selectText),_useState2=(0,_slicedToArray2.default)(_useState,2),selected=_useState2[0],setSelected=_useState2[1];return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_dropDownStyles.dropDownStyles.container,styles],children:(0,_jsxRuntime.jsx)(_reactNativeModalSelector.default,{data:data,initValue:selectText||"Select Option",onChange:function onChange(option){console.log("Selected option:",option);setSelected(option);},overlayStyle:_dropDownStyles.dropDownStyles.overlayStyle,optionTextStyle:{color:"#fff",fontWeight:"500"},optionContainerStyle:_dropDownStyles.dropDownStyles.optionContainerStyle,cancelTextStyle:{color:"#000",fontFamily:"Inter",fontWeight:"800"},cancelStyle:_dropDownStyles.dropDownStyles.cancelContainerStyle,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_dropDownStyles.dropDownStyles.dropDownContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_dropDownStyles.dropDownStyles.dropDownText,children:typeof selected==="string"?selected:(selected==null?void 0:selected.label)||"Select Option"}),(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"caret-down",size:16,color:"white",style:iconStyles})]})})});}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.HeaderGlobal=HeaderGlobal;var _reactNative=require("react-native");var _headerGlobalStyles=require("../../styles/headerGlobalStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.HeaderGlobal=HeaderGlobal;var _reactNative=require("react-native");var _headerGlobalStyles=require("../../styles/headerGlobalStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\headers\\HeaderGlobal.jsx";function HeaderGlobal(_ref){var aiIcon=_ref.aiIcon,notificationIcon=_ref.notificationIcon,searchIcon=_ref.searchIcon;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_headerGlobalStyles.headerGlobalStyles.container,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:"https://begenone-images.s3.us-east-1.amazonaws.com/begenone-white-transparent-logo-beta-min.png"},style:_headerGlobalStyles.headerGlobalStyles.image}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_headerGlobalStyles.headerGlobalStyles.iconsContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_headerGlobalStyles.headerGlobalStyles.icons,children:aiIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_headerGlobalStyles.headerGlobalStyles.icons,children:notificationIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_headerGlobalStyles.headerGlobalStyles.icons,children:searchIcon})]})]});}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.InputComment=InputComment;var _reactNative=require("react-native");var _commentInputStyles=require("../../styles/commentInputStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.InputComment=InputComment;var _reactNative=require("react-native");var _commentInputStyles=require("../../styles/commentInputStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\inputs\\InputComment.jsx";function InputComment(_ref){var placeholder=_ref.placeholder,submitIcon=_ref.submitIcon,props=_ref.props;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_commentInputStyles.commentInputStyles.container,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,Object.assign({placeholder:placeholder,placeholderTextColor:"#999",style:[_commentInputStyles.commentInputStyles.input]},props)),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{children:submitIcon})]});}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.InputField=InputField;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _inputStyles=require("../../styles/inputStyles");var _inter=require("@expo-google-fonts/inter");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.InputField=InputField;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _inputStyles=require("../../styles/inputStyles");var _inter=require("@expo-google-fonts/inter");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\inputs\\InputField.jsx";var _excluded=["placeholder","error","iconLeft","iconRight","onIconPress","iconRightColor","inputStyle","inputWrapper","multiline","onChangeText","isEditable","secureTextEntry","Children"];function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}function InputField(_ref){var placeholder=_ref.placeholder,error=_ref.error,iconLeft=_ref.iconLeft,iconRight=_ref.iconRight,onIconPress=_ref.onIconPress,iconRightColor=_ref.iconRightColor,inputStyle=_ref.inputStyle,inputWrapper=_ref.inputWrapper,multiline=_ref.multiline,onChangeText=_ref.onChangeText,isEditable=_ref.isEditable,secureTextEntry=_ref.secureTextEntry,Children=_ref.Children,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useFonts=(0,_inter.useFonts)({Inter_400Regular:_inter.Inter_400Regular,Inter_700Bold:_inter.Inter_700Bold}),_useFonts2=(0,_slicedToArray2.default)(_useFonts,1),fontsLoaded=_useFonts2[0];if(!fontsLoaded){return null;}var isMultiline=multiline||false;return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_inputStyles.inputStyles.inputWrapper,inputWrapper],children:[iconLeft&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:_inputStyles.inputStyles.icon,children:iconLeft}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,Object.assign({editable:isEditable,placeholder:placeholder,placeholderTextColor:"#999",multiline:isMultiline,style:[_inputStyles.inputStyles.input,inputStyle,isMultiline&&{textAlignVertical:"top"}],onChangeText:onChangeText,secureTextEntry:secureTextEntry},props)),iconRight&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_inputStyles.inputStyles.icon,onPress:onIconPress,disabled:!onIconPress,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:iconRight,size:18,color:iconRightColor||"#fff"})})]}),error&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:customErrorStyle,children:error})]});}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.MenuChannelMeta=void 0;var _reactNative=require("react-native");var _MenuChannelMetaStyles=require("../../styles/MenuChannelMetaStyles");var _vectorIcons=require("@expo/vector-icons");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.MenuChannelMeta=void 0;var _reactNative=require("react-native");var _MenuChannelMetaStyles=require("../../styles/MenuChannelMetaStyles");var _vectorIcons=require("@expo/vector-icons");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\menus\\MenuChannelMeta.jsx";var calcWidth;var calcHeight;var MenuChannelMeta=exports.MenuChannelMeta=function MenuChannelMeta(_ref){var timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,containerStyles=_ref.containerStyles,channelContainerStyles=_ref.channelContainerStyles;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_MenuChannelMetaStyles.MenuChannelMetaStyles.container,containerStyles],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.dateViewsContainer,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.dateContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.dateIcon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar",size:16,color:"white"})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.dateText,children:timeAgo||"14 Hours Ago"})]})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.channelMetaContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.channelMetaContainer_ColumnOne,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_MenuChannelMetaStyles.MenuChannelMetaStyles.userImage}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.nameSubcountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_MenuChannelMetaStyles.MenuChannelMetaStyles.userName,inlineStyles.userName],children:userName||"Default Username"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.subCountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.subCount,children:subscribersCount||"0"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.subText,children:"Subscribers"})]})]})]}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:[_MenuChannelMetaStyles.MenuChannelMetaStyles.subscribeButtonContainer,{backgroundColor:"#303030"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_MenuChannelMetaStyles.MenuChannelMetaStyles.subscribeButtonText,{color:"#7f7f7f"}],children:"Subscribe"})})]})]});};var inlineStyles=_reactNative.StyleSheet.create({userName:{width:""}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.MenuInteraction=void 0;var _reactNative=require("react-native");var _MenuInteractionStyles=require("../../styles/MenuInteractionStyles");var _vectorIcons=require("@expo/vector-icons");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.MenuInteraction=void 0;var _reactNative=require("react-native");var _MenuInteractionStyles=require("../../styles/MenuInteractionStyles");var _vectorIcons=require("@expo/vector-icons");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\menus\\MenuInteraction.jsx";var MenuInteraction=exports.MenuInteraction=function MenuInteraction(_ref){var containerStyles=_ref.containerStyles,columnMainIconStyles=_ref.columnMainIconStyles,pressed=_ref.pressed;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_MenuInteractionStyles.MenuInteractionStyles.container,containerStyles],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_MenuInteractionStyles.MenuInteractionStyles.column_mainIcons,columnMainIconStyles],children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"arrow-redo",size:24,color:"white"})})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"chatbubble-ellipses",size:24,color:"white"})})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"repeat-outline",size:24,color:"white"})})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"thumbs-up-outline",size:24,color:"white"})})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"thumbs-down-outline",size:24,color:"white"})})})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:function onPress(){return pressed(true);},children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"ellipsis-vertical-outline",size:24,color:"white"})})]});};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.MenuNav=MenuNav;var _reactNative=require("react-native");var _menuNavStyles=require("../../styles/menuNavStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.MenuNav=MenuNav;var _reactNative=require("react-native");var _menuNavStyles=require("../../styles/menuNavStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\menus\\MenuNav.jsx";function MenuNav(_ref){var homeIcon=_ref.homeIcon,wireIcon=_ref.wireIcon,uploadIcon=_ref.uploadIcon,channelIcon=_ref.channelIcon,profileIcon=_ref.profileIcon,onPressHome=_ref.onPressHome,onPressWire=_ref.onPressWire,onPressUpload=_ref.onPressUpload,onPressChannel=_ref.onPressChannel,onPressProfile=_ref.onPressProfile;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_menuNavStyles.menuNavStyles.container,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressHome,children:homeIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressWire,children:wireIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressUpload,children:uploadIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressChannel,children:channelIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressProfile,children:profileIcon||(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"person-outline",size:24,color:"white"})})]});}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.CustomizedTitle=CustomizedTitle;var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.CustomizedTitle=CustomizedTitle;var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\components\\titles\\CustomizedTitle.jsx";function CustomizedTitle(_ref){var title=_ref.title,fontSize=_ref.fontSize,fontFamily=_ref.fontFamily,textColor=_ref.textColor,style=_ref.style,textStyle=_ref.textStyle,dateTextStyles=_ref.dateTextStyles;var displayTitle=title&&title.length>75?title.slice(0,75)+"…":title||"Here is your default Title!";return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{width:"100%"},style],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{flexShrink:1,fontFamily:fontFamily,fontSize:fontSize,color:textColor,flexWrap:"wrap"},textStyle],numberOfLines:2,children:displayTitle})});}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.MenuChannelMetaStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var MenuChannelMetaStyles=exports.MenuChannelMetaStyles=_reactNative.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.globalStyles.colors.colorPrimary600},viewsText:{color:_globalStyles.globalStyles.colors.colorPrimary600},channelMetaContainer:{flexDirection:"row",backgroundColor:_globalStyles.globalStyles.colors.colorPrimary200,padding:12,marginBottom:6,marginTop:12,borderRadius:_globalStyles.globalStyles.borders.borderPrimary100,justifyContent:"space-between"},channelMetaContainer_ColumnOne:{flexDirection:"row"},userImage:{width:40,height:40,borderRadius:_globalStyles.globalStyles.borders.borderPrimary50},nameSubcountContainer:{flexDirection:"column",paddingLeft:12},userName:{color:"#fff",fontSize:_reactNative.Platform.OS==="ios"?16:14,paddingBottom:4,fontWeight:"bold"},subCountContainer:{flexDirection:"row"},subCount:{color:_globalStyles.globalStyles.colors.colorPrimary600,paddingRight:6,fontSize:12,fontWeight:"bold"},subText:{color:"#fff",fontSize:12},subscribeButtonContainer:{backgroundColor:_globalStyles.globalStyles.colors.colorPrimary600,width:_reactNative.Platform.OS==="ios"?100:80,borderRadius:_globalStyles.globalStyles.borders.borderPrimary400,alignItems:"center",justifyContent:"center"},subscribeButtonText:{color:"#fff",fontWeight:"bold",fontSize:_reactNative.Platform==="ios"?18:12}});
|
package/dist/utils/DateViews.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.DateViews=DateViews;var _reactNative=require("react-native");var _globalStyles=require("../styles/globalStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.DateViews=DateViews;var _reactNative=require("react-native");var _globalStyles=require("../styles/globalStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-shared\\src\\utils\\DateViews.jsx";function DateViews(_ref){var timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,containerStyles=_ref.containerStyles,dateTextStyles=_ref.dateTextStyles,viewsTextStyles=_ref.viewsTextStyles,dateContainerStyles=_ref.dateContainerStyles;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.dateViewsContainer,containerStyles],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.dateContainer,dateContainerStyles],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dateIcon],children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar-clear-outline",size:16,color:"white"})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.dateText,dateTextStyles],children:timeAgo||"14 Hours Ago"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewsContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.eyeIcon],children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"eye-outline",size:16,color:"white"})}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.viewsText,viewsTextStyles],children:[viewsText||"123.400",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"white"},children:" Views"})]})]})]});}var styles=_reactNative.StyleSheet.create({dateViewsContainer:{width:"100%",height:30,flexDirection:"row",justifyContent:"space-between",marginTop:12,paddingRight:8},dateContainer:{flexDirection:"row",rowGap:20,paddingRight:16},dateIcon:{marginRight:8},viewsContainer:{flexDirection:"row"},eyeIcon:{marginRight:8},dateText:{color:_globalStyles.globalStyles.colors.colorPrimary600},viewsText:{color:_globalStyles.globalStyles.colors.colorPrimary600}});
|
package/package.json
CHANGED
|
@@ -1,37 +1,38 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@wereform/pkgm-shared",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"source": "
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"react-native": "
|
|
7
|
-
"files": [
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"README.md"
|
|
11
|
-
],
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@wereform/pkgm-shared",
|
|
3
|
+
"version": "1.0.4",
|
|
4
|
+
"source": "dist/index.js",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"react-native": "dist/index.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"src",
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "babel src --out-dir dist --extensions .js,.jsx",
|
|
14
|
+
"prepublishOnly": "pnpm run build"
|
|
15
|
+
},
|
|
16
|
+
"publishConfig": {
|
|
17
|
+
"access": "public"
|
|
18
|
+
},
|
|
19
|
+
"peerDependencies": {
|
|
20
|
+
"@react-native-picker/picker": "^2.11.4",
|
|
21
|
+
"react": "19.1.0",
|
|
22
|
+
"react-native": "^0.81.4"
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@expo-google-fonts/inter": "^0.4.2",
|
|
26
|
+
"@expo/vector-icons": "^15.0.3",
|
|
27
|
+
"expo-font": "^14.0.9",
|
|
28
|
+
"react-native-dropdown-select-list": "^2.0.5",
|
|
29
|
+
"react-native-modal-selector": "^2.1.2",
|
|
30
|
+
"react-native-picker-select": "^9.3.1"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@babel/cli": "^7.28.3",
|
|
34
|
+
"@babel/core": "^7.28.5",
|
|
35
|
+
"@babel/preset-env": "^7.28.5",
|
|
36
|
+
"metro-react-native-babel-preset": "^0.77.0"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -2,6 +2,22 @@ import { Text, TouchableOpacity, View } from "react-native";
|
|
|
2
2
|
import { customizableButtonStyles } from "../../styles/customizableButtonStyles";
|
|
3
3
|
import { useState } from "react";
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* CustomizedButton
|
|
7
|
+
*
|
|
8
|
+
* A reusable, press-aware button component with optional icon support.
|
|
9
|
+
* Handles pressed state styling and basic prop validation.
|
|
10
|
+
*
|
|
11
|
+
* Props:
|
|
12
|
+
* - label: string (button text)
|
|
13
|
+
* - onPress: function (callback when pressed)
|
|
14
|
+
* - onPressStyle: style applied while pressed
|
|
15
|
+
* - textColor, fontSize, fontFamily, fontWeight: text customization
|
|
16
|
+
* - customIcon: optional icon rendered on the right
|
|
17
|
+
* - style: container style overrides
|
|
18
|
+
* - isDisabled: disables interaction
|
|
19
|
+
*/
|
|
20
|
+
|
|
5
21
|
export function CustomizedButton({
|
|
6
22
|
label,
|
|
7
23
|
onPress,
|
|
@@ -4,6 +4,22 @@ import { useState } from "react";
|
|
|
4
4
|
import { dropDownStyles } from "../../styles/dropDownStyles";
|
|
5
5
|
import { Ionicons } from "@expo/vector-icons";
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* DropDown
|
|
9
|
+
*
|
|
10
|
+
* Wrapper around react-native-modal-selector for selecting a value
|
|
11
|
+
* from a list of options.
|
|
12
|
+
*
|
|
13
|
+
* Props:
|
|
14
|
+
* - selectText: default placeholder text
|
|
15
|
+
* - data: array of { key, label } options
|
|
16
|
+
* - styles: container style overrides
|
|
17
|
+
* - iconStyles: caret icon style overrides
|
|
18
|
+
*
|
|
19
|
+
* Internal State:
|
|
20
|
+
* - selected: currently selected option or placeholder
|
|
21
|
+
*/
|
|
22
|
+
|
|
7
23
|
export function DropDown({ selectText, data, styles, iconStyles }) {
|
|
8
24
|
const [selected, setSelected] = useState(selectText);
|
|
9
25
|
return (
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
import { Image, TouchableOpacity, View } from "react-native";
|
|
2
2
|
import { headerGlobalStyles } from "../../styles/headerGlobalStyles";
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* HeaderGlobal
|
|
6
|
+
*
|
|
7
|
+
* App-wide header component with logo and action icons.
|
|
8
|
+
* Icons are injected to keep this component presentation-only.
|
|
9
|
+
*
|
|
10
|
+
* Props:
|
|
11
|
+
* - aiIcon: ReactNode
|
|
12
|
+
* - notificationIcon: ReactNode
|
|
13
|
+
* - searchIcon: ReactNode
|
|
14
|
+
*/
|
|
15
|
+
|
|
4
16
|
export function HeaderGlobal({ aiIcon, notificationIcon, searchIcon }) {
|
|
5
17
|
return (
|
|
6
18
|
<View style={headerGlobalStyles.container}>
|
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
import { Pressable, TextInput, View } from "react-native";
|
|
2
2
|
import { commentInputStyles } from "../../styles/commentInputStyles";
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* InputComment
|
|
6
|
+
*
|
|
7
|
+
* Lightweight comment input field with an optional submit action.
|
|
8
|
+
*
|
|
9
|
+
* Props:
|
|
10
|
+
* - placeholder: input placeholder text
|
|
11
|
+
* - submitIcon: icon/button rendered on the right
|
|
12
|
+
* - props: spread-through TextInput props (onChangeText, value, etc.)
|
|
13
|
+
*/
|
|
14
|
+
|
|
4
15
|
export function InputComment({ placeholder, submitIcon, props }) {
|
|
5
16
|
return (
|
|
6
17
|
<View style={commentInputStyles.container}>
|
|
@@ -15,6 +15,34 @@ import {
|
|
|
15
15
|
} from "@expo-google-fonts/inter";
|
|
16
16
|
import { Ionicons } from "@expo/vector-icons";
|
|
17
17
|
|
|
18
|
+
/**
|
|
19
|
+
* InputField
|
|
20
|
+
*
|
|
21
|
+
* Fully featured, reusable input component with:
|
|
22
|
+
* - optional left/right icons
|
|
23
|
+
* - error display
|
|
24
|
+
* - secure text support
|
|
25
|
+
* - multiline handling
|
|
26
|
+
* - Expo font loading (Inter)
|
|
27
|
+
*
|
|
28
|
+
* Props:
|
|
29
|
+
* - placeholder: string
|
|
30
|
+
* - error: validation error message
|
|
31
|
+
* - iconLeft: ReactNode
|
|
32
|
+
* - iconRight: Ionicons name
|
|
33
|
+
* - onIconPress: callback for right icon
|
|
34
|
+
* - iconRightColor: color override
|
|
35
|
+
* - inputStyle, inputWrapper: style overrides
|
|
36
|
+
* - multiline: boolean
|
|
37
|
+
* - onChangeText: input handler
|
|
38
|
+
* - isEditable: toggle input editability
|
|
39
|
+
* - secureTextEntry: password mode
|
|
40
|
+
*
|
|
41
|
+
* Notes:
|
|
42
|
+
* - Font loading is required before render
|
|
43
|
+
* - Multiline inputs adjust vertical alignment automatically
|
|
44
|
+
*/
|
|
45
|
+
|
|
18
46
|
export function InputField({
|
|
19
47
|
placeholder,
|
|
20
48
|
error,
|
|
@@ -14,6 +14,27 @@ import { useEffect } from "react";
|
|
|
14
14
|
let calcWidth;
|
|
15
15
|
let calcHeight;
|
|
16
16
|
|
|
17
|
+
/**
|
|
18
|
+
* MenuChannelMeta
|
|
19
|
+
*
|
|
20
|
+
* Displays channel-level metadata for a menu or content view.
|
|
21
|
+
* Includes publish time, channel identity, subscriber count,
|
|
22
|
+
* and a static subscribe button.
|
|
23
|
+
*
|
|
24
|
+
* Props:
|
|
25
|
+
* - timeAgo: string (e.g. "14 Hours Ago")
|
|
26
|
+
* - viewsText: string (currently unused / commented out)
|
|
27
|
+
* - channelLogo: image URL for channel avatar
|
|
28
|
+
* - userName: channel display name
|
|
29
|
+
* - subscribersCount: subscriber total
|
|
30
|
+
* - containerStyles: style overrides for root container
|
|
31
|
+
* - channelContainerStyles: reserved for future layout control
|
|
32
|
+
*
|
|
33
|
+
* Notes:
|
|
34
|
+
* - Provides safe fallbacks for missing data
|
|
35
|
+
* - Subscribe button is visual-only for now
|
|
36
|
+
*/
|
|
37
|
+
|
|
17
38
|
export const MenuChannelMeta = ({
|
|
18
39
|
timeAgo,
|
|
19
40
|
viewsText,
|
|
@@ -3,6 +3,22 @@ import { MenuInteractionStyles } from "../../styles/MenuInteractionStyles";
|
|
|
3
3
|
import { Ionicons } from "@expo/vector-icons";
|
|
4
4
|
import { useState } from "react";
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* MenuInteraction
|
|
8
|
+
*
|
|
9
|
+
* Renders the primary interaction controls for a post or wire.
|
|
10
|
+
* Includes share, comment, repost, like, dislike recognized actions.
|
|
11
|
+
*
|
|
12
|
+
* Props:
|
|
13
|
+
* - containerStyles: override styles for root container
|
|
14
|
+
* - columnMainIconStyles: override styles for icon column
|
|
15
|
+
* - pressed: callback to trigger overflow / context menu
|
|
16
|
+
*
|
|
17
|
+
* Notes:
|
|
18
|
+
* - Icons are presentation-only
|
|
19
|
+
* - Interaction handlers are expected to be wired upstream
|
|
20
|
+
*/
|
|
21
|
+
|
|
6
22
|
export const MenuInteraction = ({
|
|
7
23
|
containerStyles,
|
|
8
24
|
columnMainIconStyles,
|
|
@@ -2,6 +2,21 @@ import { TouchableOpacity, View } from "react-native";
|
|
|
2
2
|
import { menuNavStyles } from "../../styles/menuNavStyles";
|
|
3
3
|
import { Ionicons } from "@expo/vector-icons";
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* MenuNav
|
|
7
|
+
*
|
|
8
|
+
* Bottom navigation bar for core app sections.
|
|
9
|
+
* Icons and handlers are injected to keep this component stateless.
|
|
10
|
+
*
|
|
11
|
+
* Props:
|
|
12
|
+
* - homeIcon, wireIcon, uploadIcon, channelIcon, profileIcon: ReactNodes
|
|
13
|
+
* - onPressHome, onPressWire, onPressUpload, onPressChannel, onPressProfile: callbacks
|
|
14
|
+
*
|
|
15
|
+
* Notes:
|
|
16
|
+
* - Falls back to default profile icon if none is provided
|
|
17
|
+
* - Designed to be reusable across screens
|
|
18
|
+
*/
|
|
19
|
+
|
|
5
20
|
export function MenuNav({
|
|
6
21
|
homeIcon,
|
|
7
22
|
wireIcon,
|
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
import { Text, View } from "react-native";
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* CustomizedTitle
|
|
5
|
+
*
|
|
6
|
+
* Reusable title-rendering component with built-in truncation
|
|
7
|
+
* and flexible typography control.
|
|
8
|
+
*
|
|
9
|
+
* Behavior:
|
|
10
|
+
* - Automatically truncates long titles to 75 characters
|
|
11
|
+
* - Appends an ellipsis (…) when truncation occurs
|
|
12
|
+
* - Falls back to a default title when no title is provided
|
|
13
|
+
* - Limits rendering to two lines for layout stability
|
|
14
|
+
*
|
|
15
|
+
* Props:
|
|
16
|
+
* - title: string (raw title text)
|
|
17
|
+
* - fontSize: number (text size override)
|
|
18
|
+
* - fontFamily: string (font family override)
|
|
19
|
+
* - textColor: string (text color override)
|
|
20
|
+
* - style: ViewStyle (outer container style override)
|
|
21
|
+
* - textStyle: TextStyle (text style override)
|
|
22
|
+
* - dateTextStyles: reserved for future extensions
|
|
23
|
+
*
|
|
24
|
+
* Notes:
|
|
25
|
+
* - Designed for feed cards, headers, and compact layouts
|
|
26
|
+
* - Uses flexShrink and wrapping to avoid layout overflow
|
|
27
|
+
*/
|
|
28
|
+
|
|
3
29
|
export function CustomizedTitle({
|
|
4
30
|
title,
|
|
5
31
|
fontSize,
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import { Platform, StyleSheet, useWindowDimensions } from "react-native";
|
|
2
2
|
import { globalStyles } from "./globalStyles";
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
// checkDimensions();
|
|
7
|
-
|
|
4
|
+
/* Channel metadata styles for menu/feed context */
|
|
8
5
|
export const MenuChannelMetaStyles = StyleSheet.create({
|
|
9
6
|
container: {
|
|
7
|
+
// Outer metadata wrapper
|
|
10
8
|
width: "auto",
|
|
11
9
|
marginRight: 12,
|
|
12
10
|
marginLeft: 12,
|
|
13
11
|
},
|
|
14
12
|
|
|
15
13
|
dateViewsContainer: {
|
|
14
|
+
// Row for date and view count
|
|
16
15
|
width: "100%",
|
|
17
16
|
flexDirection: "row",
|
|
18
17
|
justifyContent: "space-between",
|
|
@@ -22,37 +21,42 @@ export const MenuChannelMetaStyles = StyleSheet.create({
|
|
|
22
21
|
},
|
|
23
22
|
|
|
24
23
|
dateContainer: {
|
|
24
|
+
// Date icon and text container
|
|
25
25
|
flexDirection: "row",
|
|
26
26
|
rowGap: 20,
|
|
27
27
|
},
|
|
28
28
|
|
|
29
29
|
dateIcon: {
|
|
30
|
+
// Date icon spacing
|
|
30
31
|
marginRight: 8,
|
|
31
32
|
},
|
|
32
33
|
|
|
33
34
|
viewsContainer: {
|
|
35
|
+
// Views icon and text container
|
|
34
36
|
flexDirection: "row",
|
|
35
37
|
alignItems: "center",
|
|
36
38
|
},
|
|
37
39
|
|
|
38
40
|
eyeIcon: {
|
|
41
|
+
// Eye icon spacing
|
|
39
42
|
marginRight: 8,
|
|
40
43
|
marginLeft: 8,
|
|
41
44
|
},
|
|
42
45
|
|
|
43
46
|
dateText: {
|
|
47
|
+
// Date text style
|
|
44
48
|
color: globalStyles.colors.colorPrimary600,
|
|
45
49
|
},
|
|
46
50
|
|
|
47
51
|
viewsText: {
|
|
52
|
+
// Views count text style
|
|
48
53
|
color: globalStyles.colors.colorPrimary600,
|
|
49
54
|
},
|
|
50
55
|
|
|
51
56
|
channelMetaContainer: {
|
|
57
|
+
// Channel identity and subscribe container
|
|
52
58
|
flexDirection: "row",
|
|
53
59
|
backgroundColor: globalStyles.colors.colorPrimary200,
|
|
54
|
-
// width: "100%",
|
|
55
|
-
// margin: 12,
|
|
56
60
|
padding: 12,
|
|
57
61
|
marginBottom: 6,
|
|
58
62
|
marginTop: 12,
|
|
@@ -61,21 +65,25 @@ export const MenuChannelMetaStyles = StyleSheet.create({
|
|
|
61
65
|
},
|
|
62
66
|
|
|
63
67
|
channelMetaContainer_ColumnOne: {
|
|
68
|
+
// Left column with avatar and name
|
|
64
69
|
flexDirection: "row",
|
|
65
70
|
},
|
|
66
71
|
|
|
67
72
|
userImage: {
|
|
73
|
+
// Channel avatar image
|
|
68
74
|
width: 40,
|
|
69
75
|
height: 40,
|
|
70
76
|
borderRadius: globalStyles.borders.borderPrimary50,
|
|
71
77
|
},
|
|
72
78
|
|
|
73
79
|
nameSubcountContainer: {
|
|
80
|
+
// Username and subscriber count stack
|
|
74
81
|
flexDirection: "column",
|
|
75
82
|
paddingLeft: 12,
|
|
76
83
|
},
|
|
77
84
|
|
|
78
85
|
userName: {
|
|
86
|
+
// Channel display name
|
|
79
87
|
color: "#fff",
|
|
80
88
|
fontSize: Platform.OS === "ios" ? 16 : 14,
|
|
81
89
|
paddingBottom: 4,
|
|
@@ -83,10 +91,12 @@ export const MenuChannelMetaStyles = StyleSheet.create({
|
|
|
83
91
|
},
|
|
84
92
|
|
|
85
93
|
subCountContainer: {
|
|
94
|
+
// Subscriber count row
|
|
86
95
|
flexDirection: "row",
|
|
87
96
|
},
|
|
88
97
|
|
|
89
98
|
subCount: {
|
|
99
|
+
// Numeric subscriber count
|
|
90
100
|
color: globalStyles.colors.colorPrimary600,
|
|
91
101
|
paddingRight: 6,
|
|
92
102
|
fontSize: 12,
|
|
@@ -94,11 +104,13 @@ export const MenuChannelMetaStyles = StyleSheet.create({
|
|
|
94
104
|
},
|
|
95
105
|
|
|
96
106
|
subText: {
|
|
107
|
+
// Subscriber label text
|
|
97
108
|
color: "#fff",
|
|
98
109
|
fontSize: 12,
|
|
99
110
|
},
|
|
100
111
|
|
|
101
112
|
subscribeButtonContainer: {
|
|
113
|
+
// Subscribe action button
|
|
102
114
|
backgroundColor: globalStyles.colors.colorPrimary600,
|
|
103
115
|
width: Platform.OS === "ios" ? 100 : 80,
|
|
104
116
|
borderRadius: globalStyles.borders.borderPrimary400,
|
|
@@ -107,6 +119,7 @@ export const MenuChannelMetaStyles = StyleSheet.create({
|
|
|
107
119
|
},
|
|
108
120
|
|
|
109
121
|
subscribeButtonText: {
|
|
122
|
+
// Subscribe button label
|
|
110
123
|
color: "#fff",
|
|
111
124
|
fontWeight: "bold",
|
|
112
125
|
fontSize: Platform === "ios" ? 18 : 12,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
/* Interaction bar styles for menu actions */
|
|
1
2
|
export const MenuInteractionStyles = {
|
|
2
3
|
container: {
|
|
4
|
+
// Interaction bar container
|
|
3
5
|
width: "100%",
|
|
4
6
|
height: 40,
|
|
5
|
-
// backgroundColor: "#be2e2eff",
|
|
6
7
|
flexDirection: "row",
|
|
7
8
|
justifyContent: "space-between",
|
|
8
9
|
alignItems: "center",
|
|
@@ -10,12 +11,13 @@ export const MenuInteractionStyles = {
|
|
|
10
11
|
},
|
|
11
12
|
|
|
12
13
|
column_mainIcons: {
|
|
14
|
+
// Primary interaction icons row
|
|
13
15
|
flexDirection: "row",
|
|
14
|
-
// width: "100%",
|
|
15
16
|
justifyContent: "space-evenly",
|
|
16
17
|
},
|
|
17
18
|
|
|
18
19
|
icon: {
|
|
20
|
+
// Individual icon spacing
|
|
19
21
|
paddingLeft: 18,
|
|
20
22
|
},
|
|
21
23
|
};
|
|
@@ -1,28 +1,25 @@
|
|
|
1
1
|
import { globalStyles } from "./globalStyles";
|
|
2
2
|
|
|
3
|
+
/* Comment input field layout styles */
|
|
3
4
|
export const commentInputStyles = {
|
|
4
5
|
container: {
|
|
6
|
+
// Comment input container
|
|
5
7
|
flexDirection: "row",
|
|
6
8
|
width: "auto",
|
|
7
9
|
backgroundColor: globalStyles.colors.colorPrimary350,
|
|
8
10
|
borderRadius: globalStyles.borders.borderPrimary200,
|
|
9
11
|
height: 50,
|
|
10
|
-
|
|
11
12
|
justifyContent: "space-between",
|
|
12
13
|
alignItems: "center",
|
|
13
|
-
|
|
14
14
|
justifySelf: "center",
|
|
15
|
-
|
|
16
15
|
marginRight: 12,
|
|
17
16
|
marginLeft: 12,
|
|
18
|
-
|
|
19
17
|
paddingLeft: 12,
|
|
20
18
|
paddingRight: 24,
|
|
21
19
|
},
|
|
22
20
|
|
|
23
21
|
input: {
|
|
24
|
-
//
|
|
25
|
-
|
|
22
|
+
// Comment text input
|
|
26
23
|
paddingLeft: 8,
|
|
27
24
|
paddingRight: 8,
|
|
28
25
|
color: "#fff",
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
2
|
import { globalStyles } from "./globalStyles";
|
|
3
3
|
|
|
4
|
+
/* Reusable customizable button styles */
|
|
4
5
|
export const customizableButtonStyles = StyleSheet.create({
|
|
5
|
-
container: {
|
|
6
|
+
container: {
|
|
7
|
+
// Outer wrapper container
|
|
8
|
+
},
|
|
6
9
|
|
|
7
10
|
buttonContainer: {
|
|
11
|
+
// Button surface container
|
|
8
12
|
height: 50,
|
|
9
13
|
width: "auto",
|
|
10
14
|
flexGrow: 1,
|
|
@@ -15,6 +19,7 @@ export const customizableButtonStyles = StyleSheet.create({
|
|
|
15
19
|
},
|
|
16
20
|
|
|
17
21
|
buttonText: {
|
|
22
|
+
// Button label text
|
|
18
23
|
flexDirection: "row",
|
|
19
24
|
color: "#000",
|
|
20
25
|
fontSize: 16,
|
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
import { globalStyles } from "./globalStyles";
|
|
2
2
|
|
|
3
|
+
/* Dropdown selection component styles */
|
|
3
4
|
export const dropDownStyles = {
|
|
4
5
|
container: {
|
|
6
|
+
// Outer dropdown wrapper
|
|
5
7
|
width: "auto",
|
|
6
|
-
// marginLeft: 16,
|
|
7
|
-
// marginRight: 16,
|
|
8
|
-
// justifyContent: "start",
|
|
9
8
|
},
|
|
10
9
|
|
|
11
10
|
picker: {
|
|
11
|
+
// Native picker control
|
|
12
12
|
height: 40,
|
|
13
13
|
flex: 1,
|
|
14
|
-
|
|
15
|
-
// color: "#151515",
|
|
16
14
|
},
|
|
17
15
|
|
|
18
16
|
overlayStyle: {
|
|
17
|
+
// Modal overlay background
|
|
19
18
|
backgroundColor: globalStyles.colors.colorPrimary50,
|
|
20
19
|
},
|
|
21
20
|
|
|
22
21
|
optionTextStyle: {
|
|
22
|
+
// Dropdown option text
|
|
23
23
|
color: "#fff",
|
|
24
24
|
},
|
|
25
25
|
|
|
26
26
|
optionContainerStyle: {
|
|
27
|
+
// Dropdown option container
|
|
27
28
|
backgroundColor: globalStyles.colors.colorPrimary200,
|
|
28
29
|
borderWidth: 1,
|
|
29
30
|
borderRadius: globalStyles.borders.borderPrimary200,
|
|
@@ -31,14 +32,15 @@ export const dropDownStyles = {
|
|
|
31
32
|
},
|
|
32
33
|
|
|
33
34
|
cancelContainerStyle: {
|
|
35
|
+
// Cancel action container
|
|
34
36
|
backgroundColor: "#fff",
|
|
35
37
|
},
|
|
36
38
|
|
|
37
39
|
dropDownContainer: {
|
|
40
|
+
// Selected value display container
|
|
38
41
|
flexDirection: "row",
|
|
39
42
|
width: "100%",
|
|
40
43
|
justifyContent: "space-between",
|
|
41
|
-
// borderWidth: 1,
|
|
42
44
|
borderRadius: globalStyles.borders.borderPrimary200,
|
|
43
45
|
height: 50,
|
|
44
46
|
alignItems: "center",
|
|
@@ -48,6 +50,7 @@ export const dropDownStyles = {
|
|
|
48
50
|
},
|
|
49
51
|
|
|
50
52
|
dropDownText: {
|
|
53
|
+
// Selected value text
|
|
51
54
|
color: "#fff",
|
|
52
55
|
paddingLeft: 12,
|
|
53
56
|
},
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
+
/* Global design tokens for colors and border radii */
|
|
1
2
|
export const globalStyles = {
|
|
2
3
|
colors: {
|
|
4
|
+
// Primary background shades
|
|
3
5
|
colorPrimary50: "rgba(21, 21, 21, .7)",
|
|
4
6
|
colorPrimary100: "#151515",
|
|
5
|
-
|
|
6
7
|
colorPrimary200: "#252525",
|
|
7
8
|
colorPrimary250: "rgba(37, 37, 37, .9)",
|
|
8
|
-
|
|
9
9
|
colorPrimary300: "#3C3C3C",
|
|
10
10
|
colorPrimary350: "rgba(60,60,60,.2)",
|
|
11
|
-
|
|
12
11
|
colorPrimary400: "#7F7F7F",
|
|
13
|
-
|
|
14
12
|
colorPrimary500: "#D3D3D3",
|
|
15
13
|
|
|
14
|
+
// Accent and action colors
|
|
16
15
|
colorPrimary600: "#ff6600ff",
|
|
17
|
-
|
|
18
16
|
colorPrimary700: "#FF8800",
|
|
19
17
|
},
|
|
18
|
+
|
|
20
19
|
borders: {
|
|
20
|
+
// Standard border radius scale
|
|
21
21
|
borderPrimary50: 8,
|
|
22
22
|
borderPrimary100: 10,
|
|
23
23
|
borderPrimary200: 12,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
/* Global header layout styles */
|
|
1
2
|
export const headerGlobalStyles = {
|
|
2
3
|
container: {
|
|
4
|
+
// Main header container
|
|
3
5
|
height: 75,
|
|
4
6
|
width: "100%",
|
|
5
|
-
// backgroundColor: "#fffffff",
|
|
6
7
|
flexDirection: "row",
|
|
7
8
|
justifyContent: "space-between",
|
|
8
9
|
alignItems: "center",
|
|
@@ -10,14 +11,17 @@ export const headerGlobalStyles = {
|
|
|
10
11
|
},
|
|
11
12
|
|
|
12
13
|
iconsContainer: {
|
|
14
|
+
// Right-side icon group
|
|
13
15
|
flexDirection: "row",
|
|
14
16
|
},
|
|
15
17
|
|
|
16
18
|
icons: {
|
|
19
|
+
// Individual icon spacing
|
|
17
20
|
paddingRight: 20,
|
|
18
21
|
},
|
|
19
22
|
|
|
20
23
|
image: {
|
|
24
|
+
// Header logo image
|
|
21
25
|
width: 120,
|
|
22
26
|
height: 120,
|
|
23
27
|
resizeMode: "contain",
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
+
/* Reusable input field styles */
|
|
1
2
|
export const inputStyles = {
|
|
2
3
|
label: {
|
|
4
|
+
// Input label text
|
|
3
5
|
fontSize: 14,
|
|
4
6
|
marginBottom: 5,
|
|
5
7
|
color: "#333",
|
|
6
8
|
},
|
|
9
|
+
|
|
7
10
|
inputWrapper: {
|
|
11
|
+
// Input container with icon support
|
|
8
12
|
flexDirection: "row",
|
|
9
13
|
alignItems: "center",
|
|
10
|
-
|
|
11
14
|
borderRadius: 8,
|
|
12
15
|
borderWidth: 1,
|
|
13
16
|
borderColor: "rgba(37, 37, 37, 0)",
|
|
14
|
-
|
|
15
|
-
// width: 320,
|
|
16
|
-
overflow: "hidden", // necessary for clipping children
|
|
17
|
+
overflow: "hidden",
|
|
17
18
|
},
|
|
19
|
+
|
|
18
20
|
input: {
|
|
19
|
-
//
|
|
21
|
+
// Text input field
|
|
20
22
|
width: "auto",
|
|
21
23
|
paddingLeft: 14,
|
|
22
24
|
paddingRight: 14,
|
|
@@ -26,9 +28,12 @@ export const inputStyles = {
|
|
|
26
28
|
},
|
|
27
29
|
|
|
28
30
|
icon: {
|
|
31
|
+
// Input icon spacing
|
|
29
32
|
marginHorizontal: 5,
|
|
30
33
|
},
|
|
34
|
+
|
|
31
35
|
error: {
|
|
36
|
+
// Validation error text
|
|
32
37
|
color: "red",
|
|
33
38
|
fontSize: 12,
|
|
34
39
|
marginTop: 4,
|
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
2
|
import { globalStyles } from "./globalStyles";
|
|
3
3
|
|
|
4
|
+
/* Bottom menu navigation bar styles */
|
|
4
5
|
export const menuNavStyles = StyleSheet.create({
|
|
5
6
|
container: {
|
|
7
|
+
// Bottom navigation container
|
|
6
8
|
flexDirection: "row",
|
|
7
9
|
justifyContent: "space-evenly",
|
|
8
|
-
|
|
9
10
|
backgroundColor: globalStyles.colors.colorPrimary200,
|
|
10
|
-
|
|
11
11
|
height: 60,
|
|
12
12
|
width: "80%",
|
|
13
|
-
|
|
14
13
|
alignSelf: "center",
|
|
15
14
|
alignItems: "center",
|
|
16
|
-
|
|
17
15
|
borderRadius: globalStyles.borders.borderPrimary300,
|
|
18
16
|
},
|
|
19
17
|
|
|
20
18
|
uploadIcon: {
|
|
19
|
+
// Highlighted upload icon
|
|
21
20
|
color: globalStyles.colors.colorPrimary600,
|
|
22
21
|
},
|
|
23
22
|
});
|