playbook_ui 14.15.0.pre.alpha.play1917lodashremoval2of36613 → 14.15.0.pre.alpha.play1949lodashremoval3of36746

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from 'lodash'
+import { debounce } from '../utilities/object'
 
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
@@ -284,4 +284,4 @@ export default class PbTypeahead extends PbEnhancedElement {
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
-}
+}

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -1,5 +1,10 @@
 import React from "react"
-import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
+
+import Caption from '../../pb_caption/_caption'
+import Contact from '../../pb_contact/_contact'
+import Flex from '../../pb_flex/_flex'
+import Icon from '../../pb_icon/_icon'
+import User from '../../pb_user/_user'
 
 const MentorSubtitle = (
   <Flex>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserLightWeight = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { User } from "playbook-ui"
+import User from '../../pb_user/_user'
 
 const UserSubtitle = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserTextOnly = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserVerticalSize = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserWithTerritory = (props) => {
   return (

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
 
 const WalkthroughContinuous = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
 
 const WalkthroughDefault = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
 
 const WalkthroughMultiBeacon = (props) => {
   const [stateA, setStateA] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
 
 const WalkthroughNoBeacon = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
 
 const WalkthroughNoOverlay = (props) => {
   const [noOverlay, setNoOverlayState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
 
 const WalkthroughStyled = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/tokens/_display.scss

@@ -4,10 +4,12 @@ $display_inline_block: inline-block !default;
 $display_flex: flex !default;
 $display_none: none !default;
 $display_inline_flex: inline-flex !default;
+$display_grid: grid !default;
 $displays: (
   display_none:   $display_none,
   display_flex: $display_flex,
   display_inline: $display_inline,
   display_inline_block: $display_inline_block,
-  display_block: $display_block
+  display_block: $display_block,
+  display_grid: $display_grid
 );

data/app/pb_kits/playbook/utilities/_display.scss

@@ -24,13 +24,18 @@
     display: none;
 }
 
+.display_grid {
+    display: grid;
+}
+
 $display_values: (
     none: $display_none,
     flex: $display_flex,
     inline: $display_inline,
     inline_block: $display_inline_block,
     inline_flex: $display_inline_flex,
-    block: $display_block
+    block: $display_block,
+    grid: $display_grid
 );
 
 // using a grid here

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -1,4 +1,4 @@
-import { omit } from 'lodash'
+import { omit } from './object'
 import { camelToSnakeCase } from './text'
 
 import {

data/app/pb_kits/playbook/utilities/object.test.js

@@ -1,4 +1,4 @@
-import { isEmpty, get, isString, uniqueId, omitBy } from './object';
+import { isEmpty, get, isString, uniqueId, omitBy, noop, merge, filter, find, partial } from './object';
 
 describe('Lodash functions', () => {
   describe('isEmpty', () => {
@@ -96,4 +96,142 @@ describe('Lodash functions', () => {
       expect(objWithSmallValues).toEqual(obj);
     });
   });
+
+  describe('noop', () => {
+    test('should do nothing and return undefined', () => {
+      expect(noop()).toBeUndefined();
+    });
+  });
+
+  describe('merge', () => {
+    test('merges two objects correctly', () => {
+      const obj1 = { a: 1, b: { x: 10 } };
+      const obj2 = { b: { y: 20 }, c: 3 };
+      expect(merge(obj1, obj2)).toEqual({ a: 1, b: { x: 10, y: 20 }, c: 3 });
+    });
+
+    test('when keys repeat use last occurrence value', () => {
+      const obj1 = { a: 1 };
+      const obj2 = { b: 2 };
+      const obj3 = { a: 3, c: 4 };
+      expect(merge(obj1, obj2, obj3)).toEqual({ a: 3, b: 2, c: 4 });
+    });
+
+    test('ignores non-object arguments', () => {
+      expect(merge(null, { a: 1 })).toEqual({ a: 1 });
+      expect(merge(undefined, { a: 1 })).toEqual({ a: 1 });
+    });
+  });
+
+  describe('filter', () => {
+    test('filters an array using a function predicate', () => {
+      const arr = [1, 2, 3, 4, 5];
+      const isEven = (n) => n % 2 === 0;
+      expect(filter(arr, isEven)).toEqual([2, 4]);
+    });
+
+    test('filters an array using a string predicate', () => {
+      const arr = [
+        { active: true, name: 'John' },
+        { active: false, name: 'Jane' },
+        { active: true, name: 'Doe' }
+      ];
+      expect(filter(arr, 'active')).toEqual([
+        { active: true, name: 'John' },
+        { active: true, name: 'Doe' }
+      ]);
+    });
+
+    test('filters an array using an array predicate', () => {
+      const arr = [
+        { type: 'fruit', name: 'apple' },
+        { type: 'vegetable', name: 'carrot' },
+        { type: 'fruit', name: 'banana' }
+      ];
+      expect(filter(arr, ['type', 'fruit'])).toEqual([
+        { type: 'fruit', name: 'apple' },
+        { type: 'fruit', name: 'banana' }
+      ]);
+    });
+
+    test('filters an array using an object predicate', () => {
+      const arr = [
+        { type: 'fruit', name: 'apple', color: 'red' },
+        { type: 'fruit', name: 'banana', color: 'yellow' },
+        { type: 'vegetable', name: 'carrot', color: 'orange' }
+      ];
+      expect(filter(arr, { type: 'fruit', color: 'red' })).toEqual([
+        { type: 'fruit', name: 'apple', color: 'red' }
+      ]);
+    });
+  });
+
+  describe('find', () => {
+    test('finds an element using a function predicate', () => {
+      const arr = [1, 2, 3, 4, 5];
+      const greaterThanThree = (n) => n > 3;
+      expect(find(arr, greaterThanThree)).toBe(4);
+    });
+
+    test('finds an element using a string predicate', () => {
+      const arr = [
+        { active: false, name: 'John' },
+        { active: true, name: 'Jane' },
+        { active: true, name: 'Doe' }
+      ];
+      expect(find(arr, 'active')).toEqual({ active: true, name: 'Jane' });
+    });
+
+    test('finds an element using an array predicate', () => {
+      const arr = [
+        { type: 'fruit', name: 'apple' },
+        { type: 'vegetable', name: 'carrot' },
+        { type: 'fruit', name: 'banana' }
+      ];
+      expect(find(arr, ['type', 'vegetable'])).toEqual({ type: 'vegetable', name: 'carrot' });
+    });
+
+    test('finds an element using an object predicate', () => {
+      const arr = [
+        { type: 'fruit', name: 'apple', color: 'red' },
+        { type: 'fruit', name: 'banana', color: 'yellow' },
+        { type: 'vegetable', name: 'carrot', color: 'orange' }
+      ];
+      expect(find(arr, { name: 'banana', color: 'yellow' })).toEqual({ type: 'fruit', name: 'banana', color: 'yellow' });
+    });
+
+    test('returns undefined if no element matches', () => {
+      const arr = [{ id: 1 }, { id: 2 }];
+      expect(find(arr, { id: 3 })).toBeUndefined();
+    });
+  });
+
+  describe('partial', () => {
+    function add(a, b, c) {
+      return a + b + c;
+    }
+
+    test('partials arguments without placeholders', () => {
+      const add5 = partial(add, 2, 3);
+      expect(add5(4)).toBe(9);
+    });
+
+    test('partials arguments with placeholders', () => {
+      const addWithPlaceholder = partial(add, partial.placeholder, 3, partial.placeholder);
+      expect(addWithPlaceholder(2, 4)).toBe(9);
+    });
+
+    test('returns correct result when all arguments are pre-filled', () => {
+      const addAll = partial(add, 1, 2, 3);
+      expect(addAll()).toBe(6);
+    });
+
+    test('appends extra arguments when provided', () => {
+      function join(...args) {
+        return args.join('_');
+      }
+      const joinPartial = partial(join, 'a');
+      expect(joinPartial('b', 'c')).toBe('a_b_c');
+    });
+  });
 });

data/app/pb_kits/playbook/utilities/object.ts

@@ -1,6 +1,7 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
 
-export const isEmpty = (obj: any) => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
+export const isEmpty = (obj: any) =>
+  [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length
 
 export const get = <T, R = any>(obj: T, path: string, defaultValue?: R): R | any => {
   const travel = (regexp: RegExp): any =>
@@ -24,82 +25,235 @@ export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: st
   if (obj === null || typeof obj !== 'object') return {}
   return Object.keys(obj).reduce((result: Record<string, any>, key: string) => {
     if (!predicate(obj[key], key)) {
-      result[key] = obj[key];
+      result[key] = obj[key]
     }
-    return result;
+    return result
   }, {})
 }
 
+export const omit = (
+  obj: Record<string, any>,
+  ...paths: (string | string[])[]
+): Record<string, any> => {
+  if (obj === null || typeof obj !== 'object') return {}
+  const keysToOmit = new Set<string>()
+  paths.forEach(p => {
+    if (Array.isArray(p)) {
+      p.forEach(key => keysToOmit.add(key))
+    } else {
+      keysToOmit.add(p)
+    }
+  })
+  const result: Record<string, any> = {}
+  for (const key in obj) {
+    if (!keysToOmit.has(key)) {
+      result[key] = obj[key]
+    }
+  }
+  return result
+}
+
 export const noop = (): void => {
   // empty
-};
-
-export const merge = (...objects: any[]): any => {
-  const isObject = (obj: any): boolean => obj && typeof obj === 'object';
-  const result = {} as any;
-  objects.forEach(obj => {
-    if (isObject(obj)) {
-      Object.keys(obj).forEach(key => {
-        const existingVal = result[key];
-        const newVal = obj[key];
-        if (isObject(existingVal) && isObject(newVal)) {
-          result[key] = merge(existingVal, newVal);
-        } else {
-          result[key] = newVal;
-        }
-      });
+}
+
+export const cloneDeep = (value: any): any => {
+  if (value === null || typeof value !== 'object') {
+    return value
+  }
+  if (Array.isArray(value)) {
+    return value.map(cloneDeep)
+  }
+  if (value instanceof Date) {
+    return new Date(value.getTime())
+  }
+  if (value instanceof RegExp) {
+    return new RegExp(value.source, value.flags)
+  }
+  const clonedObj: any = {}
+  for (const key in value) {
+    if (Object.prototype.hasOwnProperty.call(value, key)) {
+      clonedObj[key] = cloneDeep(value[key])
+    }
+  }
+  return clonedObj
+}
+
+export function merge(
+  ...objects: Array<Record<string, unknown> | null | undefined>
+): Record<string, unknown> {
+  const isPlainObject = (obj: unknown): obj is Record<string, unknown> =>
+    !!obj && typeof obj === 'object' && !Array.isArray(obj)
+
+  const result: Record<string, unknown> = {}
+
+  for (const obj of objects) {
+    if (!obj || typeof obj !== 'object') continue
+
+    for (const key of Object.keys(obj)) {
+      const oldVal = result[key]
+      const newVal = (obj as Record<string, unknown>)[key]
+
+      if (Array.isArray(oldVal) && Array.isArray(newVal)) {
+        result[key] = newVal
+      } else if (isPlainObject(oldVal) && isPlainObject(newVal)) {
+        result[key] = merge(oldVal, newVal)
+      } else if (Array.isArray(oldVal) && isPlainObject(newVal)) {
+        result[key] = oldVal
+      } else if (isPlainObject(oldVal) && Array.isArray(newVal)) {
+        result[key] = oldVal
+      } else {
+        result[key] = newVal
+      }
     }
-  });
-  return result;
-};
+  }
+  return result
+}
 
 const createIteratee = (predicate: any) => {
   if (typeof predicate === 'function') {
-    return predicate;
+    return predicate
   }
   if (typeof predicate === 'string') {
-    return (obj: any) => obj[predicate];
+    return (obj: any) => obj[predicate]
   }
   if (Array.isArray(predicate)) {
-    const [key, value] = predicate;
-    return (obj: any) => obj[key] === value;
+    const [key, value] = predicate
+    return (obj: any) => obj[key] === value
   }
   if (typeof predicate === 'object' && predicate !== null) {
     return (obj: any) => {
       for (const key in predicate) {
         if (Object.prototype.hasOwnProperty.call(predicate, key)) {
-          if (obj[key] !== predicate[key]) return false;
+          if (obj[key] !== predicate[key]) return false
         }
       }
-      return true;
-    };
+      return true
+    }
   }
-  return () => false;
-};
+  return () => false
+}
 
 export const filter = <T>(array: T[], predicate: any): T[] => {
-  const iteratee = createIteratee(predicate);
-  return array.filter(iteratee);
-};
+  const iteratee = createIteratee(predicate)
+  return array.filter(iteratee)
+}
 
 export const find = <T>(array: T[], predicate: any): T | undefined => {
-  const iteratee = createIteratee(predicate);
-  return array.find(iteratee);
-};
+  const iteratee = createIteratee(predicate)
+  return array.find(iteratee)
+}
 
-export const partial = <F extends (...args: unknown[]) => unknown>(
+export const partial = <F extends (...args: any[]) => any>(
   fn: F,
-  ...partials: unknown[]
-): ((...args: unknown[]) => ReturnType<F>) => {
-  const placeholder = partial.placeholder;
-  return (...args: unknown[]): ReturnType<F> => {
-    let argIndex = 0;
+  ...partials: any[]
+): ((...args: any[]) => ReturnType<F>) => {
+  const placeholder = partial.placeholder
+  return (...args: any[]): ReturnType<F> => {
+    let argIndex = 0
     const finalArgs = partials.map(arg =>
       arg === placeholder ? args[argIndex++] : arg
-    );
-    return fn(...(finalArgs.concat(args.slice(argIndex)) as Parameters<F>));
-  };
-};
+    )
+    return fn(...(finalArgs.concat(args.slice(argIndex)) as Parameters<F>)) as ReturnType<F>
+  }
+}
+
+partial.placeholder = Symbol()
+export const _ = partial.placeholder
+
+export const map = <T, U>(
+  collection: T[] | Record<string, T>,
+  iteratee?: ((value: T, index: number | string, collection: T[] | Record<string, T>) => U) | string
+): U[] => {
+  const fn =
+    typeof iteratee === "function"
+      ? iteratee
+      : typeof iteratee === "string"
+      ? (item: T) => (item as any)[iteratee]
+      : (item: T) => item as unknown as U
+
+  if (Array.isArray(collection)) {
+    return collection.map((value, index) => fn(value, index, collection))
+  }
+  return Object.keys(collection).map(key => fn(collection[key], key, collection))
+}
+
+export const debounce = <F extends (...args: any[]) => any>(
+  func: F,
+  wait = 0,
+  options: { leading?: boolean; maxWait?: number; trailing?: boolean } = {}
+): F & { cancel: () => void; flush: () => any } => {
+  let timerId: ReturnType<typeof setTimeout> | null = null
+  let lastArgs: any
+  let lastThis: any
+  let lastCallTime = 0
+  let lastInvokeTime = 0
+  let result: any
+
+  const leading = !!options.leading
+  const trailing = options.trailing === undefined ? true : !!options.trailing
+  const maxWait = options.maxWait
+
+  const invoke = (time: number) => {
+    result = func.apply(lastThis, lastArgs)
+    lastInvokeTime = time
+    lastArgs = lastThis = null
+    return result
+  }
+
+  const startTimer = (pendingFunc: () => void, delay: number) => setTimeout(pendingFunc, delay)
+
+  const remainingWait = (time: number) => {
+    const timeSinceLastCall = time - lastCallTime
+    const timeSinceLastInvoke = time - lastInvokeTime
+    const timeWaiting = wait - timeSinceLastCall
+    return maxWait !== undefined ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting
+  }
 
-partial.placeholder = Symbol();
-export const _ = partial.placeholder;
+  const shouldInvoke = (time: number) => {
+    const timeSinceLastCall = time - lastCallTime
+    const timeSinceLastInvoke = time - lastInvokeTime
+    return lastCallTime === 0 ||
+      timeSinceLastCall >= wait ||
+      timeSinceLastCall < 0 ||
+      (maxWait !== undefined && timeSinceLastInvoke >= maxWait)
+  }
+
+  const debounced = (...args: any[]) => {
+    const time = Date.now()
+    lastArgs = args
+    // 'this' is not lexically captured in arrow functions, so if needed, bind explicitly
+    lastThis = this
+    lastCallTime = time
+
+    if (shouldInvoke(time)) {
+      if (timerId === null) {
+        timerId = startTimer(() => {
+          timerId = null
+          invoke(Date.now())
+        }, remainingWait(time))
+      }
+    }
+    return result
+  }
+
+  debounced.cancel = () => {
+    if (timerId !== null) {
+      clearTimeout(timerId)
+    }
+    timerId = null
+    lastArgs = lastThis = null
+    lastCallTime = 0
+  }
+
+  debounced.flush = () => {
+    if (timerId !== null) {
+      clearTimeout(timerId)
+      timerId = null
+      return invoke(Date.now())
+    }
+    return result
+  }
+
+  return debounced as F & { cancel: () => void; flush: () => any }
+}

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -9,7 +9,7 @@ const testSubject = 'body'
 
 // %w[block inline_block inline flex inline_flex none]
 test('Global Props: returns proper class name', () => {
-  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
+  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none", "grid" ]
   for(let x = 0, y = propValues.length; x < y; ++x) {
     const testId = `${testSubject}-${propValues[x]}`
     render(