@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
315 lines (304 loc) • 9.62 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.js";
import classnames from 'classnames';
import { Link, SvgIcon } from '../../';
import Library from './Library';
import { componentGroups, getRoutes } from '../routes';
import { useRoute } from '../router';
/**
* @typedef {import("../routes").PlaygroundRoute} PlaygroundRoute
* @typedef {import("../routes").PlaygroundRouteGroup} PlaygroundRouteGroup
* @typedef {import('preact').ComponentChildren} Children
*/
/**
* @typedef PlaygroundAppProps
* @prop {string} [baseURL]
* @prop {PlaygroundRoute[]} [extraRoutes] - Local-/application-specific routes
* to add to this pattern library in addition to the shared/common routes
*/
/**
* 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.
*
* @param {PlaygroundAppProps} props
*/
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function PlaygroundApp({
baseURL = '/ui-playground',
extraRoutes = []
}) {
const routes = getRoutes();
const allRoutes = routes.concat(extraRoutes);
const [activeRoute] = useRoute(baseURL, allRoutes);
const content = activeRoute && activeRoute.component ? _jsxDEV(activeRoute.component, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 7
}, this) : _jsxDEV(Library.Page, {
title: ":( Sorry",
children: _jsxDEV("h1", {
className: "text-2xl",
children: "Page not found"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 7
}, this);
/**
* Header for a primary section of nav
*
* @param {object} props
* @param {Children} props.children
*/
function NavHeader({
children
}) {
return _jsxDEV("h2", {
className: "border-b px-2 py-1 font-light text-lg",
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 7
}, this);
}
/**
* A single navigation link
*
* @param {object} props
* @param {PlaygroundRoute} props.route
*/
function NavLink({
route
}) {
return _jsxDEV("li", {
className: "-ml-[2px]",
children: [route.route && _jsxDEV(Link, {
classes: classnames('pl-4 w-full border-l-2 hover:border-l-brand', {
'border-l-2 border-brand font-semibold': (activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.route) === route.route,
'border-transparent': (activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.route) !== route.route
}),
href: `${baseURL}${route.route.toString()}`,
children: route.title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 11
}, this), !route.route && _jsxDEV("div", {
className: "pl-4 w-full text-slate-5 font-light",
children: route.title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 7
}, this);
}
/**
* Render a list of navigation items
*
* @param {object} props
* @param {PlaygroundRoute[]} props.routes
*/
function NavList({
routes
}) {
return _jsxDEV("ul", {
className: "ml-2 space-y-2 border-l-2 border-slate-0",
children: routes.map(route => _jsxDEV(NavLink, {
route: route
}, route.title, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 11
}, this))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 7
}, this);
}
/**
* Secondary section of navigation, with header
*
* @param {object} props
* @param {string} props.title - Title of navigation section
* @param {Children} props.children
*/
function NavSection({
title,
children
}) {
return _jsxDEV("div", {
className: "space-y-4",
children: [_jsxDEV("h3", {
className: "mx-2 text-slate-7 font-semibold text-sm",
children: title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 9
}, this), children]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 7
}, this);
}
return _jsxDEV("main", {
className: "max-w-[1200px] 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 overflow-scroll",
children: [_jsxDEV("div", {
className: "md:sticky md:top-0 h-16 px-6 flex items-center bg-slate-0 border-b",
children: _jsxDEV("h1", {
children: _jsxDEV(Link, {
href: baseURL + '/',
classes: "grow flex gap-x-2 text-lg",
children: [_jsxDEV(SvgIcon, {
name: "logo"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 17
}, this), "Component Library"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 11
}, this), _jsxDEV("nav", {
id: "nav",
className: "pt-8 pb-16 space-y-4 mr-4",
children: [_jsxDEV(NavHeader, {
children: "Foundations"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 13
}, this), _jsxDEV(NavList, {
routes: getRoutes('foundations')
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 13
}, this), _jsxDEV(NavHeader, {
children: "Components"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 13
}, this), Object.keys(componentGroups).map(group => {
return _jsxDEV(NavSection, {
title: componentGroups[group],
children: _jsxDEV(NavList, {
routes: getRoutes(
/** @type PlaygroundRouteGroup */
group)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 19
}, this)
}, group, false, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 17
}, this);
}), _jsxDEV(NavHeader, {
children: "Legacy"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 13
}, this), _jsxDEV(NavSection, {
title: "Legacy Patterns",
children: _jsxDEV(NavList, {
routes: getRoutes('patterns')
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 13
}, this), _jsxDEV(NavSection, {
title: "Legacy Components",
children: _jsxDEV(NavList, {
routes: getRoutes('components')
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 13
}, this), extraRoutes.length > 0 && _jsxDEV(_Fragment, {
children: [_jsxDEV(NavHeader, {
children: "Application"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 17
}, this), _jsxDEV(NavList, {
routes: extraRoutes
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 17
}, this)]
}, void 0, true)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 9
}, this), _jsxDEV("div", {
className: "bg-white pb-16",
children: content
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 5
}, this);
}
//# sourceMappingURL=PlaygroundApp.js.map