npm - @syngrisi/syngrisi - Versions diffs - 2.2.1 - Mend

@syngrisi/syngrisi 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (387) hide show

package/src/ui-app/shared/utils/utils.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+/* eslint-disable */
+import { showNotification } from '@mantine/notifications';
+import log from './Logger';
+export function uuid() {
+    // @ts-ignore
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16),
+    );
+}
+export function errorMsg(params: Required<{ error: any }>) {
+    log.error(params.error);
+    showNotification({
+        ...params,
+        message: String(params.error),
+        autoClose: 7000,
+        title: 'Error',
+        color: 'red',
+    });
+}
+export function successMsg(params: Required<{ message: string }>) {
+    log.debug(params.message);
+    showNotification({
+        ...params,
+        autoClose: 4000,
+        title: 'Success',
+        color: 'green',
+    });
+}
+export function escapeRegExp(text: string) {
+    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}
+export const isJSON = (text: string) => !text ? '' : (/^[\],:{}\s]*$/.test(text.replace(/\\["\\\/bfnrtu]/g, '@')
+    .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+    .replace(/(?:^|:|,)(?:\s*\[)+/g, '')));
+export function getStatusMessage(check: any) {
+    let statusMsg = '';
+    if (check.status[0] === 'failed') {
+        if (check.failReasons.includes('different_images')) {
+            statusMsg = ' - images are different';
+            const checkResult = check.result ? JSON.parse(check.result) : null;
+            let diffPercent = checkResult.misMatchPercentage ? (checkResult.misMatchPercentage) : '';
+            diffPercent = (
+                (diffPercent === '0.00' || diffPercent === '')
+                && (checkResult.rawMisMatchPercentage?.toString()?.length > 0)
+            )
+                ? checkResult.rawMisMatchPercentage
+                : checkResult.misMatchPercentage;
+            statusMsg += ` (${diffPercent}%)`;
+        }
+        if (check.failReasons.includes('wrong_dimensions')) {
+            statusMsg = ' - images have the wrong dimensions';
+        }
+        if (check.failReasons.includes('not_accepted')) {
+            statusMsg = ' - the previous check with the same parameter is not accepted';
+        }
+    }
+    if (check.status[0] === 'new'){
+        statusMsg = ' - first time check';
+    }
+    if (check.status[0] === 'passed'){
+        statusMsg = ' - successful check';
+    }
+    return statusMsg;
+}

package/src/ui-app/stub.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Vite Stub Page</title>
+</head>
+<body style="max-width: 700px; margin-left: 50px; font-size: large; font-weight: 400">
+<div id="root"></div>
+<script type="module" src="./stub.tsx"></script>
+</body>
+</html>

package/src/ui-app/stub.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+/* eslint-disable max-len,react/no-danger */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import {
+    MantineProvider,
+    Paper,
+    Text,
+    TypographyStylesProvider,
+    Container,
+    MantineThemeOverride,
+} from '@mantine/core';
+import DemoNav from './stubDemoNav';
+import DemoColors from './stubDemoColors';
+const syngrisiTheme: MantineThemeOverride = {
+    colors: {
+        // https://maketintsandshades.com/#06ba0e
+        s_success: ['#9be39f', '#83dd87', '#6ad66e', '#51cf56', '#38c83e', '#1fc126', '#06ba0e', '#49ba4d', '#41a645', '#39913c'],
+    },
+    colorScheme: 'light',
+    // primaryColor: 'success',
+};
+document.location.href = '/index2/';
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <BrowserRouter>
+        <MantineProvider
+            withNormalizeCSS
+            withGlobalStyles
+            theme={
+                syngrisiTheme
+            }
+        >
+            <Paper>
+                <h1>Vite, React, Mantine Stub Page</h1>
+                <Text>
+                    <TypographyStylesProvider>
+                        <div dangerouslySetInnerHTML={{
+                            __html:
+                                `This file is for Vite builder, the tool parse it and build corresponding asserts in
+                         the <b>xdist/assert</b> folder read more at <a href="https://vitejs.dev/guide/stub.html#index-html-and-project-root">vite doc</a>
+                         run 'vite build' to perform asserts building`,
+                        }}
+                        />
+                    </TypographyStylesProvider>
+                </Text>
+            </Paper>
+            <DemoColors />
+            <Container style={{ padding: '30px' }}>
+                <DemoNav />
+            </Container>
+        </MantineProvider>
+    </BrowserRouter>,
+);

package/src/ui-app/stubDemoColors.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+/* eslint-disable max-len */
+import * as React from 'react';
+import {
+    useMantineTheme,
+    Text, Button,
+} from '@mantine/core';
+import { useEffect, useRef } from 'react';
+function DemoColors() {
+    const theme = useMantineTheme();
+    const greenButtonRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+        setTimeout(() => {
+            // @ts-ignore
+            greenButtonRef.current.remove();
+        }, 5000);
+    }, []);
+    // @ts-ignore
+    return (
+        <>
+            <Text color="s_success">
+                Custom Theme Success Text
+            </Text>
+            <Text color={theme.colors.s_success[3]}>
+                Custom Theme Success Text Shade - 3
+            </Text>
+            <Text color="blue">
+                Standard Blue text
+            </Text>
+            <Button color="red">
+                Standard Red Button
+            </Button>
+            <Button color="s_success">
+                Custom Theme Success Button
+            </Button>
+            <Button color="green" ref={greenButtonRef}>
+                Green
+            </Button>
+        </>
+    );
+}
+export default DemoColors;

