fix: import lodash methods directly (#581)

Author: d3m1d0v

src/blocks/HeaderSlider/schema.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 
 import {HeaderProperties, SliderProps} from '../../schema/validators/blocks';
 import {BlockBaseProps} from '../../schema/validators/common';
@@ -9,7 +9,7 @@ export const HeaderSliderBlock = {
         required: ['items'],
         properties: {
             ...BlockBaseProps,
-            ..._.omit(SliderProps, ['loadable', 'children']),
+            ...omit(SliderProps, ['loadable', 'children']),
             items: {
                 type: 'array',
                 items: {

src/blocks/Info/schema.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 
 import {
     BaseProps,
@@ -12,7 +12,7 @@ import {ContentBase} from '../../sub-blocks/Content/schema';
 
 const ContentProps = {
     additionalProperties: false,
-    properties: _.omit(ContentBase, ['size', 'colSizes', 'theme']),
+    properties: omit(ContentBase, ['size', 'colSizes', 'theme']),
 };
 
 export const InfoBlock = {

src/blocks/Media/schema.ts

@@ -1,4 +1,4 @@
-import {omit} from 'lodash';
+import omit from 'lodash/omit';
 
 import {
     AnimatableProps,

src/blocks/Questions/schema.ts

@@ -1,10 +1,10 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 
 import {BlockBaseProps, LinkProps} from '../../schema/validators/common';
 import {filteredArray} from '../../schema/validators/utils';
 import {ContentBase} from '../../sub-blocks/Content/schema';
 
-const QuestionsBlockContentProps = _.omit(ContentBase, ['size', 'theme']);
+const QuestionsBlockContentProps = omit(ContentBase, ['size', 'theme']);
 
 export const QuestionsBlock = {
     'questions-block': {

src/blocks/Slider/Slider.tsx

@@ -8,7 +8,9 @@ import React, {
     useState,
 } from 'react';
 
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import get from 'lodash/get';
+import noop from 'lodash/noop';
 import SlickSlider, {Settings} from 'react-slick';
 
 import Anchor from '../../components/Anchor/Anchor';
@@ -113,12 +115,12 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const onResize = useCallback(
-        _.debounce(() => {
+        debounce(() => {
             if (!slider) {
                 return;
             }
 
-            const newBreakpoint = _.get(slider, 'state.breakpoint') || BREAKPOINTS.xl;
+            const newBreakpoint = get(slider, 'state.breakpoint') || BREAKPOINTS.xl;
 
             if (newBreakpoint !== breakpoint) {
                 setBreakpoint(newBreakpoint);
@@ -343,7 +345,7 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
         };
 
         return (
-            <OutsideClick onOutsideClick={isMobile ? unsetFocus : _.noop}>
+            <OutsideClick onOutsideClick={isMobile ? unsetFocus : noop}>
                 <SlickSlider {...settings}>{disclosedChildren}</SlickSlider>
                 <div className={b('footer')}>
                     {renderDisclaimer()}

src/blocks/Slider/utils.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import pickBy from 'lodash/pickBy';
 
 import {BREAKPOINTS} from '../../constants';
 
@@ -38,7 +38,7 @@ export function getSlidesToShowWithDefaults({
 
     return {
         ...DEFAULT_SLIDE_BREAKPOINTS,
-        ..._.pickBy(result, (value) => !isNaN(value)),
+        ...pickBy(result, (value) => !isNaN(value)),
         sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1,
     };
 }

src/blocks/Tabs/schema.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 
 import {ImageProps} from '../../components/Image/schema';
 import {
@@ -15,7 +15,7 @@ import {
 import {filteredArray} from '../../schema/validators/utils';
 import {ContentBase} from '../../sub-blocks/Content/schema';
 
-const TabsItemContentProps = _.omit(ContentBase, ['size', 'colSizes', 'centered', 'theme']);
+const TabsItemContentProps = omit(ContentBase, ['size', 'colSizes', 'centered', 'theme']);
 
 export const tabsItem = {
     type: 'object',

src/components/BalancedMasonry/BalancedMasonry.tsx

@@ -1,6 +1,8 @@
 import React, {ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';
 
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import first from 'lodash/first';
+import minBy from 'lodash/minBy';
 
 import {SSRContext} from '../../context/ssrContext';
 import {QAProps, WithChildren} from '../../models';
@@ -31,7 +33,7 @@ const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
         );
 
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        let [, result] = _.first(breakpoints)!;
+        let [, result] = first(breakpoints)!;
 
         if (isServer) {
             return result;
@@ -54,7 +56,7 @@ const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const balanceColumns = useCallback(
-        _.debounce(() => {
+        debounce(() => {
             if (!containerRef.current) {
                 return;
             }
@@ -74,7 +76,7 @@ const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
                     continue;
                 }
 
-                const minColumn = _.minBy(columnsMeta, 'height') || {id: 0, height: 0};
+                const minColumn = minBy(columnsMeta, 'height') || {id: 0, height: 0};
                 const {id: columnId} = minColumn;
 
                 localColumns[columnId].push(children[i]);

src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {render, screen, waitFor} from '@testing-library/react';
-import {omit} from 'lodash';
+import omit from 'lodash/omit';
 
 import {testCustomClassName} from '../../../../test-utils/shared/common';
 import {CardBase} from '../../../components';

src/components/FullWidthBackground/FullWidthBackground.tsx

@@ -1,6 +1,6 @@
 import React, {CSSProperties, Component, PropsWithChildren, createRef} from 'react';
 
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
 
 import {BREAKPOINTS} from '../../constants';
 import {ClassNameProps} from '../../models';
@@ -24,7 +24,7 @@ export default class FullWidthBackground extends Component<
 > {
     private ref = createRef<HTMLDivElement>();
 
-    private setBg = _.debounce(() => {
+    private setBg = debounce(() => {
         if (this.ref && this.ref.current) {
             const bg = this.ref.current;
             const width = document.documentElement.clientWidth || document.body.clientWidth;