cleanup gui, webpack, components

vlrmprjct · Nov 28, 2021 · fd509e9 · fd509e9
1 parent 58dcf7e
commit fd509e9
Show file tree

Hide file tree

Showing 21 changed files with 236 additions and 185 deletions.
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -4,8 +4,6 @@ const DotenvFlow = require('dotenv-flow-webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const StylishReporter = require('webpack-stylish');
-
 const buildDir = '../dist';
 
 module.exports = env => {
@@ -37,7 +35,7 @@ module.exports = env => {
             mode: (env.production) ? 'production' : 'development',
             devtool: (env.production) ? 'none' : 'inline-source-map',
             entry: ['babel-polyfill', './src/client/index.js'],
-            stats: 'none',
+            stats: 'minimal',
             module: {
                 rules: [
                     {
@@ -106,7 +104,7 @@ module.exports = env => {
                     template: './public/index.html',
                     favicon: './public/favicon.svg'
                 }),
-                new StylishReporter(),
+                // new StylishReporter(),
             ],
             output: {
                 publicPath: '/',

diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
     "dependencies": {
         "@csstools/normalize.css": "^12.0.0",
         "babel-polyfill": "^6.26.0",
-        "concurrently": "^6.4.0",
         "cuid": "^2.1.8",
         "date-and-time": "^2.0.1",
         "express": "^4.17.1",
@@ -32,8 +31,7 @@
         "react-router-dom": "^5.1.2",
         "react-splitter-layout": "^4.0.0",
         "react-table": "^7.0.0",
-        "uikit": "3.6.0",
-        "webpack-stylish": "^0.1.8"
+        "uikit": "3.6.0"
     },
     "devDependencies": {
         "@babel/core": "^7.16.0",
@@ -43,6 +41,7 @@
         "@svgr/webpack": "^5.5.0",
         "babel-eslint": "^10.0.0",
         "babel-loader": "^8.2.3",
+        "concurrently": "^6.4.0",
         "css-loader": "^5.2.7",
         "dotenv": "^10.0.0",
         "dotenv-flow": "^3.2.0",

diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,11 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+        <meta name="description" content="PIA, Electronics Parts/component Inventory Application called PIA">
+        <link rel="manifest" href="/manifest.json">
         <title>PIA</title>
+
+        <script type="module" src="/pwabuilder-sw-register.js"></script>
     </head>
 
     <body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,24 @@
+{
+    "background_color": "#16161C",
+    "description": "Electronics Parts/component Inventory Application called PIA",
+    "dir": "ltr",
+    "display": "standalone",
+    "name": "pia-evo.vercel",
+    "orientation": "any",
+    "scope": "/",
+    "short_name": "PIA",
+    "start_url": "/",
+    "theme_color": "#21BFC2",
+    "categories": [],
+    "screenshots": [],
+    "icons": [
+        {
+            "src": "/favicon.svg"
+        },
+        {
+            "src": "/favicon.ico",
+            "type": "image/x-icon"
+        }
+    ],
+    "shortcuts": []
+}
diff --git a/public/pwabuilder-sw-register.js b/public/pwabuilder-sw-register.js
@@ -0,0 +1,4 @@
+import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
+
+const el = document.createElement('pwa-update');
+document.body.appendChild(el);
diff --git a/public/pwabuilder-sw.js b/public/pwabuilder-sw.js
@@ -0,0 +1,25 @@
+/* eslint-disable no-undef */
+const CACHE = "pwabuilder-offline";
+const QUEUE_NAME = "bgSyncQueue";
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+self.addEventListener("message", (event) => {
+    if (event.data && event.data.type === "SKIP_WAITING") {
+        self.skipWaiting();
+    }
+});
+
+const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin(QUEUE_NAME, {
+    maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
+});
+
+workbox.routing.registerRoute(
+    new RegExp('/*'),
+    new workbox.strategies.StaleWhileRevalidate({
+        cacheName: CACHE,
+        plugins: [
+            bgSyncPlugin
+        ]
+    })
+);
diff --git a/src/client/scss/app.scss b/src/client/scss/app.scss
@@ -237,21 +237,3 @@ main {
         height: 2rem;
     }
 }
-
-
-.sort {
-    position: absolute;
-    right: 1px;
-    top: 4px;
-
-    &-icon {
-        display: block;
-        height: 0.8rem;
-        color: $global-color-disabled;
-
-        &--active {
-            color: $global-link-color;
-        }
-    }
-
-}
diff --git a/src/client/scss/form.scss b/src/client/scss/form.scss
@@ -76,6 +76,16 @@ $itemAttributes: (
     @each $itemAttribute in $itemAttributes {
         [for='#{$itemAttribute}'] {
             grid-area: unquote($itemAttribute);
+
+            > button,
+            > a {
+                top: 1.8rem;
+
+                :hover {
+                    color: $global-link-color;
+                }
+            }
+
         }
     }
 }
diff --git a/src/client/scss/index.scss b/src/client/scss/index.scss
@@ -25,3 +25,4 @@
 @import 'form';
 @import 'spin';
 @import 'login';
+@import 'table';
diff --git a/src/client/scss/mixins.scss b/src/client/scss/mixins.scss
@@ -29,6 +29,13 @@
     border-style: solid;
 }
 
+@mixin hook-button-default-hover() {
+    color: $inverse-global-color;
+}
+@mixin hook-button-default-active() {
+    color: $inverse-global-color;
+}
+
 @mixin hook-button() {
     border-radius: $base-pre-border-radius;
     line-height: 2.75rem;
@@ -93,7 +100,7 @@
 @mixin hook-form-label() {
     text-transform: uppercase;
     font-size: 11px;
-    font-weight: bold;
+    font-weight: normal;
     line-height: 2rem;
 }
 
@@ -108,8 +115,10 @@
 }
 
 @mixin hook-table-header-cell() {
+    font-weight: normal;
     position: relative;
     text-overflow: ellipsis;
+    text-transform: uppercase;
     overflow: hidden;
 }
 

diff --git a/src/client/scss/table.scss b/src/client/scss/table.scss
@@ -0,0 +1,23 @@
+th,
+td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sort {
+    position: absolute;
+    right: 1px;
+    top: 4px;
+
+    &-icon {
+        display: block;
+        height: 0.8rem;
+        color: $global-color-disabled;
+
+        &--active {
+            color: $global-link-color;
+        }
+    }
+
+}
diff --git a/src/client/utils/filter.js b/src/client/utils/filter.js
@@ -1,49 +1,4 @@
-import React, { useEffect} from 'react';
 import { matchSorter } from 'match-sorter';
-import { useFocus } from './usefocus';
-
-export const GlobalFilter = ({
-    preGlobalFilteredRows,
-    globalFilter,
-    setGlobalFilter,
-}) => {
-    const [inputRef, setInputFocus] = useFocus();
-    const count = preGlobalFilteredRows.length;
-
-    useEffect(() => {
-        setInputFocus();
-    }, []);
-
-    return (
-        <input
-            ref={inputRef}
-            className="filter uk-input"
-            type="text"
-            value={globalFilter || ''}
-            onChange={e => {
-                setGlobalFilter(e.target.value || undefined);
-            }}
-            placeholder={`Search in ${count} records ...`}
-        />
-    );
-};
-
-export const DefaultColumnFilter = ({
-    column: { filterValue, preFilteredRows, setFilter },
-}) => {
-    const count = preFilteredRows.length;
-
-    return (
-        <input
-            ref
-            value={filterValue || ''}
-            onChange={e => {
-                setFilter(e.target.value || undefined);
-            }}
-            placeholder={`Search ${count} records...`}
-        />
-    );
-};
 
 export const fuzzyTextFilter = (rows, id, filterValue) => {
     return matchSorter(rows, filterValue, { keys: [row => row.values[id]] });

diff --git a/src/client/utils/index.js b/src/client/utils/index.js
@@ -1,3 +1,10 @@
 export * from './api';
+export * from './filter';
+export * from './localstorage';
 export * from './notification';
 export * from './prepareForm';
+export * from './scrollbar';
+export * from './sleep';
+export * from './stringcolor';
+export * from './usefocus';
+export * from './validjson';
diff --git a/src/client/utils/theme.js b/src/client/utils/theme.js
diff --git a/src/client/views/App/Footer.js b/src/client/views/App/Footer.js
@@ -2,7 +2,10 @@ import React from 'react';
 
 const Footer = () => (
     <footer>
-        <a href="https://github.com/vlrmprjct/pia">©2021</a>
+        <a href="https://github.com/vlrmprjct/pia" rel="noreferrer" target="_blank">
+            <span aria-label="copyright" role="img">©️</span>
+            {new Date().getFullYear()}
+        </a>
     </footer>
 );