@carbonorm/carbonreact 1.0.8 → 1.0.9

package/src/hoc/setUrl.tsx

@@ -0,0 +1,49 @@
+// @link https://www.benmvp.com/blog/mocking-window-location-methods-jest-jsdom/
+import axiosInstance from "hoc/axiosInstance";
+
+export default function setUrl() {
+
+    const isGitHubActions = process.env.REACT_APP_TEST_REMOTE === 'true'
+
+    const host = ( isGitHubActions ? process.env.REACT_APP_REMOTE_SUBDOMAIN : process.env.REACT_APP_LOCAL_SUBDOMAIN ) + '.dropingaming.com' + (isGitHubActions ? '' : ':8080')
+
+    console.log("test host:: ", host, isGitHubActions)
+
+    /*Object.defineProperty(global, 'window', {
+        writable: true,
+        value: Object.create(window)
+    });*/
+
+    if (!global.structuredClone){
+
+        global.structuredClone = function structuredClone(objectToClone: any) {
+            const stringify = JSON.stringify(objectToClone);
+            return JSON.parse(stringify);
+        }
+
+    }
+
+    // noinspection HttpUrlsUsage
+    axiosInstance.defaults.baseURL = 'http' + (isGitHubActions ? 's' : '') + '://' + host + '/';
+
+    Object.defineProperty(global.window, 'location', {
+        writable: true,
+        value: {
+            hash: '',
+            host: host,
+            hostname: host,
+            port: '80',
+            protocol: 'http:',
+            href: axiosInstance.defaults.baseURL,
+            origin: axiosInstance.defaults.baseURL,
+            pathname: '/',
+            search: '',
+            toString: () => {
+                return global.window.location.href
+            }
+        }
+    });
+
+    console.log(global.window.location)
+
+}

package/src/hoc/updateRestfulObjectArrays.tsx

@@ -0,0 +1,92 @@
+import CarbonReact, {
+    iCarbonORMState,
+    iRestfulObjectArrayTypes,
+    tRestfulObjectValues
+} from "CarbonReact";
+
+
+export enum eUpdateInsertMethod {
+    REPLACE,
+    FIRST,
+    LAST,
+}
+
+/**
+ *
+ *                  merged with existing objects.uniqueObjectId || {}.
+ * @param dataOrCallback
+ * @param uniqueObjectId - the uniqueObjectId of the object to update; typically the primary key of the table.
+ * @param stateKey -
+ * @param insertUpdateOrder
+ * @param callback - if you want to do something with the updated state, you can pass a callback here. Run as the second
+ *  parameter of setState.
+ */
+export default function updateRestfulObjectArray<ObjectType extends tRestfulObjectValues>
+(dataOrCallback: ((prev: Readonly<iCarbonORMState>) => ObjectType[]) | ObjectType[],
+ uniqueObjectId: keyof ObjectType,
+ stateKey: keyof iRestfulObjectArrayTypes,
+ insertUpdateOrder: eUpdateInsertMethod = eUpdateInsertMethod.LAST,
+ callback?: () => void): void {
+
+    const bootstrap: CarbonReact = CarbonReact.instance;
+
+    return bootstrap.setState((previousBootstrapState): {} => {
+
+        let newOrReplacementData: ObjectType[] = dataOrCallback instanceof Function ? dataOrCallback(previousBootstrapState) : dataOrCallback;
+
+        const previousStateProperty = previousBootstrapState[stateKey] as ObjectType[];
+
+        let updatedData = newOrReplacementData.map(value => {
+            return {
+                ...previousStateProperty?.find(previousValue => previousValue[uniqueObjectId] === value[uniqueObjectId]) || {},
+                ...value
+            }
+        })
+
+        switch (insertUpdateOrder) {
+            default:
+                throw Error('The insertUpdateOrder (eUpdateInsertMethod) was not implemented')
+            case eUpdateInsertMethod.LAST:
+                return {
+                    [stateKey]: null === newOrReplacementData ? null : [
+                        ...updatedData,
+                        ...(previousStateProperty?.filter(item => false === (newOrReplacementData?.find(value => value[uniqueObjectId] === item[uniqueObjectId]) || false)) ?? [])
+                    ]
+                }
+
+            case eUpdateInsertMethod.FIRST:
+                return {
+                    [stateKey]: null === newOrReplacementData ? null : [
+                        ...(previousStateProperty?.filter(item => false === (newOrReplacementData?.find(value => value[uniqueObjectId] === item[uniqueObjectId]) || false)) ?? []),
+                        ...updatedData,
+                    ]
+                }
+            case eUpdateInsertMethod.REPLACE: {
+
+                return {
+                    [stateKey]: [
+                        ...(previousStateProperty?.map(oldObject => {
+
+                            const index = updatedData.findIndex(item => item[uniqueObjectId] === oldObject[uniqueObjectId]);
+
+                            if (-1 === index) {
+
+                                return oldObject
+
+                            }
+
+                            return updatedData.splice(index, 1).pop()
+
+                        }) ?? []),
+                        ...updatedData
+                    ]
+                };
+            }
+
+        }
+
+    }, callback);
+
+}
+
+

