Merge pull request #316 from qoretechnologies/foxhoundn/bug-console-l…

…ogs-left-315 Removed console.logs, fixed interactive rows, added delays to tooltips, no height supported on tables
qoretechnologies · Aug 9, 2023 · fe88401 · fe88401
2 parents 4b6f980 + d1884c2
commit fe88401
Show file tree

Hide file tree

Showing 35 changed files with 595 additions and 180 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,40 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'react'],
+  rules: {
+    'linebreak-style': ['error', 'unix'],
+    semi: ['error', 'always'],
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+    'no-extra-boolean-cast': 'off',
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+  },
+  // Ignore storybook files
+  ignorePatterns: ['**/stories/*', '**/mock/*'],
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.36.2",
+  "version": "0.36.3",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,6 +11,7 @@
     "build": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json",
     "build:test": "./node_modules/typescript/bin/tsc --noEmit",
     "build:test:prod": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json --noEmit",
+    "lint": "yarn run eslint ./src/",
     "storybook": "storybook dev -p 6007",
     "init-storybook": "yarn test:ci && yarn storybook",
     "build-storybook": "storybook build"
@@ -27,6 +28,7 @@
   ],
   "pre-push": [
     "build:test:prod",
+    "lint",
     "test"
   ],
   "author": "Qore Technologies",
@@ -62,9 +64,13 @@
     "@types/node": "^14.14.14",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "chromatic": "^6.20.0",
+    "eslint": "^8.46.0",
+    "eslint-plugin-react": "^7.33.1",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "jest-github-actions-reporter": "^1.0.2",

