@nyris/nyris-webapp 0.3.4 → 0.3.9

package/src/modules/LandingPage/App.tsx

@@ -1,318 +0,0 @@
-import "App.css";
-import React, { useEffect, useState } from "react";
-import Result from "components/Result";
-import ExampleImages from "components/ExampleImages";
-import CategoryFilter from "components/CategoryFilter";
-import PredictedCategories from "components/PredictedCategories";
-import Codes from "components/Codes";
-import { useDropzone } from "react-dropzone";
-import classNames from "classnames";
-import { Animate, NodeGroup } from "react-move";
-import {
-  makeFileHandler,
-  Capture, Preview,
-} from "@nyris/nyris-react-components";
-import { Snackbar } from "@material-ui/core";
-import MuiAlert, { AlertProps } from "@material-ui/lab/Alert";
-
-import {AppProps} from "./propsType";
-
-function Alert(props: AlertProps) {
-  return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
-const LandingPageApp = (props: AppProps) => {
-  const {
-    handlers,
-    showPart,
-    acceptTypes,
-    settings,
-    search,
-    loading,
-    previewImage
-  } = props;
-
-  const {
-    results,
-    requestId,
-    duration,
-    categoryPredictions,
-    codes,
-    filterOptions,
-    errorMessage,
-    regions,
-    previewSelection
-  } = search;
-
-  const {
-    onExampleImageClick,
-    onImageClick,
-    onLinkClick,
-    onFileDropped,
-    onCaptureComplete,
-    onCaptureCanceled,
-    onSelectFile,
-    onCameraClick,
-    onShowStart,
-    onSelectionChange,
-  } = handlers;
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: (fs: File[]) => {
-      onFileDropped(fs[0]);
-    },
-  });
-
-
-  const [toastOpen, setToastOpen] = useState(false);
-  useEffect(() => {
-    if (errorMessage !== "") {
-      setToastOpen(true);
-    }
-  }, [errorMessage]);
-
-  const minPreviewHeight = 400;
-  const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
-  const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
-
-  return (
-      <div>
-        {showPart === "camera" && (
-        <Capture
-          onCaptureComplete={ onCaptureComplete }
-          onCaptureCanceled={ 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="contentWrap">
-            <section className="uploadImage">
-              <input
-                type="button"
-                name="file"
-                id="capture"
-                className="inputfile"
-                accept="image/*"
-                capture="environment"
-                onClick={() => 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(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: "22em" }}
-              >
-                <span className="onMobile">Take a picture</span>
-              </label>
-              <br />
-              <label
-                htmlFor="select_file"
-                className="btn primary"
-                style={{ width: "22em" }}
-              >
-                <span>Select a file</span>
-              </label>
-              <label
-                htmlFor="capture"
-                className="mobileUploadHandler onMobile"
-              />
-            </section>
-            <ExampleImages
-              images={settings.exampleImages}
-              onExampleImageClicked={onExampleImageClick}
-            />
-          </div>
-        </div>
-        <div
-          className={classNames("tryDifferent", {
-            hidden: showPart !== "results",
-          })}
-          onClick={() => onShowStart()}
-        >
-          <div className="icIcon"></div>
-          <div className="textDesc"> Try a different image</div>
-          <br style={{ clear: "both" }} />
-        </div>
-        <div className="headerSeparatorTop" />
-        <div className="headerSeparatorBack" />
-      </div>
-
-      <section
-        className={classNames(
-          "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}
-              onSelectionChange={ onSelectionChange }
-              image={previewImage?.canvas}
-              selection={previewSelection}
-              regions={regions}
-              maxWidth={document.body.clientWidth}
-              maxHeight={maxPreviewHeight}
-              dotColor="#4C8F9F"
-            />
-          </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={onImageClick}
-                    onLinkClick={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">
-          {errorMessage}
-        </Alert>
-      </Snackbar>
-    </div>
-  );
-};
-
-export default LandingPageApp;

package/src/modules/LandingPage/AppMD.tsx

@@ -1,399 +0,0 @@
-import { useDropzone } from "react-dropzone";
-import {
-  makeStyles,
-  Button,
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  CircularProgress,
-  Container,
-  CssBaseline,
-  Fab,
-  Grid,
-  Hidden,
-  Typography,
-} from "@material-ui/core";
-import { PhotoCamera, ArrowBack, Image } from "@material-ui/icons";
-import Icon from "@material-ui/core/Icon";
-import { NodeGroup } from "react-move";
-import classNames from "classnames";
-import {Capture, Preview} from "@nyris/nyris-react-components";
-import _  from "lodash";
-import {AppProps} from "./propsType";
-import React from "react";
-
-const useStyles = makeStyles((theme) => ({
-  icon: {
-    marginRight: theme.spacing(2),
-  },
-  heroContent: {
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(8, 0, 6),
-    transition: "all 300ms",
-    overflow: "hidden",
-    height: 500,
-  },
-  heroContentClosed: {
-    height: 0,
-    padding: 0,
-  },
-  heroButtons: {
-    marginTop: theme.spacing(4),
-  },
-  cardGrid: {
-    paddingTop: theme.spacing(8),
-    paddingBottom: theme.spacing(8),
-    minHeight: 600,
-    overflow: "hidden",
-    transition: "all 300ms",
-  },
-  cardGridCollapsed: {
-    height: 0,
-    opacity: 0,
-    minHeight: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-  card: {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-  },
-  cardMedia: {
-    paddingTop: "56.25%", // 16:9
-    backgroundSize: "contain",
-  },
-  cardContent: {
-    flexGrow: 1,
-    paddingBottom: 0,
-  },
-  footer: {
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(6),
-  },
-  withElipsis: {
-    textOverflow: "ellipsis",
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-  },
-  loading: {
-    margin: theme.spacing(2),
-  },
-  fabContainer: {
-    position: "fixed",
-    bottom: theme.spacing(2),
-  },
-  fab: {
-    marginLeft: theme.spacing(2),
-  },
-}));
-
-const makeFileHandler = (action: any) => (e: any) => {
-  let file = (e.dataTransfer && e.dataTransfer.files[0]) || e.target.files[0];
-  if (e.target && e.target.value) {
-    e.target.value = "";
-  }
-
-  if (file) {
-    action(file);
-  }
-};
-
-const LandingPageAppMD = (props: AppProps) => {
-  const classes = useStyles();
-  const {
-    handlers,
-    showPart,
-    acceptTypes,
-    settings,
-    search,
-    loading,
-    previewImage
-  } = props;
-
-  const mdSettings = settings.themePage.materialDesign;
-
-  const {
-    results,
-    regions,
-    previewSelection,
-  } = search;
-
-  const {
-    onLinkClick,
-    onFileDropped,
-    onCaptureComplete,
-    onCaptureCanceled,
-    onSelectFile,
-    onCameraClick,
-    onShowStart,
-    onSelectionChange,
-  } = handlers;
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: (fs: File[]) => {
-      onFileDropped(fs[0]);
-    },
-  });
-
-
-  return (
-    <React.Fragment>
-      {!_.isEmpty(mdSettings?.resultLinkIcon) && (
-        <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/icon?family=Material+Icons"
-        />
-      )}
-      <CssBaseline />
-      {showPart === "camera" && (
-        <Capture
-          onCaptureComplete={onCaptureComplete}
-          onCaptureCanceled={onCaptureCanceled}
-          useAppText="Use default camera app"
-        />
-      )}
-      <main>
-        <div
-          className={classNames(
-            classes.heroContent,
-            showPart === "results" ? classes.heroContentClosed : null
-          )}
-        >
-          <Container maxWidth="md">
-            <div>
-              <Hidden mdUp>
-                <div style={{ textAlign: "center" }}>
-                  <PhotoCamera style={{ fontSize: "20em", color: "#cccccc" }} />
-                </div>
-                <div style={{ textAlign: "center" }}>
-                  <Button
-                    variant={"contained"}
-                    color={"primary"}
-                    onClick={onCameraClick}
-                  >
-                    Take a picture
-                  </Button>
-                </div>
-                <div style={{ textAlign: "center" }}>
-                  <Typography>or</Typography>
-                </div>
-                <div style={{ textAlign: "center" }}>
-                  <input
-                    accept={acceptTypes}
-                    id="raised-button-file"
-                    type="file"
-                    onChange={makeFileHandler(onSelectFile)}
-                    style={{
-                      width: ".1px",
-                      height: ".1px",
-                      overflow: "hidden",
-                      opacity: 0,
-                    }}
-                  />
-                  <label htmlFor="raised-button-file">
-                    <Button
-                      variant={"contained"}
-                      color={"primary"}
-                      component="span"
-                    >
-                      Select a file
-                    </Button>
-                  </label>
-                </div>
-              </Hidden>
-              <Hidden smDown>
-                <div
-                  style={{
-                    borderStyle: "dashed",
-                    borderWidth: 5,
-                    borderColor: isDragActive ? "#ccc" : "#eee",
-                    borderRadius: 10,
-                    padding: 10,
-                    paddingBottom: 30,
-                  }}
-                  {...getRootProps({
-                    onClick: (e) => {
-                      e.stopPropagation();
-                    },
-                  })}
-                >
-                  <div style={{ textAlign: "center" }}>
-                    <Image style={{ fontSize: "20em", color: "#cccccc" }} />
-                  </div>
-                  <div style={{ textAlign: "center" }}>
-                    <Typography variant="body2">DROP AN IMAGE</Typography>
-                  </div>
-                  <div style={{ textAlign: "center" }}>
-                    <Typography variant="subtitle2">or</Typography>
-                  </div>
-                  <div style={{ textAlign: "center" }}>
-                    <input
-                      accept={acceptTypes}
-                      id="raised-button-file"
-                      type="file"
-                      {...getInputProps()}
-                      onChange={makeFileHandler(onSelectFile)}
-                      style={{
-                        width: ".1px",
-                        height: ".1px",
-                        overflow: "hidden",
-                        opacity: 0,
-                      }}
-                    />
-                    <label htmlFor="raised-button-file">
-                      <Button
-                        variant={"contained"}
-                        color={"primary"}
-                        component="span"
-                      >
-                        Select an image
-                      </Button>
-                    </label>
-                  </div>
-                </div>
-              </Hidden>
-            </div>
-          </Container>
-        </div>
-        <Container
-          className={classNames(
-            classes.cardGrid,
-            showPart !== "results" && classes.cardGridCollapsed
-          )}
-          maxWidth="md"
-        >
-          {previewImage && (
-            <Card style={{ marginBottom: "4em" }} raised={true}>
-              <Preview
-                key={previewImage?.id}
-                onSelectionChange={onSelectionChange}
-                image={previewImage?.canvas}
-                selection={previewSelection}
-                regions={regions}
-                maxWidth={400}
-                maxHeight={500}
-                dotColor="#FBD914"
-              />
-            </Card>
-          )}
-
-          {loading && (
-            <div style={{ textAlign: "center" }}>
-              <CircularProgress className={classes.loading} />
-            </div>
-          )}
-
-          <Grid container spacing={4}>
-            <NodeGroup
-              data={results}
-              keyAccessor={(r) => r.position + 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: result, state }) => (
-                    <Grid item key={key} xs={12} sm={4} md={3}>
-                      <Card
-                        className={classes.card}
-                        style={{
-                          opacity: state.opacity,
-                          position: "relative",
-                          transform: `translateX(${state.translateX}%)`,
-                        }}
-                      >
-                        <CardMedia
-                          className={classes.cardMedia}
-                          image={
-                            (result.img && result.img.url) ||
-                            settings.noImageUrl
-                          }
-                          title={result.title}
-                        />
-                        <CardContent className={classes.cardContent}>
-                          <Typography
-                            gutterBottom
-                            variant="subtitle2"
-                            component="h5"
-                            className={classes.withElipsis}
-                          >
-                            {result[mdSettings?.resultFirstRowProperty!!]}
-                          </Typography>
-                          <Typography
-                            variant="body2"
-                            className={classes.withElipsis}
-                          >
-                            {result[mdSettings?.resultSecondRowProperty!!]}
-                          </Typography>
-                        </CardContent>
-                        {result.l && (
-                          <CardActions>
-                            <Button
-                              variant="outlined"
-                              style={{ marginLeft: "auto" }}
-                              size="small"
-                              color="primary"
-                              onClick={
-                                () => {
-                                  onLinkClick(
-                                    result.position,
-                                    result.l
-                                  );
-                                }
-                              }
-                              onAuxClick={() => {
-                                onLinkClick(
-                                  result.position,
-                                  result.l
-                                );
-                              }}
-                            >
-                              {mdSettings?.resultLinkIcon && (
-                                <React.Fragment>
-                                  <Icon>{mdSettings.resultLinkIcon}</Icon>{" "}
-                                </React.Fragment>
-                              )}
-                              {mdSettings?.resultLinkText}
-                            </Button>
-                          </CardActions>
-                        )}
-                      </Card>
-                    </Grid>
-                  ))}
-                </>
-              )}
-            </NodeGroup>
-          </Grid>
-
-          {results.length === 0 && showPart === "results" && !loading && (
-            <Typography variant="h3" align="center">
-              We did not find anything
-            </Typography>
-          )}
-        </Container>
-        {showPart !== "start" && (
-          <Container maxWidth="lg">
-            <div className={classes.fabContainer}>
-              <Fab
-                aria-label="back"
-                className={classes.fab}
-                color="primary"
-                onClick={onShowStart}
-              >
-                <ArrowBack />
-              </Fab>
-            </div>
-          </Container>
-        )}
-      </main>
-    </React.Fragment>
-  );
-};
-
-export default LandingPageAppMD;