Merge pull request #73 from Smithsonian/develop

Release v0.4.0

.env.template

@@ -6,4 +6,9 @@ PACKRAT_SERVER_PORT=
 PACKRAT_DB_PORT=
 REACT_APP_SERVER_ENDPOINT=
 CLIENT_ENDPOINT=
-SESSION_SECRET=
+SESSION_SECRET=
+EDAN_AUTH_KEY=
+EDAN_SERVER=
+EDAN_APPID=
+OCFL_STORAGE_ROOT=
+OCFL_STAGING_ROOT=

.eslintrc.js

@@ -20,7 +20,14 @@ module.exports = {
         node: true
     },
     plugins: ['react', '@typescript-eslint', 'prettier'],
-    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:import/errors', 'plugin:import/typescript'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:import/errors',
+        'plugin:import/typescript',
+        'plugin:react-hooks/recommended'
+    ],
     rules: {
         // JS/TS RULES
         quotes: ['error', 'single'],
@@ -38,6 +45,9 @@ module.exports = {
         'object-curly-spacing': ['error', 'always'],
         'key-spacing': ['error', { beforeColon: false, mode: 'minimum' }],
         'object-shorthand': ['error', 'always'],
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-empty-function': 'off',
+        'require-atomic-updates': 'off',
         // JSX RULES
         'jsx-quotes': ['error', 'prefer-single'],
         'react/jsx-boolean-value': 'error',
@@ -48,6 +58,6 @@ module.exports = {
         'react/jsx-max-props-per-line': ['error', { maximum: 4 }],
         'react/jsx-no-bind': ['error', { allowArrowFunctions: true }],
         'react/jsx-no-literals': 'off',
-        'react/jsx-tag-spacing': ['error', { beforeSelfClosing: 'always' }]
+        'react/jsx-tag-spacing': ['error', { beforeSelfClosing: 'always' }],
     }
 };

.github/workflows/ci.yml

@@ -49,8 +49,14 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v2
 
-      - name: Setup test DB
-        run: mysql -h 127.0.0.1 -v -P 3306 -u root --password=test < server/db/sql/scripts/Packrat.sql
+      - name: Setup test DB Schema
+        run: mysql -h 127.0.0.1 -v -P 3306 -u root --password=test < server/db/sql/scripts/Packrat.SCHEMA.sql
+
+      - name: Setup test DB Proc
+        run: mysql -h 127.0.0.1 -v -P 3306 -u root --password=test < server/db/sql/scripts/Packrat.PROC.sql
+
+      - name: Setup test DB Data
+        run: mysql -h 127.0.0.1 -v -P 3306 -u root --password=test < server/db/sql/scripts/Packrat.DATA.sql
 
       - name: Setup node version
         uses: actions/setup-node@v1
@@ -65,6 +71,7 @@ jobs:
       - name: Run Tests
         run: yarn test
         env:
+          EDAN_AUTH_KEY: ${{ secrets.EDAN_AUTH_KEY }}
           DATABASE_URL: mysql://root:test@localhost:3306/Packrat
 
   build:

.npmrc

@@ -0,0 +1 @@
+save-exact = true

client/config-overrides.js

@@ -0,0 +1,3 @@
+const { override, addExternalBabelPlugin } = require('customize-cra');
+
+module.exports = override(addExternalBabelPlugin('react-activation/babel'));

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpo-packrat/client",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": true,
   "license": "Apache-2.0",
   "description": "Client for Packrat",
@@ -22,40 +22,56 @@
     }
   ],
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.5",
-    "@dpo-packrat/common": "0.3.2",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-router": "^5.1.8",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/yup": "^0.29.3",
-    "apollo-boost": "^0.4.9",
-    "formik": "^2.1.5",
-    "formik-material-ui": "^2.0.1",
-    "graphql": "^15.3.0",
-    "graphql.macro": "^1.4.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "@apollo/client": "3.1.5",
+    "@date-io/date-fns": "1.3.13",
+    "@dpo-packrat/common": "0.4.0",
+    "@material-ui/core": "4.11.0",
+    "@material-ui/icons": "4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.56",
+    "@material-ui/pickers": "3.2.10",
+    "@testing-library/jest-dom": "5.11.4",
+    "@testing-library/react": "11.0.4",
+    "@testing-library/user-event": "12.1.4",
+    "@types/jest": "26.0.13",
+    "@types/lodash": "4.14.161",
+    "@types/node": "14.10.1",
+    "@types/react": "16.9.49",
+    "@types/react-dom": "16.9.8",
+    "@types/react-router": "5.1.8",
+    "@types/react-router-dom": "5.1.5",
+    "@types/yup": "0.29.7",
+    "apollo-upload-client": "14.1.2",
+    "customize-cra": "1.0.0",
+    "formik": "2.1.5",
+    "formik-material-ui": "3.0.0",
+    "framer-motion": "2.6.13",
+    "graphql": "15.3.0",
+    "graphql.macro": "1.4.2",
+    "lodash": "4.17.20",
+    "query-string": "6.13.2",
+    "randomatic": "3.1.1",
+    "react": "16.13.1",
+    "react-activation": "0.5.5",
+    "react-app-rewired": "2.1.6",
+    "react-debounce-input": "3.2.2",
+    "react-dom": "16.13.1",
+    "react-dropzone": "11.1.0",
+    "react-icons": "3.11.0",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
     "react-scripts": "3.4.0",