package/src/hoc/uploadImage.tsx

@@ -0,0 +1,99 @@
+// @link https://stackoverflow.com/questions/6735414/php-data-uri-to-file
+// @link https://www.tutorialspoint.com/convert-image-to-data-uri-with-javascript
+import {ChangeEvent} from "react";
+import {toast} from "react-toastify";
+
+
+export async function toDataURL(src: string, fileType: string, callback: (dataUriEncoded: string) => void): Promise<void> {
+
+    const image = new Image();
+
+    image.crossOrigin = 'Anonymous';
+
+    image.onload = function () {
+
+        const canvas = document.createElement('canvas');
+
+        const context = canvas.getContext('2d');
+
+        canvas.height = image.naturalHeight;
+
+        canvas.width = image.naturalWidth;
+
+        if (context === null) {
+
+            toast.error('Unable to upload image. Please try another image or bowser. If issues persist, please contact support.');
+
+            return;
+
+        }
+
+        context?.drawImage(image, 0, 0);
+
+        const dataURL = canvas.toDataURL(fileType); // 'image/jpeg'
+
+        callback(dataURL);
+
+    };
+
+    image.src = src;
+
+}
+
+export function uploadImageChange(event: ChangeEvent<HTMLInputElement>,
+uploadCallback: ((imageDataUri: string) => void)) {
+
+    if (event.target.files !== null && event.target.files[0]) {
+
+        Object.keys(event.target.files).forEach((index) => {
+
+            const file = event.target.files?.[index];
+
+            // loop through all files and create data url then post to postPost
+            if (file.type.match('image.*')) {
+
+                // get file extension
+                const fileExtension = file.name.split('.').pop();
+
+                // check file extension is valid data uri
+                if (fileExtension !== 'jpg' && fileExtension !== 'jpeg' && fileExtension !== 'png' && fileExtension !== 'gif') {
+
+                    toast.error('Please upload a valid image file type (jpg, jpeg, png, gif).');
+
+                    return;
+
+                }
+
+
+                // @link https://github.com/palantir/tslint/issues/4653
+                // @link https://github.com/Microsoft/TypeScript/issues/13376#issuecomment-273289748
+                void toDataURL(URL.createObjectURL(file), file.type, uploadCallback);
+
+            }
+
+        });
+
+    }
+
+}
+
+
+// dataUriEncoded is the base64 encoded string which is posted in column post_content
+export default function uploadImage(uploadCallback: (dataUriBase64: string) => void) {
+    return () => {
+        const input: HTMLInputElement = document.createElement('input')
+        input.type = 'file'
+        input.accept = 'image/*'
+        input.onchange = (e: Event): any => {
+            uploadImageChange(e as unknown as ChangeEvent<HTMLInputElement>, uploadCallback)
+        }
+        input.click()
+    }
+}
+
+
+
+
+
+
+

