Merge over commits to sync with develop

.devcontainer/Dockerfile

@@ -17,6 +17,3 @@ RUN apt-get update && apt-get install -y \
   libxtst6 \
   xauth \
   xvfb
-
-# Install doppler during build phase
-RUN (curl -Ls https://cli.doppler.com/install.sh || wget -qO- https://cli.doppler.com/install.sh) | sh

.devcontainer/docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3.8'
+version: '3.3'
 
 services:
   app:

.gitignore

@@ -34,7 +34,7 @@ yarn-error.log*
 .env
 
 # compiled styles
-styles/index.css
+/styles/index.css
 
 # compiled server
 /dist

.travis.yml

@@ -4,6 +4,8 @@ cache:
   npm: true
   directories:
     - ~/.cache
+env:
+  - PORT=8000 NEXT_PUBLIC_API_HOST=https://devapi.adsabs.harvard.edu/v1 HOST=http://localhost:8000
 git:
   submodules: false
 install:

.vscode/launch.json

@@ -6,7 +6,8 @@
       "name": "Next.js Server (debug)",
       "runtimeExecutable": "/usr/local/share/npm-global/bin/ts-node",
       "env": {
-        "NODE_OPTIONS": "--inspect"
+        "NODE_OPTIONS": "--inspect",
+        "NODE_ENV": "production"
       },
       "runtimeArgs": ["--project", "tsconfig.server.json", "server/index.ts"],
       "port": 9229

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "debug.node.autoAttach": "off"
-}
+}

jest.config.ts

@@ -4,7 +4,7 @@ const config: Config.InitialOptions = {
   testEnvironment: 'jsdom',
   preset: 'ts-jest',
   verbose: true,
-  roots: ['components'],
+  roots: ['src/components'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },
@@ -15,7 +15,7 @@ const config: Config.InitialOptions = {
       tsconfig: 'tsconfig.test.json',
     },
   },
