@netlify/spark-ui 0.0.8 → 0.0.11

package/packages/components/preact/SearchModal/index.tsx

@@ -0,0 +1,72 @@
+import { type ComponentChildren } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+
+import Modal from '../Modal';
+import { SearchFooter, SearchFooterTip, SearchInput, SearchWindow } from './components';
+import KeyboardKey from '../KeyboardKey';
+import { useSearch } from './hooks/useSearch';
+import { useKeyboardNav } from './hooks/useKeyboardNav';
+import { useSearchHotkeys } from './hooks/useSearchHotkeys';
+import { useSearchParams } from './hooks/useSearchParams';
+import { useSearchToggles } from './hooks/useSearchToggles';
+import { useClickOutside } from '../../../utils/useClickOutside';
+
+import '../../../styles/search.css';
+
+interface Props {
+  children: ComponentChildren;
+}
+
+function SearchModal({ children }: Props) {
+  const { state, actions } = useSearch();
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  const openSearch = () => setSearchOpen(true);
+  const closeSearch = () => setSearchOpen(false);
+
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
+
+  useSearchToggles(openSearch);
+  useSearchParams(actions.setSearchTerm, openSearch);
+  useSearchHotkeys(searchOpen, openSearch, closeSearch);
+  useKeyboardNav(modalRef, searchOpen, closeSearch);
+
+  useEffect(() => {
+    if (!modalRef.current) return;
+    searchOpen ? modalRef.current.showModal() : modalRef.current.close();
+  }, [searchOpen]);
+
+  return (
+    <Modal ref={modalRef} className="search-modal">
+      <div ref={containerRef} class="search-container">
+        <form class="search">
+          <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
+        </form>
+
+        <SearchWindow
+          searchLoading={state.isLoading}
+          searchTerm={state.searchTerm}
+          results={state.results}
+        >
+          {children}
+        </SearchWindow>
+
+        <SearchFooter>
+          <SearchFooterTip>
+            <KeyboardKey keyNames={['Esc']} />
+            to close
+          </SearchFooterTip>
+          <SearchFooterTip>
+            <KeyboardKey keyNames={['Tab']} />
+            <span>or</span>
+            <KeyboardKey keyNames={['↑', '↓']} />
+            to navigate
+          </SearchFooterTip>
+        </SearchFooter>
+      </div>
+    </Modal>
+  );
+}
+
+export default SearchModal;

package/packages/components/preact/SearchModal/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/preact/SearchModal/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/components/preact/index.ts

@@ -0,0 +1,9 @@
+export { default as KeyboardKey } from './KeyboardKey';
+export { default as Modal } from './Modal';
+export { default as Icon } from './Icon';
+export { default as SearchLink } from './SearchModal/components/SearchLink';
+export { default as SearchHeading } from './SearchModal/components/SearchHeading';
+export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
+export { default as SearchModal } from './SearchModal';
+
+export { type IconName } from './Icon';

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>