package/src/hoc/windowDimensions.tsx

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height
+    };
+}
+
+export default function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return windowDimensions;
+}

package/src/index.ts

@@ -0,0 +1,53 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export { default as CarbonReact } from "./CarbonReact";
+export * from "./CarbonReact";
+export { default as Alert } from "./components/Alert/Alert";
+export * from "./components/Alert/Alert";
+export { default as AccessDenied } from "./components/Errors/AccessDenied";
+export * from "./components/Errors/AccessDenied";
+export { default as BackendThrowable } from "./components/Errors/BackendThrowable";
+export * from "./components/Errors/BackendThrowable";
+export { default as ErrorHttpCode } from "./components/Errors/ErrorHttpCode";
+export * from "./components/Errors/ErrorHttpCode";
+export { default as Localhost } from "./components/Errors/Localhost";
+export * from "./components/Errors/Localhost";
+export { default as PageNotFound } from "./components/Errors/PageNotFound";
+export * from "./components/Errors/PageNotFound";
+export { default as Loading } from "./components/Loading/Loading";
+export * from "./components/Loading/Loading";
+export { default as Nest } from "./components/Nest/Nest";
+export * from "./components/Nest/Nest";
+export { default as Popup } from "./components/Popup/Popup";
+export * from "./components/Popup/Popup";
+export * from "./hoc/GlobalHistory";
+export { default as addValidSQL } from "./hoc/addValidSQL";
+export * from "./hoc/addValidSQL";
+export { default as axiosInstance } from "./hoc/axiosInstance";
+export * from "./hoc/axiosInstance";
+export { default as changed } from "./hoc/changed";
+export * from "./hoc/changed";
+export { default as deleteRestfulObjectArrays } from "./hoc/deleteRestfulObjectArrays";
+export * from "./hoc/deleteRestfulObjectArrays";
+export { default as getStyles } from "./hoc/getStyles";
+export * from "./hoc/getStyles";
+export { default as hexToRgb } from "./hoc/hexToRgb";
+export * from "./hoc/hexToRgb";
+export { default as isEdgeBrowser } from "./hoc/isEdgeBrowser";
+export * from "./hoc/isEdgeBrowser";
+export * from "./hoc/parseMultipleJson";
+export { default as scrollIntoView } from "./hoc/scrollIntoView";
+export * from "./hoc/scrollIntoView";
+export { default as setUrl } from "./hoc/setUrl";
+export * from "./hoc/setUrl";
+export { default as updateRestfulObjectArrays } from "./hoc/updateRestfulObjectArrays";
+export * from "./hoc/updateRestfulObjectArrays";
+export { default as uploadImage } from "./hoc/uploadImage";
+export * from "./hoc/uploadImage";
+export { default as windowDimensions } from "./hoc/windowDimensions";
+export * from "./hoc/windowDimensions";
+export * from "./variables/C6";
+export { default as isProduction } from "./variables/isProduction";
+export * from "./variables/isProduction";

package/src/style.module.css

