playbook_ui 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579 → 14.15.0.pre.alpha.play1917lodashremoval2of36615

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4b6fab9ece5fae4518e897b8210410b09d0e556020f43189ba301003be177e1
-  data.tar.gz: e0edb633f206fa6120fc1ffec4abf63481818afef913b8cf1cbfb9200e8ed4ff
+  metadata.gz: 7250a006190c9fd3ad50753379407ed9d56eaf7bbbe45bf675aa1cd3386adb19
+  data.tar.gz: f69959838cbc85aad8736d740beaed172aa92a0353751082eaf803c75b224940
 SHA512:
-  metadata.gz: 8c868d18999ce1bdff2d2bad36eebf0fe83debdd6527e0fbe8dccfb0cc2d2d2d8573c78f47a8cf3bf3f2c216f20f3e7bfaa2e4ffd4ef1a931b2a28392b216843
-  data.tar.gz: a4bf1483d2e93163ca1e6b30088a6783696dee5d39f0f05075c4db4f48ca2ccaa5d53cd6a8afb7da3941b2c50dc64806e13e167839ee2065d70ea9053076d9db
+  metadata.gz: 8de325ab14219ca126a14a1301d004bcdf80d7d1a6e92f608d540bd2bd4c85b46e0aee60db4f3ea8da19d6d55e123c0bbf870b6ef97426cafec47c6bb8a7e93d
+  data.tar.gz: a34995b8ba52bfd48be3268128b905d1e880a614994c75f48116eb07a271ce23a5627c340fd8061640def912fe0ab1352539003aef732939c9267674ea5d2b75

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,4 @@
 
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -15,8 +14,8 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_contact/contact';
 @import 'pb_copy_button/copy_button';
