@mobilestock-native/header 0.0.1

package/index.d.ts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { ViewBaseProps } from '@mobilestock-native/container';
+import { ButtonProps } from '@mobilestock-native/button';
+
+interface HeaderProps {
+    pageTitle?: string;
+    pressOnTitle?(): void;
+    backNavigation?(): void;
+    disableRightSide?: boolean;
+    disableLeftSide?: boolean;
+}
+declare function Header({ pageTitle, pressOnTitle, backNavigation, disableRightSide, disableLeftSide }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderButtonProps extends Omit<ButtonProps, 'icon' | 'text'> {
+    icon: ButtonProps['icon'];
+    text: ButtonProps['text'];
+}
+declare function HeaderButton({ icon, text, ...rest }: HeaderButtonProps): react_jsx_runtime.JSX.Element;
+
+interface SubComponentProps extends ViewBaseProps {
+    children: ReactNode;
+}
+declare function SubHeaderRoot(): never;
+declare const SubHeader: typeof SubHeaderRoot & {
+    Vertical: react.ForwardRefExoticComponent<SubComponentProps & react.RefAttributes<react_native.View>>;
+    Horizontal: react.ForwardRefExoticComponent<SubComponentProps & react.RefAttributes<react_native.View>>;
+    Button: typeof HeaderButton;
+};
+
+interface HeaderProviderProps {
+    children: ReactNode;
+    appName: string;
+    avatar?: string;
+    logo: string;
+    pressOnAvatar?(): void;
+    pressOnTitle?(): void;
+}
+declare function HeaderProvider({ children, appName, avatar, logo, pressOnAvatar, pressOnTitle }: HeaderProviderProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderContextState {
+    appName: string;
+    avatar?: string;
+    logo: string;
+    subHeader?: ReactNode;
+    isBackArrowVisible: boolean;
+}
+interface HeaderContextActions {
+    setSubHeader(subHeader?: ReactNode): void;
+    pressOnAvatar?(): void;
+    pressOnTitle?(): void;
+    onNavigateBack(): void;
+}
+type HeaderContextType = HeaderContextState & HeaderContextActions;
+declare function useHeader(): HeaderContextType;
+
+export { Header, HeaderProvider, SubHeader, useHeader };

package/index.js

@@ -0,0 +1,13 @@
+"use strict";var C=Object.defineProperty,Z=Object.defineProperties,j=Object.getOwnPropertyDescriptor,ee=Object.getOwnPropertyDescriptors,oe=Object.getOwnPropertyNames,H=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var w=(e,o,r)=>o in e?C(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,p=(e,o)=>{for(var r in o||(o={}))S.call(o,r)&&w(e,r,o[r]);if(H)for(var r of H(o))h.call(o,r)&&w(e,r,o[r]);return e},b=(e,o)=>Z(e,ee(o));var c=(e,o)=>{var r={};for(var a in e)S.call(e,a)&&o.indexOf(a)<0&&(r[a]=e[a]);if(e!=null&&H)for(var a of H(e))o.indexOf(a)<0&&h.call(e,a)&&(r[a]=e[a]);return r};var re=(e,o)=>{for(var r in o)C(e,r,{get:o[r],enumerable:!0})},te=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of oe(o))!S.call(e,i)&&i!==r&&C(e,i,{get:()=>o[i],enumerable:!(a=j(o,i))||a.enumerable});return e};var ae=e=>te(C({},"__esModule",{value:!0}),e);var pe={};re(pe,{Header:()=>y,HeaderProvider:()=>q,SubHeader:()=>K,useHeader:()=>l});module.exports=ae(pe);var m=require("styled-components/native"),R=require("@mobilestock-native/button"),B=require("@mobilestock-native/clickable"),u=require("@mobilestock-native/container"),T=require("@mobilestock-native/image"),v=require("@mobilestock-native/typography");var g=require("react"),E=(0,g.createContext)(null);function l(){let e=(0,g.useContext)(E);if(!e)throw new Error("useHeader must be used within a HeaderProvider");return e}var t=require("react/jsx-runtime");function y({pageTitle:e,pressOnTitle:o,backNavigation:r,disableRightSide:a=!1,disableLeftSide:i=!1}){let n=l(),d=o||n.pressOnTitle,f=r||n.onNavigateBack;return(0,t.jsxs)(se,{children:[(0,t.jsx)(ne,{children:(0,t.jsxs)(u.Container.Horizontal,{align:"BETWEEN_CENTER",padding:"NONE_XS_XS_XS",children:[(0,t.jsx)(u.Container.Vertical,{align:"CENTER",children:i?(0,t.jsx)(A,{}):(0,t.jsx)(t.Fragment,{children:n.isBackArrowVisible?(0,t.jsx)(R.Button,{variant:"TRANSPARENT",icon:"ArrowLeft",size:"XS",onPress:f}):(0,t.jsx)(T.Img,{src:n.logo,alt:"Logo",size:"2XS",borderRadius:"ROUNDED"})})}),(0,t.jsxs)(u.Container.Vertical,{full:!0,align:"CENTER",children:[(0,t.jsx)(B.Clickable,{onPress:d,children:(0,t.jsx)(v.Typography,{size:"LG",weight:"BOLD",color:"CONTRAST",align:"CENTER",children:n.appName})}),e&&(0,t.jsx)(v.Typography,{size:"SM",color:"CONTRAST_600",align:"CENTER",children:e})]}),(0,t.jsx)(u.Container.Vertical,{align:"CENTER",children:a?(0,t.jsx)(A,{}):(0,t.jsx)(t.Fragment,{children:n.avatar?(0,t.jsx)(B.Clickable,{onPress:n.pressOnAvatar,style:{display:"flex"},children:(0,t.jsx)(T.Img,{alt:"Avatar",src:n.avatar,size:"2XS",borderRadius:"ROUNDED"})}):(0,t.jsx)(R.Button,{variant:"TRANSPARENT",icon:"Settings",size:"XS",onPress:n.pressOnAvatar})})})]})}),(0,t.jsx)(ie,{children:(0,t.jsx)(u.Container.Horizontal,{align:"BETWEEN_CENTER",children:n==null?void 0:n.subHeader})})]})}var A=m.styled.View`
+  min-width: 40px;
+  min-height: 40px;
+`,ne=m.styled.View`
+  padding-top: 40px;
+  margin: 0 -4px;
+  background-color: ${({theme:e})=>e.colors.header.background};
+`,ie=m.styled.View`
+  background-color: ${({theme:e})=>e.colors.header.sub};
+  border-radius: 0 0 5px 5px;
+`,se=m.styled.View`
+  margin-top: -40px;
+`;var z=require("@mobilestock-native/button");var X=require("react/jsx-runtime");function O(a){var i=a,{icon:e,text:o}=i,r=c(i,["icon","text"]);return(0,X.jsx)(z.Button,p({icon:e,text:o,size:"SM",variant:"LINK",iconAlign:"ABOVE-TEXT"},r))}var L=require("react"),D=require("@mobilestock-native/container");var _=require("react");function x(e){let{setSubHeader:o}=l();(0,_.useEffect)(()=>(o(e),()=>{o(void 0)}),[o])}var M=require("react/jsx-runtime"),I=(0,L.forwardRef)(function(i,a){var n=i,{children:o}=n,r=c(n,["children"]);return x((0,M.jsx)(D.Container.Horizontal,b(p({ref:a,full:!0,align:"CENTER_CENTER"},r),{children:o}))),null});var U=require("react"),G=require("@mobilestock-native/container");var $=require("react/jsx-runtime"),W=(0,U.forwardRef)(function(i,a){var n=i,{children:o}=n,r=c(n,["children"]);return x((0,$.jsx)(G.Container.Vertical,b(p({ref:a,full:!0},r),{children:o}))),null});function de(){throw new Error("The SubHeader component should not be used directly. Use SubHeader.Vertical or SubHeader.Horizontal.")}var K=Object.assign(de,{Vertical:W,Horizontal:I,Button:O});var N=require("expo-router"),s=require("react");var F=require("react/jsx-runtime");function q({children:e,appName:o,avatar:r,logo:a,pressOnAvatar:i,pressOnTitle:n}){let d=(0,N.useRouter)(),f=(0,N.usePathname)(),[P,J]=(0,s.useState)(void 0),[V,Q]=(0,s.useState)(!1);(0,s.useEffect)(()=>{Q(f!=="/")},[f]);let k=(0,s.useCallback)(()=>{d.canGoBack()?d.back():d.replace("/")},[d]),Y=(0,s.useMemo)(()=>({appName:o,avatar:r,logo:a,subHeader:P,isBackArrowVisible:V,setSubHeader:J,pressOnAvatar:i,pressOnTitle:n,onNavigateBack:k}),[o,r,a,P,V,i,n,k]);return(0,F.jsx)(E.Provider,{value:Y,children:e})}0&&(module.exports={Header,HeaderProvider,SubHeader,useHeader});

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@mobilestock-native/header",
+  "version": "0.0.1",
+  "main": "index.js",
+  "dependencies": {
+    "@mobilestock-native/button": "^1.0.5",
+    "@mobilestock-native/clickable": "^1.0.2",
+    "@mobilestock-native/container": "^0.0.4",
+    "@mobilestock-native/image": "^0.0.5",
+    "@mobilestock-native/typography": "^0.0.6"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "styled-components": "^6.1.8",
+    "expo-router": ">=3.5.20"
+  }
+}