@qoretechnologies/reqore 0.20.1 → 0.20.2

package/src/index.tsx

@@ -0,0 +1,51 @@
+export { default as ReqoreBreadcrumbs } from './components/Breadcrumbs';
+export { default as ReqoreBreadcrumbsItem } from './components/Breadcrumbs/item';
+export { default as ReqoreButton } from './components/Button';
+export { default as ReqoreCheckbox } from './components/Checkbox';
+export { ReqoreColumns } from './components/Columns';
+export { ReqoreColumn } from './components/Columns/column';
+export { ReqoreComment } from './components/Comment';
+export { ReqoreCommentFeed } from './components/CommentFeed';
+export { default as ReqoreContent } from './components/Content';
+export { default as ReqoreControlGroup } from './components/ControlGroup';
+export { ReqoreDrawer } from './components/Drawer';
+export { default as ReqoreDropdown } from './components/Dropdown';
+export { ReqoreDropdownDivider, ReqoreDropdownItem } from './components/Dropdown/item';
+export { ReqoreH1, ReqoreH2, ReqoreH3, ReqoreH4, ReqoreH5, ReqoreH6 } from './components/Header';
+export { default as ReqoreIcon } from './components/Icon';
+export { default as ReqoreInput } from './components/Input';
+export { default as ReqoreLayoutContent } from './components/Layout/content';
+export { default as ReqoreMenu } from './components/Menu';
+export { default as ReqoreMenuDivider } from './components/Menu/divider';
+export { default as ReqoreMenuItem } from './components/Menu/item';
+export { default as ReqoreMessage } from './components/Message';
+export { ReqoreModal } from './components/Modal';
+export { ReqoreModalActions, ReqoreModalActionsGroup } from './components/Modal/actions';
+export { ReqoreModalContent } from './components/Modal/content';
+export { ReqoreFooter, ReqoreHeader } from './components/Navbar';
+export { default as ReqoreNavbarDivider } from './components/Navbar/divider';
+export { default as ReqoreNavbarGroup } from './components/Navbar/group';
+export { default as ReqoreNavbarItem } from './components/Navbar/item';
+export { default as ReqoreNotificationsWrapper } from './components/Notifications';
+export { default as ReqoreNotification } from './components/Notifications/notification';
+export { ReqorePanel } from './components/Panel';
+export { ReqoreP, ReqoreP as ReqoreParagraph } from './components/Paragraph';
+export { default as ReqorePopover } from './components/Popover';
+export { default as ReqoreRadioGroup } from './components/RadioGroup';
+export { default as ReqoreSidebar } from './components/Sidebar';
+export { default as ReqoreTable } from './components/Table';
+export { default as ReqoreTabs } from './components/Tabs';
+export { default as ReqoreTabsContent } from './components/Tabs/content';
+export { default as ReqoreTabsListItem } from './components/Tabs/item';
+export { default as ReqoreTabsList } from './components/Tabs/list';
+export { default as ReqoreTag } from './components/Tag';
+export { default as ReqoreTagGroup } from './components/Tag/group';
+export { default as ReqoreTextarea } from './components/Textarea';
+export { TimeAgo as ReqoreTimeAgo } from './components/TimeAgo';
+export { ReqoreTree } from './components/Tree';
+export { Colors as ReqoreColors } from './constants/colors';
+export { default as ReqoreNotifications } from './containers/ReqoreProvider';
+export { default as ReqoreUIProvider } from './containers/UIProvider';
+export { default as ReqoreContext } from './context/ReqoreContext';
+export { default as ReqoreThemeContext } from './context/ThemeContext';
+export { default as useLatestZIndex } from './hooks/useLatestZIndex';

package/src/mock/breadcrumbs.ts

