@pingux/astro 2.91.0-alpha.1 → 2.92.0-alpha.0

package/lib/styles/themes/next-gen/stories/DataTableNextGenComponent.js

@@ -0,0 +1,141 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { Badge, Box, DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableMenu, DataTableRow, Text } from '../../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Next Gen Recipes/DataTable'
+};
+var getCellProps = function getCellProps(columnKey, align) {
+  return {
+    pr: columnKey !== 'menu' ? 'lg' : 12,
+    pl: columnKey === 'menu' ? 0 : 'lg',
+    hideHeader: columnKey === 'menu',
+    align: align
+  };
+};
+export var DataTableNextGenComponent = function DataTableNextGenComponent() {
+  var date = '2023-05-03';
+  var time = '07:16:30 pm UTC';
+  var timestampCell = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, date), ___EmotionJSX(Box, null, time));
+  var columns = [{
+    name: 'Timestamp',
+    key: 'timestamp'
+  }, {
+    name: 'Event Type',
+    key: 'eventType'
+  }, {
+    name: 'Description',
+    key: 'description'
+  }, {
+    name: 'Status',
+    key: 'status',
+    isSortable: true
+  }, {
+    name: 'User Identity',
+    key: 'userIdentity'
+  }, {
+    name: 'Menu',
+    key: 'menu'
+  }];
+  var rows = [{
+    id: 1,
+    timestamp: timestampCell,
+    eventType: 'User Access Allowed',
+    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    status: ___EmotionJSX(Badge, {
+      label: "Approved",
+      variant: "success",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: ___EmotionJSX(DataTableMenu, null)
+  }, {
+    id: 2,
+    timestamp: timestampCell,
+    eventType: 'User Access Denied',
+    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+      display: "block"
+    }, "Passed Role Access"), ___EmotionJSX(Box, {
+      display: "block"
+    }, "Control")),
+    status: ___EmotionJSX(Badge, {
+      label: "Rejected",
+      variant: "danger",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: ___EmotionJSX(DataTableMenu, null)
+  }, {
+    id: 3,
+    timestamp: timestampCell,
+    eventType: 'User Access Allowed',
+    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+      display: "block"
+    }, "Passed Role Access"), ___EmotionJSX(Box, {
+      display: "block"
+    }, "Control")),
+    status: ___EmotionJSX(Badge, {
+      label: "Inactive",
+      variant: "secondary",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: ___EmotionJSX(DataTableMenu, null)
+  }, {
+    id: 4,
+    timestamp: timestampCell,
+    eventType: 'User Access Allowed',
+    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    status: ___EmotionJSX(Badge, {
+      label: "Approved",
+      variant: "success",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: ___EmotionJSX(DataTableMenu, null)
+  }, {
+    id: 5,
+    timestamp: timestampCell,
+    eventType: 'User Access Allowed',
+    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    status: ___EmotionJSX(Badge, {
+      label: "Approved",
+      variant: "success",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: ___EmotionJSX(DataTableMenu, null)
+  }];
+  return ___EmotionJSX(Box, {
+    backgroundColor: "background.base",
+    p: "lg"
+  }, ___EmotionJSX(DataTable, {
+    "aria-label": "Static table",
+    height: "100%",
+    density: "spacious",
+    scale: "xl"
+  }, ___EmotionJSX(DataTableHeader, {
+    columns: columns
+  }, function (column) {
+    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), {
+      minWidth: column.key !== 'menu' ? 175 : 50,
+      width: column.key !== 'menu' ? '19.4%' : 50
+    }), ___EmotionJSX(Text, null, column.name));
+  }), ___EmotionJSX(DataTableBody, {
+    items: rows
+  }, function (item) {
+    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
+      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, false), item[columnKey]);
+    });
+  })));
+};

package/lib/styles/themes/next-gen/stories/ListViewItemNextGen.js

