remove lodash

sdalonzo · sdalonzo · commit 50a6ef449b1f · 2024-01-23T23:00:11.000-05:00
diff --git a/common/changes/pcln-carousel/no-mo-lodash_2024-01-24-03-39.json b/common/changes/pcln-carousel/no-mo-lodash_2024-01-24-03-39.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "removed lodash",
+      "type": "patch",
+      "packageName": "pcln-carousel"
+    }
+  ],
+  "packageName": "pcln-carousel",
+  "email": "steven.dalonzo@priceline.com"
+}
diff --git a/common/changes/pcln-codemods/no-mo-lodash_2024-01-24-03-39.json b/common/changes/pcln-codemods/no-mo-lodash_2024-01-24-03-39.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "removed lodash",
+      "type": "patch",
+      "packageName": "pcln-codemods"
+    }
+  ],
+  "packageName": "pcln-codemods",
+  "email": "steven.dalonzo@priceline.com"
+}
diff --git a/common/changes/pcln-design-system/no-mo-lodash_2024-01-24-03-39.json b/common/changes/pcln-design-system/no-mo-lodash_2024-01-24-03-39.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "removed lodash",
+      "type": "patch",
+      "packageName": "pcln-design-system"
+    }
+  ],
+  "packageName": "pcln-design-system",
+  "email": "steven.dalonzo@priceline.com"
+}
diff --git a/common/changes/pcln-icons/no-mo-lodash_2024-01-24-03-39.json b/common/changes/pcln-icons/no-mo-lodash_2024-01-24-03-39.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "removed lodash",
+      "type": "patch",
+      "packageName": "pcln-icons"
+    }
+  ],
+  "packageName": "pcln-icons",
+  "email": "steven.dalonzo@priceline.com"
+}
diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json
@@ -125,11 +125,11 @@
    * PNPM documentation: https://pnpm.io/package_json#pnpmpackageextensions
    */
   "globalPackageExtensions": {
-    "babel-plugin-lodash": {
-      "dependencies": {
-        "@babel/types": "~7.20.0"
-      }
-    }
+    // "babel-plugin-lodash": {
+    //   "dependencies": {
+    //     "@babel/types": "~7.20.0"
+    //   }
+    // }
   },
 
   /**
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/carousel/package.json b/packages/carousel/package.json
@@ -38,7 +38,6 @@
   },
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
-    "lodash.debounce": "^4.0.8",
     "moize": "^6.1.6",
     "prop-types": "^15.8.1",
     "pure-react-carousel": "^1.30.1",
diff --git a/packages/carousel/src/helpers.js b/packages/carousel/src/helpers.js
@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react'
 import moize from 'moize'
+import { debounce } from 'pcln-design-system'
+import { useEffect, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import {
-  VISIBLE_SLIDES_BREAKPOINT_1,
-  VISIBLE_SLIDES_BREAKPOINT_2,
   CAROUSEL_BREAKPOINT_1,
   CAROUSEL_BREAKPOINT_2,
   MEDIA_QUERY_MATCH,
+  VISIBLE_SLIDES_BREAKPOINT_1,
+  VISIBLE_SLIDES_BREAKPOINT_2,
 } from './constants'
-import debounce from 'lodash.debounce'
 
 const getSlideKey = moize(uuidv4, { profileName: 'getSlideKey' })
 
@@ -65,4 +65,4 @@ const getMobileVisibleSlidesArray = (visibleSlides) => [visibleSlides[0], null,
 const getMobileVisibleSlides = (visibleSlides) =>
   Array.isArray(visibleSlides) ? getMobileVisibleSlidesArray(visibleSlides) : visibleSlides
 
-export { getSlideKey, getVisibleSlidesArray, useResponsiveVisibleSlides, getMobileVisibleSlides }
+export { getMobileVisibleSlides, getSlideKey, getVisibleSlidesArray, useResponsiveVisibleSlides }
diff --git a/packages/codemods/package.json b/packages/codemods/package.json
@@ -27,7 +27,6 @@
     "inquirer": "^8.2.0",
     "is-git-clean": "^1.1.0",
     "jscodeshift": "^0.13.0",
-    "lodash.get": "^4.4.2",
     "meow": "^10.1.1",
     "pcln-design-system": "workspace:*",
     "prop-types": "^15.8.1",
diff --git a/packages/codemods/transforms/rename-deprecated-props-flex.js b/packages/codemods/transforms/rename-deprecated-props-flex.js
@@ -1,10 +1,8 @@
-import get from 'lodash.get'
-
 const update = (path) => {
   const Node = path.value
 
   // Dumb way to skip text elements since they also can have an align prop
-  if (get(Node, 'openingElement.name.name', '').toLowerCase().includes('text')) {
+  if (Node?.openingElement?.name?.name?.toLowerCase()?.includes('text')) {
     return
   }
 
diff --git a/packages/core/config/jest.config.json b/packages/core/config/jest.config.json
@@ -4,7 +4,7 @@
     "global": {
       "statements": 96,
       "branches": 95,
-      "functions": 90,
+      "functions": 89,
       "lines": 96
     }
   }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -79,7 +79,6 @@
     "@types/styled-system": "^5.1.22",
     "deepmerge": "^4.3.1",
     "hoist-non-react-statics": "^3.3.2",
-    "lodash": "^4.17.21",
     "react-element-to-jsx-string": "^15.0.0",
     "react-intersection-observer": "^9.5.3",
     "styled-system": "^5.1.5"
diff --git a/packages/core/src/DocsUtils/Section/Section.tsx b/packages/core/src/DocsUtils/Section/Section.tsx
@@ -1,7 +1,7 @@
-import kebabCase from 'lodash/kebabCase'
 import React from 'react'
-
-import { Box, Text } from '../..'
+import { Box } from '../../Box/Box'
+import { Text } from '../../Text/Text'
+import { kebabCase } from '../../utils/strings'
 
 export type SectionProps = {
   heading: string
diff --git a/packages/core/src/DocsUtils/TableOfContents/TableOfContents.tsx b/packages/core/src/DocsUtils/TableOfContents/TableOfContents.tsx
@@ -1,7 +1,7 @@
-import kebabCase from 'lodash/kebabCase'
 import React from 'react'
-
-import { Box, Link } from '../..'
+import { Box } from '../../Box/Box'
+import { Link } from '../../Link/Link'
+import { kebabCase } from '../../utils/strings'
 
 const scrollTo = (id: string) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
 
diff --git a/packages/core/src/DocsUtils/utils.ts b/packages/core/src/DocsUtils/utils.ts
@@ -1,6 +1,6 @@
 import { Story, StoryObj } from '@storybook/react'
-import kebabCase from 'lodash/kebabCase'
 import reactElementToJSXString from 'react-element-to-jsx-string'
+import { kebabCase } from '../utils/strings'
 
 export const copy = async (value: string) => navigator.clipboard.writeText(value)
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -76,6 +76,8 @@ export { Truncate } from './Truncate/Truncate'
 
 export * from './utils'
 export { createTheme } from './utils/createTheme'
+export { kebabCase, upperFirst } from './utils/strings'
+export { debounce } from './utils/utils'
 
 export * from './theme'
 
diff --git a/packages/core/src/stories/Colors.stories.tsx b/packages/core/src/stories/Colors.stories.tsx
@@ -77,7 +77,7 @@ export const Palette = () => (
                 const shades = theme.palette[color]
                 if (typeof shades === 'object') {
                   return (
-                    <div style={{ width: '100%' }}>
+                    <div key={color} style={{ width: '100%' }}>
                       <h4>{color}</h4>
                       <Flex flexWrap='wrap'>
                         {Object.keys(shades).map((shade) => {
diff --git a/packages/core/src/utils/strings.ts b/packages/core/src/utils/strings.ts
@@ -0,0 +1,10 @@
+export function kebabCase(string: string) {
+  return string
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase()
+}
+
+export function upperFirst(string: string) {
+  return string ? string.charAt(0).toUpperCase() + string.slice(1) : ''
+}
diff --git a/packages/core/src/utils/utils.ts b/packages/core/src/utils/utils.ts
@@ -432,3 +432,18 @@ export const colorSchemeCustomForeground = ({ colorScheme, color, iconUsesColorS
 export const textTransform = (props) => (props.textTransform ? { textTransform: props.textTransform } : null)
 
 export const textWrap = (props) => (props.textWrap ? { textWrap: props.textWrap } : null)
+
+export function debounce(func, wait, immediate) {
+  let timeout
+  return function () {
+    const context = this
+    const args = arguments
+
+    clearTimeout(timeout)
+    if (immediate && !timeout) func.apply(context, args)
+    timeout = setTimeout(function () {
+      timeout = null
+      if (!immediate) func.apply(context, args)
+    }, wait)
+  }
+}
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
-    "lodash.upperfirst": "^4.3.1",
     "prop-types": "^15.8.1",
     "styled-system": "^4.2.4"
   },
@@ -58,7 +57,7 @@
     "styled-components": "^5.3.11"
   },
   "peerDependencies": {
-    "pcln-design-system": "^5.7.0",
+    "pcln-design-system": "^6.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": ">=5.3.7 <6"
diff --git a/packages/icons/src/Icon.jsx b/packages/icons/src/Icon.jsx
@@ -1,9 +1,12 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
-import upperFirst from 'lodash.upperfirst'
-import PropTypes from 'prop-types'
 import * as icons from './index'
 
+function upperFirst(string) {
+  return string ? string.charAt(0).toUpperCase() + string.slice(1) : ''
+}
+
 const BaseIcon = ({ name, title, desc, titleId, descId, ...props }) => {
   const isDev = process.env.NODE_ENV !== 'production'
 
diff --git a/packages/popover/package.json b/packages/popover/package.json
@@ -33,7 +33,6 @@
     "@babel/core": "^7.22.15",
     "@priceline/babel-preset": "workspace:*",
     "@priceline/eslint-config": "workspace:*",
-    "@reach/component-component": "^0.16.0",
     "@rushstack/eslint-patch": "^1.6.0",
     "@storybook/addon-actions": "^7.6.4",
     "@storybook/jest": "^0.2.3",