@@ -0,0 +1,93 @@
+import { noop } from 'lodash';
+import { IReqoreBreadcrumbItem, IReqoreBreadcrumbItemTabs } from '../components/Breadcrumbs';
+import { Icons } from './icons';
+
+export default [
+  {
+    label: 'Dashboard',
+    icon: Icons.Dashboard,
+    tooltip: 'Dashboard',
+    active: true,
+  },
+  {
+    label: 'Workflows',
+    icon: Icons.Workflow,
+    tooltip: 'Opens in a new window',
+    as: 'a',
+    props: {
+      href: 'https://google.com',
+    },
+  },
+  {
+    label: 'Services',
+    icon: Icons.Services,
+    tooltip: 'Services',
+    props: {
+      onClick: noop,
+    },
+  },
+  {
+    label: 'Jobs',
+    icon: Icons.Jobs,
+    customTheme: '#a9a9a9',
+  },
+  {
+    tooltip: 'Connections',
+    icon: Icons.Connections,
+    customTheme: '#a9a9a9',
+  },
+] as IReqoreBreadcrumbItem[];
+
+export const breadcrumbsTabs = {
+  withTabs: {
+    activeTab: 'valuemaps',
+    onTabChange(tabId) {
+      console.log('🚀 ~ file: breadcrumbs.ts ~ line 46 ~ onTabChange ~ tabId', tabId);
+    },
+    tabs: [
+      {
+        label: 'RBAC',
+        icon: Icons.RBAC,
+        id: 'rbac',
+        props: {
+          onClick() {
+            console.log('rbac');
+          },
+        },
+      },
+      {
+        label: 'Value Maps',
+        icon: Icons.Valuemaps,
+        id: 'valuemaps',
+        onCloseClick(id) {
+          console.log('🚀 ~ file: breadcrumbs.ts ~ line 54 ~ onCloseClick ~ id', id);
+        },
+        intent: 'success',
+      },
+      {
+        label: 'SLAs',
+        icon: Icons.SLAs,
+        id: 'sla',
+        intent: 'danger',
+      },
+      {
+        label: 'Releases',
+        icon: Icons.Releases,
+        id: 'releases',
+        tooltip: {
+          content: 'Releases',
+        },
+      },
+      {
+        label: 'Errors',
+        icon: Icons.Errors,
+        id: 'errors',
+        props: {
+          onClick() {
+            console.log('errors');
+          },
+        },
+      },
+    ],
+  } as IReqoreBreadcrumbItemTabs,
+} as IReqoreBreadcrumbItem;

package/src/mock/icons.ts

@@ -0,0 +1,32 @@
+import { IReqoreIconName } from '../types/icons';
+
+export const Icons: { [key: string]: IReqoreIconName } = {
+  Dashboard: 'Home2Fill',
+  Workflow: 'ExchangeLine',
+  Services: 'GitMergeLine',
+  Jobs: 'CalendarLine',
+  Groups: 'BubbleChartFill',
+  Connections: 'StackshareLine',
+  Search: 'SearchLine',
+  Global: 'LayoutGridFill',
+  RBAC: 'GroupLine',
+  Valuemaps: 'MapLine',
+  SLAs: 'TimeLine',
+  Releases: 'InstallLine',
+  Errors: 'ErrorWarningLine',
+  Types: 'Key2Fill',
+  System: 'Settings2Line',
+  Alerts: 'AlarmWarningLine',
+  Cluster: 'GridFill',
+  OrderStats: 'PieChartLine',
+  Options: 'SettingsLine',
+  Properties: 'StackLine',
+  Cache: 'DatabaseLine',
+  HTTPServices: 'GlobeLine',
+  ConfigItems: 'Settings6Line',
+  More: 'MoreFill',
+  Library: 'Book3Line',
+  Extensions: 'AppsLine',
+  Logs: 'FileTextLine',
+  Info: 'InformationLine',
+};

package/src/mock/menu.ts