@@ -0,0 +1,75 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import TrashCanOutlineIcon from '@pingux/mdi-react/TrashCanOutlineIcon';
+import { Badge, Box, Icon, IconWrapper, Item, ListViewItem, ListViewItemMenu, Text } from '../../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var textSlotContainerStyle = {
+  ml: 'md',
+  gap: '2px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  flexShrink: '4',
+  'div:has > div': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    flexGrow: 4
+  }
+};
+export var TextSlot = function TextSlot(props) {
+  var title = props.title,
+    category = props.category,
+    description = props.description;
+  return ___EmotionJSX(Box, {
+    sx: _objectSpread({}, textSlotContainerStyle)
+  }, ___EmotionJSX(Text, {
+    textOverflow: "ellipsis",
+    fontWeight: "2",
+    color: "text.secondary"
+  }, title), ___EmotionJSX(Text, {
+    textOverflow: "ellipsis"
+  }, description), ___EmotionJSX(Badge, {
+    variant: "secondary",
+    label: category
+  }));
+};
+export var ListViewItemNextGen = function ListViewItemNextGen(props) {
+  var item = props.item;
+  return ___EmotionJSX(ListViewItem, _extends({}, item, {
+    data: {
+      icon: null
+    },
+    slots: {
+      leftOfData: ___EmotionJSX(IconWrapper, {
+        color: "purple",
+        icon: TrashCanOutlineIcon,
+        size: "md",
+        title: {
+          name: 'trash can'
+        },
+        isCircle: true
+      }),
+      rightOfData: ___EmotionJSX(TextSlot, item)
+    },
+    hasSeparator: false
+  }), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    px: "sm",
+    py: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: TrashCanOutlineIcon
+  }), ___EmotionJSX(Text, null, "Delete")))));
+};

package/lib/styles/themes/next-gen/stories/ListViewNextGenComponent.js

@@ -0,0 +1,58 @@
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import TrashCanOutlineIcon from '@pingux/mdi-react/TrashCanOutlineIcon';
+import { Box, IconWrapper, Item, ListView, ListViewItem } from '../../../../index';
+import { TextSlot } from './ListViewItemNextGen';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var items = _Array$from({
+  length: 300
+}, function (_, index) {
+  var id = (index + 1).toString();
+  return {
+    key: "Animal".concat(id),
+    name: "Animal".concat(id),
+    id: id
+  };
+});
+var colors = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink', 'yellow', 'green'];
+var getColor = function getColor(index) {
+  var lastDigit = index % 10;
+  return colors[lastDigit];
+};
+export var ListViewNextGen = function ListViewNextGen() {
+  return ___EmotionJSX(Box, {
+    backgroundColor: "background.base",
+    p: "lg"
+  }, ___EmotionJSX(Box, {
+    height: "400px",
+    backgroundColor: "background.base"
+  }, ___EmotionJSX(ListView, {
+    items: items,
+    selectionMode: "single"
+  }, _mapInstanceProperty(items).call(items, function (item, index) {
+    return ___EmotionJSX(Item, item, ___EmotionJSX(ListViewItem, {
+      data: {
+        icon: null
+      },
+      slots: {
+        leftOfData: ___EmotionJSX(IconWrapper, {
+          color: getColor(index),
+          icon: TrashCanOutlineIcon,
+          size: "md",
+          title: {
+            name: 'trash can'
+          },
+          isCircle: true
+        }),
+        rightOfData: ___EmotionJSX(TextSlot, {
+          title: item.name,
+          key: item.key,
+          description: loremText
+        })
+      },
+      hasSeparator: false
+    }));
+  }))));
+};

package/lib/styles/themes/next-gen/stories/NavBarNextGenComponent.js

