@gadagi/ui-header 1.0.0 → 1.0.1
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/Header.d.ts +11 -0
- package/dist/Header.d.ts.map +1 -0
- package/dist/UserMenu.d.ts +9 -0
- package/dist/UserMenu.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.LICENSE.txt +9 -0
- package/package.json +8 -7
- package/src/Header.tsx +0 -48
- package/src/UserMenu.tsx +0 -59
- package/src/index.ts +0 -2
package/dist/Header.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { User } from '@gadagi/types';
|
|
3
|
+
interface HeaderProps {
|
|
4
|
+
appName?: string;
|
|
5
|
+
user?: User | null;
|
|
6
|
+
onLogout?: () => void;
|
|
7
|
+
logo?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const Header: React.FC<HeaderProps>;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=Header.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../src/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIrC,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmCxC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../src/UserMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGrC,UAAU,aAAa;IACrB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAQ,UAAU,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@gadagi/design-system")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.gadagiUiHeader=t(require("react"),require("@gadagi/design-system")):e.gadagiUiHeader=t(e.React,e[void 0])}(this,(e,t)=>(()=>{"use strict";var o={698(e,t){var o=Symbol.for("react.transitional.element");function r(e,t,r){var i=null;if(void 0!==r&&(i=""+r),void 0!==t.key&&(i=""+t.key),"key"in t)for(var n in r={},t)"key"!==n&&(r[n]=t[n]);else r=t;return t=r.ref,{$$typeof:o,type:e,key:i,ref:void 0!==t?t:null,props:r}}Symbol.for("react.fragment"),t.jsx=r,t.jsxs=r},848(e,t,o){e.exports=o(698)},158(e){e.exports=t},156(t){t.exports=e}},r={};function i(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={exports:{}};return o[e](n,n.exports,i),n.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};i.r(n),i.d(n,{Header:()=>d,UserMenu:()=>p});var s=i(848),a=i(156),l=i(158);const p=({user:e,onLogout:t})=>{const[o,r]=(0,a.useState)(!1),i=`${e.firstName[0]}${e.lastName[0]}`.toUpperCase();return(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsxs)("button",{onClick:()=>r(e=>!e),style:{display:"flex",alignItems:"center",gap:"8px",background:"transparent",border:"none",cursor:"pointer",color:"#fff"},children:[(0,s.jsx)("div",{style:{width:"32px",height:"32px",borderRadius:"50%",background:l.colors.primary[500],display:"flex",alignItems:"center",justifyContent:"center",fontSize:l.typography.fontSize.sm,fontWeight:l.typography.fontWeight.semibold,color:"#fff"},children:i}),(0,s.jsx)("span",{style:{fontSize:l.typography.fontSize.sm},children:e.firstName})]}),o&&(0,s.jsxs)("div",{style:{position:"absolute",right:0,top:"100%",marginTop:"8px",background:"#fff",border:`1px solid ${l.colors.neutral[200]}`,borderRadius:"8px",padding:"8px",minWidth:"160px",boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:100},children:[(0,s.jsxs)("div",{style:{padding:"8px 12px",borderBottom:`1px solid ${l.colors.neutral[100]}`,marginBottom:"4px"},children:[(0,s.jsxs)("p",{style:{fontSize:l.typography.fontSize.sm,fontWeight:l.typography.fontWeight.medium,color:l.colors.neutral[800],margin:0},children:[e.firstName," ",e.lastName]}),(0,s.jsx)("p",{style:{fontSize:l.typography.fontSize.xs,color:l.colors.neutral[400],margin:0},children:e.email})]}),(0,s.jsx)(l.Button,{variant:"ghost",size:"sm",fullWidth:!0,onClick:()=>{r(!1),t()},children:"Sign out"})]})]})},d=({appName:e="gadagi Platform",user:t,onLogout:o=()=>{},logo:r})=>(0,s.jsxs)("header",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 1.5rem",height:"56px",background:l.colors.neutral[800],borderBottom:`1px solid ${l.colors.neutral[900]}`,position:"sticky",top:0,zIndex:50},children:[(0,s.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[r,(0,s.jsx)("span",{style:{fontSize:l.typography.fontSize.lg,fontWeight:l.typography.fontWeight.semibold,color:"#fff",letterSpacing:"-0.01em"},children:e})]}),(0,s.jsx)("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:t&&(0,s.jsx)(p,{user:t,onLogout:o})})]});return n})());
|
package/package.json
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gadagi/ui-header",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Top header component for gadagi micro-frontends",
|
|
5
|
-
"main": "
|
|
6
|
-
"module": "
|
|
7
|
-
"types": "
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
-
"types": "./
|
|
11
|
-
"
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.esm.js",
|
|
12
|
+
"require": "./dist/index.js"
|
|
12
13
|
}
|
|
13
14
|
},
|
|
14
|
-
"files": ["
|
|
15
|
+
"files": ["dist"],
|
|
15
16
|
"scripts": {
|
|
16
17
|
"build": "webpack --mode production && tsc -p tsconfig.build.json --emitDeclarationOnly",
|
|
17
18
|
"dev": "webpack --mode development --watch"
|
package/src/Header.tsx
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { User } from '@gadagi/types';
|
|
3
|
-
import { colors, typography } from '@gadagi/design-system';
|
|
4
|
-
import { UserMenu } from './UserMenu';
|
|
5
|
-
|
|
6
|
-
interface HeaderProps {
|
|
7
|
-
appName?: string;
|
|
8
|
-
user?: User | null;
|
|
9
|
-
onLogout?: () => void;
|
|
10
|
-
logo?: React.ReactNode;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const Header: React.FC<HeaderProps> = ({
|
|
14
|
-
appName = 'gadagi Platform',
|
|
15
|
-
user,
|
|
16
|
-
onLogout = () => {},
|
|
17
|
-
logo,
|
|
18
|
-
}) => {
|
|
19
|
-
return (
|
|
20
|
-
<header
|
|
21
|
-
style={{
|
|
22
|
-
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
23
|
-
padding: '0 1.5rem', height: '56px',
|
|
24
|
-
background: colors.neutral[800],
|
|
25
|
-
borderBottom: `1px solid ${colors.neutral[900]}`,
|
|
26
|
-
position: 'sticky', top: 0, zIndex: 50,
|
|
27
|
-
}}
|
|
28
|
-
>
|
|
29
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
30
|
-
{logo}
|
|
31
|
-
<span
|
|
32
|
-
style={{
|
|
33
|
-
fontSize: typography.fontSize.lg,
|
|
34
|
-
fontWeight: typography.fontWeight.semibold,
|
|
35
|
-
color: '#fff',
|
|
36
|
-
letterSpacing: '-0.01em',
|
|
37
|
-
}}
|
|
38
|
-
>
|
|
39
|
-
{appName}
|
|
40
|
-
</span>
|
|
41
|
-
</div>
|
|
42
|
-
|
|
43
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
44
|
-
{user && <UserMenu user={user} onLogout={onLogout} />}
|
|
45
|
-
</div>
|
|
46
|
-
</header>
|
|
47
|
-
);
|
|
48
|
-
};
|
package/src/UserMenu.tsx
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { User } from '@gadagi/types';
|
|
3
|
-
import { Button, colors, typography } from '@gadagi/design-system';
|
|
4
|
-
|
|
5
|
-
interface UserMenuProps {
|
|
6
|
-
user: User;
|
|
7
|
-
onLogout: () => void;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const UserMenu: React.FC<UserMenuProps> = ({ user, onLogout }) => {
|
|
11
|
-
const [open, setOpen] = useState(false);
|
|
12
|
-
const initials = `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();
|
|
13
|
-
|
|
14
|
-
return (
|
|
15
|
-
<div style={{ position: 'relative' }}>
|
|
16
|
-
<button
|
|
17
|
-
onClick={() => setOpen(o => !o)}
|
|
18
|
-
style={{
|
|
19
|
-
display: 'flex', alignItems: 'center', gap: '8px',
|
|
20
|
-
background: 'transparent', border: 'none', cursor: 'pointer', color: '#fff',
|
|
21
|
-
}}
|
|
22
|
-
>
|
|
23
|
-
<div
|
|
24
|
-
style={{
|
|
25
|
-
width: '32px', height: '32px', borderRadius: '50%',
|
|
26
|
-
background: colors.primary[500],
|
|
27
|
-
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
28
|
-
fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.semibold,
|
|
29
|
-
color: '#fff',
|
|
30
|
-
}}
|
|
31
|
-
>
|
|
32
|
-
{initials}
|
|
33
|
-
</div>
|
|
34
|
-
<span style={{ fontSize: typography.fontSize.sm }}>{user.firstName}</span>
|
|
35
|
-
</button>
|
|
36
|
-
|
|
37
|
-
{open && (
|
|
38
|
-
<div
|
|
39
|
-
style={{
|
|
40
|
-
position: 'absolute', right: 0, top: '100%', marginTop: '8px',
|
|
41
|
-
background: '#fff', border: `1px solid ${colors.neutral[200]}`,
|
|
42
|
-
borderRadius: '8px', padding: '8px', minWidth: '160px',
|
|
43
|
-
boxShadow: '0 4px 12px rgba(0,0,0,0.1)', zIndex: 100,
|
|
44
|
-
}}
|
|
45
|
-
>
|
|
46
|
-
<div style={{ padding: '8px 12px', borderBottom: `1px solid ${colors.neutral[100]}`, marginBottom: '4px' }}>
|
|
47
|
-
<p style={{ fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.medium, color: colors.neutral[800], margin: 0 }}>
|
|
48
|
-
{user.firstName} {user.lastName}
|
|
49
|
-
</p>
|
|
50
|
-
<p style={{ fontSize: typography.fontSize.xs, color: colors.neutral[400], margin: 0 }}>{user.email}</p>
|
|
51
|
-
</div>
|
|
52
|
-
<Button variant="ghost" size="sm" fullWidth onClick={() => { setOpen(false); onLogout(); }}>
|
|
53
|
-
Sign out
|
|
54
|
-
</Button>
|
|
55
|
-
</div>
|
|
56
|
-
)}
|
|
57
|
-
</div>
|
|
58
|
-
);
|
|
59
|
-
};
|
package/src/index.ts
DELETED