Skip to content

Commit b7d5b5a

Browse files
committed
feat: integrate latest hotosm/ui beta header
1 parent 23c2541 commit b7d5b5a

File tree

10 files changed

+155
-62
lines changed

10 files changed

+155
-62
lines changed

frontend/app/components/detail.tsx

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
11
import React from 'react';
22

3-
import '@awesome.me/webawesome/dist/components/drawer/drawer.js';
4-
import '@awesome.me/webawesome/dist/components/button/button.js';
5-
import '@awesome.me/webawesome/dist/components/button-group/button-group.js';
6-
import '@awesome.me/webawesome/dist/components/icon/icon.js';
7-
import '@awesome.me/webawesome/dist/components/divider/divider.js';
3+
// async function registerWaComponents() {
4+
// if (!customElements.get('wa-drawer')) {
5+
// await import('@awesome.me/webawesome/dist/components/drawer/drawer.js');
6+
// }
7+
// if (!customElements.get('wa-icon')) {
8+
// await import('@awesome.me/webawesome/dist/components/icon/icon.js');
9+
// }
10+
// if (!customElements.get('wa-button')) {
11+
// await import('@awesome.me/webawesome/dist/components/button/button.js');
12+
// }
13+
// if (!customElements.get('button-group')) {
14+
// await import(
15+
// '@awesome.me/webawesome/dist/components/button-group/button-group.js'
16+
// );
17+
// }
18+
// if (!customElements.get('wa-divider')) {
19+
// await import('@awesome.me/webawesome/dist/components/divider/divider.js');
20+
// }
21+
// }
822

923
import { useStac } from '../context/StacContext';
1024
import { StacItem } from 'stac-ts';
1125

