@pingux/astro 1.24.1-alpha.3 → 1.25.0

package/lib/recipes/ListAndPanel.stories.js

@@ -0,0 +1,302 @@
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { FocusScope } from '@react-aria/focus';
+import { Item } from '@react-stately/collections';
+import CloseIcon from 'mdi-react/CloseIcon';
+import MoreVertIcon from 'mdi-react/MoreVertIcon';
+import PencilIcon from 'mdi-react/PencilIcon';
+import { Avatar, Box, IconButton, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { useOverlayPanelState } from '../hooks';
+import { pingImg } from '../utils/devUtils/constants/images';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/List with Panel'
+};
+var items = [{
+  email: 'dburkitt5@columbia.edu',
+  firstName: 'Nicola',
+  lastName: 'Burkitt',
+  avatar: pingImg
+}, {
+  email: 'idixie2@elegantthemes.com',
+  firstName: 'Cacilia',
+  lastName: 'Dixie',
+  avatar: pingImg
+}, {
+  email: 'dfowler0@rambler.ru',
+  firstName: 'Stavro',
+  lastName: 'Fowler',
+  avatar: pingImg
+}, {
+  email: 'jgolde8@jimdo.com',
+  firstName: 'Celisse',
+  lastName: 'Golde',
+  avatar: pingImg
+}, {
+  email: 'shearst9@answers.com',
+  firstName: 'Jeth',
+  lastName: 'Hearst',
+  avatar: pingImg
+}, {
+  email: 'ajinaa@mapquest.com',
+  firstName: 'Kaycee',
+  lastName: 'Jina',
+  avatar: pingImg
+}, {
+  email: 'vmalster4@biblegateway.com',
+  firstName: 'Lorry',
+  lastName: 'Malster',
+  avatar: pingImg
+}, {
+  email: 'yphipp6@yellowpages.com',
+  firstName: 'Stanley',
+  lastName: 'Phipp',
+  avatar: pingImg
+}, {
+  email: 'mskilbeck3@bbc.co.uk',
+  firstName: 'Gradey',
+  lastName: 'Skilbeck',
+  avatar: pingImg
+}, {
+  email: 'dstebbing1@msu.edu',
+  firstName: 'Marnia',
+  lastName: 'Stebbing',
+  avatar: pingImg
+}, {
+  email: 'lsterley7@lulu.com',
+  firstName: 'Joshua',
+  lastName: 'Sterley',
+  avatar: pingImg
+}, {
+  email: 'luttleyb@hugedomains.com',
+  firstName: 'Jarrod',
+  lastName: 'Uttley',
+  avatar: pingImg
+}, {
+  email: 'lidelc@yelp.com',
+  firstName: 'Andromache',
+  lastName: 'Idel',
+  avatar: pingImg,
+  hasSeparator: false
+}];
+
+var ListElement = function ListElement(_ref) {
+  var item = _ref.item,
+      onClosePanel = _ref.onClosePanel;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    minHeight: "60px"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignItems: "center"
+  }, ___EmotionJSX(Avatar, {
+    mr: "md",
+    sx: {
+      width: '25px',
+      height: '25px'
+    },
+    src: item.avatar
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    alignSelf: "start"
+  }, item.lastName, ", ", item.firstName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px'
+    },
+    variant: "subtitle",
+    alignSelf: "start"
+  }, item.email))), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "active user",
+    isDefaultSelected: true,
+    alignSelf: "center",
+    mr: "sm"
+  }), ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+    "aria-label": "more icon button",
+    mr: onClosePanel ? 'sm' : 0
+  }, ___EmotionJSX(MoreVertIcon, null)), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user"))), onClosePanel && ___EmotionJSX(IconButton, {
+    "aria-label": "close icon button",
+    onPress: onClosePanel
+  }, ___EmotionJSX(CloseIcon, null))));
+};
+
+export var Default = function Default() {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedItemId = _useState2[0],
+      setSelectedItemId = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
+  var _useOverlayPanelState = useOverlayPanelState(),
+      panelState = _useOverlayPanelState.state,
+      onPanelClose = _useOverlayPanelState.onClose;
+
+  var panelTriggerRef = useRef();
+
+  var closePanelHandler = function closePanelHandler() {
+    onPanelClose(panelState, panelTriggerRef);
+    setSelectedItemId(-1);
+    setSelectedKeys([]);
+  };
+
+  var selectItemHandler = function selectItemHandler(e) {
+    if (e.size) {
+      setSelectedItemId(_findIndexInstanceProperty(items).call(items, function (item) {
+        return item.email === e.currentKey;
+      }));
+      setSelectedKeys([e.currentKey]);
+      panelState.open();
+    } else {
+      closePanelHandler();
+    }
+  };
+
+  return ___EmotionJSX(Box, {
+    px: "lg",
+    py: "lg",
+    bg: "accent.99"
+  }, ___EmotionJSX(SearchField, {
+    mb: "sm",
+    width: "400px",
+    placeholder: "Search",
+    "aria-label": "search"
+  }), ___EmotionJSX(ListView, {
+    items: items,
+    onSelectionChange: selectItemHandler,
+    ref: panelTriggerRef,
+    selectedKeys: selectedKeys
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.email,
+      textValue: item.email,
+      hasSeparator: item.hasSeparator,
+      listItemProps: {
+        pl: 15,
+        minHeight: 75
+      }
+    }, ___EmotionJSX(ListElement, {
+      item: item
+    }));
+  }), ___EmotionJSX(OverlayPanel, {
+    isOpen: panelState.isOpen,
+    state: panelState,
+    triggerRef: panelTriggerRef,
+    p: 0
+  }, panelState.isOpen && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(FocusScope, {
+    contain: true,
+    restoreFocus: true,
+    autoFocus: true
+  }, ___EmotionJSX(Box, {
+    px: "md",
+    bg: "accent.99",
+    justifyContent: "center"
+  }, ___EmotionJSX(ListElement, {
+    item: selectedItemId >= 0 ? items[selectedItemId] : [],
+    onClosePanel: closePanelHandler
+  })), ___EmotionJSX(Separator, {
+    margin: 0,
+    bg: "accent.90"
+  }), ___EmotionJSX(Box, {
+    px: "lg",
+    pt: "xs"
+  }, ___EmotionJSX(Tabs, {
+    tabListProps: {
+      justifyContent: 'center'
+    },
+    tabPanelProps: {
+      sx: {
+        position: 'relative'
+      }
+    }
+  }, ___EmotionJSX(Tab, {
+    title: "Profile"
+  }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0
+    }
+  }, ___EmotionJSX(PencilIcon, {
+    size: 20
+  })), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Full Name"), ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "First Name"), ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Last Name"), ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Email"), ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
+    title: "Group Memberships"
+  }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {
+    title: "Account Info"
+  }, ___EmotionJSX(Text, null, "Account Info"))))))));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.24.1-alpha.3",
+  "version": "1.25.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -36,6 +36,7 @@
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/eslint-plugin": "^11.2.0",
+    "@faker-js/faker": "^7.1.0",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-console": "^1.2.3",
@@ -57,7 +58,6 @@
     "eslint-plugin-jest-dom": "^3.9.0",
     "eslint-plugin-react-hooks": "^2.5.1",
     "eslint-plugin-testing-library": "^4.6.0",
-    "faker": "5.1.0",
     "jest-axe": "^5.0.1",
     "jest-emotion": "^11.0.0",
     "mutationobserver-shim": "^0.3.7",