arc-ux 0.0.1

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -0,0 +1,2 @@
+# arc-ux
+A thinner React UX library (not server side rendered). Nice for simple things.

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "arc-ux",
+  "version": "0.0.1",
+  "description": "A purely functional router for independently evaluating a path against a list of routes",
+  "main": "src/ArcUX.js",
+  "type": "module",
+  "scripts": {
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage",
+    "test:watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watchAll"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anyuzer/arc-ux.git"
+  },
+  "keywords": [
+    "react",
+    "ux",
+    "arc"
+  ],
+  "author": "Ian Reid",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/anyuzer/arc-ux/issues"
+  },
+  "homepage": "https://github.com/anyuzer/arc-ux#readme",
+  "devDependencies": {
+    "jest": "^30.2.0"
+  },
+  "dependencies": {
+    "arc-lib": "^9.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "styled-components": "^6.3.10"
+  }
+}

package/src/ArcUX.js

@@ -0,0 +1,165 @@
+import {ArcRouter, ArcEvents, Log, is} from "arc-lib";
+import {createRoot} from "react-dom/client";
+import React from "react";
+import Html from "./Html.js";
+import {ThemeProvider} from "styled-components";
+import App from "./FrameworkComponents/App.jsx";
+import Form from "./Form.js";
+
+class ArcUX {
+    #routeMap = {};
+    #RouteRenderer;
+    #initialRoute;
+
+    #Html;
+
+    #handlers = {};
+
+    #themes = {};
+    #currentTheme;
+    #apis = {};
+    #environment = 'production';
+    #rootPath = '/cloud';
+    #keyVal = {};
+
+    #forms = {};
+
+    constructor() {
+        this.#RouteRenderer = new ArcRouter(this.#routeMap);
+        this.#Html = new Html;
+
+        Object.getOwnPropertyNames(Object.getPrototypeOf(this)).forEach(n => {
+            if(n === "constructor") { return;  }
+            this[n] = this[n].bind(this)
+        });
+
+        //Turn our Singleton into an event emitter
+        ArcEvents.mixin(this);
+    }
+
+    //Forms
+    getForm(_form) {
+        if(!this.#forms[_form]) {
+            this.#forms[_form] = new Form;
+        }
+        return this.#forms[_form];
+    }
+
+    //Simplest shared data state ever
+    setKeyVal(_key, _value, _suppressEmit=false) {
+        this.#keyVal[_key] = _value;
+        if(!_suppressEmit) {
+            Log.dRed(`Emitting: ${_key}`, [_value]);
+            this.emit(_key, [_value]);
+        }
+    }
+
+    getKeyVal(_key) {
+        return this.#keyVal[_key];
+    }
+
+    setResolverVariables(_environment, _rootPath) {
+        this.#environment = _environment;
+        this.#rootPath = _rootPath;
+
+        this.#Html.setEnvironment(_environment);
+        this.#Html.setPathToClientBundle(`${this.#rootPath}/assets/${this.#environment}.client.js`);
+    }
+
+    addAPI(_name, _API) {
+        this.#apis[_name] = _API;
+    }
+
+    API(_name){
+        return this.#apis[_name];
+    }
+
+    addTheme(_theme, _setCurrent=false) {
+        this.#themes[_theme.name] = _theme;
+        if(_setCurrent || !this.#currentTheme) {
+            this.#currentTheme = _theme.name;
+        }
+    }
+
+    getAvailableThemes() {
+        return Object.keys(this.#themes);
+    }
+
+    getCurrentTheme() {
+        return this.#themes[this.#currentTheme];
+    }
+
+    addHandler(_handler, _Component) {
+        this.#handlers[_handler] = _Component;
+    }
+
+    getHandler(_handler) {
+        return this.#handlers[_handler];
+    }
+
+    bindRoute(_route, _Component, _Shell=null) {
+        this.#routeMap[_route] = { Component: _Component, Shell: _Shell };
+        this.#RouteRenderer.setMap(this.#routeMap);
+        Log.dPink(`Bind Route?`, this.#routeMap);
+    }
+
+    renderRoute(_route) {
+        const routeData = this.#RouteRenderer.travel(_route)
+        Log.dRed('RouteData?', routeData);
+        Log.dYellow('Router?', this.#RouteRenderer);
+        if (routeData.match) {
+            return routeData.match;
+        }
+
+        Log.dGreen('NotFound?', this.#handlers);
+
+        if(this.getHandler('NotFound')){
+            return this.getHandler('NotFound');
+        }
+    }
+
+    resolveClient(){
+        const rootTheme = this.getCurrentTheme();
+        const root = createRoot(document.getElementById('app'));
+        root.render(
+            <ThemeProvider theme={rootTheme || {name:undefined}}>
+                {rootTheme.globalStyle ? <rootTheme.globalStyle /> : null}
+                {rootTheme.svgDefinitions ? <rootTheme.svgDefinitions /> : null}
+                <App $initialRoute={this.#initialRoute} />
+            </ThemeProvider>
+        );
+    }
+
+    htmlAddToHead(_headElement){
+        if(is(_headElement) === 'array'){
+            _headElement.forEach(_element => this.#Html.addHeadElement(_element));
+            return;
+        }
+        this.#Html.addHeadElement(_headElement)
+    }
+
+    loadPage(_route, _suppressEmit=false) {
+        this.setKeyVal('route', _route, _suppressEmit);
+    }
+
+    renderModal(_Modal, _props) {
+        this.emit('modal', [_Modal, _props || {}]);
+    }
+
+    closeModal() {
+        this.emit('modal:close', []);
+    }
+
+    async serveHtml(_ctx, _next, _routeData) {
+        try{
+            _ctx.response.status = 200;
+            _ctx.response.body = this.#Html.getString();
+        } catch (e) {
+            Log.catch(e);
+            _ctx.response.status = 500;
+            _ctx.response.body = {message: e.message};
+        }
+    }
+}
+
+export default new ArcUX;

package/src/Form.js

@@ -0,0 +1,53 @@
+import {ArcEvents} from "arc-lib";
+
+class Form {
+    #form = {};
+    #modifiers = {};
+    #validChecks = {};
+
+    constructor() {
+        ArcEvents.mixin(this);
+    }
+
+    removeField(_name) {
+        delete this.#form[_name];
+        delete this.#modifiers[_name];
+        delete this.#validChecks[_name];
+    }
+
+    initField(_name, _value, _modifier, _isValid=true) {
+        this.#form[_name] = _value;
+        this.#modifiers[_name] = _modifier;
+        this.#validChecks[_name] = _isValid;
+    }
+
+    getField(_name) {
+        return this.#form[_name];
+    }
+
+    updateField(_name, _value, _isValid) {
+        this.#form[_name] = _value;
+        this.#validChecks[_name] = _isValid;
+        this.emit('change', [this]);
+    }
+
+    modifyField(_name, _value) {
+        this.#modifiers[_name](_value);
+    }
+
+    getData(){
+       return this.#form;
+    }
+
+    isValid() {
+        let isValid = true;
+        Object.keys(this.#validChecks).forEach((_key) => {
+            if(!this.#validChecks[_key]){
+                isValid = false;
+            }
+        })
+        return isValid;
+    }
+}
+
+export default Form;

package/src/FrameworkComponents/App.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import withArcUX from "../withArcUX.js";
+import ModalLayer from "./ModalLayer.jsx";
+import { Log } from "arc-lib";
+
+class App extends React.Component {
+    #routeListener;
+    #modalListener;
+    #modalCloseListener;
+    constructor(props) {
+        super(props);
+        this.state = {
+            loading: true,
+            target: null,
+            shell: null,
+            loadedRoute: props.ArcUX.getKeyVal('route'),
+        }
+
+        this.#routeListener = props.ArcUX.on('route', this.loadRoute.bind(this))
+        this.#modalListener = props.ArcUX.on('modal', this.renderModal.bind(this))
+        this.#modalCloseListener = props.ArcUX.on('modal:close', this.closeModal.bind(this))
+    }
+
+    async componentDidMount() {
+        const initialRoute = this.props.ArcUX.getKeyVal('route');
+
+        Log.dGreen(`Our initial route is ${initialRoute}`);
+        const match = this.props.ArcUX.renderRoute(initialRoute);
+        if(match){
+            this.setState({
+                loading: false,
+                target: match.Component,
+                shell: match.Shell
+            })
+        }
+    }
+
+    async componentWillUnmount() {
+        if(this.#routeListener){
+            this.props.ArcUX.clear(this.#routeListener);
+        }
+    }
+
+    render() {
+        const AppLoader = this.props.ArcUX.getHandler('AppLoader');
+        const Shell = this.state.shell;
+
+        if(AppLoader && this.state.loading){
+            return Shell ? <Shell><AppLoader {...this.props} /></Shell> : <AppLoader {...this.props} />;
+        }
+
+        const RoutedComponent = this.state.target;
+        const Modal = this.state.modal ? this.state.modal.modal : null;
+        if(Shell){
+            return (
+                <React.Fragment>
+                    <Shell><RoutedComponent {...this.props} /></Shell>
+                    {Modal ? <ModalLayer><Modal {...this.state.modal.props} /></ModalLayer> : null}
+                </React.Fragment>
+            )
+        }
+
+        return (
+            <React.Fragment>
+                <RoutedComponent {...this.props} />
+                {Modal ? <ModalLayer><Modal {...this.state.modal.props} /></ModalLayer> : null}
+            </React.Fragment>
+        )
+    }
+
+    loadRoute(_newRoute) {
+        Log.dRed('New route called?', [_newRoute])
+        const match = this.props.ArcUX.renderRoute(_newRoute);
+        if(!match){
+            Log.dRed('Not Found handler missing');
+            return;
+        }
+        const fullHistoryString = decodeURI(_newRoute);
+        window.history.pushState({ code: fullHistoryString }, "", fullHistoryString);
+        this.setState({
+            loading: false,
+            target: match.Component,
+            shell: match.Shell,
+            loadedRoute: _newRoute
+        });
+    }
+
+    renderModal(_Modal, _props) {
+        this.setState({
+            modal: {
+                modal: _Modal,
+                props: _props ||{}
+            }
+        })
+    }
+
+    closeModal() {
+        this.setState({
+            modal: null
+        });
+    }
+}
+
+export default withArcUX(App);

package/src/FrameworkComponents/ModalLayer.jsx

@@ -0,0 +1,38 @@
+import React, { Fragment } from 'react';
+import withArcUX from "../withArcUX.js";
+
+class ModalLayer extends React.Component {
+    render() {
+        return (
+            <div style={{
+                position: 'fixed',
+                zIndex: 800,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                justifyContent: 'center',
+                alignItems: 'center',
+                display: "flex",
+                alignContent: "stretch"
+            }}>
+                <div
+                    onClick={() => { this.props.ArcUX.emit('modal:close', []); }}
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0,
+                        backgroundColor: 'black',
+                        cursor: 'pointer',
+                        opacity: 0.7
+                    }}
+                />
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+export default withArcUX(ModalLayer);

package/src/Html.js

@@ -0,0 +1,40 @@
+class Html {
+    #headElements = [];
+    #pathToClientBundle = '';
+    #environment = 'production';
+
+    addHeadElement(_element) {
+        this.#headElements.push(_element);
+    }
+
+    setPathToClientBundle(_pathToClientBundle) {
+        this.#pathToClientBundle = _pathToClientBundle;
+    }
+
+    setEnvironment(_environment) {
+        this.#environment = _environment;
+    }
+
+    getString() {
+        return (
+`<!DOCTYPE html>
+    <head>
+        ${this.#headElements.join('\r\n')}
+        <script>
+            window.app = ${JSON.stringify({
+                environment: this.#environment
+            })};
+        </script>
+    </head>
+    <body style="margin:0">
+      <!-- Our app container -->
+      <div id="app" style="display:flex;flex-direction: column;min-height: calc(100vh)"></div>
+      
+      <!-- Our isomorphic bundle -->
+      <script id="appBundle" src="${this.#pathToClientBundle}"></script>
+    </body>
+</html>`);
+    }
+}
+
+export default Html;

package/src/withArcUX.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ArcUX from "./ArcUX.js";
+
+const withArcUX = (_WrappedComponent) => {
+    return function ArcUXComponent(props) {
+        return <_WrappedComponent {...props} theme={ArcUX.getCurrentTheme()} ArcUX={ArcUX} />
+    }
+}
+
+export default withArcUX;