reinstate accidentally deleted bits

.eslintrc.js

@@ -19,7 +19,11 @@ module.exports = {
 		// lots of user generated free html, so dangerously set html is normal
 		'react/no-danger': 0,
 		'no-alert': 0,
-		'jsx-a11y/control-has-associated-label': 1
+		'jsx-a11y/control-has-associated-label': 1,
+		'react/prop-types': 0,
+		// Nothing in the UI allows reordering of lists, so the concern of
+		// unecessary rerenders does not - at present - apply
+		'react/no-array-index-key': 0
 	},
 	overrides: [{
 		env: {browser: true},

.gitignore

@@ -17,3 +17,4 @@ packages/**/package-lock.json
 
 package-lock.json
 .stylelintcache
+packages/tc-ui/dist

babel.config.js

@@ -9,30 +9,5 @@ module.exports = {
 			},
 		],
 	],
-	plugins: [
-		[
-			'@babel/plugin-transform-react-jsx',
-			{
-				pragma: 'h', // default pragma is React.createElement
-				pragmaFrag: 'Fragment', // default is React.Fragment
-				throwIfNamespace: false, // defaults to true
-			},
-		],
-		[
-			'module-resolver',
-			{
-				root: ['.'],
-				alias: {
-					react: 'preact/compat',
-					'react-dom': 'preact/compat',
-					// Not necessary unless you consume a module using `createClass`
-					'create-react-class':
-						'preact/compat/lib/create-react-class',
-					// Not necessary unless you consume a module requiring `react-dom-factories`
-					'react-dom-factories':
-						'preact/compat/lib/react-dom-factories',
-				},
-			},
-		],
-	],
+	plugins: [['@babel/plugin-transform-react-jsx']],
 };

demo/api.js

@@ -26,10 +26,6 @@ getApp({ treecreeperPath: '/api', app, graphqlMethods: ['post', 'get'] }).then(
 	},
 );
 
