@mobilestockweb/header-next 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 { ViewBaseProps } from '@mobilestockweb/container';
+import { ButtonProps } from '@mobilestockweb/button';
+
+declare function Header(): 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<HTMLDivElement>>;
+    Horizontal: react.ForwardRefExoticComponent<SubComponentProps & react.RefAttributes<HTMLDivElement>>;
+    Button: typeof HeaderButton;
+};
+
+interface HeaderProviderProps {
+    children: ReactNode;
+    appName: string;
+    logo: string;
+    avatar?: string;
+    onBackNavigation?(): void;
+    pressOnTitle?(): void;
+    pressOnAvatar?(): void;
+}
+declare function HeaderProvider({ children, appName, avatar, logo, onBackNavigation, pressOnTitle, pressOnAvatar }: HeaderProviderProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderContextState {
+    appName: string;
+    avatar?: string;
+    logo: string;
+    subHeader?: ReactNode;
+    pageTitle?: string;
+    isBackArrowVisible: boolean;
+}
+interface HeaderContextActions {
+    setSubHeader(subHeader?: ReactNode): void;
+    pressOnAvatar?(): void;
+    pressOnTitle?(): void;
+    onNavigateBack(): void;
+    disableLeftSide(value: boolean): void;
+    disableCenter(value: boolean): void;
+    disableRightSide(value: boolean): void;
+    isLeftSideDisabled: boolean;
+    isCenterDisabled: boolean;
+    isRightSideDisabled: boolean;
+}
+type HeaderContextType = HeaderContextState & HeaderContextActions;
+declare function useHeader(): HeaderContextType;
+
+export { Header, HeaderProvider, SubHeader, useHeader };

package/index.js

@@ -0,0 +1,24 @@
+"use strict";var v=Object.defineProperty,pe=Object.defineProperties,fe=Object.getOwnPropertyDescriptor,me=Object.getOwnPropertyDescriptors,be=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var U=(e,o,r)=>o in e?v(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,c=(e,o)=>{for(var r in o||(o={}))x.call(o,r)&&U(e,r,o[r]);if(S)for(var r of S(o))W.call(o,r)&&U(e,r,o[r]);return e},T=(e,o)=>pe(e,me(o));var u=(e,o)=>{var r={};for(var i in e)x.call(e,i)&&o.indexOf(i)<0&&(r[i]=e[i]);if(e!=null&&S)for(var i of S(e))o.indexOf(i)<0&&W.call(e,i)&&(r[i]=e[i]);return r};var He=(e,o)=>{for(var r in o)v(e,r,{get:o[r],enumerable:!0})},Ce=(e,o,r,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of be(o))!x.call(e,n)&&n!==r&&v(e,n,{get:()=>o[n],enumerable:!(i=fe(o,n))||i.enumerable});return e};var ge=e=>Ce(v({},"__esModule",{value:!0}),e);var xe={};He(xe,{Header:()=>G,HeaderProvider:()=>ie,SubHeader:()=>re,useHeader:()=>p});module.exports=ge(xe);var f=require("styled-components"),N=require("@mobilestockweb/button"),B=require("@mobilestockweb/clickable"),l=require("@mobilestockweb/container"),P=require("@mobilestockweb/image"),D=require("@mobilestockweb/typography");var R=require("react"),E=(0,R.createContext)(null);function p(){let e=(0,R.useContext)(E);if(!e)throw new Error("useHeader must be used within a HeaderProvider");return e}var t=require("react/jsx-runtime");function G(){let e=p();return(0,t.jsxs)(ve,{children:[(0,t.jsx)(Te,{children:(0,t.jsx)(Se,{children:(0,t.jsxs)(l.Container.Horizontal,{full:!0,align:"BETWEEN_CENTER",padding:"2XS",children:[(0,t.jsx)(l.Container.Vertical,{align:"CENTER",children:(0,t.jsx)(_,{children:!e.isLeftSideDisabled&&(0,t.jsx)(t.Fragment,{children:e.isBackArrowVisible?(0,t.jsx)(N.Button,{variant:"TRANSPARENT",icon:"ArrowLeft",circular:!0,size:"SM",onClick:e.onNavigateBack}):(0,t.jsx)(P.Img,{src:e.logo,alt:"Logo",size:"FULL",borderRadius:"ROUNDED"})})})}),(0,t.jsxs)(l.Container.Vertical,{full:!0,align:"CENTER",style:{userSelect:"none"},children:[(0,t.jsx)(B.Clickable,{onClick:e.pressOnTitle,disabled:e.isCenterDisabled,children:(0,t.jsx)(D.Typography,{size:"LG",weight:"BOLD",color:"CONTRAST",children:e.appName})}),e.pageTitle&&(0,t.jsx)(D.Typography,{size:"SM",color:"CONTRAST_600",children:e.pageTitle})]}),(0,t.jsx)(l.Container.Vertical,{align:"CENTER",children:(0,t.jsx)(_,{children:!e.isRightSideDisabled&&(0,t.jsx)(t.Fragment,{children:e.avatar?(0,t.jsx)(B.Clickable,{onClick:e.pressOnAvatar,style:{display:"flex"},children:(0,t.jsx)(P.Img,{alt:"Avatar",src:e.avatar,size:"FULL",borderRadius:"ROUNDED"})}):(0,t.jsx)(N.Button,{variant:"TRANSPARENT",icon:"Settings",onClick:e.pressOnAvatar})})})})]})})}),(e==null?void 0:e.subHeader)&&(0,t.jsx)(l.Container.Main,{children:(0,t.jsx)(Re,{children:(0,t.jsx)(l.Container.Horizontal,{align:"BETWEEN_CENTER",children:e==null?void 0:e.subHeader})})})]})}var _=f.styled.div`
+  display: flex;
+  width: 2.5rem;
+`,Se=f.styled.div`
+  max-width: 73.5rem;
+  width: 100%;
+  height: 4rem;
+  flex-direction: column;
+  margin: 0 auto;
+  position: relative;
+  padding: 0.25rem 0.25rem 0 0.25rem;
+  display: flex;
+  justify-content: center;
+`,ve=f.styled.header`
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+`,Te=f.styled.div`
+  background-color: ${({theme:e})=>e.colors.header.background};
+`,Re=f.styled.div`
+  background-color: ${({theme:e})=>e.colors.header.sub};
+  border-radius: 0 0 0.4rem 0.4rem;
+`;var F=require("@mobilestockweb/button");var $=require("react/jsx-runtime");function X(i){var n=i,{icon:e,text:o}=n,r=u(n,["icon","text"]);return(0,$.jsx)(F.Button,c({icon:e,text:o,size:"SM",variant:"LINK",iconAlign:"ABOVE-TEXT"},r))}var q=require("react"),J=require("@mobilestockweb/container");var K=require("react");function h(e){let{setSubHeader:o}=p();(0,K.useEffect)(()=>(o(e),()=>{o(void 0)}),[o])}var Y=require("react/jsx-runtime"),Q=(0,q.forwardRef)(function(n,i){var d=n,{children:o}=d,r=u(d,["children"]);return h((0,Y.jsx)(J.Container.Horizontal,T(c({ref:i,full:!0,align:"CENTER_CENTER"},r),{children:o}))),null});var Z=require("react"),j=require("@mobilestockweb/container");var oe=require("react/jsx-runtime"),ee=(0,Z.forwardRef)(function(n,i){var d=n,{children:o}=d,r=u(d,["children"]);return h((0,oe.jsx)(j.Container.Vertical,T(c({ref:i,full:!0},r),{children:o}))),null});function he(){throw new Error("The SubHeader component should not be used directly. Use SubHeader.Vertical or SubHeader.Horizontal.")}var re=Object.assign(he,{Vertical:ee,Horizontal:Q,Button:X});var te=require("next/router"),a=require("react");var ae=require("react/jsx-runtime");function ie({children:e,appName:o,avatar:r,logo:i,onBackNavigation:n,pressOnTitle:d,pressOnAvatar:b}){let s=(0,te.useRouter)(),[k,y]=(0,a.useState)(void 0),[V,ne]=(0,a.useState)(void 0),[H,de]=(0,a.useState)(!1),[C,se]=(0,a.useState)(!1),[g,le]=(0,a.useState)(!1),[w,ce]=(0,a.useState)(!1);(0,a.useEffect)(()=>{ce(s.pathname!=="/"),setTimeout(()=>{s.pathname!=="/"?y(document.title):y(void 0)},0)},[s.pathname,o]);let L=(0,a.useCallback)(()=>{if(!H){if(n){n();return}s.back()}},[n,s,H]),z=(0,a.useCallback)(()=>{if(!C){if(d){d();return}s.pathname!=="/"&&s.replace("/")}},[d,C,s]),A=(0,a.useCallback)(m=>{de(m)},[]),M=(0,a.useCallback)(m=>{se(m)},[]),O=(0,a.useCallback)(m=>{le(m)},[]),I=(0,a.useCallback)(()=>{g||b==null||b()},[b,g]),ue=(0,a.useMemo)(()=>({appName:o,avatar:r,logo:i,pageTitle:k,subHeader:V,isBackArrowVisible:w,isLeftSideDisabled:H,isCenterDisabled:C,isRightSideDisabled:g,setSubHeader:ne,pressOnTitle:z,onNavigateBack:L,pressOnAvatar:I,disableLeftSide:A,disableCenter:M,disableRightSide:O}),[o,r,i,k,V,w,H,C,g,z,L,I,A,M,O]);return(0,ae.jsx)(E.Provider,{value:ue,children:e})}0&&(module.exports={Header,HeaderProvider,SubHeader,useHeader});

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@mobilestockweb/header-next",
+  "version": "0.0.1",
+  "main": "index.js",
+  "dependencies": {
+    "@mobilestockweb/button": "^1.0.3",
+    "@mobilestockweb/clickable": "^1.0.1",
+    "@mobilestockweb/container": "^0.0.3",
+    "@mobilestockweb/typography": "^0.0.4",
+    "@mobilestockweb/image": "^0.0.5"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "^6.1.8",
+    "next": ">=14.0.0 <16.0.0"
+  }
+}