@carbonorm/carbonreact 1.0.8 → 1.1.0

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

@@ -0,0 +1,111 @@
+@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("@/assets/img/gif/maintenance-hero.gif") no-repeat center center fixed;
+  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: #ffffff26;
+  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:.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 .5em 0 1em;
+}
+
+.error-pre .cl {
+  display:block;
+  clear:both;
+}

package/src/components/Errors/style.module.scss.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.scss.json

@@ -0,0 +1 @@
+{"maintenance-hero":"C5KSP","maintenanceHero":"C5KSP","httpStatusCode":"NhyRQ","centeredContainer":"nA4Un","errorTextGeneral":"yJAga","errorKeys":"SRIoY","error-values":"xQIso","errorValues":"xQIso","error-pre":"C6eWp","errorPre":"C6eWp","line-number":"NFRyo","lineNumber":"NFRyo","cl":"vR2jb","slide":"OO2C-"}

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,37 @@
+import classNames from "classnames";
+import getStyles, {getRootStyleValue} from "hoc/getStyles";
+import {ReactNode} from "react";
+import Skeleton, {SkeletonTheme} from "react-loading-skeleton";
+
+interface iLoading {
+    lineHeight?: number,
+    count?: number,
+    children?: ReactNode,
+    message: string|undefined,
+}
+
+export default function Loading(props: iLoading) {
+
+    const dig = getStyles();
+
+    const primaryColor = getRootStyleValue()
+
+    return <div className={classNames(dig.my5, dig.px3,dig.pb5, dig.container)} style={{lineHeight: props.lineHeight || 4}}>
+        <SkeletonTheme baseColor={primaryColor} highlightColor="#444">
+            <Skeleton
+                className={classNames(dig.row, dig.my3, dig.justifyContentCenter, dig.mAuto)}
+                count={props.count || 1}
+                height={60}
+                inline={true}/>
+            {props.children}
+            {undefined !== props?.message && <h2 style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%'
+            }}>{props?.message}</h2>}
+        </SkeletonTheme>
+    </div>;
+
+}
+

package/src/components/Nest/Nest.tsx

@@ -0,0 +1,241 @@
+import {toastOptions} from "@carbonorm/carbonnode";
+import React from "react";
+import {toast} from "react-toastify";
+
+export const range = n =>
+    new Array(n).fill(0).map((_, idx) => idx);
+
+//export const canvasStyle = config =>
+//    `display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:${config.zIndex};opacity:${config.opacity}`;
+
+interface iTwoD {
+    max: number,
+    x: number | null,
+    y: number | null,
+}
+
+interface iTwoDAnimated extends iTwoD {
+    ya: number,
+    xa: number
+}
+
+type NestProps = typeof Nest.defaultProps & {
+    children?: any;
+    position: "relative" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "-webkit-sticky" | "absolute" | "fixed" | "static" | "sticky",
+};
+
+// @link https://sites.google.com/site/webglbook/home/chapter-3
+export default class Nest extends React.Component<NestProps, {
+    // updating react state will re-run the render method.
+    // this is un necessary overhead with canvas apps.
+}> {
+    static defaultProps = {
+        backgroundColor: "white",
+        display:"block",
+        top: 0,
+        left: 0,
+        zIndex: -1,
+        count: 99,
+        opacity: 0.5,
+        overflow: "hidden",
+        color: '255,255,255',
+        pointColor: '255,0,0',
+        position: "relative"
+    };
+
+    canvas?: HTMLCanvasElement;
+
+    all: Array<iTwoDAnimated | iTwoD> = [];
+
+    points?: Array<iTwoDAnimated>;
+
+    current: iTwoD = {
+        x: 0, // current mouse x
+        y: 0, // current mouse y
+        max: 20000 // circle radius squared
+    };
+
+    constructor(props) {
+        super(props);
+        this.state ={}
+    }
+
+    canvasContext ?: CanvasRenderingContext2D;
+
+    componentDidMount() {
+
+        this.canvas = document.getElementById('2d') as HTMLCanvasElement;
+
+        this.canvasContext = this.canvas.getContext('2d') || undefined;
+
+        if (undefined === this.canvasContext) {
+
+            toast.warn('Your browser does not support Canvas! Some features may not work as expected.', toastOptions)
+
+            return;
+
+        }
+
+        this.points = this.randomPoints();
+
+        this.all = this.all?.concat(this.points,
+            [this.current]
+        );
+
+        if (undefined === this.canvas) {
+
+            toast.error('Failed to load Canvas! Some features may not work as expected.', toastOptions)
+
+
+            return;
+        }
+
+        document.onmousemove = e => {
+            this.current.x = e.clientX; // - this.el.offsetLeft + document.scrollingElement.scrollLeft; // 当存在横向滚动条时，x坐标再往右移动滚动条拉动的距离
+            this.current.y = e.clientY; // - this.el.offsetTop + document.scrollingElement.scrollTop; // 当存在纵向滚动条时，y坐标再往下移动滚动条拉动的距离
+        };
+
+        this.canvas.onmouseout = () => {
+            this.current.x = null;
+            this.current.y = null;
+        };
+
+        this.drawCanvas()
+
+    }
+
+    randomPoints = () => {
+        return range(this.props.count).map(() => ({
+            x: Math.random() * window.innerWidth,
+            y: Math.random() * window.innerHeight,
+            xa: 2 * Math.random() - 1, // 随机运动返现
+            ya: 2 * Math.random() - 1,
+            max: 6000 // Adhesion distance
+        }));
+    };
+
+
+    tid = 0;
+
+    drawCanvas = () => {
+
+        const context = this.canvasContext;
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const current = this.current;
+        const points = this.points;
+        const all = this.all;
+
+        if (undefined === context
+            || undefined === current
+            || undefined === points
+        ) {
+            alert('context, current, or points was undefined. quitting.')
+
+            return;
+        }
+
+        context.clearRect(0, 0, width, height);
+
+        // random line and current position associative array
+        let e, i, d, x_dist, y_dist, dist; // temporary node
+
+        // Iterate through each point
+        points.forEach((r, idx) => {
+
+            r.x = r.x || 0;
+
+            r.y = r.y || 0;
+
+            r.x += r.xa;
+
+            r.y += r.ya; // move
+
+            r.xa *= r.x > width || r.x < 0 ? -1 : 1;
+
+            r.ya *= r.y > height || r.y < 0 ? -1 : 1; // Hit the boundary, bounce back
+
+            context.fillStyle = `rgba(${this.props.pointColor})`;
+
+            context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); // Draw a point with a width and height of 1
+
+            // start from next point
+            for (i = idx + 1; i < all.length; i++) {
+
+                e = all[i];
+
+                if (null !== e.x && null !== e.y) {
+
+                    x_dist = r.x - e.x; // x-axis distance l
+
+                    y_dist = r.y - e.y; // y-axis n
+
+                    dist = x_dist * x_dist + y_dist * y_dist; // total distance, m
+
+                    if (dist > e.max) {
+                        continue;
+                    }
+
+                    if (e === current && dist >= e.max / 2) {
+
+                        r.x -= 0.03 * x_dist;
+
+                        r.y -= 0.03 * y_dist;
+
+                    }
+
+                    d = (e.max - dist) / e.max;
+
+                    context.beginPath();
+
+                    context.lineWidth = d / 2;
+
+                    context.strokeStyle = `rgba(${this.props.color},${d + 0.2})`;
+
+                    context.moveTo(r.x, r.y);
+
+                    context.lineTo(e.x, e.y);
+
+                    context.stroke();
+
+                }
+
+            }
+
+        });
+
+        requestAnimationFrame(this.drawCanvas);
+
+    }
+
+    destroy() {
+
+        cancelAnimationFrame(this.tid);
+
+    }
+
+    render() {
+
+        return (
+            <div>
+                {this.props.children}
+                <canvas
+                    id={"2d"}
+                    width={window.innerWidth}
+                    height={window.innerHeight}
+                    style={{
+                        backgroundColor: this.props.backgroundColor,
+                        display:this.props.display,
+                        position: this.props.position,
+                        top: this.props.top,
+                        left: this.props.left,
+                        overflow: this.props.overflow,
+                        zIndex: this.props.zIndex,
+                        opacity: this.props.opacity
+                    }}/>
+            </div>
+        );
+    }
+
+}
+

