Merge pull request #10 from kammeows/processing-develop

Processing develop

Author: kammeows

.eslintrc

@@ -16,13 +16,34 @@
     "import/no-unresolved": 0,
     "import/no-named-as-default": 0,
     "import/no-named-as-default-member": 0,
+    "import/no-useless-path-segments": 1,
+    "import/no-cycle":0, //temporarily off
+    "import/no-import-module-exports": 0, //temporarily off
+    "import/extensions": [ // override airbnb setting to allow imports of js, jsx, ts, and tsx files to auto-resolve instead of error
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
+    "default-param-last": 0,
+    "no-else-return" :0,
     "indent": 0,
     "no-console": 0,
     "no-alert": 0,
+    "no-import-assign": 2,
+    "no-promise-executor-return": 0, //temporarily off
+    "no-restricted-exports": 1,
     "no-underscore-dangle": 0,
     "no-useless-catch": 2,
+    "prefer-object-spread": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
+    "max-classes-per-file": 0,
     "quote-props": [1, "as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
@@ -36,7 +57,19 @@
       { "ignorePureComponents": true
     }],
     "class-methods-use-this": 0,
-    "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true}],
+    "react/button-has-type": 0,
+    "react/destructuring-assignment":0,
+    "react/function-component-definition": 0,
+    "react/jsx-curly-newline":0,
+    "react/jsx-fragments":0,
+    "react/jsx-no-useless-fragment":0, // temporarily off
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/jsx-wrap-multilines": 0,
+    "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true, "allowFunctions": true}],
+    "react/no-deprecated": 0, //temporarily off
+    "react/no-unused-class-component-methods": 1,
+    "react/sort-comp": 0,
     "no-return-assign": [2, "except-parens"],
     "jsx-a11y/anchor-is-valid": [
       "error",
@@ -49,6 +82,8 @@
         ]
       }
     ],
+    "jsx-a11y/control-has-associated-label": 0, //temporarily off
+    "jsx-a11y/label-has-associated-control": 0, //temporarily off
     "jsx-a11y/label-has-for": [
       2,
       {
@@ -72,6 +107,11 @@
   ],
   "settings": {
     "import/parser": "@babel/eslint-parser",
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    },
     "import/resolve": {
       "moduleDirectory": ["node_modules"]
     }
@@ -87,7 +127,12 @@
     {
       "files": ["*.ts", "*.tsx"],
       "parser": "@typescript-eslint/parser",
-      "plugins": ["@typescript-eslint"]
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        "no-use-before-define": "off",
+        "import/no-extraneous-dependencies": "off",
+        "no-unused-vars": "off"
+      }
     },
     {
       "files": ["*.stories.@(js|jsx|ts|tsx)"],

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: '16.14.x'
+        node-version: '18.20.x'
     - run: npm install
     - run: npm run test
     - run: npm run lint

.nvmrc

@@ -1 +1 @@
-16.14.2
+18.20.8

.travis.yml

@@ -1,7 +1,7 @@
 sudo: required
 language: node_js
 node_js:
- - "16.14.2"
+ - "18.20.8"
 
 cache:
   directories:

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.14.2 AS base
+FROM node:18.20.8 AS base
 ENV APP_HOME=/usr/src/app \
   TERM=xterm
 RUN mkdir -p $APP_HOME

client/common/useKeyDownHandlers.js

@@ -66,3 +66,7 @@ export const DocumentKeyDown = ({ handlers }) => {
 DocumentKeyDown.propTypes = {
   handlers: PropTypes.objectOf(PropTypes.func)
 };
+
+DocumentKeyDown.defaultProps = {
+  handlers: {}
+};

client/components/RootPage.jsx

@@ -2,18 +2,19 @@ import styled from 'styled-components';
 import { prop } from '../theme';
 
 const RootPage = styled.div`
-  min-height: 100%;
+  min-height: 100vh;
+  height: ${({ fixedHeight }) => fixedHeight || '100vh'};
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   flex-direction: column;
   color: ${prop('primaryTextColor')};
   background-color: ${prop('backgroundColor')};
-  height: ${({ fixedHeight }) => fixedHeight || 'initial'};
 
   @media (max-width: 770px) {
     height: 100%;
     overflow: hidden;
   }
+
   @media print {
     @page {
       page-orientation: landscape;

client/components/SkipLink.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import '@testing-library/jest-dom';
+import SkipLink from './SkipLink';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key
+  })
+}));
+
+describe('SkipLink', () => {
+  const defaultProps = {
+    targetId: 'main-content',
+    text: 'goToMain'
+  };
+
+  test('renders with correct href and text', () => {
+    render(<SkipLink {...defaultProps} />);
+    const link = screen.getByRole('link');
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '#main-content');
+    expect(link).toHaveTextContent('SkipLink.goToMain');
+  });
+
+  test('adds "focus" class on focus and removes it on blur', () => {
+    render(<SkipLink {...defaultProps} />);
+    const link = screen.getByRole('link');
+
+    expect(link.className).toBe('skip_link');
+
+    fireEvent.focus(link);
+    expect(link.className).toContain('focus');
+
+    fireEvent.blur(link);
+    expect(link.className).toBe('skip_link');
+  });
+});

client/components/SkipLink.jsx renamed to client/components/SkipLink.tsx

@@ -1,9 +1,13 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-const SkipLink = ({ targetId, text }) => {
+type SkipLinkProps = {
+  targetId: string,
+  text: string
+};
+
+const SkipLink = ({ targetId, text }: SkipLinkProps) => {
   const [focus, setFocus] = useState(false);
   const { t } = useTranslation();
   const handleFocus = () => {
@@ -27,9 +31,4 @@ const SkipLink = ({ targetId, text }) => {
   );
 };
 
-SkipLink.propTypes = {
-  targetId: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired
-};
-
 export default SkipLink;

client/index.jsx

@@ -35,12 +35,12 @@ script.src = 'https://foundation-donate-banner.netlify.app/static/js/main.js';
 document.body.appendChild(script);
 
 const App = () => (
-  <>
+  <div>
     <Router history={browserHistory}>
       <SkipLink targetId="play-sketch" text="PlaySketch" />
       <Routing />
     </Router>
-  </>
+  </div>
 );
 
 render(