@netlify/spark-ui 0.0.8 → 0.0.10

package/packages/components/search/hooks/useSearch.ts

@@ -0,0 +1,68 @@
+import { useState } from 'preact/hooks';
+import type { SearchState } from '../types/search.types';
+import { useTimeout } from '../../../utils/useTimeout';
+import { getSiteIcon } from '../utils';
+
+/**
+ * Hook that encapsulates client-side search logic:
+ *
+ * - Initializes and manages search state (`searchTerm`, `results`, `isLoading`)
+ * - Uses a debounced `useTimeout` to delay firing search requests until user input stabilizes
+ * - Triggers `submitSearch` when input is empty or 3+ characters, querying `window.pagefind`
+ * - Maps and formats raw search results into a consistent shape with title, excerpt, url, and icon
+ * - Exposes `setSearchTerm` for live input handling and `submitSearch` for manual triggering
+ */
+
+export function useSearch() {
+  const [state, setSearchState] = useState<SearchState>({
+    searchTerm: '',
+    results: [],
+    isLoading: false,
+  });
+
+  const { reset, run } = useTimeout((query: string) => {
+    if (query.length > 2 || query.length === 0) {
+      submitSearch(query);
+    }
+  }, 300);
+
+  const submitSearch = async (query: string) => {
+    if (!window?.pagefind) return;
+
+    setSearchState(prev => ({ ...prev, isLoading: true }));
+
+    const search = await window.pagefind.search(query);
+    const results = await Promise.all(
+      search.results.map(async (result: any) => {
+        const data = await result.data();
+        return {
+          icon: getSiteIcon(data.meta?.content_type),
+          content_type: data.meta?.content_type,
+          title: data.meta?.title,
+          url: data.url,
+          excerpt: data.excerpt,
+        };
+      })
+    );
+
+    setSearchState(prev => ({
+      ...prev,
+      results,
+      isLoading: false,
+    }));
+  };
+
+  const handleSearchChange = (query: string) => {
+    setSearchState(prev => ({ ...prev, searchTerm: query }));
+    reset();
+    run(query);
+  };
+
+  return {
+    state,
+    actions: {
+      setSearchTerm: handleSearchChange,
+      submitSearch,
+    },
+  };
+}

package/packages/components/search/hooks/useSearchHotkeys.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'preact/hooks';
+
+/**
+ * Custom hook that enables a keyboard shortcut (`⌘ + K` or `Ctrl + K`)
+ * to toggle a search UI open or closed.
+ *
+ * - When the user presses `Meta/Ctrl + K`, it prevents the default browser behavior,
+ *   stops the event from bubbling up, and either opens or closes the search UI
+ *   depending on the current `isOpen` state.
+ *
+ * @param isOpen - Whether the search interface is currently open.
+ * @param onOpen - Callback to open the search interface.
+ * @param onClose - Callback to close the search interface.
+ */
+
+export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void) {
+  useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (e.metaKey && e.key === 'k') {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        isOpen ? onClose() : onOpen();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeydown);
+    return () => document.removeEventListener('keydown', handleKeydown);
+  }, [isOpen, onOpen, onClose]);
+}

package/packages/components/search/hooks/useSearchParams.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'preact/hooks';
+
+/**
+ * Custom hook that checks the current URL for a `search` query parameter
+ * and, if found, updates the search term and opens the search interface.
+ *
+ * Useful for enabling deep linking to a search view with a pre-filled term,
+ * such as when sharing URLs like `?search=netlify`.
+ *
+ * @param setSearchTerm - Function to update the search input state.
+ * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
+ */
+
+export function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void) {
+  useEffect(() => {
+    if (typeof location === 'undefined') return;
+    const query = location?.search && new URLSearchParams(location.search).get('search');
+    if (query) {
+      setSearchTerm(query);
+      onOpen();
+    }
+  }, [setSearchTerm, onOpen]);
+}

package/packages/components/search/hooks/useSearchToggles.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'preact/hooks';
+
+/**
+ * Custom hook that attaches click event listeners to all DOM elements
+ * with the `[data-ntl-search-toggle]` attribute. When clicked, these elements
+ * will trigger the provided `onOpen` callback.
+ *
+ * This is useful for enabling search toggles via declarative HTML attributes
+ * in situations where the search modal or drawer needs to be controlled from
+ * multiple points in the DOM.
+ *
+ * @param onOpen - A function to be called when a toggle element is clicked.
+ */
+
+export function useSearchToggles(onOpen: () => void) {
+  useEffect(() => {
+    const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
+
+    if (!toggles.length) return;
+
+    toggles.forEach(t => {
+      t.removeAttribute('disabled');
+      t.addEventListener('click', onOpen);
+    });
+
+    return () => {
+      toggles.forEach(t => t.removeEventListener('click', onOpen));
+    };
+  }, [onOpen]);
+}

