From e207b054240000eca85716ff888024df76f3daf8 Mon Sep 17 00:00:00 2001 From: Martin Schuhfuss Date: Sat, 11 May 2024 00:34:33 +0200 Subject: [PATCH] fix: don't try to prerender, extract css, other minor fixes --- .../extended-component-library/index.html | 33 +----------------- .../extended-component-library/src/app.css | 34 +++++++++++++++++++ .../extended-component-library/src/app.tsx | 8 +++-- .../examples/extended-component-library.mdx | 10 ++++-- 4 files changed, 49 insertions(+), 36 deletions(-) create mode 100644 examples/extended-component-library/src/app.css diff --git a/examples/extended-component-library/index.html b/examples/extended-component-library/index.html index 3034ca48..5e6f7da8 100644 --- a/examples/extended-component-library/index.html +++ b/examples/extended-component-library/index.html @@ -5,7 +5,7 @@ - Example: + Example: Extended Component Library diff --git a/examples/extended-component-library/src/app.css b/examples/extended-component-library/src/app.css new file mode 100644 index 00000000..2cb9e145 --- /dev/null +++ b/examples/extended-component-library/src/app.css @@ -0,0 +1,34 @@ +.App { + --gmpx-color-surface: #f6f5ff; + --gmpx-color-on-primary: #f8e8ff; + --gmpx-color-on-surface: #000; + --gmpx-color-on-surface-variant: #636268; + --gmpx-color-primary: #8a5cf4; + --gmpx-fixed-panel-height-column-layout: 420px; + --gmpx-fixed-panel-width-row-layout: 340px; + + height: 100%; + width: 100%; + background: var(--gmpx-color-surface); + inset: 0; +} + +.MainContainer { + display: flex; + flex-direction: column; +} + +.SplitLayoutContainer { + height: 100%; +} + +.CollegePicker { + --gmpx-color-surface: #fff; + flex-grow: 1; + margin: 1rem; +} + +.CloseButton { + display: block; + margin: 1rem; +} diff --git a/examples/extended-component-library/src/app.tsx b/examples/extended-component-library/src/app.tsx index cd099a22..53af3b18 100644 --- a/examples/extended-component-library/src/app.tsx +++ b/examples/extended-component-library/src/app.tsx @@ -13,10 +13,13 @@ import { OverlayLayout, PlacePicker } from '@googlemaps/extended-component-library/react'; + +import './app.css'; + // The below imports are necessary because we are creating refs of // the OverlayLayout and PlacePicker components. // You need to pass the ref property a web component type object. -// Imports from @googlemaps/extended-component-library/react are +// Imports from @googlemaps/extended-component-library/react are // wrappers around web components, not the components themselves. // For the ref property we import the actual components and alias them for clarity. import {OverlayLayout as TOverlayLayout} from '@googlemaps/extended-component-library/overlay_layout.js'; @@ -25,7 +28,7 @@ import {PlacePicker as TPlacePicker} from '@googlemaps/extended-component-librar const API_KEY = globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string); -const DEFAULT_CENTER = {lat: -34.397, lng: 150.644}; +const DEFAULT_CENTER = {lat: 38, lng: -98}; const DEFAULT_ZOOM = 4; const DEFAULT_ZOOM_WITH_LOCATION = 16; @@ -104,6 +107,7 @@ const App = () => { college?.location ? DEFAULT_ZOOM_WITH_LOCATION : DEFAULT_ZOOM } gestureHandling="none" + disableDefaultUI fullscreenControl={false} zoomControl={false}> {college?.location && ( diff --git a/website/src/examples/extended-component-library.mdx b/website/src/examples/extended-component-library.mdx index ceb05fd5..587fb60b 100644 --- a/website/src/examples/extended-component-library.mdx +++ b/website/src/examples/extended-component-library.mdx @@ -1,5 +1,11 @@ # Extended Component Library -import App from 'website-examples/extended-component-library/src/app'; +import BrowserOnly from '@docusaurus/BrowserOnly'; - + + {() => { + const App = require('website-examples/extended-component-library/src/app').default; + console.log(App); + return ; + }} +