@qoretechnologies/reqore 0.36.0 → 0.36.2

package/src/components/Tree/index.tsx

@@ -1,14 +1,15 @@
 import { cloneDeep, size as lodashSize } from 'lodash';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { ReqoreMessage, ReqorePanel, ReqoreTextarea, useReqoreProperty } from '../..';
+import { ReqoreMessage, ReqorePanel, useReqoreProperty } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
 import { getTypeFromValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
-import { IReqorePanelProps } from '../Panel';
-import { getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
+import { ReqoreExportModal } from '../ExportModal';
+import { IReqorePanelAction, IReqorePanelProps } from '../Panel';
+import { getExportActions, getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
 import ReqoreTag from '../Tag';
 
 export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
@@ -20,6 +21,7 @@ export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
   withLabelCopy?: boolean;
   showControls?: boolean;
   zoomable?: boolean;
+  exportable?: boolean;
   defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
 }
 
@@ -41,29 +43,23 @@ export const ReqoreTree = ({
   onItemClick,
   withLabelCopy,
   showControls = true,
+
+  exportable,
   zoomable,
   defaultZoom,
   ...rest
 }: IReqoreTreeProps) => {
-  const [_mode, setMode] = useState<'tree' | 'copy'>(mode);
   const [items, setItems] = useState({});
   const [allExpanded, setAllExpanded] = useState(expanded || !showControls);
   const [_showTypes, setShowTypes] = useState(showTypes);
   const addNotification = useReqoreProperty('addNotification');
   const [zoom, setZoom] = useState(defaultZoom || sizeToZoom[size]);
-
-  const handleCopyClick = () => {
-    setMode('copy');
-  };
+  const [showExportModal, setShowExportModal] = useState<'full' | 'current' | undefined>(undefined);
 
   const handleTypesClick = () => {
     setShowTypes(!_showTypes);
   };
 
-  const handleTreeClick = () => {
-    setMode('tree');
-  };
-
   const handleExpandClick = () => {
     setItems({});
     setAllExpanded(true);
@@ -173,73 +169,84 @@ export const ReqoreTree = ({
     return text;
   };
 
+  const actions = useMemo(() => {
+    let _actions: IReqorePanelAction[] = [];
+
+    if (showControls) {
+      _actions = [
+        {
+          className: 'reqore-tree-expand-all',
+          icon: 'ArrowDownFill',
+          onClick: handleExpandClick,
+          show: !!(isDeep() && !allExpanded),
+          label: 'Expand all',
+        },
+        {
+          show: !!(isDeep() && (allExpanded || lodashSize(items) > 0)),
+          className: 'reqore-tree-collapse-all',
+          icon: 'ArrowUpFill',
+          onClick: handleCollapseClick,
+
+          label: 'Collapse all',
+        },
+        {
+          className: 'reqore-tree-show-types',
+          icon: 'CodeBoxFill',
+          active: _showTypes,
+          onClick: handleTypesClick,
+          label: 'Show types',
+        },
+      ];
+    }
+
+    if (zoomable || exportable) {
+      const moreActions: IReqorePanelAction = {
+        className: 'reqore-tree-more',
+        icon: 'MoreLine',
+        actions: [],
+      };
+
+      if (zoomable) {
+        moreActions.actions = [
+          ...moreActions.actions,
+          ...getZoomActions('reqore-tree', zoom, setZoom, true),
+        ];
+      }
+
+      if (exportable) {
+        moreActions.actions = [
+          ...moreActions.actions,
+          { divider: true, line: true },
+          ...getExportActions((type) => setShowExportModal(type)),
+        ];
+      }
+
+      _actions = [..._actions, moreActions];
+    }
+
+    return _actions;
+  }, [allExpanded, items, showControls, _showTypes, isDeep(), zoom]);
+
   if (!data || !Object.keys(data).length) {
     return <p>No data</p>;
   }
 
-  const textData: string = renderText(data);
-
   return (
-    <ReqorePanel
-      className='reqore-tree'
-      minimal
-      flat
-      transparent
-      size={size}
-      {...rest}
-      actions={
-        showControls
-          ? [
-              {
-                fluid: false,
-                group: getZoomActions('reqore-tree', zoom, setZoom),
-                show: !!zoomable,
-              },
-              {
-                className: 'reqore-tree-expand-all',
-                icon: 'ArrowDownFill',
-                onClick: handleExpandClick,
-                show: !!(isDeep() && !allExpanded),
-                label: 'Expand all',
-              },
-              {
-                show: !!(isDeep() && (allExpanded || lodashSize(items) > 0)),
-                className: 'reqore-tree-collapse-all',
-                icon: 'ArrowUpFill',
-                onClick: handleCollapseClick,
-
-                label: 'Collapse all',
-              },
-              {
-                className: 'reqore-tree-show-types',
-                icon: 'CodeBoxFill',
-                active: _showTypes,
-                onClick: handleTypesClick,
-                label: 'Show types',
-              },
-              {
-                className: _mode === 'tree' ? 'reqore-tree-as-text' : 'reqore-tree-as-tree',
-                onClick: _mode === 'tree' ? handleCopyClick : handleTreeClick,
-                icon: _mode === 'tree' ? 'Menu2Fill' : 'ClipboardFill',
-                label: _mode === 'tree' ? 'Text View' : 'Tree View',
-              },
-            ]
-          : undefined
-      }
-    >
-      {_mode === 'tree' && renderTree(data, true)}
-
-      {_mode === 'copy' && (
-        <ReqoreTextarea
-          className='reqore-tree-textarea'
-          id='tree-content'
-          value={textData}
-          scaleWithContent
-          size={size}
-          fluid
-          readOnly
-        />
+    <>
+      {showExportModal && (
+        <ReqoreExportModal data={data} onClose={() => setShowExportModal(undefined)} />
       )}
-    </ReqorePanel>
+      <ReqorePanel
+        className='reqore-tree'
+        minimal
+        flat
+        transparent
+        size={size}
+        {...rest}
+        actions={actions}
+      >
+        {renderTree(data, true)}
+      </ReqorePanel>
+    </>
   );
 };

package/src/constants/sizes.ts

@@ -110,11 +110,11 @@ export const TEXT_FROM_SIZE = {
 };
 
 export const ICON_FROM_SIZE = {
-  tiny: 11,
-  small: 14,
-  normal: 17,
-  big: 20,
-  huge: 23,
+  tiny: 13,
+  small: 17,
+  normal: 20,
+  big: 26,
+  huge: 33,
 };
 
 export const PADDING_FROM_SIZE = {

package/src/helpers/utils.ts

@@ -45,14 +45,22 @@ export const getTypeFromValue: Function = (item: any): string => {
   return 'null';
 };
 
-export const getLineCount = (value: string): number => {
+export const getLineCount = (value: string | null): number => {
   try {
-    return value.match(/[^\n]*\n[^\n]*/gi).length;
+    return value?.match(/[^\n]*\n[^\n]*/gi)?.length ?? 0;
   } catch (e) {
     return 0;
   }
 };
 
+// A function that takes list of objects and transforms it
+// to a CSV string
+export const convertToCSV = (objArray: any[]): string => {
+  const header = Object.keys(objArray[0]).join(',');
+  const rows = objArray.map((obj) => Object.values(obj).join(','));
+  return [header, ...rows].join('\n');
+};
+
 export const calculateStringSizeInPixels = (value: string = '', fontSize: number): number => {
   const widths = [
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

package/src/hooks/useAutoFocus.ts

@@ -15,7 +15,7 @@ export interface IReqoreAutoFocusRules {
 export const useAutoFocus = (
   element: HTMLInputElement | HTMLTextAreaElement,
   rules?: IReqoreAutoFocusRules,
-  onChange?: (e: unknown) => void
+  onChange?: (event: any) => void
 ) => {
   const isInViewport = useRef<boolean>(false);
   const observer = useRef<IntersectionObserver>(null);

package/src/index.tsx

@@ -24,7 +24,7 @@ export {
 } from './components/Header';
 export { default as ReqoreIcon } from './components/Icon';
 export { default as ReqoreInput } from './components/Input';
-export { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from './components/KeyValueTable';
+export { ReqoreKeyValueTable } from './components/KeyValueTable';
 export { default as ReqoreLayoutContent } from './components/Layout/content';
 export { default as ReqoreMenu } from './components/Menu';
 export { default as ReqoreMenuDivider } from './components/Menu/divider';

package/src/mock/tableData.ts

@@ -1,6 +1,18 @@
 import { IReqoreTableProps } from '../components/Table';
 import data from './data.json';
 
+export type TestTableItem = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  address: string;
+  age: number;
+  occupation: string;
+  group: string;
+  _selectId: number;
+  _disabled: boolean;
+};
+
 export const tableData = data;
 export const testColumns: IReqoreTableProps['columns'] = [
   {

package/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,38 +1,26 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IReqoreBreadcrumbItem, IReqoreBreadcrumbsProps } from '../../components/Breadcrumbs';
+import { StoryObj } from '@storybook/react';
 import { ReqoreBreadcrumbs } from '../../index';
 import breadcrumbs, { breadcrumbsTabs } from '../../mock/breadcrumbs';
-import { buildTemplate } from '../utils';
+import { StoryMeta } from '../utils';
 import { SizeArg } from '../utils/args';
 
-export default {
+const meta = {
   title: 'Navigation/Breadcrumbs/Stories',
+  component: ReqoreBreadcrumbs,
   argTypes: {
     withTabs: {
       name: 'With tabs',
-      defaultValue: false,
       description: 'Whether tabs should be shown alongside the breadcrumbs',
       control: 'boolean',
     },
     ...SizeArg,
   },
-} as ComponentMeta<typeof ReqoreBreadcrumbs & { withTabs?: boolean }>;
+  args: { items: breadcrumbs },
+} as StoryMeta<typeof ReqoreBreadcrumbs>;
 
-const Template: ComponentStory<typeof ReqoreBreadcrumbs & { withTabs?: boolean }> = (
-  args: IReqoreBreadcrumbsProps & { withTabs?: boolean }
-) => {
-  const items = args.withTabs ? [...breadcrumbs, breadcrumbsTabs] : breadcrumbs;
-  const customTheme = args.customTheme ? { main: args.customTheme } : undefined;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-  return (
-    <ReqoreBreadcrumbs
-      {...args}
-      items={items as IReqoreBreadcrumbItem[]}
-      customTheme={customTheme as any}
-    />
-  );
-};
-
-export const Default = buildTemplate(Template);
-export const WithTabs = buildTemplate(Template, { withTabs: true });
-export const Flat = buildTemplate(Template, { flat: true });
+export const Default: Story = {};
+export const WithTabs: Story = { args: { items: [...breadcrumbs, breadcrumbsTabs] } };
+export const Flat: Story = { args: { flat: true } };

package/src/stories/Button/Button.stories.tsx

@@ -1,23 +1,28 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import ReqoreButton from '../../components/Button';
-import { IReqoreTheme } from '../../constants/theme';
 import { ReqoreControlGroup } from '../../index';
+import { StoryMeta } from '../utils';
 import { IconArg, SizeArg } from '../utils/args';
 
-export default {
+const meta = {
   title: 'Form/Button/Stories',
-  parameters: {
-    jest: ['button.test.tsx'],
-  },
+  component: ReqoreButton,
   argTypes: {
     ...IconArg('icon', 'Icon'),
     ...IconArg('rightIcon', 'Right Icon'),
     ...SizeArg,
   },
-} as ComponentMeta<typeof ReqoreButton>;
+  args: {
+    icon: '24HoursFill',
+    rightIcon: '24HoursFill',
+  },
+} as StoryMeta<typeof ReqoreButton>;
 
-const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
   return (
     <ReqoreControlGroup vertical gapSize='big'>
       <ReqoreControlGroup size={buttonProps.size} wrap>
@@ -246,54 +251,85 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   );
 };
 
-export const Default = Template.bind({});
-export const Info = Template.bind({});
-Info.args = {
-  intent: 'info',
+export const Default: Story = {
+  render: Template,
 };
-export const Success = Template.bind({});
-Success.args = {
-  intent: 'success',
+
+export const Info: Story = {
+  render: Template,
+
+  args: {
+    intent: 'info',
+  },
 };
-export const Warning = Template.bind({});
-Warning.args = {
-  intent: 'warning',
+
+export const Success: Story = {
+  render: Template,
+
+  args: {
+    intent: 'success',
+  },
+};
+
+export const Warning: Story = {
+  render: Template,
+
+  args: {
+    intent: 'warning',
+  },
 };
-export const Pending = Template.bind({});
-Pending.args = {
-  intent: 'pending',
+
+export const Pending: Story = {
+  render: Template,
+
+  args: {
+    intent: 'pending',
+  },
 };
-export const Danger = Template.bind({});
-Danger.args = {
-  intent: 'danger',
+
+export const Danger: Story = {
+  render: Template,
+
+  args: {
+    intent: 'danger',
+  },
 };
-export const Muted = Template.bind({});
-Muted.args = {
-  intent: 'muted',
+
+export const Muted: Story = {
+  render: Template,
+
+  args: {
+    intent: 'muted',
+  },
 };
-export const Effect: ComponentStory<typeof ReqoreButton> = Template.bind({});
-Effect.args = {
-  effect: {
-    gradient: {
-      direction: 'to right bottom',
-      colors: { 0: '#33023c', 100: '#0a487b' },
-      animate: 'active',
+
+export const Effect: Story = {
+  render: Template,
+
+  args: {
+    effect: {
+      gradient: {
+        direction: 'to right bottom',
+        colors: { 0: '#33023c', 100: '#0a487b' },
+        animate: 'active',
+      },
+      spaced: 2,
+      uppercase: true,
+      weight: 'thick',
+      textSize: 'small',
     },
-    spaced: 2,
-    uppercase: true,
-    weight: 'thick',
-    textSize: 'small',
   },
 };
 
-export const GlobalEffect: ComponentStory<
-  typeof ReqoreButton & { otherThemeOptions?: IReqoreTheme }
-> = Template.bind({});
-GlobalEffect.args = {
-  otherThemeOptions: {
-    buttons: {
-      gradient: true,
-      animate: 'active',
+export const GlobalEffect: Story = {
+  render: Template,
+
+  args: {
+    otherThemeOptions: {
+      buttons: {
+        gradient: true,
+        animate: 'active',
+      },
     },
   },
-} as any;
+};

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,13 +1,17 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
 import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
+import { StoryMeta } from '../utils';
 
-export default {
+const meta = {
   title: 'Form/Checkbox/Stories',
-  parameters: ['checkbox.test.tsx'],
-} as ComponentMeta<typeof Checkbox>;
+  component: ReqoreCheckbox,
+} as StoryMeta<typeof ReqoreCheckbox>;
 
-const Template: ComponentStory<typeof Checkbox> = (args) => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<typeof Checkbox> = (args) => {
   return (
     <ReqoreControlGroup vertical>
       <ReqoreControlGroup wrap>
@@ -58,8 +62,14 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const Switch = Template.bind({});
-Switch.args = {
-  asSwitch: true,
+export const Basic: Story = {
+  render: Template,
+};
+
+export const Switch: Story = {
+  render: Template,
+
+  args: {
+    asSwitch: true,
+  },
 };