@dt-dds/react-app-header 0.1.0-beta.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/LICENSE.md +21 -0
  3. package/README.md +150 -0
  4. package/dist/index.d.mts +63 -0
  5. package/dist/index.d.ts +63 -0
  6. package/dist/index.js +704 -0
  7. package/dist/index.mjs +666 -0
  8. package/package.json +60 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,17 @@
1
+ # @dt-dds/react-app-header
2
+
3
+ ## 0.1.0-beta.1
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: add AppHeader compound component
8
+
9
+ ### Patch Changes
10
+
11
+ - fix(config): update ESLint, TS, and Storybook config
12
+ - Updated dependencies
13
+ - Updated dependencies [223664b]
14
+ - @dt-dds/react-core@1.0.0-beta.52
15
+ - @dt-dds/react-typography@1.0.0-beta.43
16
+ - @dt-dds/themes@1.0.0-beta.10
17
+ - @dt-dds/react-box@1.0.0-beta.58
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Daimler Truck AG.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,150 @@
1
+ # AppHeader Package
2
+
3
+ AppHeader is a flexible compound component that provides a complete application header with support for multiple layouts, responsive behavior, and customizable sections including logo, app name, navigation, and action buttons.
4
+
5
+ ## AppHeader Usage
6
+
7
+ ```jsx
8
+ import { AppHeader } from '@dt-dds/react-app-header';
9
+ import { Icon } from '@dt-dds/react-icon';
10
+ import { IconButton } from '@dt-dds/react-icon-button';
11
+
12
+ export const App = () => {
13
+ return (
14
+ <AppHeader type='standard'>
15
+ <AppHeader.Actions position='left'>
16
+ <IconButton ariaLabel='menu' onClick={() => null}>
17
+ <Icon code='menu' />
18
+ </IconButton>
19
+ </AppHeader.Actions>
20
+
21
+ <AppHeader.AppName name='My App' />
22
+
23
+ <AppHeader.Logo>
24
+ <img src='/logo.svg' alt='Logo' />
25
+ </AppHeader.Logo>
26
+
27
+ <AppHeader.Navigation position='center'>
28
+ <ul>
29
+ <li>
30
+ <a href='/home'>Home</a>
31
+ </li>
32
+ <li>
33
+ <a href='/about'>About</a>
34
+ </li>
35
+ </ul>
36
+ </AppHeader.Navigation>
37
+
38
+ <AppHeader.Actions position='right'>
39
+ <IconButton ariaLabel='search' onClick={() => null}>
40
+ <Icon code='search' />
41
+ </IconButton>
42
+ </AppHeader.Actions>
43
+ </AppHeader>
44
+ );
45
+ };
46
+ ```
47
+
48
+ ## API
49
+
50
+ ### AppHeader
51
+
52
+ The main container component that manages layout and state for all child components.
53
+
54
+ | Property | Type | Default | Description |
55
+ | ---------- | ------------------------- | ---------- | --------------------------------------------------------------------------------------------------- |
56
+ | `type` | `'standard' \| 'compact'` | `standard` | Determines the header layout. `standard` shows app name before logo, `compact` shows it after logo. |
57
+ | `style` | `React.CSSProperties` | - | Custom CSS properties to apply to the header container |
58
+ | `children` | `ReactNode` | - | Child components: Logo, AppName, Navigation, and Actions |
59
+
60
+ ### AppHeader.Logo
61
+
62
+ Container for the application logo. Automatically adjusts positioning based on header type and layout.
63
+
64
+ | Property | Type | Default | Description |
65
+ | ---------- | --------------------- | ------- | --------------------------------- |
66
+ | `children` | `ReactNode` | - | Logo content (typically an image) |
67
+ | `style` | `React.CSSProperties` | - | Custom CSS properties |
68
+
69
+ ### AppHeader.AppName
70
+
71
+ Displays the application name with automatic typography styling based on header type.
72
+
73
+ | Property | Type | Default | Description |
74
+ | ---------- | --------------------- | ------- | --------------------------------------------- |
75
+ | `name` | `string` | - | Application name text |
76
+ | `children` | `ReactNode` | - | Alternative to `name` prop for custom content |
77
+ | `style` | `React.CSSProperties` | - | Custom CSS properties |
78
+
79
+ ### AppHeader.Navigation
80
+
81
+ Container for navigation links. Supports flexible positioning and responsive visibility.
82
+
83
+ | Property | Type | Default | Description |
84
+ | ---------- | ------------------------------- | -------- | ---------------------------------------------- |
85
+ | `children` | `ReactNode` | - | Navigation content (typically a list of links) |
86
+ | `position` | `'center' \| 'left' \| 'right'` | `center` | Navigation position within the header |
87
+ | `style` | `React.CSSProperties` | - | Custom CSS properties |
88
+
89
+ ### AppHeader.Actions
90
+
91
+ Container for action buttons and controls (search, menu, user profile, etc.). Supports left and right positioning.
92
+
93
+ | Property | Type | Default | Description |
94
+ | ---------- | --------------------- | ------- | ------------------------------------- |
95
+ | `children` | `ReactNode` | - | Action buttons and controls |
96
+ | `position` | `'left' \| 'right'` | `right` | Position of actions within the header |
97
+ | `style` | `React.CSSProperties` | - | Custom CSS properties |
98
+
99
+ #### Responsive Props
100
+
101
+ All compound components (`Logo`, `AppName`, `Navigation`, `Actions`) support responsive visibility through `hide` and `show` props:
102
+
103
+ - **`hide`**: Hides the component when the media query matches (e.g., `hide={`(min-width: ${theme.breakpoints.mq3}px)`}` hides on desktop)
104
+ - **`show`**: Shows the component only when the media query matches (e.g., `show={`(max-width: ${theme.breakpoints.mq3}px)`}` shows only on mobile)
105
+ - If both `hide` and `show` are provided, `hide` takes precedence
106
+
107
+ ## Stack
108
+
109
+ - [TypeScript](https://www.typescriptlang.org/) for static type checking
110
+ - [React](https://reactjs.org/) — JavaScript library for user interfaces
111
+ - [Emotion](https://emotion.sh/docs/introduction) — for writing css styles with JavaScript
112
+ - [Storybook](https://storybook.js.org/) — UI component environment powered by Vite
113
+ - [Jest](https://jestjs.io/) - JavaScript Testing Framework
114
+ - [React Testing Library](https://testing-library.com/) - to test UI components in a user-centric way
115
+ - [ESLint](https://eslint.org/) for code linting
116
+ - [Prettier](https://prettier.io) for code formatting
117
+ - [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild
118
+ - [Yarn](https://yarnpkg.com/) from managing packages
119
+
120
+ ## Commands
121
+
122
+ - `yarn build` - Build the package
123
+ - `yarn dev` - Run the package locally
124
+ - `yarn lint` - Lint all files within this package
125
+ - `yarn test` - Run all unit tests
126
+ - `yarn test:report` - Open the test coverage report
127
+ - `yarn test:update:snapshot` - Run all unit tests and update the snapshot
128
+
129
+ ## Compilation
130
+
131
+ Running `yarn build` from the root of the package will use [tsup](https://tsup.egoist.dev/) to compile the raw TypeScript and React code to plain JavaScript.
132
+
133
+ The `/dist` folder contains the compiled output.
134
+
135
+ ```bash
136
+ app-header
137
+ └── dist
138
+ ├── index.d.ts <-- Types
139
+ ├── index.js <-- CommonJS version
140
+ └── index.mjs <-- ES Modules version
141
+ ...
142
+ ```
143
+
144
+ ## Versioning
145
+
146
+ Follows [semantic versioning](https://semver.org/)
147
+
148
+ ## &copy; License
149
+
150
+ Licensed under [MIT License](LICENSE.md)
package/dist/index.d.mts ADDED
@@ -0,0 +1,63 @@
1
+ import { Theme } from '@dt-dds/themes';
2
+ import * as React from 'react';
3
+ import React__default, { HTMLAttributes, ReactNode } from 'react';
4
+
5
+ interface ResponsiveProps {
6
+ hide?: string;
7
+ show?: string;
8
+ }
9
+
10
+ type NavPosition = 'center' | 'left' | 'right';
11
+ interface NavigationProps extends ResponsiveProps, HTMLAttributes<HTMLElement> {
12
+ children?: ReactNode;
13
+ position?: NavPosition;
14
+ }
15
+ declare const Navigation: React.ComponentType<NavigationProps>;
16
+
17
+ type HeaderType = 'standard' | 'compact';
18
+ interface HeaderState {
19
+ isStandard: boolean;
20
+ isCompact: boolean;
21
+ isNavCenter: boolean;
22
+ isNavLeft: boolean;
23
+ isNavRight: boolean;
24
+ isNavCompact: boolean;
25
+ hasAppName: boolean;
26
+ isActionsPositionRight: boolean;
27
+ }
28
+
29
+ interface AppHeaderProps extends HTMLAttributes<HTMLElement> {
30
+ type?: HeaderType;
31
+ }
32
+
33
+ interface ActionsProps extends ResponsiveProps, HTMLAttributes<HTMLDivElement> {
34
+ children: ReactNode;
35
+ position?: 'left' | 'right';
36
+ }
37
+ declare const Actions: React.ComponentType<ActionsProps>;
38
+
39
+ interface AppNameProps extends ResponsiveProps, HTMLAttributes<HTMLDivElement> {
40
+ name?: string;
41
+ children?: ReactNode;
42
+ }
43
+ declare const AppName: React.ComponentType<AppNameProps>;
44
+
45
+ interface LogoProps extends ResponsiveProps, HTMLAttributes<HTMLDivElement> {
46
+ children: ReactNode;
47
+ }
48
+ declare const Logo: React.ComponentType<LogoProps>;
49
+
50
+ type AppHeaderComponentType = React__default.FC<AppHeaderProps> & {
51
+ Logo: React__default.ComponentType<LogoProps>;
52
+ AppName: React__default.ComponentType<AppNameProps>;
53
+ Navigation: React__default.ComponentType<NavigationProps>;
54
+ Actions: React__default.ComponentType<ActionsProps>;
55
+ };
56
+ declare const AppHeader: AppHeaderComponentType;
57
+
58
+ declare module '@emotion/react' {
59
+ interface Theme extends Theme {
60
+ }
61
+ }
62
+
63
+ export { Actions, type ActionsProps, AppHeader, type AppHeaderProps, AppName, type AppNameProps, type HeaderState, type HeaderType, Logo, type LogoProps, type NavPosition, Navigation, type NavigationProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,63 @@
1
+ import { Theme } from '@dt-dds/themes';
2
+ import * as React from 'react';
3
+ import React__default, { HTMLAttributes, ReactNode } from 'react';
4
+
5
+ interface ResponsiveProps {
6
+ hide?: string;
7
+ show?: string;
8
+ }
9
+
10
+ type NavPosition = 'center' | 'left' | 'right';
11
+ interface NavigationProps extends ResponsiveProps, HTMLAttributes<HTMLElement> {
12
+ children?: ReactNode;
13
+ position?: NavPosition;
14
+ }
15
+ declare const Navigation: React.ComponentType<NavigationProps>;
16
+
17
+ type HeaderType = 'standard' | 'compact';
18
+ interface HeaderState {
19
+ isStandard: boolean;
20
+ isCompact: boolean;
21
+ isNavCenter: boolean;
22
+ isNavLeft: boolean;
23
+ isNavRight: boolean;
24
+ isNavCompact: boolean;
25
+ hasAppName: boolean;
26
+ isActionsPositionRight: boolean;
27
+ }
28
+
29
+ interface AppHeaderProps extends HTMLAttributes<HTMLElement> {
30
+ type?: HeaderType;
31
+ }
32
+
33
+ interface ActionsProps extends ResponsiveProps, HTMLAttributes<HTMLDivElement> {
34
+ children: ReactNode;
35
+ position?: 'left' | 'right';
36
+ }
37
+ declare const Actions: React.ComponentType<ActionsProps>;
38
+
39
+ interface AppNameProps extends ResponsiveProps, HTMLAttributes<HTMLDivElement> {
40
+ name?: string;
41
+ children?: ReactNode;
42
+ }
43
+ declare const AppName: React.ComponentType<AppNameProps>;
44
+
45
+ interface LogoProps extends ResponsiveProps, HTMLAttributes<HTMLDivElement> {
46
+ children: ReactNode;
47
+ }
48
+ declare const Logo: React.ComponentType<LogoProps>;
49
+
50
+ type AppHeaderComponentType = React__default.FC<AppHeaderProps> & {
51
+ Logo: React__default.ComponentType<LogoProps>;
52
+ AppName: React__default.ComponentType<AppNameProps>;
53
+ Navigation: React__default.ComponentType<NavigationProps>;
54
+ Actions: React__default.ComponentType<ActionsProps>;
55
+ };
56
+ declare const AppHeader: AppHeaderComponentType;
57
+
58
+ declare module '@emotion/react' {
59
+ interface Theme extends Theme {
60
+ }
61
+ }
62
+
63
+ export { Actions, type ActionsProps, AppHeader, type AppHeaderProps, AppName, type AppNameProps, type HeaderState, type HeaderType, Logo, type LogoProps, type NavPosition, Navigation, type NavigationProps };