@carbonorm/carbonreact 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonorm/carbonreact",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "dist/CarbonReact.cjs.js",
   "browser": "dist/CarbonReact.umd.js",
   "module": "dist/CarbonReact.esm.js",
@@ -65,7 +65,8 @@
     "build:css": "sass ./src:./src && typed-scss-modules 'src/**/*.?(s)css' --nameFormat all --exportType default src"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.4.0",

package/src/CarbonReact.tsx

@@ -0,0 +1,136 @@
+import {clearCache} from "@carbonorm/carbonnode";
+import changed from "hoc/changed";
+import {GlobalHistory} from "hoc/GlobalHistory";
+import hexToRgb from "hoc/hexToRgb";
+import React, {ReactNode} from 'react';
+import {BrowserRouter} from 'react-router-dom';
+import {ToastContainer} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.min.css';
+import BackendThrowable from 'components/Errors/BackendThrowable';
+import Nest from 'components/Nest/Nest';
+import {iCarbons} from "variables/C6";
+
+
+export type tStatefulApiData<T> = T[] | undefined | null;
+
+
+// this refers to the value types of the keys above, aka values in the state
+export interface iRestfulObjectArrayTypes {
+    carbons: tStatefulApiData<iCarbons>,
+}
+
+export type tRestfulObjectArrayKeys = keyof iRestfulObjectArrayTypes
+
+export type tRestfulObjectArrayValues = iRestfulObjectArrayTypes[tRestfulObjectArrayKeys];
+
+// @ts-ignore
+export type tRestfulObjectValues = tRestfulObjectArrayValues[number];
+
+// our central container, single page application is best with the DigApi
+export interface iCarbonORMState extends iRestfulObjectArrayTypes {
+    websocketEvents: MessageEvent[],
+    websocketData: any[],
+    websocket?: WebSocket,
+    websocketMounted: boolean,
+    alert?: boolean,
+    alertsWaiting: any[],
+    backendThrowable: any[],
+}
+
+export default class CarbonReact<P = {}, S = {}> extends React.Component<{
+    children?: ReactNode | ReactNode[],
+} & P, iCarbonORMState & S> {
+
+    static instance: CarbonReact;
+
+    static lastLocation = window.location.pathname;
+
+    state = {
+        carbons: undefined,
+        alertsWaiting: [],
+        backendThrowable: [],
+        websocketData: [],
+        websocketEvents: [],
+        websocketMounted: false,
+    } as iCarbonORMState & S;
+
+    // @link https://github.com/welldone-software/why-did-you-render
+    // noinspection JSUnusedGlobalSymbols
+    static whyDidYouRender = true;
+
+    constructor(props) {
+
+        super(props);
+
+        CarbonReact.instance = this;
+
+        // This should only ever be done here, when the full state is being trashed.
+        clearCache({
+            ignoreWarning: true
+        });
+
+
+        /** We can think of our app as having one state; this state.
+         * Long-term, I'd like us to store this state to local storage and only load updates on reload...
+         * Class based components are far easier to manage state in local storage and pass state down to children.
+         * Children, if not faced with a local storage or other complexity should be a functional component. Functional
+         * components' tend to be shorter syntactically and bonus points if it's stateless.
+         **/
+
+    }
+
+    websocketTimeout = 5000;
+
+    shouldComponentUpdate(
+        nextProps: Readonly<any>,
+        nextState: Readonly<iCarbonORMState>,
+        _nextContext: any): boolean {
+
+        changed(this.constructor.name + ' (DigApi)', 'props', this.props, nextProps);
+        changed(this.constructor.name + ' (DigApi)', 'state', this.state, nextState);
+
+        return true
+
+    }
+
+    componentDidUpdate(_prevProps: Readonly<any>, _prevState: Readonly<iCarbonORMState>, _snapshot?: any) {
+        if (CarbonReact.lastLocation !== location.pathname) {
+            CarbonReact.lastLocation = location.pathname;
+            const websocket = this.state.websocket;
+            if (websocket?.readyState === WebSocket.OPEN) {
+                websocket.send(location.pathname);
+                console.log(location.pathname);
+            }
+        }
+    }
+
+    render() {
+
+        console.log('CarbonORM TSX RENDER');
+
+        const colorHex = '#' + Math.random().toString(16).slice(-6);
+
+        console.log('%c color (' + colorHex + ')', 'color: ' + colorHex);
+
+        const nest = <Nest position={'fixed'} backgroundColor={''} color={hexToRgb(colorHex)} count={100}/>;
+
+        if (this.state.backendThrowable.length > 0) {
+
+            return <>
+                {nest}
+                <BackendThrowable/>
+            </>;
+
+        }
+
+        return <BrowserRouter>
+            <GlobalHistory/>
+            {this.props.children}
+            <ToastContainer/>
+        </BrowserRouter>;
+
+    }
+
+}
+
+

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,210 @@
+import classNames from "classnames";
+import CarbonReact from "CarbonReact";
+import {ReactNode} from "react";
+import Popup from "components/Popup/Popup";
+import  getStyles from "hoc/getStyles";
+import {faClose} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import isProduction from "variables/isProduction";
+
+//  'digBtnBlue': string;
+//   'digBtnGreen': string;
+//   'digBtnLightRed': string;
+//   'digBtnRed': string;
+export interface iAlertButtonOptions {
+    text: string,
+    value?: string,
+    className?: string,
+    color: "default" | "primary" | "secondary" | "inherit" | "danger" | "info" | "success" | "warning" | undefined,
+}
+
+export function addAlert(props: iAlert) {
+
+    CarbonReact.instance.setState(previousState => ({
+        alertsWaiting: previousState.alertsWaiting.length === 0
+            ? [props]
+            : [...previousState.alertsWaiting, props]
+    }))
+
+}
+
+export interface iAlert {
+    title: string,
+    text: string,
+    component?: ReactNode,
+    icon?: "warning" | "error" | "success" | "info" | "question" | null,
+    buttons?: (iAlertButtonOptions)[] | undefined, //['No thanks!', 'Yes, Delete it'],
+    dangerMode?: true,
+    then?: (value: string | undefined) => void,
+    timeout?: number,
+    footerText?: string,
+
+    intercept?: boolean,
+    backendThrowable?: { [key: string]: any },
+}
+
+export default function Alert() {
+
+    const {alertsWaiting, backendThrowable} = CarbonReact.instance.state
+
+    let alert: iAlert | undefined = undefined;
+
+    const alertWaiting = alertsWaiting.length + backendThrowable.length
+
+    if (backendThrowable.length !== 0) {
+
+        const buttons: iAlertButtonOptions[] = [{
+            text: 'Close',
+            color: 'danger',
+        }];
+
+        const hideExpandInformation = isProduction
+
+        if (false === hideExpandInformation) {
+            buttons.push({
+                text: 'Expand',
+                color: 'primary',
+            })
+        }
+
+        const backendThrowable = CarbonReact.instance.state.backendThrowable[0]
+
+        alert = {
+            title: "Oh no! An issue occurred!",
+            text: backendThrowable?.['DropInGaming\\PHP\\Errors\\DropException'] ?? 'An unknown issue occurred. Please try again.',
+            timeout: 0,
+            footerText: hideExpandInformation ? '' : 'These alert footer options are only shown to admins and in development environments. Click "Expand" to see more details.',
+            buttons: buttons,
+            // backendThrowable has its own custom component that can be expanded (called in the Bootstrap component)
+            // our then function will be called when the user clicks on the button providing the option to expand or close
+            backendThrowable: backendThrowable,
+            then: (value: string | undefined) => {
+
+                if (value === 'Expand') {
+
+                    CarbonReact.instance.setState(previousState => {
+
+                        let backendThrowable = previousState.backendThrowable.pop()
+
+                        if (backendThrowable === undefined) {
+                            return {
+                                backendThrowable: []
+                            }
+                        }
+
+                        backendThrowable.expanded = true
+
+                        return {
+                            backendThrowable: [backendThrowable, ...(previousState.backendThrowable ?? [])]
+                        }
+                    })
+
+                } else {
+                    CarbonReact.instance.setState(previousState => ({
+                        backendThrowable: previousState.backendThrowable.slice(1)
+                    }))
+                }
+            }
+        }
+
+    } else if (alertsWaiting.length !== 0) {
+
+        alert = alertsWaiting[0]
+
+    }
+
+    if (alert === undefined) {
+
+        return null
+
+    }
+
+    const timeout = alert?.timeout || 15000
+
+    const bootstrap = CarbonReact.instance
+
+    const dig = getStyles()
+
+    let cancelTimeout: any = null
+
+    const handleClose = () => {
+        if (null !== cancelTimeout) {
+            clearTimeout(cancelTimeout)
+        }
+
+        if (alert?.backendThrowable === undefined) {
+            bootstrap.setState(previousState => ({
+                alertsWaiting: previousState.alertsWaiting.slice(1)
+            }))
+        }
+
+    }
+
+    if (alert?.intercept === false) {
+        handleClose()
+        return null
+    }
+
+    if (0 !== timeout) {
+
+        cancelTimeout = setTimeout(() => {
+            handleClose()
+        }, timeout)
+
+    }
+
+    return <Popup handleClose={handleClose}>
+        <div className={classNames("model-content", dig.rounded0, dig.border0)} style={{
+            maxWidth: '75vw',
+            maxHeight: '75vh',
+        }}>
+            <div className={classNames(dig.modalHeader, dig.rounded0, dig.border0, {
+                // icon?: "warning" | "error" | "success" | "info" | "question"
+                [dig.bg_primary]: "info" === alert.icon || alert.icon === undefined || alert.icon === null,
+                [dig.bg_success]: "success" === alert.icon,
+                [dig.bg_warning]: "warning" === alert.icon,
+                [dig.bg_danger]: "error" === alert.icon, // TODO - change to red
+                [dig.bgPrimary]: "question" === alert.icon,
+            })}>
+                <h3 className={classNames(dig.modalTitle, dig.textDark)} id="staticBackdropLabel">
+                    #{alertWaiting} {alert.title}
+                </h3>
+                <div onClick={handleClose}>
+                    <FontAwesomeIcon
+                        icon={faClose}
+                        size={'xl'}/>
+                </div>
+            </div>
+            <div className={classNames(dig.modalBody, dig.border0, dig.textWhite)}>
+                <div className={dig.textCenter}>
+                    {alert.text}
+                    {alert.component}
+                </div>
+            </div>
+            {undefined !== alert.buttons &&
+                <div className={classNames(dig.modalFooter, dig.border0, dig.rounded0)}>
+                    {alert.footerText && <div className={classNames(dig.textCenter, dig.textWhite)}>{alert.footerText}</div>}
+
+                    {alert.buttons?.map((button: iAlertButtonOptions, index: number) => {
+
+                        return <button key={index}
+                                       className={classNames(dig.btn, dig.btnLg, {
+                                           // todo - color: "default" | "primary" | "secondary" | "inherit" | "danger" | "info" | "success" | "warning" | undefined,
+                                           [dig.bg_success]: "success" === button.color,
+                                           [dig.bg_danger]: "danger" === button.color,
+                                           [dig.bg_primary]: "primary" === button.color,
+                                           [dig.bg_warning]: "warning" === button.color,
+                                       }, "btn-Yes", dig.rounded0)}
+                                       onClick={() => {
+                                           handleClose()
+                                           alert?.then?.(button.value ?? button.text)
+                                       }}>{button.text}</button>
+
+                    })}
+
+                </div>}
+        </div>
+    </Popup>
+
+}
+