26+
// await registerWaComponents();
27+
1228
interface DetailProps {
1329
isDetailPaneShown: boolean;
1430
setShowDetailPane: (isShown: boolean) => void;

frontend/app/components/map.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,13 @@ export default function MapComponent({
325325
return (
326326
<div
327327
id='map'
328-
style={{ position: 'fixed', top: 0, bottom: 0, right: 0, left: 480 }}
328+
style={{
329+
position: 'absolute',
330+
top: 0,
331+
bottom: 0,
332+
left: 0,
333+
right: 0
334+
}}
329335
/>
330336
);
331337
}

frontend/app/components/sidebar.tsx

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,44 @@
11
import type WaSelect from '@awesome.me/webawesome/dist/components/select/select.js';
22
import type { WaSelectionChangeEvent } from '@awesome.me/webawesome/dist/webawesome.js';
33

4-
import '@awesome.me/webawesome/dist/components/drawer/drawer.js';
5-
import '@awesome.me/webawesome/dist/components/button/button.js';
6-
import '@awesome.me/webawesome/dist/components/copy-button/copy-button.js';
7-
import '@awesome.me/webawesome/dist/components/spinner/spinner.js';
8-
import '@awesome.me/webawesome/dist/components/icon/icon.js';
9-
import '@awesome.me/webawesome/dist/components/select/select.js';
10-
import '@awesome.me/webawesome/dist/components/option/option.js';
11-
import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
12-
import '@awesome.me/webawesome/dist/components/input/input.js';
4+
// async function registerWaComponents() {
5+
// if (!customElements.get('wa-drawer')) {
6+
// await import('@awesome.me/webawesome/dist/components/drawer/drawer.js');
7+
// }
8+
// if (!customElements.get('wa-icon')) {
9+
// await import('@awesome.me/webawesome/dist/components/icon/icon.js');
10+
// }
11+
// if (!customElements.get('wa-button')) {
12+
// await import('@awesome.me/webawesome/dist/components/button/button.js');
13+
// }
14+
// if (!customElements.get('wa-copy-button')) {
15+
// await import(
16+
// '@awesome.me/webawesome/dist/components/copy-button/copy-button.js'
17+
// );
18+
// }
19+
// if (!customElements.get('wa-spinner')) {
20+
// await import('@awesome.me/webawesome/dist/components/spinner/spinner.js');
21+
// }
22+
// if (!customElements.get('wa-select')) {
23+
// await import('@awesome.me/webawesome/dist/components/select/select.js');
24+
// }
25+
// if (!customElements.get('wa-option')) {
26+
// await import('@awesome.me/webawesome/dist/components/option/option.js');
27+
// }
28+
// if (!customElements.get('wa-spinner')) {
29+
// await import('@awesome.me/webawesome/dist/components/dialog/dialog.js');
30+
// }
31+
// if (!customElements.get('wa-input')) {
32+
// await import('@awesome.me/webawesome/dist/components/input/input.js');
33+
// }
34+
// }
1335

1436
import { useEffect, useState } from 'react';
1537
import { useStac } from '../context/StacContext';
1638
import { StacFeatureCollection } from '../types/stac';
1739

40+
// await registerWaComponents();
41+
1842
function CollectionDropdown() {
1943
const { availableCollections, handleSelectCollection } = useStac();
2044
const [collection, setCollection] = useState<string>();
@@ -357,7 +381,7 @@ export default function Sidebar({
357381
<div
358382
style={{
359383
width: '450px',
360-
height: '100vh',
384+
height: '100%',
361385
display: 'flex',
362386
flexDirection: 'column',
363387
padding: '1rem',
@@ -372,7 +396,7 @@ export default function Sidebar({
372396
marginBottom: '1rem'
373397
}}
374398
>
375-
OpenAerialMap STAC Catalog
399+
Providers
376400
</h2>
377401

378402
{isStacCollectionLoading && <wa-spinner />}

frontend/app/global.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
export {};
22

33
declare module 'react' {
4+
// hotosm/ui
5+
namespace JSX {
6+
interface IntrinsicElements {
7+
'hot-header': any;
8+
}
9+
}
10+
// WebAwesome
411
namespace JSX {
512
interface IntrinsicElements {
613
'wa-drawer': any;

frontend/app/main.tsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import '@hotosm/ui/dist/style.css';
12
import '@hotosm/ui/dist/components/header/header.js';
23
import { allDefined } from '@awesome.me/webawesome/dist/webawesome.js';
34

@@ -37,12 +38,19 @@ function AppContent() {
3738
return (
3839
<StacProvider>
3940
<hot-header
40-
title="OpenAerialMap"
41-
logo="https://data.humdata.org/image/2018-05-02-135324.187483Hot_logo_with_text_300x125.png"
41+
title='OpenAerialMap'
42+
logo={`${import.meta.env.BASE_URL}/favicon.svg`}
4243
showLogin
43-
osm-oauth-client-id="9qmECyRwBNFyqNl9LszwHX1WOxKFKeBsA5ofAS1GJGY"
44-
osm-oauth-redirect-uri="https://hotosm.github.io/openaerialmap/"
44+
osm-oauth-client-id='9qmECyRwBNFyqNl9LszwHX1WOxKFKeBsA5ofAS1GJGY'
45+
osm-oauth-redirect-uri='https://hotosm.github.io/openaerialmap/'
4546
></hot-header>
47+
<div
48+
style={{
49+
display: 'flex',
50+
flexDirection: 'row',
51+
height: `calc(100vh - var(--hot-spacing-4x-large))`
52+
}}
53+
>
4654
<Sidebar
4755
isDetailPaneShown={showDetailPane}
4856
setShowDetailPane={setShowDetailPane}
@@ -51,7 +59,10 @@ function AppContent() {
5159
isDetailPaneShown={showDetailPane}
5260
setShowDetailPane={setShowDetailPane}
5361
/>
62+
<div style={{ flex: 1, position: 'relative' }}>
5463
<MapComponent />
64+
</div>
65+
</div>
5566
</StacProvider>
5667
);
5768
}

frontend/eslint.config.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default [
2626
// 'import/order': 2,
2727
'react/button-has-type': 2,
2828
'react/jsx-closing-bracket-location': 2,
29-
'react/jsx-closing-tag-location': 2,
29+
'react/jsx-closing-tag-location': 'off',
3030
'react/jsx-curly-spacing': 2,
3131
'react/jsx-curly-newline': 2,
3232
'react/jsx-equals-spacing': 2,
@@ -45,7 +45,7 @@ export default [
4545
'react/no-unused-prop-types': 2,
4646
'react/no-unused-state': 2,
4747
'react/react-in-jsx-scope': 'off',
48-
'react/self-closing-comp': 2,
48+
'react/self-closing-comp': 'off',
4949
'react/style-prop-object': 2,
5050
'react/void-dom-elements-no-children': 2,
5151
'react/function-component-definition': [

frontend/index.html

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" class="hot-theme-light wa-theme-default wa-palette-hotosm wa-brand-red wa-neutral-gray wa-success-cyan wa-warning-yellow wa-danger-orange">
33
<head>
44
<meta charset="utf-8" />
55
<meta
@@ -9,47 +9,20 @@
99

1010
<link
1111
rel="icon"
12-
href="%BASE_URL%/meta/favicon.png"
12+
href="%BASE_URL%/favicon.png"
1313
type="image/png"
1414
sizes="32x32"
1515
/>
16-
<link rel="icon" href="%BASE_URL%/meta/icon.svg" type="image/svg+xml" />
17-
<link rel="apple-touch-icon" href="%BASE_URL%/meta/apple-touch-icon.png" />
16+
<link rel="icon" href="%BASE_URL%/favicon.svg" type="image/svg+xml" />
17+
<link rel="apple-touch-icon" href="%BASE_URL%/apple-touch-icon.png" />
1818

19-
<meta property="og:image" content="%BASE_URL%/meta/meta-image.png" />
20-
<meta name="twitter:image" content="%BASE_URL%/meta/meta-image.png" />
19+
<meta property="og:image" content="%BASE_URL%/meta-image.png" />
20+
<meta name="twitter:image" content="%BASE_URL%/meta-image.png" />
2121
<meta property="og:url" content="%BASE_URL%/" />
2222

2323
<title>%VITE_APP_TITLE%</title>
2424
<meta name="title" content="%VITE_APP_TITLE%" />
2525
<meta name="description" content="%VITE_APP_DESCRIPTION%" />
26-
27-
<style>
28-
html * {
29-
font-family:
30-
system-ui,
31-
-apple-system,
32-
BlinkMacSystemFont,
33-
'Segoe UI',
34-
Roboto,
35-
Oxygen,
36-
Ubuntu,
37-
Cantarell,
38-
'Open Sans',
39-
'Helvetica Neue',
40-
sans-serif;
41-
}
42-
</style>
43-
44-
<!-- Web Awesome Styling (CDN) -->
45-
<link
46-
rel="stylesheet"
47-
href="https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/themes/default.css"
48-
/>
49-
<link
50-
rel="stylesheet"
51-
href="https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/webawesome.css"
52-
/>
5326
</head>
5427

5528
<body>

frontend/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,9 @@
6363
},
6464
"dependencies": {
6565
"@awesome.me/webawesome": "3.0.0-beta.1",
66-
"@hotosm/ui": "0.3.1-b4",
66+
"@hotosm/ui": "0.3.1-b6",
6767
"@tanstack/react-query": "^5.81.5",
68+
"@teamhanko/hanko-elements": "^2.1.0",
6869
"maplibre-gl": "^5.6.1",
6970
"next-themes": "^0.4.6",
7071
"react": "^19.1.0",

0 commit comments

Comments
 (0)