-  collectCoverageFrom: ['components/**/*.tsx'],
+  collectCoverageFrom: ['src/components/**/*.tsx'],
   coverageThreshold: {
     global: {
       lines: 0,

package.json

@@ -34,6 +34,7 @@
     "@types/express": "^4.17.8",
     "@types/express-rate-limit": "^5.1.0",
     "@types/jest": "^26.0.15",
+    "@types/jest-axe": "^3.5.1",
     "@types/morgan": "^1.9.1",
     "@types/node": "^14.6.1",
     "@types/qs": "^6.9.4",
@@ -63,6 +64,7 @@
     "express": "^4.17.1",
     "express-rate-limit": "^5.1.3",
     "jest": "^26.6.3",
+    "jest-axe": "^4.1.0",
     "morgan": "^1.10.0",
     "next": "^10.0.2-canary.2",
     "next-compose-plugins": "^2.2.0",

components/__tests__/__snapshots__/numfound.test.tsx.snap → src/components/__tests__/__snapshots__/numfound.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`renders correctly with no props 1`] = `
 <div>
-  <article
+  <p
     class="text-xs"
     role="status"
   >
@@ -11,9 +11,9 @@ exports[`renders correctly 1`] = `
     <span
       class="font-bold"
     >
-      10
+      0
     </span>
      results
-  </article>
+  </p>
 </div>
 `;

src/components/__tests__/numfound.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import NumFound from '../numfound';
+expect.extend(toHaveNoViolations);
+
+test('renders correctly with no props', async () => {
+  const { container } = render(<NumFound />);
+  expect(container).toMatchSnapshot();
+  expect(container).toHaveTextContent('Your search returned 0 results');
+});
+
+test('renders correctly with prop', async () => {
+  const { container } = render(<NumFound numFound={10} />);
+  expect(container).toHaveTextContent('Your search returned 10 results');
+});
+
+test('Has no accessibility violations', async () => {
+  render(<NumFound />);
+  const results = await axe(document.body);
+  expect(results).toHaveNoViolations();
+});

components/base/checkbox.tsx → src/components/base/checkbox.tsx

@@ -1,9 +1,8 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 
-const Checkbox: React.FC<DetailedHTMLProps<
-  InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
->> = (props) => {
+const Checkbox: React.FC<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+> = (props) => {
   const { children, ...inputProps } = props;
 
   return (

components/base/radio.tsx → src/components/base/radio.tsx

@@ -1,9 +1,8 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 
-const Radio: React.FC<DetailedHTMLProps<
-  InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
->> = (props) => {
+const Radio: React.FC<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+> = (props) => {
   const { children, ...inputProps } = props;
 
   return (

components/base/textarea.tsx → src/components/base/textarea.tsx

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, TextareaHTMLAttributes } from 'react';
+import React, { DetailedHTMLProps, TextareaHTMLAttributes } from 'react';
 
 interface ITextareaProps
   extends DetailedHTMLProps<

components/base/textbox.tsx → src/components/base/textbox.tsx

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 
 interface ITextboxProps
   extends DetailedHTMLProps<

components/footer.tsx → src/components/footer.tsx

@@ -11,6 +11,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Image from 'next/image';
 import Link from 'next/link';
+import React from 'react';
 
 const SimpleLink: React.FC<{ href: string; icon?: IconProp }> = ({
   children,
@@ -85,7 +86,7 @@ const Footer: React.FC = () => {
           </div>
         </div>
         <div className="flex-col text-gray-100">
-          <p className="text-lg text-gray-100 mb-3">Resources</p>
+          <p className="text-lg mb-3">Resources</p>
           <SimpleLink href="/about" icon={faQuestionCircle}>
             About ADS
           </SimpleLink>

components/numfound.tsx → src/components/numfound.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 
 const NumFound: React.FC<INumFoundProps> = React.memo(({ numFound = 0 }) => {
   return (
-    <article role="status" className="text-xs">
+    <p role="status" className="text-xs">
       Your search returned{' '}
       <span className="font-bold">{numFound.toLocaleString()}</span> results
-    </article>
+    </p>
   );
 });
 
 interface INumFoundProps {
-  numFound: number;
+  numFound?: number;
 }
 
 export default NumFound;

components/searchbar/searchbar.tsx → src/components/searchbar/searchbar.tsx

@@ -63,63 +63,8 @@ const SearchBar: React.FC<ISearchBarProps> = () => {
       </div>
     </div>
   );
-
-  // const classes = useStyles();
-
-  // return (
-  //   <Autocomplete
-  //     id="search-input"
-  //     options={['test', 'test2']}
-  //     openOnFocus={false}
-  //     renderInput={(params) => (
-  //       <Paper className={classes.root} innerRef={params.InputProps.ref}>
-  //         <InputBase
-  //           placeholder="Search"
-  //           name="q"
-  //           defaultValue={value}
-  //           {...params.inputProps}
-  //           className={classes.input}
-  //         />
-  //         <QuickFields />
-  //         <IconButton
-  //           className={classes.searchButton}
-  //           aria-label="search"
-  //           type="submit"
-  //         >
-  //           <SearchIcon />
-  //         </IconButton>
-  //       </Paper>
-  //     )}
-  //   />
-  // );
 };
 
 interface ISearchBarProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-// const useStyles = makeStyles((theme: Theme) =>
-//   createStyles({
-//     root: {
-//       padding: 0,
-//       display: 'flex',
-//       alignItems: 'center',
-//       width: '100%',
-//     },
-//     input: {
-//       marginLeft: theme.spacing(1),
-//       flex: 1,
-//     },
-//     iconButton: {
-//       padding: 10,
-//     },
-//     searchButton: {
-//       borderRadius: '0 4px 4px 0',
-//       color: theme.palette.getContrastText(theme.palette.secondary.main),
-//       backgroundColor: theme.palette.secondary.main,
-//       '&:hover': {
-//         backgroundColor: theme.palette.secondary.dark,
-//       },
-//     },
-//   })
-// );
-
 export default SearchBar;

pages/_app.tsx → src/pages/_app.tsx

@@ -1,9 +1,9 @@
 import Layout from '@components/layout';
+import '@styles/index.css';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import React from 'react';
 import { RecoilRoot } from 'recoil';
-import '../styles/index.css';
 
 const NectarApp = ({ Component, pageProps }: AppProps) => {
   return (

pages/classic-form.tsx → src/pages/classic-form.tsx

@@ -98,7 +98,7 @@ const renderCollectionCheckboxes = (selected: string[]) => {
       <span className="mr-1">Limit query to:</span>
       <>
         {['astronomy', 'physics', 'general'].map((label) => (
-          <label className="inline-flex items-center mx-1">
+          <label className="inline-flex items-center mx-1" key={label}>
             <input
               type="checkbox"
               className="form-checkbox"

pages/index.tsx → src/pages/index.tsx

@@ -61,36 +61,6 @@ const Home: React.FC = () => {
   );
 };
 
-// const IsolatedSearchBar = () => {
-//   const [value, setValue] = React.useState('');
-//   const handleClear = () => {
-//     setValue('');
-//   };
-//   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//     setValue(e.currentTarget.value);
-//   };
-
-//   const handleExampleClick = (text: string) => {
-//     setValue(`${value} ${text}`);
-//   };
-
-//   return (
-//     <>
-//       <div className="my-6">
-//         <SearchBar
-//           value={value}
-//           onChange={handleChange}
-//           onClear={handleClear}
-//         />
-//       </div>
-//       <div className="mt-4">
-//         <h3 className="text-lg text-center mb-3 font-bold">Search Examples</h3>
-//         <SearchExamples onClick={handleExampleClick} />
-//       </div>
-//     </>
-//   );
-// };
-
 const SearchExamples = React.memo<{ onClick(text: string): void }>(
   ({ onClick }) => {
     const examplesLeft = [