fix(lint): Fix lint issues (#300)

* fix(lint): fix lint issues and refactor

* Remove unused

* Remove unused

* set no unused vars lint rule

* Add linter and prettier to test steps

* prettify

* Separate testing jobs

* Revert "Separate testing jobs"

This reverts commit fa5d29e.

Author: ehsan-github

.eslintrc

@@ -37,7 +37,7 @@
     "react/jsx-fragments": 0,
     "react/no-unused-prop-types": 0,
     "import/export": 0,
-    "no-unused-vars": "off",
+    "no-unused-vars": "error",
     "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-use-before-define": "off",
     "react/jsx-props-no-spreading": 0,

.github/workflows/uit-tests.yml

@@ -15,10 +15,19 @@ jobs:
           node-version: '14.x'
       - name: Install dependencies
         run: yarn
+
+      - name: Run linter
+        run: yarn run test:lint
+
+      - name: Run formatter
+        run: yarn run test:prettier
+
       - name: Install Playwright
         run: npx playwright install --with-deps
+
       - name: Build Storybook
         run: yarn build-storybook --quiet
+
       - name: Serve Storybook and run tests
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \

package.json

@@ -18,8 +18,10 @@
     "start": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment",
     "prepare": "run-s build",
     "prepack": "run-s build",
-    "lint": "eslint --ext .ts,.tsx ./",
-    "lint:fix": "yarn lint --fix",
+    "test:lint": "eslint --ext .ts,.tsx ./",
+    "lint": "yarn lint --fix",
+    "test:prettier": "prettier --check ./src",
+    "prettier": "prettier --write ./src",
     "test": "run-s test:unit test:lint test:build",
     "test:build": "run-s build",
     "predeploy": "yarn build-storybook",
@@ -124,4 +126,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

src/components/code/index.tsx

@@ -58,6 +58,7 @@ const Code: FC<CodeProps> = ({
          * if we need deep merging we may use lodash merge function instead
          */
         popupProps={{ ...defaultPopupProps, ...popupProps }}
+        // eslint-disable-next-line react/no-unstable-nested-components
         NormalComponent={() => (
           <CodeSnippet
             content={content}
@@ -72,6 +73,7 @@ const Code: FC<CodeProps> = ({
             {...props}
           />
         )}
+        // eslint-disable-next-line react/no-unstable-nested-components
         BriefComponent={() => (
           <CodeSnippet
             content={content}

src/components/collapse/index.tsx

@@ -46,6 +46,7 @@ const Collapse: FC<CollapseProps> = ({
     if (isOpen !== isOpenProps) {
       setOpen(isOpenProps);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpenProps]);
 
   return (

src/components/dropdown-wrapper/DropdownWrapper.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import useOnClickOutside from '../../utils/useClickOutside';
+import StickyPortal, { CONTENT_ID } from '../sticky-portal/StickyPortal';
+
+interface DropdownWrapperProps {
+  children: any;
+  containerRef: any;
+  appendToBody: any;
+  onClickOutside: any;
+}
+const DropdownWrapper: FC<DropdownWrapperProps> = ({
+  children,
+  containerRef,
+  appendToBody,
+  onClickOutside,
+}) => {
+  useOnClickOutside<HTMLDivElement>(
+    onClickOutside,
+    [containerRef],
+    [CONTENT_ID],
+  );
+
+  return appendToBody ? (
+    <StickyPortal refEl={containerRef?.current} handleClose={onClickOutside}>
+      {children}
+    </StickyPortal>
+  ) : (
+    children
+  );
+};
+
+export default DropdownWrapper;

src/components/dropdown/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useRef } from 'react';
+import { Flex } from 'rebass';
 
 // Components
 import ListItem from '../list/item';
@@ -9,7 +10,6 @@ import useOnClickOutside from '../../utils/useClickOutside';
 import { DropdownItem } from './types';
 import { GetIcon } from '../icon';
 import Spinner from '../spinner';
-import { Flex } from 'rebass';
 import Tooltip from '../tooltip';
 import TooltipPositions from '../tooltip/positions';
 

src/components/editableSelect/EditableSelectContainer.tsx

@@ -70,7 +70,7 @@ const EditableSelectContainer: FC<EditableSelectContainerProps> = forwardRef(
       if (counterRef.current < 0 && value.length > 0) {
         onChange(value.slice(0, -1));
       }
-    }, [search, value, counterRef]);
+    }, [search.length, value, onChange]);
 
     useEffect(() => {
       counterRef.current = 0;

src/components/editableSelect/EditableSelectDropdown.tsx

@@ -5,9 +5,9 @@ import ListItem from '../list/item';
 
 import Labeling from '../typography/labeling';
 import List from '../list/container';
-import useArrowsSelect from '../select/useArrowsSelect';
 import { listStyles, messageStyles } from './editableSelect.styles';
 import { EditableSelectTypes } from './types';
+import useArrowsSelect from '../select2/useArrowsSelect';
 
 export interface EditableSelectDropdownProps {
   value: string[];
@@ -40,21 +40,21 @@ const EditableSelectDropdown: FC<EditableSelectDropdownProps> = ({
     (option: string) => () => {
       if (option) onChange([option]);
     },
-    [value, onChange],
+    [onChange],
   );
 
   const fullOptions = useMemo(() => {
     if (type !== 'editable') return options;
     return search === '' || options.includes(search) || value.includes(search)
       ? options
       : [...options, search];
-  }, [search, options]);
+  }, [type, options, search, value]);
 
   const message = useMemo(() => {
     if (isMulti && value.includes(search)) return 'value already selected';
     if (fullOptions.length === 0) return 'no options available';
     return null;
-  }, [value, search, fullOptions]);
+  }, [isMulti, value, search, fullOptions.length]);
 
   const { activeIndex } = useArrowsSelect(fullOptions, (val: string) => {
     handleClick(val)();

src/components/editableSelect/index.tsx

@@ -7,14 +7,13 @@ import React, {
   useState,
 } from 'react';
 import useDropdown from '../../utils/useDropdown';
-import useOnClickOutside from '../../utils/useClickOutside';
 import { Intents } from '../intents';
 import Label, { LabelProps } from '../label';
 import EditableSelectContainer from './EditableSelectContainer';
 import EditableSelectDropdown from './EditableSelectDropdown';
 import EditableSelectInfo from './EditableSelectInfo';
 import { EditableSelectTypes, ChipsVariants } from './types';
-import StickyPortal, { CONTENT_ID } from '../sticky-portal/StickyPortal';
+import DropdownWrapper from '../dropdown-wrapper/DropdownWrapper';
 
 export interface EditableSelectProps
   extends Omit<LabelProps, 'onChange' | 'children'> {
@@ -64,12 +63,6 @@ const EditableSelect: FC<EditableSelectProps> = ({
 
   const [isOpen, handleToggle, handleClickOutside] = useDropdown(false);
 
-  useOnClickOutside<HTMLDivElement>(
-    handleClickOutside,
-    [containerRef],
-    [CONTENT_ID],
-  );
-
   const unselectedOpts = useMemo(
     () => options.filter((opt) => !value.includes(opt)),
     [options, value],
@@ -100,38 +93,25 @@ const EditableSelect: FC<EditableSelectProps> = ({
 
   useEffect(() => {
     // Reopen dropdrown when typing.
-    if (!isOpen && search !== '') {
-      if (isMulti || search !== value[0]) handleToggle();
+    if (!isOpen && search !== '' && (isMulti || search !== value[0])) {
+      handleToggle();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search]);
 
   const dropdrownWidth = useCallback(() => {
     if (containerRef.current) {
       return `${containerRef.current.offsetWidth - 2}px`;
     }
     return 'auto';
-  }, [containerRef.current?.offsetWidth]);
+  }, []);
 
   const dropdrownPosition = useCallback(() => {
     if (containerRef.current) {
       return containerRef.current.offsetHeight + 1;
     }
     return 33;
-  }, [containerRef.current?.offsetHeight]);
-
-  const DropdownWrapper: FC<{ children: any; refEl: any }> = ({
-    children,
-    refEl,
-    // eslint-disable-next-line arrow-body-style
-  }) => {
-    return appendToBody ? (
-      <StickyPortal refEl={refEl} handleClose={handleClickOutside}>
-        {children}
-      </StickyPortal>
-    ) : (
-      children
-    );
-  };
+  }, []);
 
   return (
     <Label
@@ -161,7 +141,11 @@ const EditableSelect: FC<EditableSelectProps> = ({
         variant={disabled ? 'disabled' : (variant as ChipsVariants)}
       >
         {isOpen && (
-          <DropdownWrapper refEl={containerRef?.current || undefined}>
+          <DropdownWrapper
+            containerRef={containerRef}
+            appendToBody={appendToBody}
+            onClickOutside={handleClickOutside}
+          >
             <EditableSelectDropdown
               type={type}
               value={value}

src/components/embedded-tabs/Tab.tsx

@@ -11,19 +11,19 @@ export interface Props {
   disabled?: boolean;
 }
 
-const getStyles = ({ active, disabled }: Props) =>
+const getStyles = ({ active, disabled }: Pick<Props, 'active' | 'disabled'>) =>
   ({
     ...S.tab,
     ...(active ? S.activeTab : {}),
     ...(disabled ? S.disabledTab : {}),
   } as SxStyleProp);
 
-const Tab: FC<Props> = (props) => {
+const Tab: FC<Props> = ({ title, ...props }) => {
   const propagatedProps = R.pick(['disabled', 'onClick'], props);
 
   return (
     <Box sx={getStyles(props)} {...propagatedProps}>
-      <Label pb="1px">{props.title}</Label>
+      <Label pb="1px">{title}</Label>
     </Box>
   );
 };

src/components/embedded-tabs/embedded-tabs.stories.tsx

@@ -7,7 +7,6 @@ import EmbeddedTabs, {
   ControlledEmbeddedTabsProps,
 } from '.';
 import { Button } from '../button';
-import Subtitle from '../typography/subtitle';
 
 export default {
   title: 'Quartz/EmbeddedTabs',
@@ -32,6 +31,7 @@ const tabs = [
 ];
 
 export const Uncontrolled: Story<EmbeddedTabsProps> = (props) => {
+  // eslint-disable-next-line react/destructuring-assignment
   const [activeTab, setActiveTab] = useState(props.initialTab ?? 0);
 
   return (

src/components/file-button/index.tsx

@@ -7,7 +7,6 @@ import { fileButton, inputBox, inputButton } from './file-button.styles';
 export interface QuartzFileButtonProps extends Omit<ButtonProps, 'css'> {
   children: React.ReactNode | string;
   modeNFiles?: boolean;
-  intent?: 'secondary';
   href?: string;
   name?: string;
   currentRef?: any;
@@ -18,7 +17,6 @@ export interface QuartzFileButtonProps extends Omit<ButtonProps, 'css'> {
 }
 
 const UploadButton: FC<QuartzFileButtonProps> = ({
-  intent = 'secondary',
   children,
   href,
   modeNFiles,

src/components/file-button/project-file-button.tsx

@@ -9,13 +9,11 @@ export interface QuartzFileButtonProps extends Omit<ButtonProps, 'css'> {
   children: React.ReactNode;
   intent?: 'secondary';
   href?: string;
-  mode?: string;
 }
 
 const FileButton: FC<QuartzFileButtonProps> = ({
   intent = 'secondary',
   children,
-  mode = 'oneFile',
   href,
   ...props
 }: QuartzFileButtonProps) => {

src/components/file-system-explorer/file-item-explorer/styles.ts

@@ -10,6 +10,7 @@ export const fileExplorerStyle = (
   ({
     position: 'relative',
 
+    // eslint-disable-next-line no-nested-ternary
     backgroundColor: !isActive ? 'white' : selected ? 'grayShade2' : 'white',
     width: '222px',
 

src/components/file-system-explorer/footer/footer.stories.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import FooterFileExplorer from './index';
 
-import FileExplorerFooter, { Props } from './index';
+import FooterFileExplorer, { Props } from './index';
 
 export default {
   title: 'Quartz/FileSystemExplorer/Footer',
-  component: FileExplorerFooter,
+  component: FooterFileExplorer,
   args: {
     value: 'pick a file',
     onClose: (key: any) => {

src/components/flex/Flex.tsx

@@ -4,7 +4,7 @@ import { Flex as RebassFlex, FlexProps } from 'rebass';
 export interface Props extends Omit<FlexProps, 'css'> {}
 
 export const Flex: FC<Props> = forwardRef(({ children, ...rest }, ref) => (
-  <RebassFlex ref={ref}  {...rest}>
+  <RebassFlex ref={ref} {...rest}>
     {children}
   </RebassFlex>
 ));

src/components/header/index.tsx

@@ -40,8 +40,8 @@ const Header: FC<HeaderProps> = ({
     <Box sx={rightSectionStyles}>
       {/*  Actions */}
       <Box>
-        {actions?.map((action, index) => (
-          <span key={index}>{action}</span>
+        {actions?.map((action) => (
+          <span>{action}</span>
         ))}
       </Box>