@@ -0,0 +1,95 @@
+import { IQorusSidebarItems } from "../components/Sidebar";
+
+export const qorusSidebarItems: IQorusSidebarItems = {
+  Menu: {
+    title: "Menu",
+    items: [
+      {
+        name: "Menu item 1",
+        as: "a",
+        props: {
+          href: "/item-1",
+        },
+        icon: "Home3Line",
+        id: "menu-item-1",
+      },
+      {
+        name: "Menu item 2",
+        as: "a",
+        props: {
+          href: "/item-2",
+        },
+        icon: "Settings4Fill",
+        id: "menu-item-2",
+      },
+      {
+        name: "Menu item 3",
+        icon: "File3Line",
+        id: "menu-item-3",
+        activePaths: ["/item-3"],
+        submenu: [
+          {
+            name: "Submenu item 1",
+            as: "a",
+            props: {
+              href: "/item-3/item-1",
+            },
+            icon: "NodeTree",
+            id: "submenu-item-1",
+          },
+          {
+            name: "Submenu item 2",
+            as: "a",
+            props: {
+              href: "/item-3/item-2",
+            },
+            icon: "Chat3Fill",
+            id: "submenu-item-2",
+          },
+          {
+            name: "Super really long Submenu item 3",
+            as: "a",
+            props: {
+              href: "/item-3/item-3",
+            },
+            icon: "DatabaseFill",
+            id: "submenu-item-3",
+          },
+        ],
+      },
+    ],
+  },
+  Menu2: {
+    items: [
+      {
+        name: "Super Long Really Another item 1",
+        as: "a",
+        props: {
+          href: "/another-item-1",
+        },
+        icon: "Home6Line",
+        id: "another-item-1",
+      },
+      {
+        name: "Another item 2",
+        as: "a",
+        props: {
+          href: "/another-item-2",
+        },
+        icon: "TableFill",
+        id: "another-item-2",
+      },
+      {
+        name: "Another item 3",
+        as: "a",
+        props: {
+          onClick: () => {
+            alert("Click");
+          },
+        },
+        icon: "BellLine",
+        id: "another-item-3",
+      },
+    ],
+  },
+};

package/src/mock/object.json