package/src/components/Errors/AccessDenied.tsx

@@ -0,0 +1,32 @@
+
+import React from 'react';
+import styles from "../../style.module.css"
+
+export default function AccessDenied ({children} : {children?: React.ReactNode}) {
+
+        return (
+            <div>
+                <div className={styles.notfound}>
+                    <div className={styles.notfound_404}>
+                        <h3>Oops! Access not granted</h3>
+                        {children}
+                        <h1 style={{
+                            position: "absolute",
+                            left: "50%",
+                            top: "50%",
+                            transform: "translate(-50%, -50%)",
+                            fontSize: "252px",
+                            fontWeight: 900,
+                            textTransform: "uppercase",
+                            letterSpacing: "-40px",
+                            marginLeft: "-20px",
+                            marginTop: "20px"
+
+                        }}><span>4</span><span>0</span><span>3</span></h1>
+                    </div>
+                </div>
+            </div>
+        );
+
+}
+

package/src/components/Errors/BackendThrowable.tsx

@@ -0,0 +1,44 @@
+import styles from './style.module.scss';
+import OutsideClickHandler from 'react-outside-click-handler';
+
+export default function BackendThrowable() {
+
+    const CarbonORM = require('CarbonReact').default;
+
+    const bootstrap = CarbonORM.instance;
+
+    const currentThrowable = bootstrap.state.backendThrowable[0];
+
+    console.log([bootstrap.state.backendThrowable, currentThrowable]);
+
+    return <div className={styles.maintenanceHero}>
+        <h1 className={styles.httpStatusCode}>{currentThrowable?.status || 500}</h1>
+        <OutsideClickHandler
+            onOutsideClick={() => bootstrap.setState(currentState => ({ backendThrowable: currentState.backendThrowable.slice(1) }))}>
+            <div className={styles.centeredContainer}>
+                {Object.keys(currentThrowable).map((key, index) => {
+
+                    const valueIsString = typeof currentThrowable[key] === 'string';
+
+                    const valueIsCode = 'THROWN NEAR' === key;
+
+                    return <div key={index}>
+                        <div className={styles.errorTextGeneral}> &gt; <span className={styles.errorKeys}>{key}</span>:
+                            {valueIsString
+                                ? (valueIsCode ? <div
+                                        style={{ backgroundColor: 'black', fontSize: 'xx-small' }}
+                                        dangerouslySetInnerHTML={{ __html: currentThrowable[key] }} /> :
+                                    <i className={styles.errorValues}>&quot;{currentThrowable[key]}&quot;</i>)
+                                : ''}
+                        </div>
+                        {valueIsString
+                            ? ''
+                            :
+                            <pre className={styles.errorPre}>{JSON.stringify(currentThrowable[key], undefined, 4)}</pre>}
+                    </div>;
+                })}
+            </div>
+        </OutsideClickHandler>
+    </div>;
+
+}

