ntp: fixing components iew (#1335)

* ntp: fixing components iew

* more fixes

Author: shakyShane

special-pages/pages/new-tab/app/components/Components.jsx

@@ -1,6 +1,9 @@
 import { Fragment, h } from 'preact';
 import styles from './Components.module.css';
 import { mainExamples, otherExamples } from './Examples.jsx';
+import { useThemes } from '../customizer/themes.js';
+import { useSignal } from '@preact/signals';
+import { BackgroundConsumer } from './BackgroundProvider.js';
 const url = new URL(window.location.href);
 
 const list = {
@@ -15,19 +18,31 @@ export function Components() {
     const isolated = url.searchParams.has('isolate');
     const e2e = url.searchParams.has('e2e');
     const entryIds = entries.map(([id]) => id);
-
     const validIds = ids.filter((id) => entryIds.includes(id));
-
     const filtered = validIds.length ? validIds.map((id) => /** @type {const} */ ([id, list[id]])) : entries;
 
-    if (isolated) {
-        return <Isolated entries={filtered} e2e={e2e} />;
-    }
+    /** @type {import('../../types/new-tab').CustomizerData} */
+    const data = {
+        background: { kind: 'default' },
+        userImages: [],
+        theme: 'system',
+        userColor: null,
+    };
+    const dataSignal = useSignal(data);
+    const { main, browser } = useThemes(dataSignal);
 
     return (
-        <div>
-            <DebugBar id={ids[0]} ids={ids} entries={entries} />
-            <Stage entries={/** @type {any} */ (filtered)} />
+        <div class={styles.main} data-main-scroller data-theme={main}>
+            <BackgroundConsumer browser={browser} />
+            <div data-content-tube class={styles.contentTube}>
+                {isolated && <Isolated entries={filtered} e2e={e2e} />}
+                {!isolated && (
+                    <Fragment>
+                        <DebugBar id={ids[0]} ids={ids} entries={entries} />
+                        <Stage entries={/** @type {any} */ (filtered)} />
+                    </Fragment>
+                )}
+            </div>
         </div>
     );
 }

special-pages/pages/new-tab/app/components/Components.module.css

@@ -3,6 +3,22 @@
 body[data-display="components"] {
     padding-left: 0;
     padding-right: 0;
+
+    a {
+        color: var(--ntp-text-normal);
+    }
+}
+
+.main {
+    height: 100vh;
+    overflow: auto;
+    color: var(--ntp-text-normal);
+}
+
+
+.contentTube {
+    position: relative;
+    z-index: 1;
 }
 
 .componentList {
@@ -15,8 +31,6 @@ body[data-display="components"] {
     display: grid;
     grid-template-columns: auto;
     grid-row-gap: 2rem;
-
-
 }
 
 .itemInfo {

special-pages/pages/new-tab/app/favorites/components/Favorites.examples.js

@@ -1,25 +1,11 @@
 import { h } from 'preact';
-import { noop } from '../../utils.js';
 import { favorites } from '../mocks/favorites.data.js';
 import { MockFavoritesProvider } from '../mocks/MockFavoritesProvider.js';
-import { FavoritesMemo } from './Favorites.js';
 import { FavoritesConsumer } from './FavoritesCustomized.js';
 
 /** @type {Record<string, {factory: () => import("preact").ComponentChild}>} */
 
 export const favoritesExamples = {
-    'favorites.no-dnd': {
-        factory: () => (
-            <FavoritesMemo
-                favorites={favorites.many.favorites}
-                expansion={'expanded'}
-                toggle={noop('toggle')}
-                add={noop('add')}
-                openFavorite={noop('openFavorite')}
-                openContextMenu={noop('openContextMenu')}
-            />
-        ),
-    },
     'favorites.dnd': {
         factory: () => (
             <MockFavoritesProvider data={favorites.many}>

special-pages/pages/new-tab/app/favorites/components/Favorites.js

@@ -180,8 +180,8 @@ function Inner({ rows, safeAreaRef, rowHeight, add }) {
     const gridOffset = useRef(0);
 
     useLayoutEffect(() => {
-        const mainScroller = document.querySelector('[data-main-scroller]');
-        const contentTube = document.querySelector('[data-content-tube]');
+        const mainScroller = document.querySelector('[data-main-scroller]') || document.documentElement;
+        const contentTube = document.querySelector('[data-content-tube]') || document.body;
         if (!mainScroller) return console.warn('cannot find scrolling element');
         if (!contentTube) return console.warn('cannot find content tube');
 

special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js

@@ -48,7 +48,7 @@ export const FavoritesContext = createContext({
     },
     /** @type {(cb: (data: FavoritesConfig) => void) => void} */
     onConfigChanged: (cb) => {
-        throw new Error('must implement add');
+        /** noop */
     },
 });
 

special-pages/pages/new-tab/app/favorites/mocks/MockFavoritesProvider.js

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { FavoritesContext, FavoritesDispatchContext } from '../components/FavoritesProvider.js';
-import { useCallback, useReducer } from 'preact/hooks';
+import { useCallback, useReducer, useState } from 'preact/hooks';
 import { useEnv } from '../../../../../shared/components/EnvironmentProvider.js';
 import { favorites } from './favorites.data.js';
 import { reducer } from '../../service.hooks.js';
@@ -33,16 +33,20 @@ export function MockFavoritesProvider({ data = favorites.many, config = DEFAULT_
         config,
     });
 
+    const [et] = useState(() => new EventTarget());
+
     /** @type {[State, import('preact/hooks').Dispatch<Events>]} */
     const [state, dispatch] = useReducer(reducer, initial);
 
     const toggle = useCallback(() => {
         if (state.status !== 'ready') return;
-        if (state.config.expansion === 'expanded') {
-            dispatch({ kind: 'config', config: { ...state.config, expansion: 'collapsed' } });
-        } else {
-            dispatch({ kind: 'config', config: { ...state.config, expansion: 'expanded' } });
-        }
+        const next =
+            state.config.expansion === 'expanded'
+                ? /** @type {const} */ ({ ...state.config, expansion: 'collapsed' })
+                : /** @type {const} */ ({ ...state.config, expansion: 'expanded' });
+
+        dispatch({ kind: 'config', config: next });
+        et.dispatchEvent(new CustomEvent('state-update', { detail: next }));
     }, [state.status, state.config?.expansion, isReducedMotion]);
 
     /** @type {import('../components/FavoritesProvider.js').ReorderFn<Favorite>} */
@@ -65,10 +69,14 @@ export function MockFavoritesProvider({ data = favorites.many, config = DEFAULT_
         console.log('noop add', ...args);
     };
 
-    const onConfigChanged = () => {
-        /* no-op */
-        return () => {};
-    };
+    const onConfigChanged = useCallback(
+        (cb) => {
+            et.addEventListener('state-update', (/** @type {CustomEvent<any>} */ e) => {
+                cb(e.detail);
+            });
+        },
+        [et],
+    );
 
     return (
         <FavoritesContext.Provider value={{ state, toggle, favoritesDidReOrder, openContextMenu, openFavorite, add, onConfigChanged }}>