package/src/ui-app/stubDemoNav.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+/* eslint-disable max-len */
+import * as React from 'react';
+import {
+    Title,
+    createStyles,
+    NavLink,
+} from '@mantine/core';
+import { IconFingerprint } from '@tabler/icons';
+function DemoNav() {
+    const useStyles = createStyles((theme) => ({
+        navLink: {
+            color: theme.colors.pink[5],
+        },
+        link: {
+            textDecoration: 'none',
+        },
+    }));
+    const { classes } = useStyles();
+    return (
+        <>
+            <Title>Navigation</Title>
+            <a href="/auth/" className={classes.link}>
+                <NavLink
+                    className={classes.navLink}
+                    key={1}
+                    label="Xxxx"
+                    description="Decsription"
+                    // rightSection={item.rightSection}
+                    icon={<IconFingerprint size={16} stroke={1.5} />}
+                    // onClick={() => setActive(index)}
+                />
+            </a>
+        </>
+    );
+}
+export default DemoNav;

package/src/ui-app/tsconfig.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext", "es6", "dom"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/src/ui-app/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}

package/static/A.png ADDED Viewed

Binary file

package/static/B.png ADDED Viewed

Binary file

package/static/affected.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!doctype>
+<html>
+<head>
+    <style>
+        #parent {
+            width: 200px;
+            height: 200px;
+            background: cadetblue;
+            border: 1px solid black;
+            margin: 5px;
+        }
+        #child {
+            position: relative;
+            width: 100px;
+            height: 100px;
+            background: darkslategrey;
+            margin: 50px;
+        }
+        #point {
+            position:absolute;                  /* added */
+            /*bottom:0;                           !* added *!*/
+            top: 0;
+            /*left:0;*/
+            width: 10px;
+            height: 10px;
+            background: red;
+        }
+    </style>
+</head>
+<body style="margin: 0;">
+<div id="parent">
+    <div id="child">
+    </div>
+</div>
+</body>
+</html>

package/static/affected_2.html ADDED Viewed

@@ -0,0 +1,40 @@
+<!doctype>
+<html>
+<head>
+    <style>
+        #parent {
+            width: 200px;
+            height: 200px;
+            background: cadetblue;
+            border: 1px solid black;
+            margin: 5px;
+        }
+        #child {
+            position: relative;
+            width: 100px;
+            height: 100px;
+            background: darkslategrey;
+            margin: 50px;
+        }
+        #point {
+            position:absolute;                  /* added */
+            /*bottom:0;                           !* added *!*/
+            top: 0;
+            /*left:0;*/
+            width: 10px;
+            height: 10px;
+            background: red;
+        }
+    </style>
+</head>
+<body style="margin: 0;">
+<div id="parent">
+    <div id="child">
+        <div id="point"></div>
+    </div>
+</div>
+</body>
+</html>