diff --git a/src/components/Breadcrumbs/item.tsx b/src/components/Breadcrumbs/item.tsx
@@ -20,7 +20,6 @@ const ReqoreBreadcrumbsItem = forwardRef<HTMLButtonElement, IReqoreBreadcrumbIte
 
     return (
       <ReqoreButton
-        // @ts-ignore
         as={as}
         ref={ref}
         className='reqore-breadcrumbs-item'

diff --git a/src/components/Comment/index.tsx b/src/components/Comment/index.tsx
@@ -1,4 +1,4 @@
-import { size } from 'lodash';
+import { omit, size } from 'lodash';
 import styled from 'styled-components';
 import { ReqoreButton, ReqoreColumn, ReqoreControlGroup, ReqoreDropdown } from '../..';
 import { TReqoreIntent } from '../../constants/theme';
@@ -96,10 +96,11 @@ export const ReqoreComment = ({
             {size(actions) ? (
               <ReqoreColumn justifyContent='flex-end'>
                 <ReqoreControlGroup minimal size='small'>
-                  {actions.map(({ label, actions, show, ...rest }) =>
+                  {actions.map(({ label, actions, ...rest }, index) =>
                     size(actions) ? (
                       <ReqoreDropdown
-                        {...rest}
+                        {...omit(rest, ['show'])}
+                        key={index}
                         label={label}
                         componentProps={{
                           minimal: true,
@@ -111,7 +112,8 @@ export const ReqoreComment = ({
                       />
                     ) : (
                       <ReqoreButton
-                        {...rest}
+                        {...omit(rest, ['show'])}
+                        key={index}
                         onClick={
                           rest.onClick
                             ? (e: React.MouseEvent<HTMLButtonElement>) => {

diff --git a/src/components/ControlGroup/index.tsx b/src/components/ControlGroup/index.tsx
@@ -131,9 +131,6 @@ const ReqoreControlGroup = memo(
     stack,
     isInsideStackGroup,
     isInsideVerticalGroup,
-    isFirstInLastGroup,
-    isLastInFirstGroup,
-    isLastInLastGroup,
     intent,
     customTheme,
     isFirst,
@@ -430,6 +427,7 @@ const ReqoreControlGroup = memo(
           ? [
               children.slice(overflowingChildren),
               <ReqoreButton
+                key='control-group-menu'
                 icon='MenuLine'
                 customTheme={customTheme}
                 tooltip={{

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -13,7 +13,10 @@ import ReqoreDropdownList, {
   TDropdownItemOnClick,
 } from './list';
 
-export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'openOnMount'>> {
+export interface IReqoreDropdownProps
+  extends Partial<
+    Omit<IPopoverOptions, 'openOnMount' | 'show' | 'targetElement' | 'wrapperProps'>
+  > {
   items?: IReqoreDropdownItem[];
   multiSelect?: boolean;
   buttonStyle?: React.CSSProperties;
@@ -50,7 +53,7 @@ const ReqoreDropdownListWrapper = ({
   );
 };
 
-function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
+function ReqoreDropdown<T = IReqoreButtonProps>({
   items,
   component,
   label,
@@ -72,21 +75,17 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   closeOnOutsideClick,
   blur,
   closeOnAnyClick,
-  content,
   delay,
   maxHeight,
   maxWidth,
   noArrow = true,
   transparent,
-  show,
-  targetElement,
   useTargetWidth,
   listWidth,
   listHeight,
   passPopoverData,
   inputProps,
   scrollToSelected,
-  wrapperProps,
   paging,
   ...rest
 }: IReqoreDropdownProps & T) {

diff --git a/src/components/Dropdown/list.tsx b/src/components/Dropdown/list.tsx
@@ -9,6 +9,7 @@ import ReqoreMenu from '../Menu';
 import ReqoreMenuDivider from '../Menu/divider';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
 import { ReqoreVerticalSpacer } from '../Spacer';
+import { IReqoreDropdownDividerProps } from './item';
 
 export type TDropdownItemOnClick = (item: IReqoreDropdownItem) => void;
 export interface IReqoreDropdownItem
@@ -133,7 +134,11 @@ const ReqoreDropdownList = memo(
               {finalItems.map(
                 ({ onClick, dividerAlign, divider, ...item }: IReqoreDropdownItem, index: number) =>
                   divider ? (
-                    <ReqoreMenuDivider key={index} {...item} align={dividerAlign} />
+                    <ReqoreMenuDivider
+                      key={index}
+                      {...(item as unknown as IReqoreDropdownDividerProps)}
+                      align={dividerAlign}
+                    />
                   ) : (
                     <ReqoreMenuItem
                       key={index}

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -1,3 +1,4 @@
+import { omit } from 'lodash';
 import { rgba } from 'polished';
 import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
@@ -177,7 +178,6 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       flat,
       rounded,
       minimal,
-      children,
       readOnly,
       customTheme,
       intent,
@@ -216,7 +216,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
           </StyledIconWrapper>
         )}
         <StyledInput
-          {...rest}
+          {...omit(rest, ['children'])}
           effect={{
             interactive: !rest?.disabled && !readOnly,
             ...rest?.effect,

diff --git a/src/components/KeyValueTable/index.tsx b/src/components/KeyValueTable/index.tsx
@@ -30,6 +30,7 @@ export interface IReqoreKeyValueTableProps
       | 'zoomable'
       | 'wrapperSize'
       | 'paging'
+      | 'onRowClick'
     > {
   data: { [key: string | number]: TReqoreKeyValueTableValue };
 
@@ -73,7 +74,7 @@ export const ReqoreKeyValueTable = ({
   ...rest
 }: IReqoreKeyValueTableProps) => {
   const { columns, items } = useMemo(() => {
-    let columns: IReqoreTableColumn[] = [
+    const columns: IReqoreTableColumn[] = [
       {
         dataId: 'tableKey',
         grow: 1,
@@ -115,6 +116,7 @@ export const ReqoreKeyValueTable = ({
             content: JSON.stringify(value),
             noArrow: true,
             useTargetWidth: true,
+            delay: 400,
           }),
           content: (data) =>
             valueRenderer?.(data, ReqoreTableValue) || <ReqoreTableValue value={data.value} />,
@@ -139,7 +141,7 @@ export const ReqoreKeyValueTable = ({
       });
     }
 
-    let items: IReqoreTableRowData[] = [];
+    const items: IReqoreTableRowData[] = [];
 
     keys(data).map((key) => {
       items.push({

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -84,8 +84,7 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
         >
           {React.Children.map(children, (child) => {
             return child
-              ? // @ts-ignore
-                React.cloneElement(child, {
+              ? React.cloneElement(child, {
                   _insidePopover,
                   _popoverId,
                   customTheme: child.props?.customTheme || theme,

diff --git a/src/components/Menu/item.tsx b/src/components/Menu/item.tsx
@@ -7,13 +7,8 @@ import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { IReqoreComponent } from '../../types/global';
 import { IReqoreButtonProps } from '../Button';
 
-// @ts-ignore
-export interface IReqoreMenuItemProps
-  extends IReqoreComponent,
-    React.HTMLAttributes<HTMLElement>,
-    IReqoreButtonProps {
+export interface IReqoreMenuItemProps extends IReqoreComponent, IReqoreButtonProps {
   label?: string | number;
-  as?: JSX.Element | React.ElementType | never;
   selected?: boolean;
   itemId?: string;
   onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
@@ -93,7 +88,6 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
     return (
       <ReqoreControlGroup stack={!!onRightIconClick} fluid fill>
         <ReqoreButton
-          //@ts-ignore
           as={as}
           {...rest}
           flat={flat}

diff --git a/src/components/Paging/index.tsx b/src/components/Paging/index.tsx
@@ -50,7 +50,6 @@ export const StyledPagesWrapper = styled(ReqoreControlGroup)`
 `;
 
 function Pagination<T>({
-  allPages,
   back,
   first,
   currentPage,

diff --git a/src/components/Panel/index.tsx b/src/components/Panel/index.tsx
@@ -473,19 +473,20 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           return null;
         }
 
-        let {
+        const {
           id,
           actions,
           label,
           intent,
-          className,
           as: CustomElement,
           props = {},
           group,
           show,
           ...rest
         }: IReqorePanelAction = action;
 
+        let { className }: IReqorePanelAction = action;
+
         // If the show prop is 'hover', add the hidden class to the action
         className = classNames(className, show === 'hover' ? 'reqore-panel-action-hidden' : '');
 

diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
@@ -31,16 +31,13 @@ const Popover = memo(
   }: IReqorePopoverProps) => {
     const [ref, setRef] = useState(undefined);
 
-    console.log(rest);
-
     const popoverData: IPopoverControls = usePopover({ targetElement: ref, ...rest });
 
     useEffect(() => {
       passPopoverData?.(popoverData);
     }, [popoverData]);
 
     if (isReqoreComponent) {
-      console.log(Component);
       return (
         <Component
           {...componentProps}
@@ -54,9 +51,7 @@ const Popover = memo(
     }
 
     return (
-      // @ts-ignore
       <StyledPopover
-        // @ts-ignore
         as={wrapperTag}
         className='reqore-popover-wrapper'
         ref={setRef}

diff --git a/src/components/RadioGroup/index.tsx b/src/components/RadioGroup/index.tsx
@@ -38,10 +38,11 @@ const ReqoreRadioGroup = ({
   ...rest
 }: IReqoreRadioGroupProps) => (
   <ReqoreControlGroup {...rest} vertical={vertical}>
-    {items.map(({ value, divider, ...itemRest }) =>
+    {items.map(({ value, divider, ...itemRest }, index) =>
       divider ? (
         <ReqoreMenuDivider
           {...itemRest}
+          key={index}
           size={size || itemRest.size}
           effect={{ textAlign: 'left', ...itemRest.effect }}
           margin={margin}

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -34,10 +34,10 @@ export interface IQorusSidebarItem {
   activePaths?: string[];
   submenu?: IQorusSidebarItem[];
   id: string;
-  as?: JSX.Element | string;
+  as?: React.ElementType | string;
   icon?: IReqoreIconName;
   exact?: boolean;
-  element?: JSX.Element;
+  element?: React.ElementType;
 }
 
 export interface IQorusSidebarProps {
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,6 @@ export const StyledPagesWrapper = styled(ReqoreControlGroup)` @@
     `;
     function Pagination<T>({
-      allPages,
       back,
       first,
       currentPage,
@@ Expand Down @@