@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
402 lines (395 loc) • 14.4 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.tsx";
import classnames from 'classnames';
import { useEffect } from 'preact/hooks';
import { Route, Router, Switch, Link as RouteLink, useLocation, useRoute } from 'wouter-preact';
import { Link, LogoIcon, Scroll, ScrollContainer, ScrollContent } from '../../';
import { componentGroups, getRoutes } from '../routes';
import Library from './Library';
/**
* Header for a primary section of nav
*/
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
function NavHeader({
children
}) {
return _jsxDEV("h2", {
className: "text-slate-800 border-b border-stone-300 px-2 py-1 font-light text-lg",
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 5
}, this);
}
/**
* Secondary section of navigation, with header
*/
function NavSection({
title,
children
}) {
return _jsxDEV("div", {
className: "space-y-4",
children: [_jsxDEV("h3", {
className: "mx-2 text-slate-700 font-semibold text-sm",
children: title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 7
}, this), children]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 5
}, this);
}
/**
* Render a list of navigation items
*/
function NavList({
children
}) {
return _jsxDEV("ul", {
className: "ml-2 space-y-2 border-l-2 border-stone-200",
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 5
}, this);
}
/**
* A single navigation link
*/
function NavLink({
route
}) {
var _route$route, _route$route2;
const [isActive] = useRoute((_route$route = route.route) !== null && _route$route !== void 0 ? _route$route : '');
return _jsxDEV("li", {
className: "-ml-[2px]",
children: [route.route && _jsxDEV(RouteLink, {
href: (_route$route2 = route.route) !== null && _route$route2 !== void 0 ? _route$route2 : '',
asChild: true,
children: _jsxDEV(Link, {
classes: classnames('pl-4 rounded-l-none w-full border-l-2 hover:border-l-brand', {
'border-l-2 border-brand font-semibold': isActive,
'border-transparent': !isActive
}),
children: route.title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 9
}, this), !route.route && _jsxDEV("div", {
className: "pl-4 w-full text-slate-5 font-light",
children: route.title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 5
}, this);
}
/**
* Render web content for the playground application. This includes the "frame"
* around the page and a navigation channel, as well as the content rendered
* by the component handling the current route.
*/
export default function PlaygroundApp({
baseURL = '',
extraRoutes = [],
extraRoutesTitle = 'Playground'
}) {
const routes = getRoutes();
const [pathname] = useLocation();
useEffect(
/**
* Support hash-based navigation and reset scroll when `wouter` path
* changes.
* - For locations without hash, reset scroll to top of page
* - For locations with hash, scroll to top of fragment-indicated element
*/
() => {
const hash = window.location.hash.replace(/^#/, '');
if (hash) {
const fragElement = document.getElementById(hash);
if (fragElement) {
fragElement.scrollIntoView();
}
} else {
window.scrollTo(0, 0);
}
}, [pathname]);
// Update document title when `wouter` path changes.
useEffect(() => {
var _activeRoute$title;
const activeRoute = routes.find(({
route
}) => route === pathname);
document.title = `${(_activeRoute$title = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _activeRoute$title !== void 0 ? _activeRoute$title : 'Page not found'}: Hypothesis Component Library`;
}, [pathname, routes]);
// Put all of the custom routes into the "custom" group
const customRoutes = extraRoutes.map(route => {
return {
...route,
group: 'custom'
};
});
const allRoutes = routes.concat(customRoutes);
const pageRoutes = _jsxDEV(_Fragment, {
children: allRoutes.filter(route => !!route.route).map(aRoute => {
var _aRoute$component;
return _jsxDEV(Route, {
path: aRoute.route,
children: (_aRoute$component = aRoute.component) !== null && _aRoute$component !== void 0 ? _aRoute$component : aRoute.title
}, aRoute.title, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 11
}, this);
})
}, void 0, false);
const prototypeRoutes = getRoutes('prototype');
const hookRoutes = getRoutes('hooks');
const groupKeys = Object.keys(componentGroups);
return _jsxDEV(Router, {
base: baseURL,
children: _jsxDEV("div", {
className: "w-full bg-stone-200",
children: _jsxDEV("div", {
className: "max-w-[1300px] mx-auto",
children: _jsxDEV("div", {
className: "md:grid md:grid-cols-[2fr_5fr]",
children: [_jsxDEV("div", {
className: "md:h-screen md:sticky md:top-0 border-l border-stone-400 bg-stone-100",
children: _jsxDEV(ScrollContainer, {
borderless: true,
children: [_jsxDEV("div", {
className: "h-16 flex items-center",
children: _jsxDEV("h1", {
className: "font-medium text-lg pl-6",
children: _jsxDEV(Link, {
href: baseURL + '/',
classes: "flex gap-x-3 text-stone-700 items-center",
children: [_jsxDEV(LogoIcon, {
className: "text-brand w-6 h-6"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 23
}, this), "Component Library"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 17
}, this), _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
classes: "bg-stone-400/10",
children: _jsxDEV("nav", {
id: "nav",
className: "pb-16 space-y-4 mr-4",
children: [_jsxDEV(NavHeader, {
children: "Foundations"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 23
}, this), _jsxDEV(NavList, {
children: getRoutes('foundations').map(route => _jsxDEV(NavLink, {
route: route
}, route.title, false, {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 27
}, this))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 23
}, this), _jsxDEV(NavHeader, {
children: "Components"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 23
}, this), groupKeys.map(group => {
return _jsxDEV(NavSection, {
title: componentGroups[group],
children: _jsxDEV(NavList, {
children: getRoutes(group).map(route => _jsxDEV(NavLink, {
route: route
}, route.title, false, {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 33
}, this))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 29
}, this)
}, group, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 27
}, this);
}), _jsxDEV(NavHeader, {
children: "Hooks"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 23
}, this), _jsxDEV(NavList, {
children: hookRoutes.map(route => _jsxDEV(NavLink, {
route: route
}, route.title, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 27
}, this))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 23
}, this), prototypeRoutes.length > 0 && _jsxDEV(_Fragment, {
children: [_jsxDEV(NavHeader, {
children: "Prototypes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 27
}, this), _jsxDEV(NavList, {
children: prototypeRoutes.map(route => _jsxDEV(NavLink, {
route: route
}, route.title, false, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 31
}, this))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 27
}, this)]
}, void 0, true), extraRoutes.length > 0 && _jsxDEV(_Fragment, {
children: [_jsxDEV(NavHeader, {
children: extraRoutesTitle
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 27
}, this), _jsxDEV(NavList, {
children: customRoutes.map(route => _jsxDEV(NavLink, {
route: route
}, route.title, false, {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 31
}, this))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 27
}, this)]
}, void 0, true)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "bg-white pb-16 border-x border-stone-400",
children: _jsxDEV(Switch, {
children: [pageRoutes, _jsxDEV(Route, {
children: _jsxDEV(Library.Page, {
title: ":( Sorry",
children: _jsxDEV("h1", {
className: "text-2xl",
children: "Page not found"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 5
}, this);
}
//# sourceMappingURL=PlaygroundApp.js.map