@@ -0,0 +1,317 @@
+[
+  {
+    "_id": "606d4c955f96372fd1b8bcd1",
+    "index": 0,
+    "guid": "d08cde5f-e18e-4d7f-80a9-6541848ab830",
+    "isActive": false,
+    "balance": "$3,219.32",
+    "picture": "http://placehold.it/32x32",
+    "age": 25,
+    "eyeColor": "brown",
+    "name": "Zelma Short",
+    "gender": "female",
+    "company": "LINGOAGE",
+    "email": "zelmashort@lingoage.com",
+    "phone": "+1 (840) 429-2274",
+    "address": "757 Woodside Avenue, Winchester, Marshall Islands, 2032",
+    "about": "Ipsum est ex nisi veniam proident adipisicing. Occaecat Lorem minim amet aliqua laboris excepteur sint eu mollit laborum sunt. Duis aliquip nulla cillum labore culpa ullamco labore non in nostrud. Cupidatat nisi enim ullamco quis voluptate Lorem voluptate minim dolore esse irure eiusmod aliquip amet. Dolore laboris Lorem laboris irure magna sint dolor. In irure adipisicing minim ullamco commodo ad dolore elit occaecat dolor. Cillum commodo est commodo dolor enim velit.\r\n",
+    "registered": "2015-03-19T05:00:22 -01:00",
+    "latitude": -8.97737,
+    "longitude": 110.576471,
+    "tags": [
+      "aute",
+      "qui",
+      "ut",
+      "mollit",
+      "culpa",
+      "qui",
+      "irure"
+    ],
+    "friends": [
+      {
+        "id": 0,
+        "name": "Angel Gallagher"
+      },
+      {
+        "id": 1,
+        "name": "Rose Farmer"
+      },
+      {
+        "id": 2,
+        "name": "Jaclyn Keith"
+      }
+    ],
+    "greeting": "Hello, Zelma Short! You have 5 unread messages.",
+    "favoriteFruit": "banana"
+  },
+  {
+    "_id": "606d4c957cc794c26ad703f6",
+    "index": 1,
+    "guid": "366ccd74-64e4-4336-a660-78b55cccd653",
+    "isActive": true,
+    "balance": "$3,464.91",
+    "picture": "http://placehold.it/32x32",
+    "age": 32,
+    "eyeColor": "green",
+    "name": "Jennings Briggs",
+    "gender": "male",
+    "company": "FROSNEX",
+    "email": "jenningsbriggs@frosnex.com",
+    "phone": "+1 (821) 563-3061",
+    "address": "485 Auburn Place, Toftrees, North Carolina, 3460",
+    "about": "Sit voluptate ut ipsum aliquip officia eiusmod esse sint exercitation officia. Velit ex ex mollit ad enim voluptate Lorem nisi minim. Sit officia sit eu est anim Lorem aute anim nulla officia.\r\n",
+    "registered": "2014-11-25T11:58:45 -01:00",
+    "latitude": 32.968241,
+    "longitude": 21.905937,
+    "tags": [
+      "occaecat",
+      "id",
+      "sit",
+      "eiusmod",
+      "tempor",
+      "adipisicing",
+      "sint"
+    ],
+    "friends": [
+      {
+        "id": 0,
+        "name": "Buck Watts"
+      },
+      {
+        "id": 1,
+        "name": "Barr Hull"
+      },
+      {
+        "id": 2,
+        "name": "Muriel Lowery"
+      }
+    ],
+    "greeting": "Hello, Jennings Briggs! You have 8 unread messages.",
+    "favoriteFruit": "banana"
+  },
+  {
+    "_id": "606d4c953ed5ee3081404d98",
+    "index": 2,
+    "guid": "ed26f92f-26a7-492f-b3c8-a6767297526c",
+    "isActive": false,
+    "balance": "$3,974.33",
+    "picture": "http://placehold.it/32x32",
+    "age": 35,
+    "eyeColor": "green",
+    "name": "Stephenson Dunlap",
+    "gender": "male",
+    "company": "PLASMOS",
+    "email": "stephensondunlap@plasmos.com",
+    "phone": "+1 (809) 545-2664",
+    "address": "463 Cambridge Place, Cloverdale, South Dakota, 8144",
+    "about": "Laboris sit tempor laborum cupidatat ea quis commodo ut incididunt. Commodo dolor irure sit non. Enim pariatur sunt cupidatat enim aliquip velit laboris eiusmod sint. Esse eiusmod minim dolore sint. Quis duis id ut tempor tempor laboris fugiat quis proident. Irure proident deserunt consequat voluptate labore irure eu nulla commodo incididunt nisi officia amet est.\r\n",
+    "registered": "2019-06-05T08:58:50 -02:00",
+    "latitude": -41.239498,
+    "longitude": 11.237437,
+    "tags": [
+      "ut",
+      "consectetur",
+      "enim",
+      "deserunt",
+      "anim",
+      "adipisicing",
+      "irure"
+    ],
+    "friends": [
+      {
+        "id": 0,
+        "name": "Cora Hobbs"
+      },
+      {
+        "id": 1,
+        "name": "Smith Gray"
+      },
+      {
+        "id": 2,
+        "name": "Rosanne Winters"
+      }
+    ],
+    "greeting": "Hello, Stephenson Dunlap! You have 9 unread messages.",
+    "favoriteFruit": "strawberry"
+  },
+  {
+    "_id": "606d4c95cc5c1b49eaf17919",
+    "index": 3,
+    "guid": "904ad88c-c754-4575-b626-202d2b6324c7",
+    "isActive": true,
+    "balance": "$2,267.87",
+    "picture": "http://placehold.it/32x32",
+    "age": 21,
+    "eyeColor": "blue",
+    "name": "Sheryl Barton",
+    "gender": "female",
+    "company": "NAMEGEN",
+    "email": "sherylbarton@namegen.com",
+    "phone": "+1 (974) 505-2024",
+    "address": "524 Shale Street, Wauhillau, Idaho, 4275",
+    "about": "Enim aute ea anim sunt occaecat pariatur nisi excepteur eiusmod. Proident labore dolore elit veniam incididunt. Ad deserunt ipsum deserunt ad id.\r\n",
+    "registered": "2020-02-24T06:26:21 -01:00",
+    "latitude": -79.669108,
+    "longitude": 19.666959,
+    "tags": [
+      "magna",
+      "nisi",
+      "eiusmod",
+      "elit",
+      "eu",
+      "in",
+      "anim"
+    ],
+    "friends": [
+      {
+        "id": 0,
+        "name": "Lowery Lucas"
+      },
+      {
+        "id": 1,
+        "name": "Lilia Mendoza"
+      },
+      {
+        "id": 2,
+        "name": "Frieda Valenzuela"
+      }
+    ],
+    "greeting": "Hello, Sheryl Barton! You have 8 unread messages.",
+    "favoriteFruit": "strawberry"
+  },
+  {
+    "_id": "606d4c95dcb57310a73b8feb",
+    "index": 4,
+    "guid": "eaf6380a-7fb7-4924-b09f-5b37ed134f57",
+    "isActive": true,
+    "balance": "$3,578.40",
+    "picture": "http://placehold.it/32x32",
+    "age": 30,
+    "eyeColor": "brown",
+    "name": "Hahn Stanley",
+    "gender": "male",
+    "company": "GOGOL",
+    "email": "hahnstanley@gogol.com",
+    "phone": "+1 (948) 430-2371",
+    "address": "569 Bushwick Court, Jamestown, Tennessee, 3203",
+    "about": "Est ipsum enim occaecat dolor nisi excepteur. Officia magna veniam occaecat velit consectetur reprehenderit. Ut exercitation laboris est deserunt anim dolor sint pariatur. Commodo ut ex culpa incididunt irure cupidatat irure deserunt. Cillum excepteur quis sunt sunt in ex consectetur adipisicing incididunt labore adipisicing laboris sint.\r\n",
+    "registered": "2018-05-30T10:39:01 -02:00",
+    "latitude": 39.987328,
+    "longitude": -18.121186,
+    "tags": [
+      "amet",
+      "reprehenderit",
+      "elit",
+      "nostrud",
+      "sunt",
+      "consequat",
+      "fugiat"
+    ],
+    "friends": [
+      {
+        "id": 0,
+        "name": "Mclaughlin Melendez"
+      },
+      {
+        "id": 1,
+        "name": "Freeman Barber"
+      },
+      {
+        "id": 2,
+        "name": "Acevedo Newton"
+      }
+    ],
+    "greeting": "Hello, Hahn Stanley! You have 5 unread messages.",
+    "favoriteFruit": "banana"
+  },
+  {
+    "_id": "606d4c95769391999f8151f4",
+    "index": 5,
+    "guid": "eaa5653d-7576-4663-a2d9-58083caeb4df",
+    "isActive": true,
+    "balance": "$1,380.84",
+    "picture": "http://placehold.it/32x32",
+    "age": 38,
+    "eyeColor": "brown",
+    "name": "Paulette Perez",
+    "gender": "female",
+    "company": "VELOS",
+    "email": "pauletteperez@velos.com",
+    "phone": "+1 (861) 551-3633",
+    "address": "732 Bridgewater Street, Welch, Florida, 989",
+    "about": "Cupidatat veniam occaecat magna anim officia Lorem. Commodo amet pariatur deserunt consectetur excepteur dolor dolore ipsum enim duis dolor est. Et ad amet enim esse deserunt cupidatat qui esse. Enim ad sit Lorem sit voluptate dolore sit nisi aliqua sint exercitation. Commodo non ex adipisicing magna. Occaecat consequat minim sunt sint duis veniam mollit ullamco dolor in dolore.\r\n",
+    "registered": "2015-09-29T09:39:54 -02:00",
+    "latitude": -18.968669,
+    "longitude": -33.485271,
+    "tags": [
+      "mollit",
+      "officia",
+      "ipsum",
+      "veniam",
+      "laborum",
+      "laboris",
+      "consectetur"
+    ],
+    "friends": [
+      {
+        "id": 0,
+        "name": "Young Bolton"
+      },
+      {
+        "id": 1,
+        "name": "Terrie Burke"
+      },
+      {
+        "id": 2,
+        "name": "Hill Adams"
+      }
+    ],
+    "greeting": "Hello, Paulette Perez! You have 9 unread messages.",
+    "favoriteFruit": "banana"
+  },
+  {
+    "_id": "606d4c9524bd1bd2d57b00c2",
+    "index": 6,
+    "guid": "e4c19c95-0d20-4919-80c6-7bf05b80b66a",
+    "isActive": true,
+    "balance": "$3,334.46",
+    "picture": "http://placehold.it/32x32",
+    "age": 22,
+    "eyeColor": "blue",
+    "name": "Levine Bray",
+    "gender": "male",
+    "company": "AUSTEX",
+    "email": "levinebray@austex.com",
+    "phone": "+1 (968) 524-2455",
+    "address": "932 Debevoise Street, Wolcott, Palau, 8906",
+    "about": "Qui excepteur deserunt nulla tempor do tempor occaecat commodo et ipsum velit quis adipisicing id. Ullamco ad pariatur excepteur consectetur sit sit. Aute id anim id proident sint est irure culpa amet aute ex. Sint adipisicing aliqua velit nostrud elit aliquip voluptate occaecat duis voluptate occaecat reprehenderit et. Aliquip aute cillum ex cillum officia aliquip. Commodo enim ex aute elit consequat esse eiusmod. Eu cillum officia culpa in eiusmod non.\r\n",
+    "registered": "2014-12-29T03:11:31 -01:00",
+    "latitude": 55.032528,
+    "longitude": 178.669012,
+    "tags": [
+      "sit",
+      "non",
+      "et",
+      "labore",
+      "consectetur",
+      "voluptate",
+      "ea"
+    ],
+    "friends": [
+      {
+        "id": 0,
+        "name": "Delores Clay"
+      },
+      {
+        "id": 1,
+        "name": "Tanner Elliott"
+      },
+      {
+        "id": 2,
+        "name": "Jeanne Randall"
+      }
+    ],
+    "greeting": "Hello, Levine Bray! You have 5 unread messages.",
+    "favoriteFruit": "strawberry"
+  }
+]

