diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index e407eb2f..00000000 --- a/.eslintrc.json +++ /dev/null @@ -1,63 +0,0 @@ -{ - "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint"], - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended", - "plugin:import/errors", - "plugin:import/warnings", - "plugin:import/typescript", - "plugin:react/recommended", - "plugin:react-hooks/recommended" - ], - "env": { - "es6": true, - "node": true - }, - "settings": { - "react": { - "version": "detect" - }, - "import/resolver": { - "typescript": {} - } - }, - "rules": { - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }], - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-module-boundary-types": "off", - "no-console": ["error", { "allow": ["warn", "error"] }], - "react/display-name": "off", - "react/prop-types": "off", - "react/react-in-jsx-scope": "off", - "newline-before-return": "error", - "sort-imports": [ - "error", - { - "ignoreCase": true, - "ignoreDeclarationSort": true - } - ], - "import/named": "off", - "import/no-named-as-default-member": "off", - "import/order": [ - "error", - { - "alphabetize": { - "order": "asc", - "caseInsensitive": true - }, - "newlines-between": "ignore", - "groups": [["builtin", "external"], "internal", "parent", "sibling", "index"] - } - ] - }, - "globals": { - "React": "writable" - }, - "ignorePatterns": ["scripts/*"] -} diff --git a/components/error.tsx b/components/error.tsx index e38986e2..fb5acf4f 100644 --- a/components/error.tsx +++ b/components/error.tsx @@ -2,22 +2,22 @@ import { H3, Panel } from '@bigcommerce/big-design'; import { ErrorMessageProps, ErrorProps } from '../types'; const ErrorContent = ({ message }: Pick) => ( - <> -

Failed to load

- {message} - -) + <> +

Failed to load

+ {message} + +); const ErrorMessage = ({ error, renderPanel = true }: ErrorMessageProps) => { - if (renderPanel) { - return ( - - - - ) - } + if (renderPanel) { + return ( + + + + ); + } - return + return ; }; export default ErrorMessage; diff --git a/components/form.tsx b/components/form.tsx index 1f494b2b..aa69e1b1 100644 --- a/components/form.tsx +++ b/components/form.tsx @@ -1,126 +1,131 @@ -import { Button, Checkbox, Flex, FormGroup, Input, Panel, Select, Form as StyledForm, Textarea } from '@bigcommerce/big-design'; +import { + Button, + Checkbox, + Flex, + FormGroup, + Input, + Panel, + Select, + Form as StyledForm, + Textarea, +} from '@bigcommerce/big-design'; import { ChangeEvent, FormEvent, useState } from 'react'; import { FormData, StringKeyValue } from '../types'; interface FormProps { - formData: FormData; - onCancel(): void; - onSubmit(form: FormData): void; + formData: FormData; + onCancel(): void; + onSubmit(form: FormData): void; } const FormErrors = { - name: 'Product name is required', - price: 'Default price is required', + name: 'Product name is required', + price: 'Default price is required', }; const Form = ({ formData, onCancel, onSubmit }: FormProps) => { - const { description, isVisible, name, price, type } = formData; - const [form, setForm] = useState({ description, isVisible, name, price, type }); - const [errors, setErrors] = useState({}); + const { description, isVisible, name, price, type } = formData; + const [form, setForm] = useState({ description, isVisible, name, price, type }); + const [errors, setErrors] = useState({}); - const handleChange = (event: ChangeEvent) => { - const { name: formName, value } = event.target || {}; - setForm(prevForm => ({ ...prevForm, [formName]: value })); + const handleChange = (event: ChangeEvent) => { + const { name: formName, value } = event.target || {}; + setForm((prevForm) => ({ ...prevForm, [formName]: value })); - // Add error if it exists in FormErrors and the input is empty, otherwise remove from errors - !value && FormErrors[formName] - ? setErrors(prevErrors => ({ ...prevErrors, [formName]: FormErrors[formName] })) - : setErrors(({ [formName]: removed, ...prevErrors }) => ({ ...prevErrors })); - }; + // Add error if it exists in FormErrors and the input is empty, otherwise remove from errors + !value && FormErrors[formName] + ? setErrors((prevErrors) => ({ ...prevErrors, [formName]: FormErrors[formName] })) + : setErrors(({ [formName]: removed, ...prevErrors }) => ({ ...prevErrors })); + }; - const handleSelectChange = (value: string) => { - setForm(prevForm => ({ ...prevForm, type: value })); - }; + const handleSelectChange = (value: string) => { + setForm((prevForm) => ({ ...prevForm, type: value })); + }; - const handleCheckboxChange = (event: ChangeEvent) => { - const { checked, name: formName } = event.target || {}; - setForm(prevForm => ({ ...prevForm, [formName]: checked })); - }; + const handleCheckboxChange = (event: ChangeEvent) => { + const { checked, name: formName } = event.target || {}; + setForm((prevForm) => ({ ...prevForm, [formName]: checked })); + }; - const handleSubmit = (event: FormEvent) => { - event.preventDefault(); + const handleSubmit = (event: FormEvent) => { + event.preventDefault(); - // If there are errors, do not submit the form - const hasErrors = Object.keys(errors).length > 0; - if (hasErrors) return; + // If there are errors, do not submit the form + const hasErrors = Object.keys(errors).length > 0; + if (hasErrors) return; - onSubmit(form); - }; + onSubmit(form); + }; - return ( - - - - - - - - - - - - - - - {/* Using description for demo purposes. Consider using a wysiwig instead (e.g. TinyMCE) */} -