From ea80d8807118cfabf97e39c6fe613a6bd23ef629 Mon Sep 17 00:00:00 2001 From: Rhys Evans Date: Tue, 31 Dec 2019 10:24:04 +0000 Subject: [PATCH] reinstate accidentally deleted bits --- .eslintrc.js | 6 +- .gitignore | 1 + babel.config.js | 27 +- demo/api.js | 4 - demo/cms/components/footer.jsx | 2 +- demo/cms/components/header.jsx | 86 ++-- .../src => demo/cms}/components/messages.jsx | 2 +- demo/cms/components/primitives.jsx | 10 +- demo/cms/components/subheader.jsx | 6 +- demo/cms/index.jsx | 29 +- .../page => demo/cms/render}/error-page.jsx | 2 +- demo/cms/render/index.js | 45 ++ .../cms/render/layout.jsx | 47 +- demo/cms/render/react-renderer.jsx | 59 +++ example-schema/types/MainType.yaml | 1 + jest.config.js | 4 - package.json | 6 +- packages/tc-ui/dist/browser.js | 19 - packages/tc-ui/dist/browser/edit.js | 82 ---- packages/tc-ui/dist/browser/view.js | 36 -- packages/tc-ui/dist/components/buttons.js | 43 -- .../tc-ui/dist/components/edit-helpers.js | 70 --- packages/tc-ui/dist/components/helpers.js | 62 --- packages/tc-ui/dist/components/messages.js | 62 --- packages/tc-ui/dist/components/structure.js | 115 ----- packages/tc-ui/dist/handlers/delete.js | 49 -- packages/tc-ui/dist/handlers/edit.js | 112 ----- packages/tc-ui/dist/handlers/index.js | 19 - packages/tc-ui/dist/handlers/view.js | 39 -- packages/tc-ui/dist/lib/api-client.js | 151 ------ .../tc-ui/dist/lib/get-data-transformers.js | 57 --- packages/tc-ui/dist/lib/get-schema-subset.js | 44 -- packages/tc-ui/dist/lib/mappers.js | 60 --- packages/tc-ui/dist/page/asset-loading.js | 51 -- packages/tc-ui/dist/page/asset-references.js | 57 --- packages/tc-ui/dist/page/error-page.js | 29 -- packages/tc-ui/dist/page/index.js | 77 --- packages/tc-ui/dist/page/layout.js | 63 --- .../tc-ui/dist/primitives/boolean/server.js | 79 ---- packages/tc-ui/dist/primitives/browser.js | 10 - packages/tc-ui/dist/primitives/enum/server.js | 82 ---- .../dist/primitives/large-text/browser.js | 33 -- .../tc-ui/dist/primitives/large-text/main.css | 17 - .../dist/primitives/large-text/server.js | 58 --- .../tc-ui/dist/primitives/number/server.js | 10 - .../relationship/__tests__/interface.spec.js | 62 --- .../dist/primitives/relationship/browser.js | 16 - .../lib/__tests__/relationship-picker.spec.js | 442 ------------------ .../relationship/lib/relationship-picker.js | 284 ----------- .../relationship/lib/relationship.js | 29 -- .../relationship/lib/view-relationship.js | 75 --- .../dist/primitives/relationship/main.css | 60 --- .../dist/primitives/relationship/server.js | 52 --- packages/tc-ui/dist/primitives/server.js | 32 -- .../tc-ui/dist/primitives/temporal/server.js | 63 --- packages/tc-ui/dist/primitives/text/server.js | 42 -- packages/tc-ui/dist/server.js | 109 ----- packages/tc-ui/dist/templates/edit-page.js | 158 ------- packages/tc-ui/dist/templates/view-page.js | 114 ----- .../tc-ui/dist/test-helpers/enzyme-setup.js | 46 -- packages/tc-ui/package.json | 20 +- packages/tc-ui/src/browser.js | 10 +- packages/tc-ui/src/components/helpers.jsx | 54 --- packages/tc-ui/src/handlers/index.js | 5 - packages/tc-ui/src/lib/api-client.js | 4 +- .../src/{ => lib}/components/buttons.jsx | 2 +- .../components/input-wrapper.jsx} | 8 +- .../tc-ui/src/lib/components/messages.jsx | 52 +++ .../src/{ => lib}/components/structure.jsx | 25 +- packages/tc-ui/src/lib/mappers.js | 13 +- packages/tc-ui/src/main.css | 112 ----- packages/tc-ui/src/page/asset-references.js | 69 --- packages/tc-ui/src/page/index.jsx | 73 --- packages/tc-ui/src/page/layout.jsx | 69 --- packages/tc-ui/src/pages/browser.js | 7 + .../delete.js => pages/delete/handler.js} | 0 .../edit.js => pages/edit/browser.js} | 3 +- .../edit.js => pages/edit/handler.js} | 4 +- packages/tc-ui/src/pages/edit/main.css | 31 ++ .../edit-page.jsx => pages/edit/template.jsx} | 51 +- packages/tc-ui/src/pages/server.js | 5 + .../view.js => pages/view/browser.js} | 2 + .../view.js => pages/view/handler.js} | 8 +- .../tc-ui/{dist => src/pages/view}/main.css | 88 ---- packages/tc-ui/src/pages/view/template.jsx | 125 +++++ .../tc-ui/src/primitives/boolean/server.jsx | 4 +- packages/tc-ui/src/primitives/enum/server.jsx | 32 +- .../src/primitives/large-text/server.jsx | 24 +- .../relationship/__tests__/interface.spec.jsx | 26 +- .../src/primitives/relationship/browser.jsx | 10 +- .../__tests__/relationship-picker.spec.jsx | 2 +- .../relationship/lib/relationship-picker.jsx | 23 +- .../relationship/lib/relationship.jsx | 4 +- .../relationship/lib/view-relationship.jsx | 15 +- .../src/primitives/relationship/server.jsx | 38 +- .../tc-ui/src/primitives/temporal/server.jsx | 33 +- packages/tc-ui/src/primitives/text/server.jsx | 4 +- packages/tc-ui/src/server.js | 39 +- packages/tc-ui/src/templates/view-page.jsx | 118 ----- .../tc-ui/src/test-helpers/enzyme-setup.js | 2 +- scripts/install-monorepo.js | 19 - webpack.config.js | 8 - 102 files changed, 691 insertions(+), 4057 deletions(-) rename {packages/tc-ui/src => demo/cms}/components/messages.jsx (97%) rename {packages/tc-ui/src/page => demo/cms/render}/error-page.jsx (95%) create mode 100644 demo/cms/render/index.js rename packages/tc-ui/src/page/asset-loading.jsx => demo/cms/render/layout.jsx (54%) create mode 100644 demo/cms/render/react-renderer.jsx delete mode 100644 packages/tc-ui/dist/browser.js delete mode 100644 packages/tc-ui/dist/browser/edit.js delete mode 100644 packages/tc-ui/dist/browser/view.js delete mode 100644 packages/tc-ui/dist/components/buttons.js delete mode 100644 packages/tc-ui/dist/components/edit-helpers.js delete mode 100644 packages/tc-ui/dist/components/helpers.js delete mode 100644 packages/tc-ui/dist/components/messages.js delete mode 100644 packages/tc-ui/dist/components/structure.js delete mode 100644 packages/tc-ui/dist/handlers/delete.js delete mode 100644 packages/tc-ui/dist/handlers/edit.js delete mode 100644 packages/tc-ui/dist/handlers/index.js delete mode 100644 packages/tc-ui/dist/handlers/view.js delete mode 100644 packages/tc-ui/dist/lib/api-client.js delete mode 100644 packages/tc-ui/dist/lib/get-data-transformers.js delete mode 100644 packages/tc-ui/dist/lib/get-schema-subset.js delete mode 100644 packages/tc-ui/dist/lib/mappers.js delete mode 100644 packages/tc-ui/dist/page/asset-loading.js delete mode 100644 packages/tc-ui/dist/page/asset-references.js delete mode 100644 packages/tc-ui/dist/page/error-page.js delete mode 100644 packages/tc-ui/dist/page/index.js delete mode 100644 packages/tc-ui/dist/page/layout.js delete mode 100644 packages/tc-ui/dist/primitives/boolean/server.js delete mode 100644 packages/tc-ui/dist/primitives/browser.js delete mode 100644 packages/tc-ui/dist/primitives/enum/server.js delete mode 100644 packages/tc-ui/dist/primitives/large-text/browser.js delete mode 100644 packages/tc-ui/dist/primitives/large-text/main.css delete mode 100644 packages/tc-ui/dist/primitives/large-text/server.js delete mode 100644 packages/tc-ui/dist/primitives/number/server.js delete mode 100644 packages/tc-ui/dist/primitives/relationship/__tests__/interface.spec.js delete mode 100644 packages/tc-ui/dist/primitives/relationship/browser.js delete mode 100644 packages/tc-ui/dist/primitives/relationship/lib/__tests__/relationship-picker.spec.js delete mode 100644 packages/tc-ui/dist/primitives/relationship/lib/relationship-picker.js delete mode 100644 packages/tc-ui/dist/primitives/relationship/lib/relationship.js delete mode 100644 packages/tc-ui/dist/primitives/relationship/lib/view-relationship.js delete mode 100644 packages/tc-ui/dist/primitives/relationship/main.css delete mode 100644 packages/tc-ui/dist/primitives/relationship/server.js delete mode 100644 packages/tc-ui/dist/primitives/server.js delete mode 100644 packages/tc-ui/dist/primitives/temporal/server.js delete mode 100644 packages/tc-ui/dist/primitives/text/server.js delete mode 100644 packages/tc-ui/dist/server.js delete mode 100644 packages/tc-ui/dist/templates/edit-page.js delete mode 100644 packages/tc-ui/dist/templates/view-page.js delete mode 100644 packages/tc-ui/dist/test-helpers/enzyme-setup.js delete mode 100644 packages/tc-ui/src/components/helpers.jsx delete mode 100644 packages/tc-ui/src/handlers/index.js rename packages/tc-ui/src/{ => lib}/components/buttons.jsx (97%) rename packages/tc-ui/src/{components/edit-helpers.jsx => lib/components/input-wrapper.jsx} (90%) create mode 100644 packages/tc-ui/src/lib/components/messages.jsx rename packages/tc-ui/src/{ => lib}/components/structure.jsx (93%) delete mode 100644 packages/tc-ui/src/page/asset-references.js delete mode 100644 packages/tc-ui/src/page/index.jsx delete mode 100644 packages/tc-ui/src/page/layout.jsx create mode 100644 packages/tc-ui/src/pages/browser.js rename packages/tc-ui/src/{handlers/delete.js => pages/delete/handler.js} (100%) rename packages/tc-ui/src/{browser/edit.js => pages/edit/browser.js} (97%) rename packages/tc-ui/src/{handlers/edit.js => pages/edit/handler.js} (95%) create mode 100644 packages/tc-ui/src/pages/edit/main.css rename packages/tc-ui/src/{templates/edit-page.jsx => pages/edit/template.jsx} (84%) create mode 100644 packages/tc-ui/src/pages/server.js rename packages/tc-ui/src/{browser/view.js => pages/view/browser.js} (98%) rename packages/tc-ui/src/{handlers/view.js => pages/view/handler.js} (87%) rename packages/tc-ui/{dist => src/pages/view}/main.css (50%) create mode 100644 packages/tc-ui/src/pages/view/template.jsx delete mode 100644 packages/tc-ui/src/templates/view-page.jsx delete mode 100644 scripts/install-monorepo.js diff --git a/.eslintrc.js b/.eslintrc.js index 529cb3506..7bf084172 100644 --- a/.eslintrc.js +++ b/.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}, diff --git a/.gitignore b/.gitignore index 86d3d0baa..382a61501 100644 --- a/.gitignore +++ b/.gitignore @@ -17,3 +17,4 @@ packages/**/package-lock.json package-lock.json .stylelintcache +packages/tc-ui/dist diff --git a/babel.config.js b/babel.config.js index a407a4f7a..7fba1111f 100644 --- a/babel.config.js +++ b/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']], }; diff --git a/demo/api.js b/demo/api.js index fd2e2fecc..0d6d6b1bc 100644 --- a/demo/api.js +++ b/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, diff --git a/demo/cms/components/footer.jsx b/demo/cms/components/footer.jsx index 4980da109..664bda5d4 100644 --- a/demo/cms/components/footer.jsx +++ b/demo/cms/components/footer.jsx @@ -1,4 +1,4 @@ -const { h } = require('preact'); +const React = require('react'); const Footer = () => (
diff --git a/demo/cms/components/header.jsx b/demo/cms/components/header.jsx index 354df2148..9321af608 100644 --- a/demo/cms/components/header.jsx +++ b/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 :
{text}
} {items ? ( - + <> - + ) : null} ); @@ -199,46 +200,51 @@ const getPrimaryNavItems = ({ activeNavItem }) => const Header = props => { const primaryNav = getPrimaryNavItems(props); return ( -
-
-
- -
-
-
- {/*

Tool or Service name

*/} - {siteTitle} + <> +
+
+
+ +
+ -
-
    - {userLinks.map(UserLink)} - -
-
+
    + {userLinks.map(UserLink)} + +
+
- -
-
+ + +
+
+ {props.message ? : null} +
+ ); }; module.exports = { Header }; diff --git a/packages/tc-ui/src/components/messages.jsx b/demo/cms/components/messages.jsx similarity index 97% rename from packages/tc-ui/src/components/messages.jsx rename to demo/cms/components/messages.jsx index fe1fa87cf..d1fe65b17 100644 --- a/packages/tc-ui/src/components/messages.jsx +++ b/demo/cms/components/messages.jsx @@ -1,4 +1,4 @@ -const { h } = require('preact'); +const React = require('react'); const InnerMessage = ({ message, type, isInner = false }) => (
) : null; const RelationshipAnnotator = ({ type, value }) => ( - - {type === 'System' ? : null} + <> + {type === 'MainType' ? hydrogen: {value.someString} : null} {type === 'System' || type === 'Product' ? ( ) : null} @@ -87,13 +87,13 @@ const RelationshipAnnotator = ({ type, value }) => ( {type === 'Repository' ? ( ) : null} - + ); 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 }, diff --git a/demo/cms/components/subheader.jsx b/demo/cms/components/subheader.jsx index ca794eec2..01214a089 100644 --- a/demo/cms/components/subheader.jsx +++ b/demo/cms/components/subheader.jsx @@ -1,9 +1,9 @@ -const { h, Fragment } = require('preact'); +const React = require('react'); const Subheader = ({ type, code, data }) => (
{type === 'System' && data.lifecycleStage !== 'Decommissioned' ? ( - + <> ( > View SOS rating - + ) : null} async (req, res) => { @@ -27,13 +24,9 @@ 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', @@ -41,20 +34,10 @@ const { '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', }, diff --git a/packages/tc-ui/src/page/error-page.jsx b/demo/cms/render/error-page.jsx similarity index 95% rename from packages/tc-ui/src/page/error-page.jsx rename to demo/cms/render/error-page.jsx index 4eca97ba4..6cf065a14 100644 --- a/packages/tc-ui/src/page/error-page.jsx +++ b/demo/cms/render/error-page.jsx @@ -1,4 +1,4 @@ -const { h } = require('preact'); +const React = require('react'); const ErrorPage = ({ error, status } = {}) => (
diff --git a/demo/cms/render/index.js b/demo/cms/render/index.js new file mode 100644 index 000000000..4799100cb --- /dev/null +++ b/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, +}; diff --git a/packages/tc-ui/src/page/asset-loading.jsx b/demo/cms/render/layout.jsx similarity index 54% rename from packages/tc-ui/src/page/asset-loading.jsx rename to demo/cms/render/layout.jsx index 2424c6110..a518b330a 100644 --- a/packages/tc-ui/src/page/asset-loading.jsx +++ b/demo/cms/render/layout.jsx @@ -1,7 +1,7 @@ -const { h, Fragment } = require('preact'); +const React = require('react'); const HeadAssets = ({ mainCss, origamiCss }) => ( - + <> ( /> - + ); + const TailAssets = ({ mainJs, origamiJs }) => ( - + <>