package/src/mock/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/src/mock/tableData.ts

@@ -0,0 +1,40 @@
+import shortid from 'shortid';
+import { IReqoreTableColumn, IReqoreTableData } from '../components/Table';
+
+export default {
+  columns: [
+    {
+      dataId: 'id',
+      header: 'ID',
+      width: 50,
+      align: 'center',
+    },
+    { dataId: 'firstName', header: 'First Name', width: 150 },
+    { dataId: 'lastName', header: 'Last Name', width: 150 },
+    { dataId: 'address', header: 'Address', width: 300, grow: 2 },
+    {
+      dataId: 'age',
+      header: 'Really long age header',
+      width: 50,
+      align: 'center',
+      intent: 'success',
+    },
+    { dataId: 'occupation', header: 'Ocuppation', width: 200 },
+    { dataId: 'group', header: 'Group', width: 150, intent: 'muted' },
+    { dataId: 'date', header: 'Date', width: 150, content: 'time-ago' },
+  ] as IReqoreTableColumn[],
+  data: [...new Array(100)].map((_val, index) => ({
+    id: index,
+    firstName: shortid.generate(),
+    lastName: shortid.generate(),
+    address: `${shortid.generate()}, ${shortid.generate()}, ${shortid.generate()}`,
+    age: 99 - index,
+    occupation: shortid.generate(),
+    group: shortid.generate(),
+    date: Date.now(),
+    _intent: index === 2 || index === 3 || index === 4 ? 'info' : undefined,
+    _selectId: index !== 3 && index !== 6 ? `Row-${index}` : null,
+    _disabled: index === 5,
+  })) as IReqoreTableData,
+  height: 300,
+};

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

@@ -0,0 +1,38 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IReqoreBreadcrumbItem, IReqoreBreadcrumbsProps } from '../../components/Breadcrumbs';
+import { ReqoreBreadcrumbs } from '../../index';
+import breadcrumbs, { breadcrumbsTabs } from '../../mock/breadcrumbs';
+import { buildTemplate } from '../utils';
+
+export default {
+  title: 'Components/Breadcrumbs',
+  argTypes: {
+    withTabs: {
+      name: 'With tabs',
+      defaultValue: false,
+      description: 'Whether tabs should be shown alongside the breadcrumbs',
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    jest: ['breadcrumbs.test.tsx'],
+  },
+} as ComponentMeta<typeof ReqoreBreadcrumbs & { withTabs?: boolean }>;
+
+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;
+
+  return (
+    <ReqoreBreadcrumbs
+      {...args}
+      items={items as IReqoreBreadcrumbItem[]}
+      customTheme={customTheme as any}
+    />
+  );
+};
+
+export const Default = buildTemplate(Template);
+export const WithTabs = buildTemplate(Template, { withTabs: true });