package/src/components/Popup/Popup.tsx

@@ -0,0 +1,55 @@
+import classNames from "classnames";
+import OutsideClickHandler from 'react-outside-click-handler';
+import getStyles from "hoc/getStyles";
+
+
+interface iPopupProperties {
+    open?: boolean;
+    handleClose: () => any;
+    children: any;
+    minWidth?: string;
+    maxWidth?: string;
+
+}
+
+// @link https://stackoverflow.com/questions/58399637/include-modal-functionality-in-react-higher-order-component
+export default function Popup({
+                                  open = true,
+                                  handleClose,
+                                  children,
+                                  maxWidth,
+                              }: iPopupProperties) {
+
+    if (false === open) {
+
+        return null;
+
+    }
+
+    const dig = getStyles()
+
+    return <>
+        <div className={classNames(dig.modal, dig.fade, dig.show, dig.dBlock)}
+             style={{backgroundColor: "rgba(0,0,0,0.8)"}}
+             id="exampleModalCenter"
+             tabIndex={-1} aria-labelledby="exampleModalCenterTitle"
+             aria-modal="true" role="dialog">
+
+            <div
+                style={{maxWidth: maxWidth}}
+                className={classNames(
+                    dig.modalDialog, dig.modalDialogCentered,
+                )}
+            >
+                <OutsideClickHandler onOutsideClick={() => handleClose()}>
+                    <div className={classNames(dig.modalContent, dig.bgTransparent, dig.modalDialogScrollable)}>
+                        {children}
+                    </div>
+                </OutsideClickHandler>
+            </div>
+
+        </div>
+    </>
+
+}
+

package/src/custom.d.ts

@@ -0,0 +1,47 @@
+declare module '!!raw-loader!*' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.svg' {
+    import * as React from 'react';
+
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<
+        SVGSVGElement
+    > & { title?: string }>;
+
+    const src: string;
+    export default src;
+}
+
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module "*.pdf";
+declare module '*.gif';
+
+// @link https://www.npmjs.com/package/typescript-plugin-css-modules
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+declare module '*.module.scss' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+declare module '*.module.sass' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+declare module '*.module.less' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+declare module '*.module.styl' {
+    const classes: { [key: string]: string };
+    export default classes;
+}

package/src/hoc/GlobalHistory.tsx

@@ -0,0 +1,11 @@
+import { useNavigate, NavigateFunction } from "react-router-dom";
+
+export let globalNavigate: NavigateFunction;
+
+export const GlobalHistory = () => {
+    globalNavigate = useNavigate();
+
+    return null;
+};
+
+GlobalHistory.displayName = "GlobalHistory";

package/src/hoc/addValidSQL.tsx

@@ -0,0 +1,6 @@
+export const addValidSQL: any[] = [];
+
+export default function (sql: any) {
+    const {expect} = require("@jest/globals");
+    addValidSQL.push({[expect.getState().currentTestName.replaceAll(" ", "_").toLowerCase()]: sql});
+}