package/packages/components/search/types/search.types.tsx

@@ -0,0 +1,29 @@
+import type { ComponentChildren, FunctionComponent } from 'preact';
+import type { IconName } from '../../Icon';
+
+export interface ResultProps {
+  icon: IconName;
+  title: string;
+  content_type?: string;
+  url: string;
+  excerpt?: string;
+}
+
+export interface SearchWindowProps {
+  searchLoading: boolean;
+  searchTerm?: string;
+  results?: ResultProps[];
+  children: ComponentChildren;
+}
+
+export interface SearchResultsProps {
+  searchLoading: boolean;
+  searchTerm?: string;
+  results?: ResultProps[];
+}
+
+export interface SearchState {
+  searchTerm: string;
+  results: ResultProps[];
+  isLoading: boolean;
+}

package/packages/components/search/utils/index.ts

@@ -0,0 +1,11 @@
+import { IconName } from '../../Icon';
+
+const SITE_ICONS: Record<string, IconName> = {
+  blog: 'book',
+  changelog: 'rss',
+  doc: 'pageWithLines',
+};
+
+export function getSiteIcon(contentType?: string): IconName {
+  return contentType ? SITE_ICONS[contentType] || 'pageWithLines' : 'pageWithLines';
+}

package/packages/styles/base.css

@@ -1,4 +1,5 @@
 @import 'tokens.css';
+@import 'utils.css';
 @import 'fonts.css';
 @import 'layout.css';
 @import 'buttons.css';

package/packages/styles/search.css

@@ -0,0 +1,277 @@
+/* Imports */
+@import url('./tokens.css');
+@import url('./utils.css');
+
+/* Root Variables */
+.search-modal {
+  --ntl-search-padding-inline: .5em;
+  --ntl-search-color-text: var(--color-text-2);
+  --ntl-search-color-bg: var(--color-bg-1);
+  --ntl-search-color-border: var(--color-bg-3);
+  --ntl-search-border-radius: 8px;
+  --ntl-search-max-w: 600px;
+  --ntl-search-text-highlight: var(--color-text-accent);
+  --ntl-search-footer-key-color-text: var(--color-text-2);
+}
+
+/* Container Styles */
+.search-container {
+  --mark-bg: var(--ntl-search-text-highlight);
+  display: grid;
+  width: min(var(--ntl-search-max-w), 100%);
+  min-height: 470px;
+  background-color: var(--ntl-search-color-bg);
+  border-radius: var(--ntl-search-border-radius);
+  overflow: hidden;
+}
+
+.search-modal {
+  padding: 0;
+  border: none;
+  border-radius: var(--ntl-search-border-radius);
+  width: min(var(--ntl-search-max-w), 100%);
+  margin-inline: auto;
+}
+
+/* Search Bar */
+.search {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow: hidden;
+  background: var(--ntl-search-color-bg);
+  border-bottom: 1px solid var(--ntl-search-color-border);
+}
+
+.search > * {
+  display: inline-block;
+}
+
+.search-trigger {
+  width: var(--ntl-search-icon-size, 1rem);
+  height: auto;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  padding-inline: var(--space-2xs);
+  color: var(--color-text-1);
+  box-sizing: content-box;
+  display: block;
+}
+
+/* Search Input */
+.search-input-wrapper {
+  all: unset;
+  display: flex;
+  width: 100%;
+}
+
+.search-input {
+  display: inline-flex;
+  box-sizing: border-box;
+  background: var(--ntl-search-color-bg);
+  inline-size: 100%;
+  padding-block: .75rem;
+  padding-inline: var(--ntl-search-padding-inline);
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 1rem;
+}
+
+.search-input::placeholder {
+  color: var(--ntl-search-color-text);
+}
+
+/* Search Label */
+.search-label {
+  display: flex;
+  padding-inline: var(--ntl-search-padding-inline);
+}
+
+.search-label > * {
+  display: inline-block;
+  margin: 0;
+}
+
+/* Icons */
+.search-icon {
+  display: flex;
+  width: 1em;
+  height: auto;
+  color: lightgray;
+}
+
+.icon {
+  display: flex;
+  width: 1em;
+  height: auto;
+  height: 1em;
+}
+
+.icon [data-icon="caretRight"] {
+  width: 10px;
+  color: var(--neutral-300);
+}
+
+/* Search Key & Term */
+.search-term {
+  font-weight: var(--font-medium);
+  font-size: 1.1em;
+}
+
+/* Search Results */
+.search-results-heading {
+  padding-inline: 1rem;
+  margin-block: var(--space-xs);
+  font-size: var(--step--2);
+  font-weight: var(--font-regular);
+  color: var(--color-text-3);
+}
+
+.search-window {
+  height: 400px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  margin-block: 0;
+  background: var(--ntl-search-color-bg);
+}
+
+.results-list, ul[role="list"] {
+  list-style: none;
+  padding: 0;
+}
+
+.results-list-item {
+  border-bottom: 1px solid var(--color-bg-3);
+}
+.results-list-item:first-of-type {
+  border-top: 1px solid var(--color-bg-3);
+}
+
+/* Result Items */
+.result-link {
+  all: unset;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--space-3xs);
+  padding: var(--ntl-result-padding-block, 1em) var(--ntl-result-padding-inline, 1rem);
+  font-size: var(--step--1);
+  font-weight: var(--font-regular);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.result-link:is(:hover, :focus-within) {
+  background: var(--neutral-100);
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+}
+
+.result-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-2);
+}
+
+.result-excerpt {
+  color: var(--color-text-3);
+  line-height: 1.3;
+  font-size: .9em;
+  padding-inline-start: var(--space-l);
+}
+
+/* Footer */
+.search-footer {
+  border-top: 1px solid var(--ntl-search-color-border);
+  padding: var(--space-2xs) var(--space-s);
+  background: var(--color-bg-2);
+  display: flex;
+  gap: var(--space-m);
+}
+
+.search-footer-tip {
+  --ntl-key-text-color: var(--ntl-search-footer-key-color-text);
+  color: var(--ntl-search-footer-key-color-text);
+  display: flex;
+  gap: var(--space-2xs);
+  align-items: center;
+  font-size: var(--step--1);
+}
+
+/* Animations */ 
+.search-modal {
+  transition: display .2s allow-discrete, overlay .2s allow-discrete;
+  animation: closeSearch .2s forwards;
+  &[open] {
+    animation: openSearch .2s forwards;
+  }
+}
+
+@keyframes openSearch {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0px) scale(1);
+  }
+}
+
+@keyframes closeSearch {
+  from {
+    opacity: 1;
+    transform: translateY(0px) scale(1);
+  }
+  50% {
+    opacity: .3;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px) scale(.9);
+  }
+}
+
+.search-modal::backdrop {
+  animation: closeSearchBackdrop .2s forwards;
+}
+
+.search-modal[open]::backdrop  {
+  animation: openSearchBackdrop .2s forwards;
+}
+
+@keyframes openSearchBackdrop {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0px);
+  }
+  to {
+    opacity: 1;
+    backdrop-filter: blur(2px);
+  }
+}
+
+@keyframes closeSearchBackdrop {
+  from {
+    opacity: 1;
+    backdrop-filter: blur(1.5px);
+  }
+  50% {
+    opacity: .3;
+  }
+  to {
+    opacity: 0;
+    backdrop-filter: blur(0px);
+
+  }
+}

