@clicoh/orion-library 1.1.0-beta.5 → 1.1.0-beta.7
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/03-organisms/Header/Header.d.ts.map +1 -1
- package/dist/components/03-organisms/Header/Header.jsx +5 -9
- package/dist/components/03-organisms/Header/Header.jsx.map +1 -1
- package/dist/components/03-organisms/Header/HeaderActions.d.ts +23 -0
- package/dist/components/03-organisms/Header/HeaderActions.d.ts.map +1 -0
- package/dist/components/03-organisms/Header/HeaderActions.jsx +60 -0
- package/dist/components/03-organisms/Header/HeaderActions.jsx.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/03-organisms/Header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAQ,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/03-organisms/Header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAQ,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAG/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAE9F,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;IACrD,iBAAiB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;IAC1E,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACnE,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;CAClD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAc,EACd,WAAW,EACX,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,GACZ,EAAE,WAAW,GAAG,SAAS,CA6BzB"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import Link from 'next/link';
|
|
2
|
-
import { Logo
|
|
3
|
-
import {
|
|
2
|
+
import { Logo } from '../../01-atoms';
|
|
3
|
+
import { Container, Menu } from '../../02-molecules';
|
|
4
|
+
import { HeaderActions } from './HeaderActions';
|
|
4
5
|
import { SecondMenu } from './SecondMenu';
|
|
5
|
-
import { BellNotification, } from '../../02-molecules/BellNotifications/BellNotification';
|
|
6
6
|
/**
|
|
7
7
|
* Header component for rendering the header section of the application.
|
|
8
8
|
*
|
|
@@ -34,15 +34,11 @@ export function Header({ homeHref = '/', primaryMenu, secondMenu, avatar, bellNo
|
|
|
34
34
|
</Link>
|
|
35
35
|
</div>
|
|
36
36
|
{!!secondMenu && (<SecondMenu menu={secondMenu} onFavoriteToggle={onFavoriteToggle}/>)}
|
|
37
|
-
{!!primaryMenu && (<div>
|
|
37
|
+
{!!primaryMenu && (<div className="hidden lg:block">
|
|
38
38
|
<Menu menu={primaryMenu} orientation="horizontal"/>
|
|
39
39
|
</div>)}
|
|
40
40
|
</div>
|
|
41
|
-
<
|
|
42
|
-
{!!themeSwitch && <ThemeSwitch {...themeSwitch}/>}
|
|
43
|
-
{!!bellNotifications && <BellNotification {...bellNotifications}/>}
|
|
44
|
-
{!!avatar && <Avatar {...avatar} position="right"/>}
|
|
45
|
-
</div>
|
|
41
|
+
<HeaderActions avatar={avatar} bellNotifications={bellNotifications} themeSwitch={themeSwitch} primaryMenu={primaryMenu}/>
|
|
46
42
|
</Container>);
|
|
47
43
|
}
|
|
48
44
|
//# sourceMappingURL=Header.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.jsx","sourceRoot":"","sources":["../../../../src/components/03-organisms/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"Header.jsx","sourceRoot":"","sources":["../../../../src/components/03-organisms/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,IAAI,EAAe,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAa1C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,GAAG,EACd,WAAW,EACX,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,GACC;IACZ,OAAO,CACL,CAAC,SAAS,CACR,EAAE,CAAC,QAAQ,CACX,SAAS,CAAC,6DAA6D,CAEvE;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,yBAAyB,CACtC;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CACnB;YAAA,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,EACjB;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,CAAC,CAAC,UAAU,IAAI,CACf,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,EAAG,CACrE,CACD;QAAA,CAAC,CAAC,CAAC,WAAW,IAAI,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,iBAAiB,CAC9B;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,YAAY,EACnD;UAAA,EAAE,GAAG,CAAC,CACP,CACH;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,aAAa,CACZ,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,WAAW,CAAC,CAAC,WAAW,CAAC,EAE7B;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type ComponentProps, type ReactNode } from 'react';
|
|
2
|
+
import { ThemeSwitch } from '../../01-atoms';
|
|
3
|
+
import { Menu } from '../../02-molecules';
|
|
4
|
+
import { AvatarProps } from '../../02-molecules/Avatar/Avatar';
|
|
5
|
+
import { BellNotificationProps } from '../../02-molecules/BellNotifications/BellNotification';
|
|
6
|
+
export type HeaderActionsProps = {
|
|
7
|
+
avatar?: Omit<AvatarProps, 'className' | 'position'>;
|
|
8
|
+
bellNotifications?: Omit<BellNotificationProps, 'className' | 'position'>;
|
|
9
|
+
themeSwitch?: ComponentProps<typeof ThemeSwitch>;
|
|
10
|
+
primaryMenu?: ComponentProps<typeof Menu>['menu'];
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* HeaderActions renders the header controls (theme switch, notifications and
|
|
14
|
+
* avatar). On large screens they are shown inline; on small screens they
|
|
15
|
+
* collapse into a right-side slide-over triggered by a kebab button, together
|
|
16
|
+
* with the favorites shortcuts, keeping the header usable on narrow viewports.
|
|
17
|
+
*
|
|
18
|
+
* @component
|
|
19
|
+
* @param {HeaderActionsProps} props - Controls and favorites shortcuts.
|
|
20
|
+
* @returns {ReactNode} The rendered header actions.
|
|
21
|
+
*/
|
|
22
|
+
export declare function HeaderActions({ avatar, bellNotifications, themeSwitch, primaryMenu, }: HeaderActionsProps): ReactNode;
|
|
23
|
+
//# sourceMappingURL=HeaderActions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderActions.d.ts","sourceRoot":"","sources":["../../../../src/components/03-organisms/Header/HeaderActions.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAU,IAAI,EAAmC,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAEL,qBAAqB,EACtB,MAAM,uDAAuD,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;IACrD,iBAAiB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACnD,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,iBAAiB,EACjB,WAAW,EACX,WAAW,GACZ,EAAE,kBAAkB,GAAG,SAAS,CA8DhC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useRef, useState, } from 'react';
|
|
3
|
+
import { createPortal } from 'react-dom';
|
|
4
|
+
import { IoEllipsisVertical } from 'react-icons/io5';
|
|
5
|
+
import { ThemeSwitch } from '../../01-atoms';
|
|
6
|
+
import { Avatar, Menu, SlideOver } from '../../02-molecules';
|
|
7
|
+
import { BellNotification, } from '../../02-molecules/BellNotifications/BellNotification';
|
|
8
|
+
/**
|
|
9
|
+
* HeaderActions renders the header controls (theme switch, notifications and
|
|
10
|
+
* avatar). On large screens they are shown inline; on small screens they
|
|
11
|
+
* collapse into a right-side slide-over triggered by a kebab button, together
|
|
12
|
+
* with the favorites shortcuts, keeping the header usable on narrow viewports.
|
|
13
|
+
*
|
|
14
|
+
* @component
|
|
15
|
+
* @param {HeaderActionsProps} props - Controls and favorites shortcuts.
|
|
16
|
+
* @returns {ReactNode} The rendered header actions.
|
|
17
|
+
*/
|
|
18
|
+
export function HeaderActions({ avatar, bellNotifications, themeSwitch, primaryMenu, }) {
|
|
19
|
+
const [showMenu, setShowMenu] = useState(false);
|
|
20
|
+
const slideOverRef = useRef(null);
|
|
21
|
+
const hasActions = !!themeSwitch || !!bellNotifications || !!avatar || !!primaryMenu;
|
|
22
|
+
if (!hasActions) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
const handleMenuClick = (event) => {
|
|
26
|
+
const target = event.target;
|
|
27
|
+
if (target.closest('a[href]')) {
|
|
28
|
+
slideOverRef.current?.handlerClose();
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
return (<>
|
|
32
|
+
<div className="hidden items-center gap-3 lg:flex">
|
|
33
|
+
{!!themeSwitch && <ThemeSwitch {...themeSwitch}/>}
|
|
34
|
+
{!!bellNotifications && <BellNotification {...bellNotifications}/>}
|
|
35
|
+
{!!avatar && <Avatar {...avatar} position="right"/>}
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div className="flex items-center gap-1 lg:hidden">
|
|
39
|
+
{!!bellNotifications && <BellNotification {...bellNotifications}/>}
|
|
40
|
+
<span className="flex cursor-pointer items-center p-1">
|
|
41
|
+
<IoEllipsisVertical size={22} aria-label="Abrir opciones" onClick={() => setShowMenu(true)}/>
|
|
42
|
+
</span>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
{!!showMenu &&
|
|
46
|
+
createPortal(<SlideOver ref={slideOverRef} side="right" closeCallback={() => setShowMenu(false)}>
|
|
47
|
+
<div className="flex flex-col gap-6 p-6">
|
|
48
|
+
<div className="flex items-center justify-between gap-4">
|
|
49
|
+
{!!avatar && <Avatar {...avatar} position="left"/>}
|
|
50
|
+
{!!themeSwitch && <ThemeSwitch {...themeSwitch}/>}
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
{!!primaryMenu && (<div onClick={handleMenuClick}>
|
|
54
|
+
<Menu menu={primaryMenu} orientation="vertical"/>
|
|
55
|
+
</div>)}
|
|
56
|
+
</div>
|
|
57
|
+
</SlideOver>, document.body)}
|
|
58
|
+
</>);
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=HeaderActions.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderActions.jsx","sourceRoot":"","sources":["../../../../src/components/03-organisms/Header/HeaderActions.tsx"],"names":[],"mappings":"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"}
|