@nyris/nyris-webapp 0.3.4 → 0.3.9

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.4",
+  "version": "0.3.9",
   "homepage": "./",
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
     "@material-ui/core": "^4.3.3",
-    "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.4",
-    "@nyris/nyris-react-components": "^0.3.4",
-    "@reduxjs/toolkit": "^1.6.1",
+    "@nyris/nyris-api": "^0.3.9",
+    "@nyris/nyris-react-components": "^0.2.6",
     "@types/blueimp-load-image": "^2.23.4",
     "@types/classnames": "^2.2.9",
     "@types/history": "^4.7.3",
@@ -19,37 +16,21 @@
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
     "@types/react-redux": "^7.1.2",
-    "@types/react-router-dom": "^5.1.8",
-    "algoliasearch": "^4.12.2",
-    "axios": "^0.26.1",
-    "blueimp-load-image": "^2.24.0",
+    "blueimp-load-image": "^5.16.0",
     "classnames": "^2.2.6",
     "history": "^4.10.1",
-    "js-cookie": "^3.0.1",
-    "konva": "5.0.3",
-    "lodash": "^4.17.21",
-    "qs": "^6.10.3",
-    "react": "^17.0.0",
+    "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropzone": "^10.1.8",
-    "react-hook-form": "^7.27.1",
-    "react-instantsearch-dom": "^6.22.0",
-    "react-instantsearch-hooks": "^6.22.0",
-    "react-konva": "16.13.0-6",
     "react-move": "^6.0.0",
     "react-redux": "^7.1.1",
-    "react-responsive-carousel": "^3.2.22",
-    "react-router-dom": "^5.3.0",
     "react-scripts": "^3.4.1",
-    "react-select": "^5.2.2",
-    "react-table": "^7.7.0",
     "redux": "^4.0.4",
     "redux-observable": "^1.1.0",
-    "redux-thunk": "^2.4.1",
     "rxjs": "^6.5.3",
     "source-map-explorer": "^2.0.1",
     "typeface-roboto": "0.0.75",
-    "typescript": "^4.1.2"
+    "typescript": "3.6.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -77,12 +58,8 @@
     ]
   },
   "devDependencies": {
-    "@types/js-cookie": "^3.0.1",
-    "@types/lodash": "^4.14.178",
-    "@types/react-instantsearch-dom": "^6.12.2",
     "mockserver": "^3.1.1",
     "react-styleguidist": "^11.0.5",
-    "redux-devtools-extension": "^2.13.8",
-    "sass": "^1.39.0"
+    "redux-devtools-extension": "^2.13.8"
   }
 }

package/src/App.css

@@ -33,33 +33,77 @@
 }
 
 .predicted-categories {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
 }
 .predicted-categories small {
-  white-space: nowrap;
-  padding-left: 0.4em;
-  padding-right: 0.4em;
-  font-size: 0.8em;
-  border-radius: 5px;
-  margin: 0.2em;
-  background-color: #fff;
+    white-space: nowrap;
+    padding-left: 0.4em;
+    padding-right: 0.4em;
+    font-size: 0.8em;
+    border-radius: 5px;
+    margin: 0.2em;
+    background-color: #fff;
 }
