diff --git a/.babelrc b/.babelrc index fdfc9ed..51bb731 100644 --- a/.babelrc +++ b/.babelrc @@ -10,5 +10,5 @@ ], "next/babel" ], - "plugins": ["emotion"] + "plugins": ["@emotion/babel-plugin"] } diff --git a/.eslintrc.js b/.eslintrc.js index 8351f73..a40871d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -27,7 +27,7 @@ module.exports = { "@typescript-eslint/no-inferrable-types": "error", "@typescript-eslint/no-namespace": "error", "@typescript-eslint/no-unnecessary-type-assertion": "error", - "@typescript-eslint/no-unused-vars": "error", + "@typescript-eslint/no-unused-vars": warnOnLocal, "@typescript-eslint/no-useless-constructor": "error", "@typescript-eslint/prefer-function-type": "error", "@typescript-eslint/restrict-plus-operands": "error", @@ -72,7 +72,6 @@ module.exports = { "no-sequences": "error", "no-shadow": "error", "no-unused-expressions": warnOnLocal, - "no-unused-vars": warnOnLocal, "padding-line-between-statements": [ warnOnLocal, { diff --git a/components/AdjustmentBar.tsx b/components/AdjustmentBar.tsx index 964d95f..4fdfcc4 100644 --- a/components/AdjustmentBar.tsx +++ b/components/AdjustmentBar.tsx @@ -20,10 +20,10 @@ const tileValue = (tile: Tile | undefined, adjustment: Adjustment) => { return tile.adjustments[adjustment.slug]; }; -export const AdjustmentBar: React.FunctionComponent = ({ tile }) => { +export const AdjustmentBar = ({ tile }: Props) => { const commandMap = selectCommandMap(); const adjustmentMap = selectAdjustmentMap(); - // we implicitly know this is non-null based on it being rendered + // we implicitly know this is non-null based on it being rendered. // not great, would be nice to store this with the object? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const name = commandMap[tile.item!].name; @@ -34,8 +34,8 @@ export const AdjustmentBar: React.FunctionComponent = ({ tile }) => { }); }, shallowEqual); return ( - - {name} + + {name} {adjustments && adjustments.map(adjustment => { const value = tileValue(tile, adjustment); @@ -69,11 +69,7 @@ interface ResizeInputProps { value: number | undefined; tile: Tile; } -const ResizeInput: React.FunctionComponent = ({ - adjustment, - value, - tile, -}) => { +const ResizeInput = ({ adjustment, value, tile }: ResizeInputProps) => { const dispatch = useDispatch(); return ( @@ -91,16 +87,13 @@ const ResizeInput: React.FunctionComponent = ({ }), ); }} - data-test="adjustment-bar-check" - data-test-item={adjustment.slug} />{" "} {adjustment.name} {value && ( {" "} - {value}{" "} + {value} @@ -64,8 +58,6 @@ export const CommandBar: React.FunctionComponent = () => { dispatch(toolActions.setCommand({ commandSlug: comm.slug })) } active={command.slug === comm.slug} - data-test="command" - data-test-item={comm.slug} mb={1} > {comm.name} diff --git a/components/Cursor.tsx b/components/Cursor.tsx index 92c663d..ed6975e 100644 --- a/components/Cursor.tsx +++ b/components/Cursor.tsx @@ -5,17 +5,12 @@ import React from "react"; const TILE_SIZE = 16; interface CursorProps { - endX?: number; - endY?: number; + endX: number | undefined; + endY: number | undefined; startX: number; startY: number; } -export const Cursor: React.FunctionComponent = ({ - startX, - startY, - endX, - endY, -}) => { +export const Cursor = ({ startX, startY, endX, endY }: CursorProps) => { return ( { + return
; +}; diff --git a/components/ExportBar.tsx b/components/ExportBar.tsx index 3a0bb14..3b7b491 100644 --- a/components/ExportBar.tsx +++ b/components/ExportBar.tsx @@ -13,7 +13,7 @@ const download = (filename: string, text: string) => { element.click(); }; -export const ExportBar: React.FunctionComponent = React.memo(() => { +export const ExportBar = React.memo(() => { const io = useSelector(state => state.tool.io); const exported = useSelector(state => state.tool.io === "export" ? selectExported(state) : undefined, @@ -27,7 +27,6 @@ export const ExportBar: React.FunctionComponent = React.memo(() => {