package/packages/styles/tokens.css

@@ -29,6 +29,8 @@
   --color-success-text: var(--green-800);
   --color-text-1: var(--neutral-800);
   --color-text-2: var(--neutral-600);
+  --color-text-3: var(--neutral-400);
+  --color-text-accent: var(--teal-000);
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
@@ -157,6 +159,8 @@
     --color-success-text: var(--green-800);
     --color-text-1: var(--neutral-800);
     --color-text-2: var(--neutral-600);
+    --color-text-3: var(--neutral-400);
+    --color-text-accent: var(--teal-000);
     --color-warning-bg: var(--gold-100);
     --color-warning-border: var(--gold-300);
     --color-warning-text: var(--gold-800);
@@ -189,6 +193,8 @@
   --color-success-text: var(--green-800);
   --color-text-1: var(--neutral-800);
   --color-text-2: var(--neutral-600);
+  --color-text-3: var(--neutral-400);
+  --color-text-accent: var(--teal-000);
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
@@ -221,6 +227,8 @@
     --color-success-text: var(--green-900);
     --color-text-1: var(--neutral-100);
     --color-text-2: var(--neutral-300);
+    --color-text-3: var(--neutral-500);
+    --color-text-accent: var(--teal-600);
     --color-warning-bg: var(--gold-200);
     --color-warning-border: var(--gold-400);
     --color-warning-text: var(--gold-900);
@@ -253,6 +261,8 @@
   --color-success-text: var(--green-900);
   --color-text-1: var(--neutral-100);
   --color-text-2: var(--neutral-300);
+  --color-text-3: var(--neutral-500);
+  --color-text-accent: var(--teal-600);
   --color-warning-bg: var(--gold-200);
   --color-warning-border: var(--gold-400);
   --color-warning-text: var(--gold-900);

package/packages/styles/utils.css

@@ -0,0 +1,9 @@
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/packages/utils/useClickOutside.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+export function useClickOutside<T extends HTMLElement>(callback: () => void) {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [callback]);
+
+  return ref;
+}