-
-/* Css Common all page */
-.d-flex {
-  display: flex !important;
+.sidebar {
+  width: 240px;
+  color: white;
+  border: 1px solid rgba(246, 242, 242, 0.1);
+  margin: 0;
+  padding: 0;
+  width: 200px;
+  position: fixed;
+  height: 100%;
+  overflow: auto;
 }
-.justify-center {
+
+.app {
+  font-family: sans-serif;
+  font-size: 18px;
+  display: flex;
+  align-items: left;
   justify-content: center;
+  flex-direction: column;
+  gap: 20px;
+  height: 100vh;
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 }
-.flex-end {
-  align-items: flex-end;
+.filterlabel ,.topFilterlabel{
+  margin-top: 30px;
+  font-size: 25px;
+  margin-bottom: 10px;
+  color: white;
 }
-.flex-center {
-  align-items: center;
+.topFilterlabel {
+  border-bottom: 4px solid white;
+}
+.list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  color: white;
+  font-size: 20px;
+}
+.checked-item,
+.not-checked-item {
+  margin-left: 10px;
+}
+.checked-item {
+  text-decoration: line-through;
 }
+.rowC {
+  display:flex; flex-direction:row;
+}
+
+.colC {
+  display: flex; flex-direction: row;
+}
+.MuiDrawer-paper {
+  width: drawerWidth;
+  box-sizing: 'border-box';
+}
+
 
 

package/src/App.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App, { AppProps } from './App';
+import  AppMD from './AppMD';
+import {defaultMdSettings, defaultSettings} from "./defaults";
+
+
+const appProps: AppProps = {
+  search: {
+    results: [],
+    categoryPredictions: [],
+    filterOptions: [],
+    regions: [],
+    codes: [],
+    previewSelection: { x1: 0, x2: 1, y1: 0, y2: 1}
+  },
+  loading: false,
+  feedbackState: 'question',
+  handlers: {
+    onCameraClick: () => {},
+    onCaptureCanceled: () => {},
+    onCaptureComplete: () => {},
+    onCloseFeedback: () => {},
+    onExampleImageClick: () => {},
+    onFileDropped: () => {},
+    onImageClick: () => {},
+    onLinkClick: () => {},
+    onSelectFile: () => {},
+    onShowStart: () => {},
+    onSelectionChange: () => {},
+    onPositiveFeedback: () => {},
+    onNegativeFeedback: () => {},
+  },
+  showPart: 'start',
+  settings: { ...defaultSettings },
+  mdSettings: defaultMdSettings,
+};
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App { ...appProps} />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it('renders material design version without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<AppMD { ...appProps} />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

package/src/App.tsx

@@ -1,19 +1,244 @@
-import "react-app-polyfill/ie11";
-import "react-app-polyfill/stable";
-import React from "react";
-import "typeface-roboto";
-import "index.css";
-import { useAppSelector } from "Store/Store";
-import LandingPageApp from "modules/LandingPage/index";
-import AppNewVersion from "modules/LandingPage/indexNewVersion";
-import {AppState} from "./types";
-
-function App(): JSX.Element {
-  const { settings } = useAppSelector<AppState>((state: any) => state);
-  const { themePage } = settings;
-  let SelectedApp = themePage.searchSuite?.active ? AppNewVersion : LandingPageApp;
-
-  return <SelectedApp />;
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { Animate, NodeGroup } from "react-move";
+import { useDropzone} from "react-dropzone";
+import {
+  Box,
+  Snackbar
+} from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+import classNames from "classnames";
+import { loadFilters } from "./actions/searchActions";
+import Result from "./components/Result";
+import Sidebar from "./components/Sidebar";
+import Header from "./components/Header";
+import Feedback from "./components/Feedback";
+import CategoryFilter from "./components/CategoryFilter";
+import Codes from "./components/Codes";
+import PredictedCategories from "./components/PredictedCategories";
+import ExampleImages from "./components/ExampleImages";
+import {makeFileHandler, Capture, Preview} from "@nyris/nyris-react-components";
+import { RectCoords, cadExtensions, CategoryPrediction, Code, Region, Filter} from "@nyris/nyris-api";
+import { AppSettings, CanvasWithId, MDSettings } from "./types";
+import { NyrisAppPart, NyrisFeedbackState } from "./actions/nyrisAppActions";
+
+export interface AppHandlers {
+  onExampleImageClick: (url: string) => void,
+  onImageClick: (position: number, url: string) => void,
+  onLinkClick: (position: number, url: string) => void,
+  onFileDropped: (file: File) => void,
+  onCaptureComplete: (image: HTMLCanvasElement) => void,
+  onCaptureCanceled: () => void,
+  onSelectFile: (f: File) => void,
+  onCameraClick: () => void,
+  onShowStart: () => void,
+  onSelectionChange: (r: RectCoords) => void,
+  onPositiveFeedback: () => void,
+  onNegativeFeedback: () => void,
+  onCloseFeedback: () => void
+}
+export interface AppProps {
+    search: {
+        results: any[],
+        requestId?: string,
+        duration?: number,
+        categoryPredictions: CategoryPrediction[],
+        codes: Code[],
+        filterOptions: string[],
+        errorMessage?: string,
+        regions: Region[],
+        previewSelection: RectCoords,
+        toastErrorMessage?: string,
+        filters: Filter[],
+        selectedFilters: Map<string,string[]>
+    },
+    previewImage?: CanvasWithId,
+    settings: AppSettings,
+    loading: boolean,
+    showPart: NyrisAppPart,
+    feedbackState: NyrisFeedbackState,
+    handlers: AppHandlers,
+    mdSettings: MDSettings
+}
+
+const Demo2: React.FC<AppProps> = ({
+    search: {results, regions, previewSelection, requestId, duration, errorMessage, filterOptions, categoryPredictions, codes, toastErrorMessage, filters, selectedFilters},
+    showPart, settings, handlers, loading, previewImage, feedbackState
+}) => {
+    
+    const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: (fs: File[]) => handlers.onFileDropped(fs[0])});
+    
+    const minPreviewHeight = 400;
+    const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+    const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
+    const [toastOpen, setToastOpen] = useState(false);
+    const dispatch = useDispatch();
+
+    const acceptTypes =[ 'image/*' ].concat( settings.cadSearch ? cadExtensions : [] ).join(',');
+
+
+    useEffect(() => {
+        if (toastErrorMessage !== '') {
+            setToastOpen(true);
+        }
+    }, [toastErrorMessage])
+ 
+    useEffect(() =>{
+    dispatch(loadFilters());
+    }, [showPart, dispatch])
+    
+  return (
+    <React.Fragment>
+      <Header/>
+      <div className="wrapperBody">    
+      <Sidebar filters={filters} selectedFilters={selectedFilters}/>
+        
+      <div className="mainContent">
+      {showPart === 'camera' &&
+        <Capture onCaptureComplete={handlers.onCaptureComplete} onCaptureCanceled={handlers.onCaptureCanceled}
+                  useAppText='Use default camera app'/>}
+
+              
+        <div className={classNames('headSection', {hidden: showPart === 'results'})} id="headSection">           
+            <div   {...getRootProps({
+                onClick: e => {
+                    e.stopPropagation();
+                }
+            })} className={classNames('wrapper', 'dragAndDropActionArea', {'fileIsHover': isDragActive})}>
+             
+                <div className={classNames('contentWrap')}>
+                <Box display="flex" flexDirection="column"  justifyContent="center" alignItems="center"  minHeight="100vh">
+                <section className="uploadImage">
+                        <input type="button" name="file" id="capture" className="inputfile" accept="image/*"
+                               capture="environment" onClick={handlers.onCameraClick}/>
+                        <input type="file" name="file" id="capture_file" className="inputfile" accept={acceptTypes}
+                               capture="environment"/>
+                        <input {...getInputProps()} type="file" name="file" id="select_file" className="inputfile"
+                               accept={acceptTypes}
+                               onChange={makeFileHandler(handlers.onSelectFile)}
+                        />
+                        <div className="onDesktop">
+                            Drop an image
+                            <div className="smallText">or</div>
+                        </div>
+                        <div className="onMobile camIcon">
+                            <img src="./images/ic_cam_large.svg" alt="Camera"/>
+                        </div>
+                        <label htmlFor="capture" className="btn primary onMobile"
+                               style={{marginBottom: '2em', width: '12em'}}>
+                            <span className="onMobile">Take a picture</span>
+                        </label>
+                        <br/>
+                        <label htmlFor="select_file" className="btn primary" style={{width: '12em'}}>
+                            <span>Select a file</span>
+                        </label>
+                        <label htmlFor="capture" className="mobileUploadHandler onMobile"/>
+                </section>
+                <ExampleImages images={settings.exampleImages} onExampleImageClicked={handlers.onExampleImageClick}/>
+                  
+                </Box>
+                </div>
+            </div>
+            
+            <div className="headerSeparatorTop"/>
+            <div className="headerSeparatorBack"/>
+            <div className={classNames('tryDifferent', {hidden: showPart !== 'results'})}
+                 onClick={handlers.onShowStart}>
+                <div className="icIcon">
+                </div>
+                <div className="textDesc"> Try a different image</div>
+                <br style={{clear: 'both'}}/>
+            </div>
+        </div>
+        
+         <section className={classNames({hideResults: showPart !== 'results'},'results', {resultsActive: showPart === 'results'}, (results.length === 1 ? 'singleProduct' : 'multipleProducts'))}>
+            {errorMessage &&
+            <div className="errorMsg">
+                {errorMessage}
+                <div style={{textAlign: 'center', fontSize: '0ß.7em', paddingTop: '0.8em'}}><span>Make sure to include the request ID when reporting a problem: {requestId}</span>
+                </div>
+            </div>
+            }
+            <Animate show={loading} start={{opacity: 0.0}} enter={{opacity: [1.0], timing: {duration: 300}}}
+                     leave={{opacity: [0.0], timing: {duration: 300}}}>
+                {s =>
+                    <div className="loadingOverlay" style={{...s}}>
+                        <div className="loading"/>
+                    </div>
+                }
+            </Animate>
+            {settings.preview && previewImage &&
+            <div className="preview">
+                <Preview key={previewImage.id}
+                         maxWidth={document.body.clientWidth} maxHeight={maxPreviewHeight}
+                         dotColor="#4C8F9F"
+                         onSelectionChange={handlers.onSelectionChange} regions={regions}
+                         selection={previewSelection} image={previewImage.canvas}/>
+            </div>
+            }
+            <div className="predicted-categories">
+                <PredictedCategories cs={categoryPredictions}/>
+            </div>
+            <div className="predicted-categories">
+                <Codes codes={codes}/>
+            </div>
+            <CategoryFilter cats={filterOptions}/>
+
+            <div className="wrapper">
+                <NodeGroup data={results}
+                           keyAccessor={r => r.sku}
+                           start={(r, i) => ({opacity: 0, translateX: -100})}
+                           enter={(r, i) => ({
+                               opacity: [1],
+                               translateX: [0],
+                               timing: {delay: i * 100, duration: 300}
+                           })}
+                >
+                    {rs => <>{rs.map(({key, data, state}) => <Result
+                        key={key}
+                        noImageUrl={settings.noImageUrl}
+                        template={settings.resultTemplate}
+                        onImageClick={handlers.onImageClick}
+                        onLinkClick={handlers.onLinkClick}
+                        result={data}
+                        style={{opacity: state.opacity, transform: `translateX(${state.translateX}%)`}}/>)}</>}
+                </NodeGroup>
+
+                {results.length === 0 && showPart === 'results' && !loading && (
+
+                    <div className="noResults">We did not find anything <span role="img"
+                                                                              aria-label="sad face">😕</span></div>
+                )}
+
+                <br style={{clear: 'both'}}/>
+
+                {duration && showPart === 'results' && (<div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Search
+                    took {duration.toFixed(2)} seconds</div>)}
+
+                {requestId && showPart === 'results' && <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Request
+                    identifier {requestId}</div>}
+            </div>
+        </section>
+
+        <Snackbar open={toastOpen} autoHideDuration={3000} onClose={() => setToastOpen(false)}>
+            <Alert onClose={() => setToastOpen(false)} severity="error">
+                {toastErrorMessage}
+            </Alert>
+        </Snackbar> 
+       
+      </div>
+        </div> 
+        <section className="footnote">
+            <div className="wrapper">
+                © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights reserved - <a
+                href="https://nyris.io/imprint/">Imprint</a>
+            </div>
+        </section>
+        <Feedback feedbackState={feedbackState} onPositiveFeedback={handlers.onPositiveFeedback}
+                  onNegativeFeedback={handlers.onNegativeFeedback} onClose={handlers.onCloseFeedback}/>
+    
+    </React.Fragment>
+  );
 }
 
-export default App;
+export default Demo2;