package/src/components/Errors/ErrorHttpCode.tsx

@@ -0,0 +1,31 @@
+import classes from "style.module.css"
+
+export default function ErrorHttpCode(
+    {
+        code,
+        title = 'Hey Gamer, we\'ve encountered an unexpected issue!',
+        message = 'Our team has been alerted and is actively investigating the issue. Please continue playing or ask support for any questions.'
+    }: {
+        code: string,
+        title: string,
+        message: string
+    }) {
+
+    return <main role="main">
+        <div className={classes.maintenance}>
+            <div className={classes.problemBox}>
+                <div className={classes.notfound}>
+                    <div className={classes.notfound_404}>
+                        <h3>{title}</h3>
+                        <h1>{code}</h1>
+                    </div>
+                    <h2>{message}</h2>
+                </div>
+            </div>
+        </div>
+    </main>
+
+}
+
+
+

package/src/components/Errors/Localhost.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+
+export default function Localhost() {
+
+    const center = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        '&:hover': {color: 'blue !important'},
+    };
+
+    const onMouseEnter = (e) => {
+        const target = e.target as HTMLElement;
+        target.style.backgroundColor = '#e13570';
+        target.style.border = '2px solid rgb(31, 0, 69)';
+        target.style.boxShadow = '-2px 0px 7px 2px #e13570';
+    };
+
+    const onMouseLeave = (e) => {
+        const target = e.target as HTMLElement;
+        target.style.backgroundColor = 'rgb(31, 0, 69)';
+        target.style.border = '2px solid #593676';
+        target.style.boxShadow = '-2px 0px 7px 2px #e13570';
+    };
+
+    return <React.Fragment>
+        <h1 style={center}>Whoa, where we dropping?</h1>
+        <a onMouseEnter={onMouseEnter}
+           onMouseLeave={onMouseLeave}
+           style={center} href={'//local.dropingaming.gg:3000/'}>GG</a>
+        <a onMouseEnter={onMouseEnter}
+           onMouseLeave={onMouseLeave}
+           style={center} href={'//local.dropingaming.com:3000/'}>COM</a>
+    </React.Fragment>;
+
+}

