@qoretechnologies/reqore 0.35.3 → 0.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.35.3",
+  "version": "0.36.1",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,9 +11,9 @@
     "build": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json",
     "build:test": "./node_modules/typescript/bin/tsc --noEmit",
     "build:test:prod": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json --noEmit",
-    "storybook": "start-storybook -p 6007 --no-dll",
+    "storybook": "storybook dev -p 6007",
     "init-storybook": "yarn test:ci && yarn storybook",
-    "build-storybook": "build-storybook"
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react"
   ],
   "pre-push": [
-    "build:test",
+    "build:test:prod",
     "test"
   ],
   "author": "Qore Technologies",
@@ -40,18 +40,21 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-jest": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addon-storyshots": "^6.5.13",
-    "@storybook/addon-storysource": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.1.1",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/addon-interactions": "^7.1.1",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/builder-webpack5": "^7.1.1",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/manager-api": "^7.1.1",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/test-runner": "^0.9.4",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-react": "^2.0.1",
+    "@storybook/theming": "^7.1.1",
+    "@storybook/types": "^7.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^26.0.19",
@@ -61,7 +64,7 @@
     "@types/react-dom": "^18.0.11",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
-    "chromatic": "^6.3.3",
+    "chromatic": "^6.20.0",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "jest-github-actions-reporter": "^1.0.2",
@@ -72,8 +75,7 @@
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.2",
     "react-test-renderer": "^18.2.0",
-    "storybook-addon-outline": "^1.4.2",
-    "storybook-dark-mode": "^1.1.2",
+    "storybook": "^7.1.1",
     "ts-jest": "^29.0.5",
     "ts-node": "^9.1.1",
     "typescript": "^4.7.3",
@@ -101,6 +103,10 @@
     "shortid": "^2.2.16",
     "styled-components": "^5.3.6",
     "thenby": "^1.3.4",
-    "use-context-selector": "^1.4.1"
+    "use-context-selector": "^1.4.1",
+    "yaml": "^2.3.1"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

package/src/components/Breadcrumbs/index.tsx

@@ -199,7 +199,7 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
                     {...props}
                     icon={icon}
                     as={as}