@@ -0,0 +1,261 @@
+/* https://stackoverflow.com/questions/41439028/webpack-is-renaming-my-scss-classes */
+@import url("https://fonts.googleapis.com/css?family=Poppins:wght@400,500,600,700,800,900&display=swap");
+@import url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
+html, body {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+:root {
+  /* New color palette */
+  --primary_color: #2f80f2;
+  --accent_color: #E72E2E;
+  /* Secondary color */
+  --secondary1: #FF7300;
+  --secondary2: #FFA100;
+  --secondary3: #F7CD21;
+  --secondary4: #41B049;
+  --secondary5: #F44C4C;
+  /* Neutral color */
+  --neutral1: #323233;
+  --neutral2: #3F3F40;
+  --neutral3: #7D7E80;
+  --neutral4: #edeeef;
+  --neutral5: #F3F5F8;
+  --neutral6: #2d2d2e;
+  --neutral7: #252525;
+  --neutral8: #1F1F1F;
+  --neutral9: #343434;
+  --neutral10: #B9B9B9;
+  /* Others */
+  --card_header: #5FA0FF;
+  --card_match_status_ready: #F8E81A;
+  --card_match_status_waiting: #DADFE4;
+  --profile_bg: #333334;
+  --dig-trophies-1: #EBC327;
+  --dig-trophies-2: #C6C6D4;
+  --dig-trophies-3: #ECB049;
+  --dig-light-blue: #5D9EF9;
+  --dig-chat-header: #222222;
+  --dig-chat-item-header: #A3A3A3;
+  --dig-chat-even-row: #3C3C3C;
+  --dig-chat-odd-row: #414141;
+  --dig-chat-footer-icons: #8E8E8E;
+  --dig-logo-fill: #ffffff;
+  /* bracket */
+  --bracket_team_win_color: #929396;
+  --bracket_final_win_color: #FFA102;
+  --bracket_lose_color: #636466;
+  --bracket_text: #7D7D80;
+  /* Social Media Log In Btn Colors */
+  --twitch_main: #6441A4;
+  --discord_main: #5865F2;
+  --facebook_main: #1877F2;
+  /* Legacy assets */
+  --background_url: url("#");
+  --text_body: #F3F5F8;
+  --text_inverse_body: #000000;
+  --object_body: #000000;
+  --highlight_1: #116FD4;
+  --highlight_2: #FFFFFF;
+  --highlight_3: #000000;
+  --highlight_4: #E72E2E;
+  --highlight_5: #41B049;
+  --highlight_6: #373737;
+  --highlight_7: #7d7d7d;
+  --highlight_8: #41B049;
+  --match_ready: darkgreen;
+  --match_started: #41B049;
+  --ecomm_sale: #41B049;
+  --background_1: #000000;
+  --background_2: #116FD4;
+  --background_3: #1b1b1b;
+  --overlay_opacity: 0.85;
+  --mask_opacity: 0.5;
+  --disabled_opacity: 0.45;
+  --callout_opacity: 0.97;
+  --tile_width: 20%;
+  --tile_margin_width: 7%;
+}
+
+/* https://www.colortools.net/color_complementary.html */
+[data-theme=light] {
+  /* New color palette */
+  --accent_color: #18D1D1;
+  /* Secondary color */
+  --secondary1: #008CFF;
+  --secondary2: #005EFF;
+  /* Others */
+  --card_header: #A05F00;
+  --dig-logo-fill: #2f80f2;
+  /* Neutral color */
+  --neutral1: #CDCDCC;
+  --neutral2: #C0C0BF;
+  --neutral3: #82817F;
+  --neutral4: #121110;
+  --neutral5: #0C0A07;
+  --neutral7: #DADADA;
+  --neutral9: #CBCBCB;
+  --neutral10: #464646;
+  --neutral6: #D2D2D1;
+  --neutral8: #E0E0E0;
+  --highlight_2: #000000;
+  --dig-trophies-2: #39392B;
+}
+
+a {
+  text-decoration: none;
+}
+
+.footer {
+  align-self: flex-end;
+}
+
+.container {
+  max-width: 1280px;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: var(--primary_color);
+  -webkit-box-shadow: var(--primary_color);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+.main.loggedIn {
+  top: 120px;
+  height: calc(100vh - 120px);
+}
+@media (max-width: 768px) {
+  .main.loggedIn {
+    margin-top: 60px;
+    top: 60px;
+  }
+}
+@media (min-width: 1024px) {
+  .main {
+    top: 60px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: calc(100vh - 60px);
+  }
+}
+@media (max-width: 768px) {
+  .main {
+    margin-top: 60px;
+    overflow-x: hidden;
+    position: relative;
+  }
+}
+
+.main-1 {
+  top: 60px;
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: calc(100vh - 60px);
+}
+
+.digSecondaryHeader {
+  height: 60px;
+  list-style: none;
+}
+.digSecondaryHeader:hover {
+  background-color: var(--neutral7);
+  transition: all 1s ease;
+}
+
+.hiddenAnchor {
+  float: left;
+  clear: both;
+}
+
+.mt60 {
+  margin-top: 60px;
+}
+
+.notfound {
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.notfound_404 {
+  position: relative;
+  height: 240px;
+}
+.notfound_404 h1 {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 252px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: -40px;
+  margin-left: -20px;
+  margin-top: 20px;
+}
+
+.problemBox {
+  text-align: center;
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+}
+
+.maintenance {
+  height: auto;
+  /** background: url(assets/img/maintenance-hero.png) no-repeat center; */
+  background-size: cover;
+  position: relative;
+  padding-top: 600px;
+}
+
+.floatingChatIcon {
+  display: flex;
+  position: fixed;
+  bottom: 1.5em;
+  height: 40px;
+  width: 40px;
+  right: 1.5em;
+  z-index: 4;
+  background: var(--dig-chat-header);
+  justify-content: center;
+  align-items: center;
+  border: 2px solid var(--neutral2);
+  box-shadow: 0 2px 3px 1px #000;
+}
+.floatingChatIcon svg g {
+  fill: var(--secondary2);
+}
+
+.fontWeightLight {
+  font-weight: 300 !important;
+}
+
+.fontWeightNormal {
+  font-weight: 400 !important;
+}
+
+.fontWeightBold {
+  font-weight: 700 !important;
+}
+
+/*# sourceMappingURL=style.module.css.map */

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

@@ -0,0 +1,44 @@
+export type Styles = {
+  'container': string;
+  'dig_secondary_header': string;
+  'dig-secondary-header': string;
+  'digSecondaryHeader': string;
+  'floating_chat_icon': string;
+  'floating-chat-icon': string;
+  'floatingChatIcon': string;
+  'font_weight_bold': string;
+  'font_weight_light': string;
+  'font_weight_normal': string;
+  'font-weight-bold': string;
+  'font-weight-light': string;
+  'font-weight-normal': string;
+  'fontWeightBold': string;
+  'fontWeightLight': string;
+  'fontWeightNormal': string;
+  'footer': string;
+  'hidden_anchor': string;
+  'hidden-anchor': string;
+  'hiddenAnchor': string;
+  'logged_in': string;
+  'logged-in': string;
+  'loggedIn': string;
+  'main': string;
+  'main_1': string;
+  'main-1': string;
+  'main1': string;
+  'maintenance': string;
+  'mt60': string;
+  'notfound': string;
+  'notfound_404': string;
+  'notfound-404': string;
+  'notfound404': string;
+  'problem_box': string;
+  'problem-box': string;
+  'problemBox': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/src/style.module.css.json

@@ -0,0 +1 @@
+{"footer":"jy3XX","container":"pRZ4A","main":"PZgPe","loggedIn":"NiYUz","main-1":"a3n9f","main1":"a3n9f","digSecondaryHeader":"_7h0hw","hiddenAnchor":"PwuNj","mt60":"R6BPw","notfound":"_4yBvJ","notfound_404":"WQ39u","notfound404":"WQ39u","problemBox":"HF3Ls","maintenance":"t2cc1","floatingChatIcon":"z2lN4","fontWeightLight":"tHyFV","fontWeightNormal":"tuA7u","fontWeightBold":"TONZU"}

package/src/style.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.module.scss"],"names":[],"mappings":"AAAA;AAQQ;AACA;AAPR;EACE;EACA;EACA;;;AAKF;AACE;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;AACE;EACA;AACA;EACA;EACA;AACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAOF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EAHF;IAII;IACA;;;AAIJ;EAhBF;IAiBI;IACA;IACA;IACA;;;AAEF;EAtBF;IAuBI;IACA;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAKJ;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;AACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"style.module.css"}