package/static/data/custom_devices.json ADDED Viewed

@@ -0,0 +1,14 @@
+[
+    {
+        "os": "Windows",
+        "os_version": "15",
+        "device": "iPhone XS",
+        "realMobile": true
+    },
+    {
+        "os": "android",
+        "os_version": "12.0",
+        "device": "Samsung Galaxy S22",
+        "realMobile": true
+    }
+]

package/static/grids/desktop-higher.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../css/common.min.css">
+    <style>
+        .row {
+            min-height: 350px; /* 1400/4 */
+        }
+        .col {
+            padding-top: 118px;
+            min-height: 350px; /* 1300/4 */
+            /*min-width: 225px;*/
+            background-color: #9fcdff;
+        }
+        .col:hover {
+            background-color: #85144B !important;
+        }
+        #external-element-wrapper {
+            min-width: 950px;
+            max-width: 950px;
+            min-height: 1550px;
+            max-height: 1550px;
+        }
+        #external-element {
+            min-width: 800px;
+            max-width: 800px;
+        }
+    </style>
+    <title>Desktop Grid</title>
+</head>
+<body>
+<div id="external-element-wrapper"
+     class="container p-3 text-center h-100">
+    <span class="display-4 text-secondary">800x1400</span>
+    <div id="external-element"
+         class="container m-3 border border-secondary text-center align-items-center display-3 text-dark">
+        <div class="row align-items-center">
+            <div class="col cl" id="col-1">1</div>
+            <div class="col" id="col-2">2</div>
+            <div class="col" id="col-3">3</div>
+            <div class="col" id="col-4">4</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-5">5</div>
+            <div class="col bg-secondary text-light" id="col-6"><span>6</span></div>
+            <div class="col border border-secondary bg-light" id="col-7">7</div>
+            <div class="col" id="col-8">8</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-9">9</div>
+            <div class="col border border-secondary bg-light" id="col-10">10</div>
+            <div class="col bg-secondary text-light cl" id="col-11">11</div>
+            <div class="col" id="col-12">12</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-13">13</div>
+            <div class="col" id="col-14">14</div>
+            <div class="col" id="col-15">15</div>
+            <div class="col" id="col-16">16</div>
+        </div>
+    </div>
+</div>
+</body>
+</html>

package/static/grids/desktop-wider.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../css/common.min.css">
+    <style>
+        .row {
+            min-height: 150px; /* 600/4 */
+        }
+        .col {
+            padding-top: 32px;
+            min-height: 150px; /* 600/4 */
+            background-color: #9fcdff;
+        }
+        .col:hover {
+            background-color: #85144B !important;
+        }
+        #external-element-wrapper {
+            min-width: 1450px;
+            max-width: 1450px;
+            min-height: 650px;
+            max-height: 650px;
+        }
+        #external-element {
+            min-width: 1400px;
+            min-height: 600px;
+        }
+    </style>
+    <title>Desktop Grid</title>
+</head>
+<body>
+<div id="external-element-wrapper"
+     class="container p-3 text-center h-100">
+    <span class="display-4 text-secondary">1400x600</span>
+    <div id="external-element"
+         class="container m-3 border border-secondary text-center align-items-center display-3 text-dark"
+    ">
+    <div class="row align-items-center">
+        <div class="col cl" id="col-1">1</div>
+        <div class="col" id="col-2">2</div>
+        <div class="col" id="col-3">3</div>
+        <div class="col" id="col-4">4</div>
+    </div>
+    <div class="row align-items-center">
+        <div class="col" id="col-5">5</div>
+        <div class="col bg-secondary text-light" id="col-6"><span>6</span></div>
+        <div class="col border border-secondary bg-light" id="col-7">7</div>
+        <div class="col" id="col-8">8</div>
+    </div>
+    <div class="row align-items-center">
+        <div class="col" id="col-9">9</div>
+        <div class="col border border-secondary bg-light" id="col-10">10</div>
+        <div class="col bg-secondary text-light cl" id="col-11">11</div>
+        <div class="col" id="col-12">12</div>
+    </div>
+    <div class="row align-items-center">
+        <div class="col" id="col-13">13</div>
+        <div class="col" id="col-14">14</div>
+        <div class="col" id="col-15">15</div>
+        <div class="col" id="col-16">16</div>
+    </div>
+</div>
+</div>
+</body>
+</html>