package/src/components/Errors/PageNotFound.tsx

@@ -0,0 +1,16 @@
+
+import classes from "style.module.css"
+
+export default function PageNotFound() {
+
+    return <div>
+        <div className={classes.notfound}>
+            <div className={classes.notfound_404}>
+                <h3>Oops! Page not found</h3>
+                <h1><span>4</span><span>0</span><span>4</span></h1>
+            </div>
+            <h2>we are sorry, but the page you requested was not found</h2>
+        </div>
+    </div>
+}
+

package/src/components/Errors/style.module.css

@@ -0,0 +1,108 @@
+@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.maintenance-hero {
+  background: url("#") no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  opacity: 0.8;
+}
+
+.httpStatusCode {
+  font-size: 45vw;
+  text-align: center;
+  position: fixed;
+  width: 100vw;
+  z-index: 1;
+  color: rgba(255, 255, 255, 0.1490196078);
+  text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: "Montserrat", monospace;
+}
+
+.centeredContainer {
+  background-color: rgba(1, 1, 1, 0.9);
+  width: 70vw;
+  overflow: scroll;
+  max-height: 80%;
+  position: relative;
+  top: 20vh;
+  margin: 0 auto;
+  padding: 30px 30px 10px;
+  box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
+  z-index: 3;
+}
+
+.errorTextGeneral {
+  font-family: "Share Tech Mono", monospace;
+  color: #f5f5f5;
+  margin: 0 0 20px;
+  font-size: 22px;
+  line-height: 1.2;
+}
+
+.errorKeys {
+  color: #f0c674;
+}
+
+.error-values {
+  color: #8abeb7;
+}
+
+@keyframes slide {
+  from {
+    right: -100px;
+    transform: rotate(360deg);
+    opacity: 0;
+  }
+  to {
+    right: 15px;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+.error-pre {
+  background-color: rgba(18, 18, 18, 0.9);
+  max-height: 30%;
+  overflow: scroll;
+  margin: 0 0 1em;
+  padding: 0.5em 1em;
+}
+
+.error-pre code,
+.error-pre .line-number {
+  /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
+  font: normal normal 12px/14px "Courier New", Courier, Monospace;
+  color: black;
+  display: block;
+}
+
+.error-pre .line-number {
+  float: left;
+  margin: 0 1em 0 -1em;
+  border-right: 1px solid;
+  text-align: right;
+}
+
+.error-pre .line-number span {
+  display: block;
+  padding: 0 0.5em 0 1em;
+}
+
+.error-pre .cl {
+  display: block;
+  clear: both;
+}
+
+/*# sourceMappingURL=style.module.css.map */

package/src/components/Errors/style.module.css.d.ts

@@ -0,0 +1,34 @@
+export type Styles = {
+  'centered_container': string;
+  'centered-container': string;
+  'centeredContainer': string;
+  'cl': string;
+  'error_keys': string;
+  'error_pre': string;
+  'error_text_general': string;
+  'error_values': string;
+  'error-keys': string;
+  'error-pre': string;
+  'error-text-general': string;
+  'error-values': string;
+  'errorKeys': string;
+  'errorPre': string;
+  'errorTextGeneral': string;
+  'errorValues': string;
+  'http_status_code': string;
+  'http-status-code': string;
+  'httpStatusCode': string;
+  'line_number': string;
+  'line-number': string;
+  'lineNumber': string;
+  'maintenance_hero': string;
+  'maintenance-hero': string;
+  'maintenanceHero': string;
+  'slide': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/src/components/Errors/style.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.module.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA","file":"style.module.css"}