@squiz/generic-browser-lib 1.59.1-alpha.0 → 1.60.1-alpha.1

package/lib/ResourceItem/ResourceItem.js

@@ -8,12 +8,12 @@ const react_1 = __importDefault(require("react"));
 const react_aria_1 = require("react-aria");
 const ModalOpeningButton_1 = require("../Modal/ModalOpeningButton");
 const Icon_1 = require("../Icons/Icon");
-const uuid_1 = require("../Utils/uuid");
+const utils_1 = require("../Utils/utils");
 const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource = 'matrix', showChevron = false, }) => {
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, previewModalState);
-    const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
+    const isDisabled = allowedTypes !== undefined && !allowedTypes.includes((0, utils_1.transformSnakeCase)(type));
     const title = isDisabled ? "You can't select this item" : label;
-    return (react_1.default.createElement("li", { className: `squiz-gb-scope flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`, key: (0, uuid_1.uuid)() },
+    return (react_1.default.createElement("li", { className: `squiz-gb-scope flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`, key: (0, utils_1.uuid)() },
         react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), "aria-label": childCount === undefined ? `Drill down to ${label} children` : '', className: `
           relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount !== undefined && childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `, title: title },

package/lib/Skeleton/List/SkeletonList.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonList = void 0;
 const react_1 = __importDefault(require("react"));
 const SkeletonListItem_1 = require("../ListItem/SkeletonListItem");
-const uuid_1 = require("../../Utils/uuid");
+const utils_1 = require("../../Utils/utils");
 const clsx_1 = __importDefault(require("clsx"));
 const SkeletonList = ({ itemCount = 8, className, ariaLabel }) => (react_1.default.createElement("ul", { className: (0, clsx_1.default)(`flex flex-col px-7 my-4 focus-visible:outline-0`, className), "aria-label": `${ariaLabel || 'Skeleton loader list'}` }, [...Array(itemCount)].map((_item) => {
-    return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: (0, uuid_1.uuid)() });
+    return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: (0, utils_1.uuid)() });
 })));
 exports.SkeletonList = SkeletonList;

package/lib/Utils/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function uuid(): string;
+export declare function transformSnakeCase(str: string): string;

package/lib/Utils/{uuid.js → utils.js}

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uuid = void 0;
+exports.transformSnakeCase = exports.uuid = void 0;
 function uuid() {
     return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (Number(c) ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16));
 }
 exports.uuid = uuid;
+function transformSnakeCase(str) {
+    return str.replace(/(_\w)/g, (m) => m[1].toUpperCase());
+}
+exports.transformSnakeCase = transformSnakeCase;

package/lib/index.d.ts

@@ -10,4 +10,4 @@ export * from './PreviewPanel/PreviewPanel';
 export * from './PreviewPanel/PreviewPanelHOC';
 export * from './Hooks/useAsync';
 export * from './ResetButton/ResetButton';
-export * from './Utils/uuid';
+export * from './Utils/utils';

package/lib/index.js

@@ -27,4 +27,4 @@ __exportStar(require("./PreviewPanel/PreviewPanel"), exports);
 __exportStar(require("./PreviewPanel/PreviewPanelHOC"), exports);
 __exportStar(require("./Hooks/useAsync"), exports);
 __exportStar(require("./ResetButton/ResetButton"), exports);
-__exportStar(require("./Utils/uuid"), exports);
+__exportStar(require("./Utils/utils"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.59.1-alpha.0",
+  "version": "1.60.1-alpha.1",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -72,5 +72,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "3e4d26ac30f65290490bba946cb02e06cc0d2850"
+  "gitHead": "936bac195e49fd181b83d6441e747ca7738780c9"
 }

package/src/ResourceItem/ResourceItem.spec.tsx

@@ -62,4 +62,28 @@ describe('ResourceItem', () => {
 
     expect(buttonElement).not.toBeDisabled();
   });
+
+  it('should handle converting snake_case types to camelCase', () => {
+    const props = {
+      ...defaultProps,
+      type: 'page_standard',
+    };
+
+    const { getByRole } = render(<ResourceItem {...props} allowedTypes={['pageStandard']} />);
+    const buttonElement = getByRole('button');
+
+    expect(buttonElement).not.toBeDisabled();
+  });
+
+  it('should still handle camelCase types', () => {
+    const props = {
+      ...defaultProps,
+      type: 'pageStandard',
+    };
+
+    const { getByRole } = render(<ResourceItem {...props} allowedTypes={['pageStandard']} />);
+    const buttonElement = getByRole('button');
+
+    expect(buttonElement).not.toBeDisabled();
+  });
 });

