@cimpress/react-components/dist/esm/docs/components/App.js

React components to support the MCP styleguide

import React, { Component } from 'react';
import { hot } from 'react-hot-loader';
import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom';
import { createBrowserHistory as createHistory } from 'history';
import { css, cx } from '@emotion/css';
import { GlobalStyles } from '@cimpress/react-components';
import DocsHeader from './DocsHeader.jsx';
import Introduction from './introduction.jsx';
import components from './pages';
const sideBar = css `
  width: 200px;
  flex: 0 0 auto;
  margin: 8px 16px;
  padding: 8px;
  background-color: white;
`;
const flex = css `
  display: flex;
`;
const minHeight = css `
  min-height: calc(100vh - 120px);
`;
const activeLink = css `
  font-weight: bold;
`;
class App extends Component {
    constructor() {
        super({});
        Object.defineProperty(this, "history", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        Object.defineProperty(this, "basename", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        // TODO make these act nice on previous versions
        const basename = process.env.BASE_NAME || (process.env.NODE_ENV === 'production' ? '/react-components/latest' : '');
        const ROOT_URL = process.env.NODE_ENV === 'production' ? `https://static.ux.cimpress.io/${basename}/` : 'http://localhost:8080/';
        this.basename = basename;
        this.history = createHistory({ basename });
        const path = window.location.hash.slice(1);
        if (path) {
            window.location.hash = '';
            this.history.replaceState({}, '', `${ROOT_URL}${path}`);
        }
    }
    render() {
        return (React.createElement(BrowserRouter, { basename: this.basename },
            React.createElement(GlobalStyles, null),
            React.createElement(DocsHeader, null),
            React.createElement("div", { className: flex },
                React.createElement("div", { className: sideBar },
                    React.createElement("div", null,
                        React.createElement(NavLink, { to: "/", activeClassName: activeLink, exact: true }, "Introduction")),
                    React.createElement("h5", null, "Available Components:"),
                    components.map(component => (React.createElement("div", { key: component.displayName },
                        React.createElement(NavLink, { to: component.route, activeClassName: activeLink }, component.displayName))))),
                React.createElement("div", { className: "container" },
                    React.createElement("div", { className: cx('content-wrapper', minHeight) },
                        React.createElement(Switch, null,
                            components.map(c => (React.createElement(Route, { key: c.route, path: c.route, component: c.component }))),
                            React.createElement(Route, { path: "/(index.html)?", component: Introduction })))))));
    }
}
export default hot(module)(App);
//# sourceMappingURL=App.js.map