+@import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
@@ -46,7 +45,6 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
-@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
@@ -111,7 +109,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_empty_state/empty_state';
+@import 'pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -7,7 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 import classnames from "classnames";
 

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { find, map, partial } from 'lodash'
+import { map } from 'lodash'
+import { find, partial } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -13,7 +13,7 @@ import typography from "../tokens/exports/_typography.module.scss";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type GaugeProps = {
   aria: { [key: string]: string };

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object' 
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import Image from '../../pb_image/_image'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import classnames from 'classnames'
 import React, { useLayoutEffect } from 'react'
 import { useWindowSize } from '../hooks/useWindowSize'

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -8,7 +8,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type LineGraphProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -84,7 +84,7 @@ const Popover = (props: PbPopoverProps) => {
   } = props;
 
   const items = globalProps(props).split(' ')
-  const filteredItems = items.filter(item => !item.includes('min_width'))
+  const filteredItems = items.filter(item => !item.includes('min-width') && !item.includes('width'))
   const filteredGlobalProps = filteredItems.join(' ')
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -181,7 +181,7 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
+    expect(kit).toHaveClass("pb_popover_body p_sm overflow_handling");
   });
 
   test("closes Popover on click anywhere", async () => {

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -17,7 +17,7 @@ const formatCurrencyDefaultValue = (value: string): string => {
 
     // Parse the numeric value as a float to handle decimals
     const dollars = parseFloat(numericValue)
-    if (isNaN(dollars) || dollars === 0) return ''
+    if (isNaN(dollars)) return ''
 
     // Format as currency
     return new Intl.NumberFormat('en-US', {
@@ -30,10 +30,9 @@ const formatCurrencyDefaultValue = (value: string): string => {
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
-    if (!numericValue) return ''
+    if (!numericValue || numericValue === "00") return ''
 
     const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2))
-    if (dollars === 0) return ''
 
     return new Intl.NumberFormat('en-US', {
         style: 'currency',

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/example.yml

@@ -4,6 +4,7 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
+  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from 'lodash'
+import { merge } from '../utilities/object'
 
 type TreemapChartProps = {
   chartData: {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect} from 'react'
+import React, { useState, useEffect, forwardRef} from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -49,6 +49,7 @@ type TypeaheadProps = {
   options?: Array<{ label: string; value?: string }>,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
+  onChange?: any,
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
@@ -71,8 +72,7 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-
-const Typeahead = ({
+const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   async,
   className,
   components = {},
@@ -83,9 +83,11 @@ const Typeahead = ({
   getOptionValue,
   htmlOptions = {},
   id,
+  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  onChange,
   optionsByContext = {},
   searchContextSelector,
   clearOnContextChange = false,
@@ -156,6 +158,15 @@ const Typeahead = ({
   )
 
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
+    if (onChange) {
+      const isReactHookForm = onChange.toString().includes("target")
+      if (isReactHookForm) {
+        onChange({ target: { name, value: _data } })
+      } else {
+        onChange(_data)
+      }
+    }
+    
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -199,10 +210,11 @@ const Typeahead = ({
       />
     </div>
   )
-}
+})
 
 Object.keys(kitComponents).forEach((k) => {
   (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
 
+Typeahead.displayName = 'Typeahead'
 export default Typeahead

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { Typeahead, Title } from 'playbook-ui'
+import { useForm } from 'react-hook-form'
+
+const languages = [
+  { label: 'JavaScript', value: '1995', category: 'Web Development' },
+  { label: 'Python', value: '1991', category: 'General Purpose' },
+  { label: 'Java', value: '1995', category: 'Enterprise' },
+  { label: 'C++', value: '1985', category: 'Systems Programming' },
+  { label: 'Go', value: '2009', category: 'Systems Programming' },
+  { label: 'Rust', value: '2010', category: 'Systems Programming' },
+  { label: 'Swift', value: '2014', category: 'Mobile Development' },
+  { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
+  { label: 'Ruby', value: '1995', category: 'General Purpose' },
+  { label: 'PHP', value: '1995', category: 'Web Development' },
+]
+
+const colors = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadReactHook = (props) => {
+  const { register, watch } = useForm()
+
+  const selectedLanguages = watch('languages')
+  const selectedColor = watch('color')
+
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Multi Select Languages"
+          multiKit="language"
+          options={languages}
+          {...props}
+          {...register('languages')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Languages' 
+      />
+      {selectedLanguages && selectedLanguages.map(language => (
+        <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
+      ))}
+
+      <Typeahead
+          label="Colors"
+          marginTop="lg"
+          options={colors}
+          {...props}
+          {...register('color')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Color' 
+      />
+      <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
+    </>
+  )
+}
+
+export default TypeaheadReactHook

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the Typeahead kit.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -49,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You removed the user: "${value.label}"`)
+    alert(`You added the user: "${value.label}"`)
   }
 
   return (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -56,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You removed the user: "${value.label}"`)
+    alert(`You added the user: "${value.label}"`)
   }
 
   return (

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -17,6 +17,7 @@ examples:
 
   react:
     - typeahead_default: Default
+    - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -13,3 +13,4 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
 export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
+export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'

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

@@ -29,3 +29,77 @@ export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: st
     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;
+        }
+      });
+    }
+  });
+  return result;
+};
+
+const createIteratee = (predicate: any) => {
+  if (typeof predicate === 'function') {
+    return predicate;
+  }
+  if (typeof predicate === 'string') {
+    return (obj: any) => obj[predicate];
+  }
+  if (Array.isArray(predicate)) {
+    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;
+        }
+      }
+      return true;
+    };
+  }
+  return () => false;
+};
+
+export const filter = <T>(array: T[], predicate: any): T[] => {
+  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);
+};
+
+export const partial = <F extends (...args: unknown[]) => unknown>(
+  fn: F,
+  ...partials: unknown[]
+): ((...args: unknown[]) => ReturnType<F>) => {
+  const placeholder = partial.placeholder;
+  return (...args: unknown[]): 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>)) as ReturnType<F>;
+  };
+};
+
+partial.placeholder = Symbol();
+export const _ = partial.placeholder;

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

@@ -1,4 +1,4 @@
-import { filter } from 'lodash'
+import { filter } from './object'
 
 const isEmpty = (value: string | unknown): boolean => !value || value == ''