package/src/ResourceItem/ResourceItem.tsx

@@ -5,7 +5,7 @@ import { OverlayTriggerState } from 'react-stately';
 
 import { ModalOpeningButton } from '../Modal/ModalOpeningButton';
 import { Icon, IconOptions, ResourceSources } from '../Icons/Icon';
-import { uuid } from '../Utils/uuid';
+import { uuid, transformSnakeCase } from '../Utils/utils';
 
 interface ResourceItem<T> {
   item: T;
@@ -39,7 +39,7 @@ const ResourceItem = <T,>({
   showChevron = false,
 }: ResourceItem<T>) => {
   const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
-  const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
+  const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(transformSnakeCase(type));
   const title = isDisabled ? "You can't select this item" : label;
 
   return (

package/src/Skeleton/List/SkeletonList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SkeletonListItem } from '../ListItem/SkeletonListItem';
-import { uuid } from '../../Utils/uuid';
+import { uuid } from '../../Utils/utils';
 import clsx from 'clsx';
 
 export type SkeletonListProps = {

package/src/Utils/utils.spec.ts

@@ -0,0 +1,45 @@
+import { transformSnakeCase, uuid } from './utils';
+
+describe('uuid', () => {
+  it('should generate a random uuid each time', () => {
+    const uniqueId = uuid();
+
+    expect(typeof uniqueId).toBe('string');
+    expect(uniqueId).toMatch(/[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/);
+
+    const uniqueId2 = uuid();
+    expect(uniqueId).not.toBe(uniqueId2);
+  });
+});
+
+describe('transformSnakeCase', () => {
+  it.each([
+    ['data_entry', 'dataEntry'],
+    ['user_input', 'userInput'],
+    ['file_path', 'filePath'],
+    ['image_size', 'imageSize'],
+    ['color_code', 'colorCode'],
+    ['table_row', 'tableRow'],
+    ['page_number', 'pageNumber'],
+    ['search_query', 'searchQuery'],
+    ['last_update', 'lastUpdate'],
+    ['item_list', 'itemList'],
+  ])('should convert %s to camelCase "%s"', (input, expected) => {
+    expect(transformSnakeCase(input)).toBe(expected);
+  });
+
+  it.each([
+    'dataEntry',
+    'userInput',
+    'filePath',
+    'imageSize',
+    'colorCode',
+    'tableRow',
+    'pageNumber',
+    'searchQuery',
+    'lastUpdate',
+    'itemList',
+  ])('should maintain camelCase formatting for camelCase strings passed in', (input) => {
+    expect(transformSnakeCase(input)).toBe(input);
+  });
+});

package/src/Utils/{uuid.ts → utils.ts}

@@ -1,7 +1,9 @@
-function uuid(): string {
+export function uuid(): string {
   return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
     (Number(c) ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16),
   );
 }
 
-export { uuid };
+export function transformSnakeCase(str: string) {
+  return str.replace(/(_\w)/g, (m) => m[1].toUpperCase());
+}

package/src/index.ts

@@ -21,4 +21,4 @@ export * from './Hooks/useAsync';
 
 export * from './ResetButton/ResetButton';
 
-export * from './Utils/uuid';
+export * from './Utils/utils';

package/lib/Utils/uuid.d.ts

@@ -1,2 +0,0 @@
-declare function uuid(): string;
-export { uuid };