package/static/grids/desktop.html ADDED Viewed

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../css/common.min.css">
+    <style>
+        .row {
+            min-height: 324px; /* 1300/4 */
+        }
+        .col {
+            padding-top: 118px;
+            min-height: 324px; /* 1300/4 */
+            background-color: #9fcdff;
+        }
+        .col:hover {
+            background-color: #85144B !important;
+        }
+    </style>
+    <title>Desktop Grid</title>
+</head>
+<body>
+<div  id="external-element-wrapper"
+        class="container p-3 text-center h-100"
+     style="min-width: 1450px; min-height: 1450px; height: 1450px;">
+    <span class="display-4 text-secondary">1300x1300</span>
+    <div id="external-element"
+         class="container m-3 border border-secondary text-center align-items-center display-3 text-dark"
+         style="min-height: 1400px; min-width: 1400px">
+        <div class="row align-items-center">
+            <div class="col cl" id="col-1">1</div>
+            <div class="col" id="col-2">2</div>
+            <div class="col" id="col-3">3</div>
+            <div class="col" id="col-4">4</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-5">5</div>
+            <div class="col bg-secondary text-light" id="col-6"><span>6</span></div>
+            <div class="col border border-secondary bg-light" id="col-7">7</div>
+            <div class="col" id="col-8">8</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-9">9</div>
+            <div class="col border border-secondary bg-light" id="col-10">10</div>
+            <div class="col bg-secondary text-light cl" id="col-11">11</div>
+            <div class="col" id="col-12">12</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-13">13</div>
+            <div class="col" id="col-14">14</div>
+            <div class="col" id="col-15">15</div>
+            <div class="col" id="col-16">16</div>
+        </div>
+    </div>
+</div>
+</body>
+</html>

package/static/grids/fit-in-view.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../css/common.min.css">
+    <style>
+        .row {
+            min-height: 125px; /* 500 / 4 */
+        }
+        .col {
+            padding-top: 18px;
+            min-height: 125px; /* 500 / 4 */
+            background-color: #9fcdff;
+        }
+        .col:hover {
+            background-color: #85144B !important;
+        }
+    </style>
+    <title>Desktop Grid</title>
+</head>
+<body>
+<div id="external-element-wrapper"
+     class="container p-3 text-center h-100"
+     style="min-width: 550px; max-width: 550px; min-height: 550px; height: 550px;">
+    <span class="display-4 text-secondary">500x500</span>
+    <div id="external-element"
+         class="container m-3 border border-secondary text-center align-items-center display-3 text-dark"
+         style="min-height: 500px; max-width: 500px; min-width: 500px; max-width: 500px">
+        <div class="row align-items-center">
+            <div class="col cl" id="col-1">1</div>
+            <div class="col" id="col-2">2</div>
+            <div class="col" id="col-3">3</div>
+            <div class="col" id="col-4">4</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-5">5</div>
+            <div class="col bg-secondary text-light" id="col-6"><span>6</span></div>
+            <div class="col border border-secondary bg-light" id="col-7">7</div>
+            <div class="col" id="col-8">8</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-9">9</div>
+            <div class="col border border-secondary bg-light" id="col-10">10</div>
+            <div class="col bg-secondary text-light cl" id="col-11">11</div>
+            <div class="col" id="col-12">12</div>
+        </div>
+        <div class="row align-items-center">
+            <div class="col" id="col-13">13</div>
+            <div class="col" id="col-14">14</div>
+            <div class="col" id="col-15">15</div>
+            <div class="col" id="col-16">16</div>
+        </div>
+    </div>
+</div>
+</body>
+</html>