@@ -0,0 +1,182 @@
+import React from 'react';
+import AccountCheckIcon from '@pingux/mdi-react/AccountCheckOutlineIcon';
+import AccountMultipleOutlineIcon from '@pingux/mdi-react/AccountMultipleOutlineIcon';
+import AppsIcon from '@pingux/mdi-react/AppsIcon';
+import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
+import CodeTagsIcon from '@pingux/mdi-react/CodeTagsIcon';
+import CogOutlineIcon from '@pingux/mdi-react/CogOutlineIcon';
+import FileTreeIcon from '@pingux/mdi-react/FileTreeIcon';
+import LayersOutlineIcon from '@pingux/mdi-react/LayersOutlineIcon';
+import PaletteOutlineIcon from '@pingux/mdi-react/PaletteOutlineIcon';
+import ShieldCheckOutlineIcon from '@pingux/mdi-react/ShieldCheckOutlineIcon';
+import ShowChartIcon from '@pingux/mdi-react/ShowChartIcon';
+import DashboardIcon from '@pingux/mdi-react/ViewDashboardOutlineIcon';
+import WidgetsOutlineIcon from '@pingux/mdi-react/WidgetsOutlineIcon';
+import useGetTheme from '../../../../hooks/useGetTheme';
+import { Box, NavBar, NavBarItem, NavBarItemButton, NavBarSection, Separator } from '../../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var data = [{
+  'data-id': 'dashboard-data-id',
+  heading: 'Monitoring',
+  icon: ShowChartIcon,
+  key: 'Monitoring',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Dashboards",
+    id: "Dashboards"
+  }, "Dashboards"), ___EmotionJSX(NavBarItemButton, {
+    key: "Audit",
+    id: "Audit"
+  }, "Audits")]
+}, {
+  'data-id': 'Directory-data-id',
+  heading: 'Directory',
+  icon: AccountMultipleOutlineIcon,
+  key: 'Directory',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Users",
+    id: "Users"
+  }, "Users"), ___EmotionJSX(NavBarItemButton, {
+    key: "Group",
+    id: "Group"
+  }, "Groups")]
+}, {
+  'data-id': 'Applications-data-id',
+  heading: 'Applications',
+  icon: AppsIcon,
+  key: 'Applications',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Applications-sub",
+    id: "Applications-sub"
+  }, "Applications"), ___EmotionJSX(NavBarItemButton, {
+    key: "Resources",
+    id: "Resources"
+  }, "Resourcess")]
+}];
+var secondData = [{
+  'data-id': 'Authentication-data-id',
+  heading: 'Authentication',
+  icon: CheckCircleOutlineIcon,
+  key: 'Authentication',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Authentication-Policies",
+    id: "Authentication-Policies"
+  }, "Authentication Policies"), ___EmotionJSX(NavBarItemButton, {
+    key: "Password-Policies",
+    id: "Password-Policies"
+  }, "Password Policies")]
+}, {
+  'data-id': 'Threat Protection-data-id',
+  heading: 'Threat Protection',
+  icon: ShieldCheckOutlineIcon,
+  key: 'Threat Protection',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Risk Policies",
+    id: "Risk Policies"
+  }, "Risk Policies"), ___EmotionJSX(NavBarItemButton, {
+    key: "Predictors",
+    id: "Predictors"
+  }, "Predictors")]
+}, {
+  'data-id': 'Threat Protection-data-id',
+  heading: 'Identity Verification',
+  icon: LayersOutlineIcon,
+  key: 'Identity Verification',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Verify Policies",
+    id: "Verify Policies"
+  }, "Verify Policies")]
+}, {
+  'data-id': 'Digital Credentials-data-id',
+  heading: 'Digital Credentials',
+  icon: CodeTagsIcon,
+  key: 'Digital Credentials',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Management",
+    id: "Management"
+  }, "Management")]
+}, {
+  'data-id': 'Authorization-data-id',
+  heading: 'Authorization',
+  icon: AccountCheckIcon,
+  key: 'Authorization',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Trust Framework",
+    id: "Trust Framework"
+  }, "Trust Framework"), ___EmotionJSX(NavBarItemButton, {
+    key: "Policies",
+    id: "Policies"
+  }, "Policies")]
+}];
+var thirdData = [{
+  'data-id': 'Integrations-data-id',
+  heading: 'Integrations',
+  icon: WidgetsOutlineIcon,
+  key: 'Integrations',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "External IDPs",
+    id: "External IDPs"
+  }, "External IDPs"), ___EmotionJSX(NavBarItemButton, {
+    key: "Provisioning",
+    id: "Provisioning"
+  }, "Provisioning")]
+}, {
+  'data-id': 'User Experience-data-id',
+  heading: 'User Experience',
+  icon: PaletteOutlineIcon,
+  key: 'User Experience',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Notification Templates",
+    id: "Notification Templates"
+  }, "Notification Templates"), ___EmotionJSX(NavBarItemButton, {
+    key: "Notification Policies",
+    id: "Notification Policies"
+  }, "Notification Policies")]
+}, {
+  'data-id': 'Settings-data-id',
+  heading: 'Settings',
+  icon: CogOutlineIcon,
+  key: 'Settings',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Certificates & Key Pairs",
+    id: "Certificates & Key Pairs"
+  }, "Certificates & Key Pairs"), ___EmotionJSX(NavBarItemButton, {
+    key: "Domains",
+    id: "Domains"
+  }, "Domains")]
+}];
+export var NavBarNextGenComponent = function NavBarNextGenComponent() {
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  return ___EmotionJSX(NavBar, null, ___EmotionJSX(Box, {
+    padding: "md",
+    key: "top-logo-parent"
+  }, icons.pingLogoHorizontalSmall), ___EmotionJSX(Box, {
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, ___EmotionJSX(NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: DashboardIcon,
+    id: "Overview",
+    key: "Overview",
+    text: "Overview"
+  }), ___EmotionJSX(NavBarSection, {
+    items: data,
+    "data-id": "nav-bar-section"
+  }), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: FileTreeIcon,
+    id: "DaVinci",
+    key: "DaVinci",
+    text: "DaVinci"
+  }), ___EmotionJSX(NavBarSection, {
+    items: secondData,
+    "data-id": "second-nav-bar-section"
+  }), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavBarSection, {
+    items: thirdData,
+    "data-id": "third-nav-bar-section"
+  })));
+};

