playbook_ui 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

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/_colors.scss

@@ -41,8 +41,7 @@ $interface_colors: (
   silver:             $silver,
   slate:              $slate,
   charcoal:           $charcoal,
-  black:              $black,
-
+  black:              $black
 );
 
 /* Main colors ------------------------*/
@@ -205,8 +204,6 @@ $status_colors: (
   primary_secondary:    $primary_secondary
 );
 
-
-
 $status_color_text: (
   success:            $success,
   success_sm:         $text_lt_success_sm,

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/object.test.js

@@ -0,0 +1,237 @@
+import { isEmpty, get, isString, uniqueId, omitBy, noop, merge, filter, find, partial } from './object';
+
+describe('Lodash functions', () => {
+  describe('isEmpty', () => {
+    test('returns true for empty objects', () => {
+      expect(isEmpty({})).toBe(true);
+    });
+    test('returns true for empty arrays', () => {
+      expect(isEmpty([])).toBe(true);
+    });
+    test('returns false for non-empty objects', () => {
+      expect(isEmpty({ a: 1 })).toBe(false);
+    });
+    test('returns false for non-empty arrays', () => {
+      expect(isEmpty([1])).toBe(false);
+    });
+    test('returns true for null and undefined', () => {
+      expect(isEmpty(null)).toBe(true);
+      expect(isEmpty(undefined)).toBe(true);
+    });
+    test('returns false for non-object, non-array values', () => {
+      expect(isEmpty("hello")).toBe(false);
+      expect(isEmpty(123)).toBe(false);
+    });
+  });
+
+  describe('get', () => {
+    const obj = { a: { b: { c: 42 } }, arr: [{ x: 1 }, { y: 2 }] };
+
+    test('retrieves nested properties by dot path', () => {
+      expect(get(obj, 'a.b.c')).toBe(42);
+    });
+    test('returns default value if path does not exist', () => {
+      expect(get(obj, 'a.b.d', 'default')).toBe('default');
+    });
+    test('retrieves array values using bracket notation', () => {
+      expect(get(obj, 'arr[1].y')).toBe(2);
+    });
+    test('returns default for non-existent paths', () => {
+      expect(get(obj, 'non.existent.path', null)).toBe(null);
+    });
+  });
+
+  describe('isString', () => {
+    test('returns true for string literal', () => {
+      expect(isString('test')).toBe(true);
+    });
+    test('returns true for String object', () => {
+      expect(isString(new String('test'))).toBe(true);
+    });
+    test('returns false for non-string values', () => {
+      expect(isString(123)).toBe(false);
+      expect(isString(null)).toBe(false);
+      expect(isString({ a: 1 })).toBe(false);
+      expect(isString([ 'a','b','c' ])).toBe(false);
+    });
+  });
+
+  describe('uniqueId', () => {
+    test('generates unique ids without prefix', () => {
+      const id1 = uniqueId();
+      const id2 = uniqueId();
+      expect(id1).not.toBe(id2);
+      expect(Number(id1)).toBeLessThan(Number(id2));
+    });
+    test('generates unique ids with prefix', () => {
+      const id1 = uniqueId('id_');
+      const id2 = uniqueId('id_');
+      const id3 = uniqueId('id_');
+      expect(id1).not.toBe(id2);
+      expect(id1).not.toBe(id3);
+      expect(id2).not.toBe(id3);
+      expect(id1.startsWith('id_')).toBe(true);
+      expect(id2.startsWith('id_')).toBe(true);
+      expect(id3.startsWith('id_')).toBe(true);
+    });
+  });
+
+  describe('omitBy', () => {
+    test('omits keys for which predicate returns true', () => {
+      const obj = { a: 1, b: 2, c: 3 };
+      const isEven = value => value % 2 === 0;
+      const noEvenValues = omitBy(obj, isEven);
+      expect(noEvenValues).toEqual({ a: 1, c: 3 });
+    });
+    test('returns empty object for null input', () => {
+      expect(omitBy(null, () => true)).toEqual({});
+    });
+    test('returns empty object for non-object input', () => {
+      expect(omitBy("string", () => true)).toEqual({});
+    });
+    test('returns original object if predicate returns false for all keys', () => {
+      const obj = { a: 1, b: 2 };
+      const isBiggerThanFive = value => value >= 4;
+      const objWithSmallValues = omitBy(obj, isBiggerThanFive);
+      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,3 +1,117 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
 
-export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1
+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 =>
+    String.prototype.split
+      .call(path, regexp)
+      .filter(Boolean)
+      .reduce((res: any, key: string) => (res !== null && res !== undefined ? res[key] : res), obj)
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/)
+  return result === undefined || result === obj ? defaultValue : result
+}
+
+export const isString = (str: unknown): str is string =>
+  str != null && typeof (str as any).valueOf() === "string"
+
+export const uniqueId: (prefix?: string) => string = (() => {
+  let counter = 0
+  return (prefix = '') => `${prefix}${++counter}`
+})()
+
+export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: string) => boolean) => {
+  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];
+    }
+    return result;
+  }, {})
+}
+
+export const noop = (): void => {
+  // empty
+};
+
+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;
+}
+
+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/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(

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 == ''