-require('module-alias').addAliases({
-	react: 'preact/compat',
-	'react-dom': 'preact/compat',
-});
 require('@babel/register'); // eslint-disable-line  import/no-extraneous-dependencies
 const {
 	editController,

demo/cms/components/footer.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact');
+const React = require('react');
 
 const Footer = () => (
 	<div className="o-layout__footer">

demo/cms/components/header.jsx

@@ -1,4 +1,5 @@
-const { h, Fragment } = require('preact');
+const React = require('react');
+const { Message } = require('./messages');
 
 const siteTitle = 'Biz Ops';
 
@@ -46,7 +47,7 @@ const PrimaryNavItem = ({ isActive, text, url, items }) => (
 			{items ? text : <div>{text}</div>}
 		</a>
 		{items ? (
-			<Fragment>
+			<>
 				<button
 					className="o-header-services__drop-down-button"
 					type="button"
@@ -63,7 +64,7 @@ const PrimaryNavItem = ({ isActive, text, url, items }) => (
 						Close dropdown menu
 					</button>
 				</ul>
-			</Fragment>
+			</>
 		) : null}
 	</li>
 );
@@ -199,46 +200,51 @@ const getPrimaryNavItems = ({ activeNavItem }) =>
 const Header = props => {
 	const primaryNav = getPrimaryNavItems(props);
 	return (
-		<div className="o-layout__header">
-			<header
-				className="o-header-services"
-				data-o-component="o-header-services"
-			>
-				<div className="o-header-services__top">
-					<div className="o-header-services__hamburger">
-						<a
-							className="o-header-services__hamburger-icon"
-							href="#o-header-drawer"
-							role="button"
-						>
-							<span className="o-header-services__visually-hidden">
-								Menu
-							</span>
-						</a>
-					</div>
-					<div className="o-header-services__logo" />
-					<div className="o-header-services__title">
-						<div className="o-header-services__product-name">
-							{/* <h1 class='o-header-services__product-name'><a href=''>Tool or Service name</a></h1> */}
-							<a href="/">{siteTitle}</a>
+		<>
+			<div className="o-layout__header">
+				<header
+					className="o-header-services"
+					data-o-component="o-header-services"
+				>
+					<div className="o-header-services__top">
+						<div className="o-header-services__hamburger">
+							<a
+								className="o-header-services__hamburger-icon"
+								href="#o-header-drawer"
+								role="button"
+							>
+								<span className="o-header-services__visually-hidden">
+									Menu
+								</span>
+							</a>
+						</div>
+						<div className="o-header-services__logo" />
+						<div className="o-header-services__title">
+							<div className="o-header-services__product-name">
+								{/* <h1 class='o-header-services__product-name'><a href=''>Tool or Service name</a></h1> */}
+								<a href="/">{siteTitle}</a>
+							</div>
 						</div>
-					</div>
 
-					<ul className="o-header-services__related-content">
-						{userLinks.map(UserLink)}
-						<SearchBar />
-					</ul>
-				</div>
+						<ul className="o-header-services__related-content">
+							{userLinks.map(UserLink)}
+							<SearchBar />
+						</ul>
+					</div>
 
-				<nav className="o-header-services__primary-nav">
-					<ul className="o-header-services__primary-nav-list">
-						{primaryNav.map(navProps => (
-							<PrimaryNavItem {...navProps} />
-						))}
-					</ul>
-				</nav>
-			</header>
-		</div>
+					<nav className="o-header-services__primary-nav">
+						<ul className="o-header-services__primary-nav-list">
+							{primaryNav.map(navProps => (
+								<PrimaryNavItem {...navProps} />
+							))}
+						</ul>
+					</nav>
+				</header>
+			</div>
+			<div className="o-layout__header">
+				{props.message ? <Message {...props} isBanner /> : null}
+			</div>
+		</>
 	);
 };
 module.exports = { Header };

packages/tc-ui/src/components/messages.jsx → demo/cms/components/messages.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact');
+const React = require('react');
 
 const InnerMessage = ({ message, type, isInner = false }) => (
 	<section

demo/cms/components/primitives.jsx

@@ -1,4 +1,4 @@
-const { h, Fragment } = require('preact');
+const React = require('react');
 
 const { primitives } = require('@financial-times/tc-ui');
 
@@ -77,8 +77,8 @@ const Email = ({ value, id }) =>
 	) : null;
 
 const RelationshipAnnotator = ({ type, value }) => (
-	<Fragment>
-		{type === 'System' ? <ServiceTier value={value.serviceTier} /> : null}
+	<>
+		{type === 'MainType' ? <span>hydrogen: {value.someString}</span> : null}
 		{type === 'System' || type === 'Product' ? (
 			<LifecycleStage value={value.lifecycleStage} />
 		) : null}
@@ -87,13 +87,13 @@ const RelationshipAnnotator = ({ type, value }) => (
 		{type === 'Repository' ? (
 			<IsActiveLabel isActive={!value.isArchived} />
 		) : null}
-	</Fragment>
+	</>
 );
 
 primitives.Relationship.setRelationshipAnnotator(RelationshipAnnotator);
 
 module.exports = {
-	SystemLifecycle: { ...primitives.Enum, ViewComponent: LifecycleStage },
+	AnEnum: { ...primitives.Enum, ViewComponent: LifecycleStage },
 	ProductLifecycle: { ...primitives.Enum, ViewComponent: LifecycleStage },
 	ServiceTier: { ...primitives.Enum, ViewComponent: ServiceTier },
 	TrafficLight: { ...primitives.Enum, ViewComponent: TrafficLight },

demo/cms/components/subheader.jsx

@@ -1,9 +1,9 @@
-const { h, Fragment } = require('preact');
+const React = require('react');
 
 const Subheader = ({ type, code, data }) => (
 	<div className="o-buttons__group">
 		{type === 'System' && data.lifecycleStage !== 'Decommissioned' ? (
-			<Fragment>
+			<>
 				<a
 					className="o-buttons o-layout__unstyled-element"
 					href={`https://runbooks.in.ft.com/${encodeURIComponent(
@@ -36,7 +36,7 @@ const Subheader = ({ type, code, data }) => (
 				>
 					View SOS rating
 				</a>
-			</Fragment>
+			</>
 		) : null}
 		<a
 			className="o-buttons o-layout__unstyled-element biz-ops-cta--visualise"

demo/cms/index.jsx

@@ -1,11 +1,8 @@
-const { h } = require('preact');
+const React = require('react');
 const logger = require('@financial-times/lambda-logger');
 const { getCMS } = require('@financial-times/tc-ui');
 
-const { Header } = require('./components/header');
-const { Footer } = require('./components/footer');
 const { Subheader } = require('./components/subheader');
-
 const customComponents = require('./components/primitives');
 
 const wrapCmsHandler = handler => async (req, res) => {
@@ -27,34 +24,20 @@ const wrapCmsHandler = handler => async (req, res) => {
 	}
 };
 
-const {
-	viewHandler,
-	deleteHandler,
-	editHandler,
-	handleError,
-	renderPage,
-} = getCMS({
+const { handleError, renderPage } = require('./render');
+
+const { viewHandler, deleteHandler, editHandler } = getCMS({
 	logger,
 	restApiUrl: 'http://local.in.ft.com:8888/api/rest',
 	graphqlApiUrl: 'http://local.in.ft.com:8888/api/graphql',
 	apiHeaders: ({ metadata: { clientUserId } }) => ({
 		'client-id': 'treecreeper-demo',
 		'client-user-id': clientUserId,
 	}),
-	Header,
-	Footer,
 	Subheader,
 	customComponents,
-	origamiCssModules: {
-		'header-services': '^3.2.3',
-		table: '^7.0.5',
-		labels: '^4.1.1',
-		'footer-services': '^2.1.0',
-	},
-	origamiJsModules: {
-		table: '^7.0.5',
-		'header-services': '^3.2.3',
-	},
+	handleError,
+	renderPage,
 	customTypeMappings: {
 		Paragraph: 'LargeText',
 	},

packages/tc-ui/src/page/error-page.jsx → demo/cms/render/error-page.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact');
+const React = require('react');
 
 const ErrorPage = ({ error, status } = {}) => (
 	<main className="o-layout__main">

demo/cms/render/index.js

@@ -0,0 +1,45 @@
+const querystring = require('querystring');
+
+const { renderHtml } = require('./react-renderer');
+
+const errorTemplate = require('./error-page');
+
+const handleError = func => async (...args) => {
+	try {
+		return func(...args);
+	} catch (error) {
+		const status = error.status || 500;
+		return {
+			status,
+			body: renderHtml(errorTemplate, { status, error }),
+		};
+	}
+};
+
+const renderPage = ({ template, data, event = {}, status = 200 }) => {
+	const user = event.isSignedIn && event.username;
+	const fromDewey = !!(event.query || {})['from-dewey'];
+	const { message, messageType } = event.query || {};
+	return {
+		status,
+		body: renderHtml(
+			template,
+			Object.assign(data, {
+				user,
+				fromDewey,
+				message,
+				messageType,
+				querystring: querystring.stringify(event.query),
+			}),
+		),
+		headers: {
+			'Content-Type': 'text/html',
+			'Cache-Control': 'max-age=0, private',
+		},
+	};
+};
+
+module.exports = {
+	handleError,
+	renderPage,
+};