package/packages/utils/useTimeout.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "preact/hooks";
+
+export function useTimeout(
+  callback: (latestValue: string) => void,
+  delay: number
+) {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const latestValueRef = useRef<string>("");
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const reset = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  };
+
+  const run = (latestValue: string) => {
+    latestValueRef.current = latestValue;
+    timeoutRef.current = setTimeout(
+      () => callback(latestValueRef.current),
+      delay
+    );
+  };
+
+  return { reset, run };
+}

package/packages/assets/logos/monogram/lightmode/logo-netlify-monogram-fullcolor-lightmode.svg

@@ -1,16 +0,0 @@
-<svg width="128" height="113" viewBox="0 0 128 113" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_236_138)">
-<path d="M34.593 94.0509H33.3844L27.3514 88.0179V86.8094L36.5743 77.5866H42.9639L43.8158 78.4385V84.8281L34.593 94.0509Z" fill="#05BDBA"/>
-<path d="M27.3514 25.816V24.6074L33.3844 18.5744H34.593L43.8158 27.7972V34.1868L42.9639 35.0388H36.5743L27.3514 25.816Z" fill="#05BDBA"/>
-<path d="M80.4594 74.6047H71.6824L70.9493 73.8717V53.3259C70.9493 49.6705 69.5129 46.8372 65.1046 46.7382C62.836 46.6787 60.2405 46.7382 57.4668 46.8471L57.0507 47.2731V73.8618L56.3176 74.5948H47.5406L46.8075 73.8618V38.7636L47.5406 38.0305H67.2939C74.9713 38.0305 81.1925 44.2517 81.1925 51.9291V73.8717L80.4594 74.6047Z" fill="#014847"/>
-<path d="M35.8412 61.4491H0.73307L0 60.716V51.9192L0.73307 51.1861H35.8412L36.5743 51.9192V60.716L35.8412 61.4491Z" fill="#05BDBA"/>
-<path d="M127.277 61.4491H92.1687L91.4356 60.716V51.9192L92.1687 51.1861H127.277L128.01 51.9192V60.716L127.277 61.4491Z" fill="#05BDBA"/>
-<path d="M58.9428 27.0642V0.73307L59.6759 0H68.4727L69.2058 0.73307V27.0642L68.4727 27.7972H59.6759L58.9428 27.0642Z" fill="#05BDBA"/>
-<path d="M58.9428 111.902V85.5711L59.6759 84.838H68.4727L69.2058 85.5711V111.902L68.4727 112.635H59.6759L58.9428 111.902Z" fill="#05BDBA"/>
-</g>
-<defs>
-<clipPath id="clip0_236_138">
-<rect width="128" height="112.635" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/packages/assets/logos/monogram/lightmode/logo-netlify-monogram-monochrome-lightmode.svg

@@ -1,16 +0,0 @@
-<svg width="128" height="113" viewBox="0 0 128 113" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_236_179)">
-<path d="M34.593 94.2052H33.3844L27.3514 88.1722V86.9637L36.5743 77.7409H42.9639L43.8158 78.5928V84.9824L34.593 94.2052Z" fill="#181A1C"/>
-<path d="M27.3514 25.9703V24.7617L33.3844 18.7287H34.593L43.8158 27.9515V34.3411L42.9639 35.1931H36.5743L27.3514 25.9703Z" fill="#181A1C"/>
-<path d="M80.4594 74.759H71.6824L70.9493 74.026V53.4802C70.9493 49.8248 69.5129 46.9915 65.1046 46.8925C62.836 46.833 60.2405 46.8925 57.4668 47.0014L57.0507 47.4274V74.0161L56.3176 74.7491H47.5406L46.8075 74.0161V38.9179L47.5406 38.1848H67.2939C74.9713 38.1848 81.1925 44.406 81.1925 52.0834V74.026L80.4594 74.759Z" fill="#181A1C"/>
-<path d="M35.8412 61.6034H0.73307L0 60.8703V52.0735L0.73307 51.3404H35.8412L36.5743 52.0735V60.8703L35.8412 61.6034Z" fill="#181A1C"/>
-<path d="M127.277 61.6034H92.1687L91.4356 60.8703V52.0735L92.1687 51.3404H127.277L128.01 52.0735V60.8703L127.277 61.6034Z" fill="#181A1C"/>
-<path d="M58.9428 27.2185V0.887367L59.6759 0.154297H68.4727L69.2058 0.887367V27.2185L68.4727 27.9515H59.6759L58.9428 27.2185Z" fill="#181A1C"/>
-<path d="M58.9428 112.056V85.7254L59.6759 84.9923H68.4727L69.2058 85.7254V112.056L68.4727 112.79H59.6759L58.9428 112.056Z" fill="#181A1C"/>
-</g>
-<defs>
-<clipPath id="clip0_236_179">
-<rect width="128" height="112.635" fill="white" transform="translate(0 0.154297)"/>
-</clipPath>
-</defs>
-</svg>