package/lib/styles/themes/next-gen/stories/NextGenDataTable.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../../..';
+import { DataTableNextGenComponent } from './DataTableNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only NextGen DataTable'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(DataTableNextGenComponent, null));
+};

package/lib/styles/themes/next-gen/stories/NextGenListView.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../../..';
+import { ListViewNextGen } from './ListViewNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only NextGen ListView'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(ListViewNextGen, null));
+};

package/lib/styles/themes/next-gen/stories/NextGenListViewItem.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box } from '../../../..';
+import { ListViewItemNextGen } from './ListViewItemNextGen';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Next Gen Recipes/NextGen ListViewItem',
+  component: 'Tabs'
+};
+var item = {
+  key: 'test',
+  id: 'test',
+  name: 'JavaScript Array For Each',
+  title: 'JavaScript Array For Each',
+  category: 'Code Snippet',
+  description: 'Sample code demonstrating how to iterate over a description'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Box, {
+    sx: {
+      border: '1px solid',
+      borderColor: 'border.base'
+    }
+  }, ___EmotionJSX(ListViewItemNextGen, {
+    item: item
+  }));
+};

package/lib/styles/themes/next-gen/stories/NextGenNavBar.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../../..';
+import { NavBarNextGenComponent } from './NavBarNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only NextGen NavBar'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(NavBarNextGenComponent, null));
+};

package/lib/styles/themes/next-gen/stories/NextGenStickerSheet.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../../..';
+import StickerSheetComponent from './StickerSheetComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'NextGen Sticker Sheet'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(StickerSheetComponent, null));
+};