@qoretechnologies/reqore 0.34.13 → 0.35.1

package/src/stories/Paging/Paging.stories.tsx

@@ -7,7 +7,7 @@ import { ReqoreControlGroup, ReqoreTag, useReqorePaging } from '../../index';
 import { tableData } from '../../mock/tableData';
 
 export default {
-  title: 'Components/Paging',
+  title: 'Collections/Paging/Stories',
 } as StoryObj<typeof ReqorePagination>;
 
 const Template: Story<IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }> =

package/src/stories/Panel/Panel.stories.tsx

@@ -11,7 +11,7 @@ import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args'
 const { createArg } = argManager<IReqorePanelProps>();
 
 export default {
-  title: 'Components/Panel',
+  title: 'Layout/Panel/Stories',
   parameters: {
     chromatic: {
       viewports: [450, 600, 1440],
@@ -230,8 +230,8 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         {
           label: 'More actions',
           actions: [
-            { value: 'Sub Test', icon: 'FileDownloadLine' },
-            { value: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
+            { label: 'Sub Test', icon: 'FileDownloadLine' },
+            { label: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
           ],
           intent: 'info',
         },
@@ -249,8 +249,8 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           label: 'More actions',
           position: 'right',
           actions: [
-            { value: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
-            { value: 'Sub Test 2', icon: 'FileDownloadLine' },
+            { label: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
+            { label: 'Sub Test 2', icon: 'FileDownloadLine' },
           ],
         },
       ]}

package/src/stories/Paragraph/Paragraph.stories.tsx

@@ -4,7 +4,7 @@ import { ReqoreParagraph, ReqoreVerticalSpacer } from '../../index';
 import { IntentArg } from '../utils/args';
 
 export default {
-  title: 'Components/Paragraph',
+  title: 'Other/Paragraph/Stories',
   argTypes: {
     ...IntentArg,
   },

package/src/stories/Popover/Popover.stories.tsx

@@ -11,12 +11,12 @@ import {
   ReqorePopover,
   ReqoreSpacer,
 } from '../../index';
-import { argManager, FlatArg } from '../utils/args';
+import { FlatArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePopoverProps>();
 
 export default {
-  title: 'Components/Popover',
+  title: 'Other/Popover/Stories',
   argTypes: {
     ...createArg('transparent', {
       defaultValue: false,

package/src/stories/RadioGroup/RadioGroup.stories.tsx

@@ -6,7 +6,7 @@ import { DisabledArg, SizeArg, argManager } from '../utils/args';
 const { createArg } = argManager<IReqoreRadioGroupProps>();
 
 export default {
-  title: 'Components/Radio Group',
+  title: 'Form/Radio Group/Stories',
   argTypes: {
     ...createArg('asSwitch', {
       type: 'boolean',

package/src/stories/Sidebar/Sidebar.stories.tsx

@@ -3,12 +3,12 @@ import { noop } from 'lodash';
 import { IQorusSidebarProps } from '../../components/Sidebar';
 import { ReqorePanel, ReqoreSidebar } from '../../index';
 import { qorusSidebarItems } from '../../mock/menu';
-import { argManager, FlatArg, NoContentArg } from '../utils/args';
+import { FlatArg, NoContentArg, argManager } from '../utils/args';
 
 const { disableArg, createArg } = argManager<IQorusSidebarProps>();
 
 export default {
-  title: 'Components/Sidebar',
+  title: 'Navigation/Sidebar/Stories',
   argTypes: {
     ...disableArg('items'),
     ...FlatArg,

package/src/stories/Spacer/Spacer.stories.tsx

@@ -7,7 +7,7 @@ import {
 import { ReqorePanel } from '../../index';
 
 export default {
-  title: 'Components/Spacer',
+  title: 'Utilities/Spacer/Stories',
 } as Meta;
 
 const Template: Story<IReqoreSpacerProps> = () => {

package/src/stories/Spinner/Spinner.stories.tsx

@@ -3,7 +3,7 @@ import { IReqoreSpinnerProps, ReqoreSpinner } from '../../components/Spinner';
 import { ReqoreControlGroup } from '../../index';
 
 export default {
-  title: 'Components/Spinner',
+  title: 'Utilities/Spinner/Stories',
 } as Meta;
 
 const Template: Story<IReqoreSpinnerProps> = (args) => {

package/src/stories/Table/Table.stories.tsx

@@ -1,13 +1,219 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
+import { StyledEffect } from '../../components/Effect';
 import { IReqoreTableColumn, IReqoreTableProps } from '../../components/Table';
-import { ReqoreTable } from '../../index';
+import { IReqoreCustomTableBodyCellProps } from '../../components/Table/cell';
+import { IReqoreCustomHeaderCellProps } from '../../components/Table/header';
+import {
+  ReqoreH3,
+  ReqoreH4,
+  ReqoreIcon,
+  ReqoreInput,
+  ReqoreP,
+  ReqoreTable,
+  ReqoreTag,
+} from '../../index';
 import tableData from '../../mock/tableData';
-import { argManager, CustomIntentArg, FlatArg, IntentArg, SizeArg } from '../utils/args';
+import { CustomIntentArg, FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTableProps>();
 
+const defaultColumns: IReqoreTableColumn[] = [
+  {
+    dataId: 'id',
+    header: {
+      label: 'ID',
+      tooltip: 'Custom ID tooltip nice',
+    },
+    cell: {
+      content: 'tag',
+    },
+    width: 80,
+    align: 'center',
+    sortable: true,
+  },
+  {
+    header: {
+      label: 'Name',
+      columns: [
+        {
+          dataId: 'firstName',
+          header: {
+            icon: 'SlideshowLine',
+            label: 'First Name',
+            effect: {
+              gradient: {
+                colors: {
+                  0: 'success',
+                  100: 'info',
+                },
+              },
+            },
+          },
+          cell: {
+            padded: 'none',
+            content: ({ _size, firstName }) => (
+              <ReqoreInput icon='PriceTag2Fill' size={_size} value={firstName} />
+            ),
+          },
+          width: 150,
+          grow: 2,
+        },
+        {
+          dataId: 'lastName',
+          header: {
+            icon: 'SlideshowLine',
+            label: 'Last Name',
+          },
+          width: 150,
+          grow: 1,
+          sortable: true,
+          cell: {
+            onClick: ({ lastName }) => alert(`Clicked last name cell ${lastName}`),
+            content: 'title:info',
+          },
+        },
+      ],
+    },
+    dataId: 'name',
+    grow: 3,
+  },
+  {
+    dataId: 'address',
+    header: {
+      label: 'Address',
+      description: 'This is the address',
+      onClick: () => alert('clicked address'),
+    },
+    width: 300,
+    grow: 2,
+    resizable: false,
+  },
+  {
+    dataId: 'age',
+    header: {
+      label: 'Really long age header',
+      icon: 'User4Line',
+      tooltip: 'Custom age tooltip',
+      actions: [
+        {
+          label: 'Do something',
+          icon: 'EBike2Fill',
+        },
+      ],
+    },
+    width: 100,
+    align: 'center',
+    sortable: true,
+
+    cell: {
+      intent: 'danger',
+      content: 'tag:#000000',
+      tooltip: (value) => `Age is ${value}`,
+      onClick: ({ age }) => alert(`Clicked age cell ${age}`),
+    },
+  },
+  {
+    header: {
+      label: 'Data',
+      columns: [
+        {
+          dataId: 'occupation',
+          header: { label: 'Ocuppation' },
+          width: 200,
+          cell: { content: 'text:warning' },
+          filterable: true,
+          filterPlaceholder: 'Search occupation',
+        },
+        {
+          dataId: 'group',
+          align: 'right',
+          header: { label: <ReqoreTag label='Group' icon='Group2Line' size='small' /> },
+          width: 150,
+          cell: { intent: 'muted' },
+          filterable: true,
+        },
+      ],
+    },
+    dataId: 'data',
+  },
+  {
+    dataId: 'date',
+    header: { label: 'Date' },
+    sortable: true,
+    grow: 2,
+    width: 150,
+    cell: {
+      content: 'time-ago',
+      tooltip: () => ({
+        title: 'Custom tooltip',
+        content: 'This is a custom tooltip',
+        effect: {
+          gradient: {
+            colors: {
+              0: 'warning',
+              100: 'info',
+            },
+          },
+        },
+      }),
+    },
+  },
+];
+
+const defaultColumnsWithFilters = defaultColumns.map((column, index) => {
+  if (index === 4) {
+    return {
+      ...column,
+      header: {
+        ...column.header,
+        columns: column.header.columns.map((subColumn, subIndex) =>
+          subIndex === 0
+            ? {
+                ...subColumn,
+                filter: 'Advisor',
+              }
+            : {
+                ...subColumn,
+                filter: 'net',
+              }
+        ),
+      },
+    };
+  }
+
+  return column;
+});
+
+const defaultColumnsWithHiddenColumns = defaultColumns.map((column, index) => {
+  if (index === 4) {
+    return {
+      ...column,
+      header: {
+        ...column.header,
+        columns: column.header.columns.map((subColumn, subIndex) =>
+          subIndex === 0
+            ? {
+                ...subColumn,
+                show: false,
+              }
+            : subColumn
+        ),
+      },
+    };
+  }
+
+  if (index === 2) {
+    return {
+      ...column,
+      show: false,
+    };
+  }
+
+  return column;
+});
+
 export default {
-  title: 'Components/Table',
+  title: 'Collections/Table/Stories',
   argTypes: {
     ...createArg('rounded', {
       type: 'boolean',
@@ -26,77 +232,11 @@ export default {
     }),
     ...createArg('columns', {
       name: 'Columns',
-      defaultValue: [
-        {
-          dataId: 'id',
-          header: 'ID',
-          width: 50,
-          align: 'center',
-          sortable: true,
-          tooltip: 'Custom ID tooltip nice',
-          content: 'tag',
-        },
-        {
-          header: 'Name',
-          dataId: 'name',
-          grow: 3,
-          columns: [
-            {
-              icon: 'SlideshowLine',
-              dataId: 'firstName',
-              header: 'First Name',
-              width: 150,
-              grow: 2,
-            },
-            {
-              icon: 'SlideshowLine',
-              dataId: 'lastName',
-              header: 'Last Name',
-              width: 150,
-              grow: 1,
-              sortable: true,
-              onCellClick: ({ lastName }) => alert(`Clicked last name cell ${lastName}`),
-              content: 'title:info',
-            },
-          ],
-        },
-        {
-          dataId: 'address',
-          header: 'Address',
-          width: 300,
-          grow: 2,
-          onClick: () => alert('clicked address'),
-        },
-        {
-          icon: 'User4Line',
-          dataId: 'age',
-          header: 'Really long age header',
-          width: 50,
-          align: 'center',
-          sortable: true,
-          intent: 'danger',
-          content: 'tag:#000000',
-          onCellClick: ({ age }) => alert(`Clicked age cell ${age}`),
-        },
-        {
-          header: 'Data',
-          dataId: 'data',
-          columns: [
-            { dataId: 'occupation', header: 'Ocuppation', width: 200, content: 'text:warning' },
-            { dataId: 'group', header: 'Group', width: 150, intent: 'muted' },
-          ],
-        },
-        {
-          dataId: 'date',
-          header: 'Date',
-          sortable: true,
-          content: 'time-ago',
-        },
-      ] as IReqoreTableColumn[],
+      defaultValue: defaultColumns,
     }),
     ...createArg('width', {
       type: 'number',
-      defaultValue: 800,
+      defaultValue: undefined,
       name: 'Width',
       description: 'The width of the table',
     }),
@@ -135,28 +275,107 @@ export default {
 } as Meta<IReqoreTableProps>;
 
 const Template: Story<IReqoreTableProps> = (args) => {
-  return <ReqoreTable {...args} sort={{ by: 'age', direction: 'desc' }} />;
+  return <ReqoreTable label='Table' {...args} sort={{ by: 'lastName', direction: 'desc' }} />;
 };
 
 export const Basic = Template.bind({});
-export const Flat = Template.bind({});
-Flat.args = {
-  flat: true,
+export const NoLabel = Template.bind({});
+NoLabel.args = {
+  label: undefined,
+};
+
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
+  width: 400,
+};
+
+export const NotFlat = Template.bind({});
+NotFlat.args = {
+  flat: false,
 };
 export const Striped = Template.bind({});
 Striped.args = {
   striped: true,
 };
-export const Rounded = Template.bind({});
-Rounded.args = {
-  rounded: true,
+export const Filterable = Template.bind({});
+Filterable.args = {
+  filterable: true,
+};
+export const DefaultFilter = Template.bind({});
+DefaultFilter.args = {
+  filterable: true,
+  filter: 'Village',
+};
+
+export const NoDataMessage = Template.bind({});
+NoDataMessage.args = {
+  filterable: true,
+  filter: 'asjkghakshgjkashg',
+};
+
+export const FilterableColumns = Template.bind({});
+FilterableColumns.args = {
+  columns: defaultColumnsWithFilters,
 };
+
+export const AllFiltersActive = Template.bind({});
+AllFiltersActive.args = {
+  filterable: true,
+  filter: 'Road',
+  columns: defaultColumnsWithFilters,
+};
+
+export const HiddenColumns = Template.bind({});
+HiddenColumns.args = {
+  columns: defaultColumnsWithHiddenColumns,
+};
+
 export const Selectable = Template.bind({});
 Selectable.args = {
   selectable: true,
 };
 
+export const Zoomable = Template.bind({});
+Zoomable.args = {
+  zoomable: true,
+};
+
 export const FillParent = Template.bind({});
 FillParent.args = {
   fill: true,
 };
+
+export const Sizes = Template.bind({});
+Sizes.args = {
+  size: 'small',
+  filterable: true,
+  wrapperSize: 'big',
+};
+
+const CustomHeaderCell = (props: IReqoreCustomHeaderCellProps) => {
+  if (props.hasColumns) {
+    return <ReqoreH3 intent='success'>{props.label}</ReqoreH3>;
+  }
+
+  return (
+    <ReqoreH4 style={{ width: props.width, flexGrow: props.grow }}>
+      <ReqoreIcon icon={props.icon} />
+      {props.label}
+    </ReqoreH4>
+  );
+};
+
+const CustomCell = (props: IReqoreCustomTableBodyCellProps) => {
+  return <ReqoreP style={{ width: props.width, flexGrow: props.grow }}>{props.children}</ReqoreP>;
+};
+
+const CustomRow = (props: IReqoreCustomTableBodyCellProps) => {
+  return <StyledEffect style={props.style}>{props.children}</StyledEffect>;
+};
+
+export const CustomCellsAndRows = Template.bind({});
+CustomCellsAndRows.args = {
+  headerCellComponent: CustomHeaderCell,
+  bodyCellComponent: CustomCell,
+  rowComponent: CustomRow,
+};

package/src/stories/Tabs/Tabs.stories.tsx

@@ -103,7 +103,7 @@ const tabs = [
 const { createArg } = argManager<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }>();
 
 export default {
-  title: 'Components/Tabs',
+  title: 'Navigation/Tabs/Stories',
   argTypes: {
     ...SizeArg,
     ...IntentArg,

package/src/stories/Tag/Tag.stories.tsx

@@ -8,7 +8,7 @@ import { SizeArg, argManager } from '../utils/args';
 const { createArg } = argManager<IReqoreTagGroup & IReqoreTagProps>();
 
 export default {
-  title: 'Components/Tag',
+  title: 'Form/Tag/Stories',
   argTypes: {
     ...SizeArg,
     ...createArg('columns', {

package/src/stories/TextArea/TextArea.stories.tsx

@@ -2,12 +2,12 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import { IReqoreTextareaProps } from '../../components/Textarea';
 import { ReqoreControlGroup, ReqoreTextarea } from '../../index';
-import { argManager, DisabledArg, MinimalArg, SizeArg } from '../utils/args';
+import { DisabledArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTextareaProps>();
 
 export default {
-  title: 'Components/TextArea',
+  title: 'Form/TextArea/Stories',
   argTypes: {
     ...MinimalArg(),
     ...DisabledArg,

package/src/stories/Tree/Tree.stories.tsx

@@ -2,12 +2,12 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import { IReqoreTreeProps, ReqoreTree } from '../../components/Tree';
 import MockObject from '../../mock/object.json';
-import { argManager, SizeArg } from '../utils/args';
+import { SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTreeProps>();
 
 export default {
-  title: 'Components/Tree',
+  title: 'Collections/Tree/Stories',
   argTypes: {
     ...createArg('withLabelCopy', {
       name: 'With label copy',

package/src/stories/utils/args.ts

@@ -81,7 +81,7 @@ export const FlatArg = {
   ...argManager<any>().createArg('flat', {
     description: 'Whether the component should be flat',
     name: 'Flat',
-    defaultValue: false,
+    defaultValue: undefined,
     control: {
       type: 'boolean',
     },