-    "react-toastify": "^6.0.8",
-    "typescript": "~3.7.2",
-    "yup": "^0.29.1"
+    "react-spring": "8.0.27",
+    "react-toastify": "6.0.8",
+    "typescript": "3.9.3",
+    "yup": "0.29.3",
+    "zustand": "3.1.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "start:prod": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --watchAll=false --passWithNoTests",
-    "eject": "react-scripts eject",
+    "start": "react-app-rewired start",
+    "start:prod": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test --watchAll=false --passWithNoTests",
+    "eject": "react-app-rewired eject",
     "clean": "rm -rf node_modules/ build/",
     "postinstall": "echo \"postinstall client\""
   },

client/src/components/controls/LoadingButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button, ButtonProps } from '@material-ui/core';
+import Progress from '../shared/Progress';
+
+type LoadingButtonProps = ButtonProps & {
+    loading: boolean;
+    loaderSize?: number;
+};
+
+function LoadingButton(props: LoadingButtonProps): React.ReactElement {
+    const { loading, loaderSize, ...rest } = props;
+
+    return (
+        <Button {...rest}>
+            {!loading && props.children}
+            {loading && <Progress color='inherit' size={loaderSize || 20} />}
+        </Button>
+    );
+}
+
+export default LoadingButton;

client/src/components/controls/RepositoryIcon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { eSystemObjectType } from '../../types/server';
+import { getTermForSystemObjectType } from '../../utils/repository';
+
+const useStyles = makeStyles(({ typography, breakpoints }) => ({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 20,
+        width: 20,
+        borderRadius: 2.5,
+        backgroundColor: ({ backgroundColor }: RepositoryIconProps) => backgroundColor,
+        [breakpoints.down('lg')]: {
+            height: 15,
+            width: 15,
+        },
+    },
+    initial: {
+        fontSize: 10,
+        fontWeight: typography.fontWeightBold,
+        color: ({ textColor }: RepositoryIconProps) => textColor,
+    }
+}));
+
+interface RepositoryIconProps {
+    objectType: eSystemObjectType;
+    backgroundColor: string;
+    textColor: string;
+}
+
+function RepositoryIcon(props: RepositoryIconProps): React.ReactElement {
+    const { objectType } = props;
+    const classes = useStyles(props);
+    const initial = getTermForSystemObjectType(objectType).toUpperCase().slice(0, 1);
+
+    return (
+        <Box className={classes.container}>
+            <Typography className={classes.initial}>{initial}</Typography>
+        </Box>
+    );
+}
+
+export default RepositoryIcon;

client/src/components/index.ts

@@ -2,8 +2,14 @@
  * Components
  * All reusable components are exported from here
  */
-import Header from './Header';
-import PrivateRoute from './PrivateRoute';
-import PublicRoute from './PublicRoute';
+import Header from './shared/Header';
+import PrivateRoute from './shared/PrivateRoute';
+import PublicRoute from './shared/PublicRoute';
+import FieldType from './shared/FieldType';
+import Loader from './shared/Loader';
+import Progress from './shared/Progress';
+import LoadingButton from './controls/LoadingButton';
+import RepositoryIcon from './controls/RepositoryIcon';
 
-export { Header, PrivateRoute, PublicRoute };
+export * from './shared/Sidebar';
+export { Header, PrivateRoute, PublicRoute, FieldType, LoadingButton, Loader, Progress, RepositoryIcon };