-                    onClick={(_itemId, event) => {
+                    onClick={(event) => {
                       props?.onClick?.(event);
                     }}
                     tooltip={tooltip}

package/src/components/Button/index.tsx

@@ -23,6 +23,9 @@ import {
   InactiveIconScale,
   ReadOnlyElement,
   ScaleIconOnHover,
+  StyledActiveContent,
+  StyledInActiveContent,
+  StyledInvisibleContent,
 } from '../../styles';
 import {
   IReqoreDisabled,
@@ -37,7 +40,6 @@ import {
   IReqoreEffect,
   ReqoreTextEffect,
   StyledEffect,
-  StyledTextEffect,
   TReqoreEffectColor,
   TReqoreHexColor,
 } from '../Effect';
@@ -105,59 +107,6 @@ export const StyledAnimatedTextWrapper = styled.span`
   align-items: ${({ textAlign }) => alignToFlexAlign(textAlign)};
 `;
 
-export const StyledActiveContent = styled(StyledTextEffect)`
-  position: absolute;
-  transform: translateY(-150%);
-  opacity: 0;
-  transition: all 0.2s ease-out;
-  filter: blur(10px);
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 100%;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
-export const StyledInActiveContent = styled(StyledTextEffect)`
-  position: absolute;
-  transform: translateY(0);
-  transition: all 0.2s ease-out;
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 100%;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
-export const StyledInvisibleContent = styled(StyledTextEffect)`
-  visibility: hidden;
-  position: relative;
-  overflow: hidden;
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          white-space: nowrap;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
 export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   display: flex;
   flex-flow: column;

package/src/components/Collection/index.tsx

@@ -48,7 +48,7 @@ export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumn
     searchInput?: React.ReactNode
   ) => React.ReactNode;
 
-  onQueryChange?: (query: string) => void;
+  onQueryChange?: (query: string | number) => void;
 
   emptyMessage?: string;
   sortButtonTooltip?: (sort?: 'asc' | 'desc') => string;
@@ -88,8 +88,10 @@ export const ReqoreCollection = ({
   maxItemHeight,
   filterable,
   inputInTitle = true,
+
   sortable,
   zoomable,
+
   defaultZoom,
   showSelectedFirst,
   inputProps,
@@ -132,6 +134,7 @@ export const ReqoreCollection = ({
   const [contentRef, setContentRef] = useState<HTMLDivElement>(undefined);
   const isMobile = useReqoreProperty('isMobile');
   const [zoom, setZoom] = useState<number>(defaultZoom || sizeToZoom.normal);
+
   const { query, setQuery, preQuery, setPreQuery } = useQueryWithDelay(
     defaultQuery,
     searchDelay,
@@ -199,39 +202,39 @@ export const ReqoreCollection = ({
 
     const toolbarGroup: IReqorePanelAction = {
       responsive: false,
-      fluid: isMobile,
-      group: [
+      icon: 'MoreLine',
+      className: 'reqore-collection-more',
+      actions: [
         {
           icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine',
           onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
           tooltip: displayButtonTooltip(_showAs),
+          label: displayButtonTooltip(_showAs),
           disabled: !size(filteredItems),
-          textAlign: 'center',
-          fixed: !isMobile,
           ...displayButtonProps,
         },
       ],
     };
 
-    if (zoomable) {
-      actions.push({
-        fluid: false,
-        group: getZoomActions('reqore-collection', zoom, setZoom),
-      });
-    }
-
     if (sortable) {
-      toolbarGroup.group.push({
+      toolbarGroup.actions.push({
         icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
         onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
         tooltip: sortButtonTooltip(sort),
+        label: sortButtonTooltip(sort),
         disabled: !size(filteredItems),
-        textAlign: 'center',
-        fixed: !isMobile,
         ...sortButtonProps,
       });
     }
 
+    if (zoomable) {
+      toolbarGroup.actions = [
+        ...toolbarGroup.actions,
+        { divider: true, line: true },
+        ...getZoomActions('reqore-collection', zoom, setZoom, true),
+      ];
+    }
+
     if (filterable && inputInTitle) {
       actions = [
         ...actions,

package/src/components/Collection/item.tsx

@@ -28,9 +28,10 @@ export interface IReqoreCollectionItemProps
     | 'isCollapsed'
     | 'unMountContentOnCollapse'
     | 'bottomActions'
+    | 'content'
   > {
   selected?: boolean;
-  content?: string | React.ReactNode;
+  content?: string | number | React.ReactNode;
   expandable?: boolean;
   expandedContent?: string | React.ReactNode;
   expandedActions?: IReqorePanelBottomAction[];

package/src/components/ExportModal/index.tsx

@@ -0,0 +1,98 @@
+import { useCallback, useMemo, useState } from 'react';
+import { stringify } from 'yaml';
+import { ReqoreTextarea, useReqoreProperty } from '../..';
+import { convertToCSV } from '../../helpers/utils';
+import { IReqoreModalProps, ReqoreModal } from '../Modal';
+import ReqoreTabs, { IReqoreTabsProps } from '../Tabs';
+import ReqoreTabsContent from '../Tabs/content';
+
+export interface IReqoreExportModalProps extends IReqoreModalProps {
+  data: { [key: string]: any } | any[];
+  sendNotificationOnCopy?: boolean;
+  tabsOptions?: Omit<IReqoreTabsProps, 'tabs'>;
+}
+
+export const ReqoreExportModal = ({
+  data,
+  sendNotificationOnCopy = true,
+  tabsOptions = {},
+  ...rest
+}: IReqoreExportModalProps) => {
+  const addNotification = useReqoreProperty('addNotification');
+  const isArray = Array.isArray(data);
+  const [tab, setTab] = useState<string>(isArray ? 'csv' : 'json');
+  const tabs: IReqoreTabsProps['tabs'] = [
+    { label: 'CSV', id: 'csv', disabled: !isArray },
+    { label: 'JSON', id: 'json' },
+    { label: 'YAML', id: 'yaml' },
+  ];
+
+  const dataToExport = useMemo(() => {
+    switch (tab) {
+      case 'csv':
+        return convertToCSV(data as any[]);
+      case 'json':
+        return JSON.stringify(data, null, 2);
+      case 'yaml':
+        return stringify(data, null, 2);
+      default:
+        return '';
+    }
+  }, [data, tab, isArray]);
+
+  const handleCopyClick = useCallback(() => {
+    navigator.clipboard.writeText(dataToExport);
+
+    if (sendNotificationOnCopy) {
+      addNotification({
+        content: 'Data copied to clipboard',
+        intent: 'success',
+        duration: 3000,
+      });
+    }
+  }, [sendNotificationOnCopy, dataToExport]);
+
+  return (
+    <ReqoreModal
+      label='Export data'
+      icon='DownloadLine'
+      {...rest}
+      isOpen
+      bottomActions={[
+        {
+          position: 'right',
+          label: 'Copy',
+          icon: 'ClipboardLine',
+          onClick: () => {
+            handleCopyClick();
+          },
+        },
+        {
+          position: 'right',
+          label: 'Copy and close',
+          icon: 'ClipboardFill',
+          onClick: () => {
+            handleCopyClick();
+            rest.onClose?.();
+          },
+        },
+      ]}
+    >
+      <ReqoreTabs
+        fillParent
+        activeTabIntent='info'
+        activeTab={isArray ? 'csv' : 'json'}
+        padded={false}
+        {...tabsOptions}
+        onTabChange={(tabId) => setTab(tabId.toString())}
+        tabs={tabs}
+      >
+        {tabs.map((tab) => (
+          <ReqoreTabsContent tabId={tab.id} key={tab.id} padded='none'>
+            <ReqoreTextarea readOnly value={dataToExport} scaleWithContent minimal />
+          </ReqoreTabsContent>
+        ))}
+      </ReqoreTabs>
+    </ReqoreModal>
+  );
+};

package/src/components/KeyValueTable/index.tsx

@@ -0,0 +1,129 @@
+import { keys } from 'lodash';
+import { useMemo } from 'react';
+import { TReqoreIntent } from '../../constants/theme';
+import { IReqoreIconName } from '../../types/icons';
+import { IReqorePanelProps } from '../Panel';
+import ReqoreTable, { IReqoreTableColumn, IReqoreTableProps, IReqoreTableRowData } from '../Table';
+import { IReqoreTableValueProps, ReqoreTableValue } from '../Table/value';
+
+export type TReqoreKeyValueTablePrimitiveValue = string | number | boolean | null | undefined;
+export type TReqoreKeyValueTableValue =
+  | TReqoreKeyValueTablePrimitiveValue
+  | TReqoreKeyValueTablePrimitiveValue[]
+  | { [key: string]: TReqoreKeyValueTableValue };
+
+export interface IReqoreKeyValueTableProps
+  extends IReqorePanelProps,
+    Pick<
+      IReqoreTableProps,
+      | 'striped'
+      | 'width'
+      | 'height'
+      | 'fill'
+      | 'filterable'
+      | 'filter'
+      | 'onFilterChange'
+      | 'filterProps'
+      | 'zoomable'
+      | 'wrapperSize'
+      | 'paging'
+    > {
+  data: { [key: string | number]: TReqoreKeyValueTableValue };
+
+  keyLabel?: string;
+  keyIcon?: IReqoreIconName;
+  keyColumnIntent?: TReqoreIntent;
+  keyAlign?: IReqoreTableColumn['align'];
+  maxKeyWidth?: number;
+
+  valueLabel?: string;
+  valueIcon?: IReqoreIconName;
+  valueAlign?: IReqoreTableColumn['align'];
+  minValueWidth?: number;
+  defaultValueFilter?: string | number;
+
+  valueRenderer?: (
+    data: IReqoreTableRowData,
+    defaultComponent?: ({ value }: IReqoreTableValueProps) => any
+  ) => any;
+}
+
+export const ReqoreKeyValueTable = ({
+  data,
+  keyLabel,
+  keyIcon,
+  valueLabel,
+  valueIcon,
+  valueRenderer,
+  keyColumnIntent = 'muted',
+  minValueWidth = 100,
+  maxKeyWidth = 200,
+  keyAlign = 'left',
+  valueAlign = 'left',
+  defaultValueFilter,
+  ...rest
+}: IReqoreKeyValueTableProps) => {
+  const { columns, items } = useMemo(() => {
+    let columns: IReqoreTableColumn[] = [
+      {
+        dataId: 'tableKey',
+        grow: 1,
+        width: maxKeyWidth < 150 ? maxKeyWidth : 150,
+        pin: 'left',
+        hideable: false,
+        intent: keyColumnIntent,
+        maxWidth: maxKeyWidth,
+        align: keyAlign,
+
+        header: {
+          icon: keyIcon,
+          label: keyLabel,
+        },
+
+        cell: {
+          content: 'title',
+        },
+      },
+      {
+        dataId: 'value',
+        grow: 3,
+        hideable: false,
+        filterable: true,
+        pinnable: false,
+        minWidth: minValueWidth,
+        filter: defaultValueFilter,
+        align: valueAlign,
+
+        header: {
+          icon: valueIcon,
+          label: valueLabel,
+        },
+
+        cell: {
+          content: (data) =>
+            valueRenderer?.(data, ReqoreTableValue) || <ReqoreTableValue value={data.value} />,
+        },
+      },
+    ];
+
+    let items: IReqoreTableRowData[] = [];
+
+    keys(data).map((key) => {
+      items.push({
+        tableKey: key,
+        value: data[key],
+      });
+    });
+
+    return { columns, items };
+  }, [data]);
+
+  return (
+    <ReqoreTable
+      columns={columns}
+      data={items}
+      {...rest}
+      className={`${rest.className || ''} reqore-key-value-table`}
+    />
+  );
+};

package/src/components/Menu/item.tsx

@@ -17,7 +17,7 @@ export interface IReqoreMenuItemProps
   selected?: boolean;
   itemId?: string;
   onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
-  onClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLElement>, itemId?: string) => void;
   scrollIntoView?: boolean;
 }
 
@@ -59,12 +59,12 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
   ) => {
     const { removePopover } = useContext(PopoverContext);
     const { targetRef } = useCombinedRefs<HTMLButtonElement>(ref);
-    const [itemRef, setItemRef] = useState<HTMLButtonElement>(undefined);
+    const [itemRef, setItemRef] = useState<HTMLButtonElement | null>(null);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       event.persist();
 
-      onClick?.(itemId, event);
+      onClick?.(event, itemId);
 
       if (_insidePopover && _popoverId) {
         removePopover!(_popoverId);
@@ -102,7 +102,7 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
           onClick={handleClick}
           active={selected}
           ref={(ref) => {
-            targetRef.current = ref;
+            targetRef.current = ref || undefined;
             setItemRef(ref);
           }}
           disabled={disabled}

package/src/components/Notifications/notification.tsx

@@ -236,7 +236,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
       onFinish,
       flat,
       minimal,
-      opaque,
+      opaque = true,
       size = 'normal',
       customTheme,
     },
@@ -287,7 +287,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
             hasShadow
             timeout={duration}
             clickable={!!onClick}
-            onClick={onClick}
+            onClick={() => onClick?.()}
             flat={flat}
             minimal={minimal}
             className='reqore-notification'

package/src/components/Panel/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { size } from 'lodash';
+import { isArray, size } from 'lodash';
 import { darken, rgba } from 'polished';
 import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
@@ -379,7 +379,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         collapsible ||
         !!onClose ||
         !!size(actions.filter(isActionShown)) ||
-        !!badge ||
+        !!(isArray(badge) ? size(badge) : badge) ||
         !!icon,
       [label, collapsible, onClose, actions, badge, icon]
     );

package/src/components/Table/body.tsx

@@ -1,3 +1,4 @@
+import count from 'lodash/size';
 import { forwardRef, useMemo } from 'react';
 import { useMount } from 'react-use';
 import { FixedSizeList as List } from 'react-window';
@@ -14,7 +15,7 @@ export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
     main: React.RefObject<HTMLDivElement>;
     header: React.RefObject<HTMLDivElement>;
   };
-  type?: 'left' | 'right' | 'main';
+  type: 'left' | 'right' | 'main';
   onScrollChange?: (isScrolled: boolean) => void;
 }
 
@@ -73,13 +74,15 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
       [size, rest.flat]
     );
 
+    const itemCount = useMemo(() => count(data), [data]);
+
     return (
       <StyledList
         outerRef={targetRef}
-        itemCount={data.length}
+        itemCount={itemCount}
         // If the defined height is less than the count of items' height
         // use that height instead
-        height={height > data.length * rowHeight ? data.length * rowHeight : height}
+        height={height > itemCount * rowHeight ? itemCount * rowHeight : height}
         className='reqore-table-body'
         itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
         itemData={{