@pingux/astro 2.104.0-alpha.3 → 2.104.0-alpha.5

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -662,5 +662,53 @@ declare const buttons: {
             };
         };
     };
+    aiChat: {
+        maxWidth: string;
+        gap: string;
+        border: string;
+        backgroundColor: string;
+        color: string;
+        path: {
+            fill: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        display: string;
+        borderColor: string;
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        cursor: string;
+        fontFamily: string;
+        fontSize: string;
+        flexGrow: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        lineHeight: number;
+        borderRadius: string;
+        px: string;
+        py: string;
+        height: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        transition: string;
+    };
 };
 export default buttons;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -160,6 +160,33 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   display: 'inline-flex',
   color: 'white'
 });
+var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
+  maxWidth: 'fit-content',
+  gap: 'sm',
+  border: 'none',
+  backgroundColor: 'transparent',
+  color: 'text.primary',
+  path: {
+    fill: 'text.primary'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'gray-100',
+    path: {
+      fill: 'dark'
+    }
+  },
+  '&.is-pressed': {
+    backgroundColor: '#d5dfe8 !important',
+    path: {
+      fill: 'dark'
+    }
+  }
+});
 var baseIconButton = {
   cursor: 'pointer',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
@@ -281,7 +308,8 @@ var buttons = {
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
   iconButtons: iconButtons,
-  modalCloseButton: modalCloseButton
+  modalCloseButton: modalCloseButton,
+  aiChat: aiChat
 };
 var _default = buttons;
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -1,4 +1,10 @@
 export declare const text: {
+    aiPanelHeader: {
+        fontFamily: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+    };
     h1: {
         fontSize: string;
         fontWeight: number;
@@ -45,6 +51,12 @@ export declare const text: {
         fontWeight: string;
         letterSpacing: string;
     };
+    suggestion: {
+        fontSize: string;
+        fontFamily: string;
+        color: string;
+        lineHeight: string;
+    };
     modalTitle: {
         fontSize: string;
         fontWeight: string;

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -55,7 +55,7 @@ var hTags = {
     fontSize: 'xs'
   }
 };
-var text = _objectSpread({
+var text = _objectSpread(_objectSpread({
   sideNavHeader: {
     py: 'sm',
     lineHeight: 'body',
@@ -65,6 +65,12 @@ var text = _objectSpread({
     fontWeight: '1',
     letterSpacing: '1px'
   },
+  suggestion: {
+    fontSize: 'md',
+    fontFamily: 'standard',
+    color: 'text.primary',
+    lineHeight: '24px'
+  },
   modalTitle: {
     fontSize: '20px',
     fontWeight: '2',
@@ -101,5 +107,12 @@ var text = _objectSpread({
       display: 'list-item'
     }
   }
-}, hTags);
+}, hTags), {}, {
+  aiPanelHeader: {
+    fontFamily: 'standard',
+    color: 'text.primary',
+    fontSize: 'lg',
+    fontWeight: 2
+  }
+});
 exports.text = text;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -839,6 +839,41 @@ declare const _default: {
     overlayPanel: {
         container: {
             backgroundColor: string;
+            border: string;
+        };
+        aiPanelContainer: {
+            backgroundColor: string;
+            border: string;
+            borderLeft: string;
+            position: string;
+            overflowY: string;
+            top: number;
+            bottom: number;
+            alignItems: string;
+            justifyContent: string;
+            boxShadow: string;
+            display: string;
+            opacity: number;
+            right: string;
+            transition: string;
+            maxWidth: string;
+            p: string;
+            '&.is-small': {
+                width: string;
+            };
+            '&.is-full': {
+                width: string;
+            };
+            '&.is-open.is-transitioning': {
+                right: number;
+                opacity: number;
+            };
+        };
+        body: {
+            gap: string;
+            minHeight: string;
+            maxWidth: string;
+            alignSelf: string;
         };
         innerPanel: {
             backgroundColor: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -266,7 +266,42 @@ var dataTable = {
 };
 var overlayPanel = {
   container: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'background.base',
+    border: 'none'
+  },
+  aiPanelContainer: {
+    backgroundColor: 'background.base',
+    border: 'none',
+    borderLeft: 'none',
+    position: 'fixed',
+    overflowY: 'scroll',
+    top: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '-2px 0px 2px 1px rgba(37, 55, 70, 0.15)',
+    display: 'flex !important',
+    opacity: 0,
+    right: '-50%',
+    transition: 'all 500ms',
+    maxWidth: '100%',
+    p: 'lg',
+    '&.is-small': {
+      width: '420px'
+    },
+    '&.is-full': {
+      width: 'container.full'
+    },
+    '&.is-open.is-transitioning': {
+      right: 0,
+      opacity: 1
+    }
+  },
+  body: {
+    gap: 'md',
+    minHeight: '100%',
+    maxWidth: '768px',
+    alignSelf: 'center'
   },
   innerPanel: {
     backgroundColor: 'background.base'

package/lib/cjs/types/aiPanel.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { BoxProps } from './box';
+import { IconButtonProps } from './iconButton';
+import { OverlayPanelProps, OverlayPanelState } from './overlayPanel';
+interface SharedAIPanelProps {
+    isExpanded?: boolean;
+    setIsExpanded?: (isExpanded: boolean) => void;
+    onPanelClose?: () => void;
+}
+export interface AIPanelProps extends OverlayPanelProps, SharedAIPanelProps {
+    headerProps?: object;
+    state: OverlayPanelState;
+}
+export interface AIPanelHeaderProps extends BoxProps, SharedAIPanelProps {
+    onClose?: () => void;
+    setIsExpanded?: (isExpanded: boolean) => void;
+    isExpanded?: boolean;
+    onPanelClose?: () => void;
+    expandButtonProps?: IconButtonProps;
+    closeButtonProps?: IconButtonProps;
+    slots?: {
+        menuSlot?: React.ReactNode;
+    };
+}
+export {};

package/lib/cjs/types/aiPanel.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/overlayPanel.d.ts

@@ -5,6 +5,9 @@ import { UseOverlayPanelStateReturnOnClose } from '../hooks/useOverlayPanelState
 import { TestingAttributes } from './shared/test';
 import { BoxProps } from './box';
 import { PanelSize } from './shared';
+export interface OverlayPanelState extends OverlayTriggerState {
+    isTransitioning?: boolean;
+}
 export interface OverlayPanelProps extends BoxProps, TestingAttributes {
     /** Sets the open state of the menu. */
     isOpen?: boolean;
@@ -19,5 +22,5 @@ export interface OverlayPanelProps extends BoxProps, TestingAttributes {
     triggerRef?: React.RefObject<HTMLButtonElement>;
     /** Inline styling prop for item */
     sx?: ThemeUICSSObject;
-    state?: OverlayTriggerState;
+    state?: OverlayPanelState;
 }

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -209,4 +209,14 @@ export declare const FIGMA_LINKS: {
     editButton: {
         default: string;
     };
+    listViewItem: {
+        default: string;
+        withSubText: string;
+        withImage: string;
+        withControls: string;
+        withRightOfDataSlot: string;
+        withLeftOfDataSlot: string;
+        withCharts: string;
+        withExtraLongText: string;
+    };
 };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -215,6 +215,16 @@ var FIGMA_LINKS = {
   },
   editButton: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
+  },
+  listViewItem: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39754&t=r7CoWppWfQQ6G2t8-4',
+    withSubText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39756&t=r7CoWppWfQQ6G2t8-4',
+    withImage: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39794&t=r7CoWppWfQQ6G2t8-4',
+    withControls: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39816&t=r7CoWppWfQQ6G2t8-4',
+    withRightOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39854&t=r7CoWppWfQQ6G2t8-4',
+    withLeftOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39909&t=r7CoWppWfQQ6G2t8-4',
+    withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-39944&t=r7CoWppWfQQ6G2t8-4',
+    withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-40069&t=r7CoWppWfQQ6G2t8-4'
   }
 };
 exports.FIGMA_LINKS = FIGMA_LINKS;

package/lib/components/AIComponents/AIPanel/AIPanel.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["state", "triggerRef", "isExpanded", "setIsExpanded", "onPanelClose", "children", "headerProps"];
+import React from 'react';
+import { OverlayPanel, OverlayProvider } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var AIPanel = function AIPanel(props) {
+  var state = props.state,
+    triggerRef = props.triggerRef,
+    isExpanded = props.isExpanded,
+    setIsExpanded = props.setIsExpanded,
+    onPanelClose = props.onPanelClose,
+    children = props.children,
+    headerProps = props.headerProps,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(OverlayProvider, null, (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
+    isTransitioning: state === null || state === void 0 ? void 0 : state.isTransitioning,
+    isOpen: state.isOpen,
+    state: state,
+    triggerRef: triggerRef,
+    size: isExpanded ? 'full' : 'small',
+    variant: "overlayPanel.aiPanelContainer"
+  }, others), children));
+};
+export default AIPanel;

package/lib/components/AIComponents/AIPanel/AIPanel.stories.js

@@ -0,0 +1,92 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import AutoAwesomeIcon from '@pingux/mdi-react/AutoAwesomeOutlineIcon';
+import DotsIcon from '@pingux/mdi-react/DotsHorizontalIcon';
+import { useOverlayPanelState } from '../../../hooks';
+import { Box, Button, Icon, IconButton, Item, Menu, PopoverMenu, Text } from '../../../index';
+import AIPanel from './AIPanel';
+import AIPanelHeader from './AIPanelHeader';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  component: AIPanel,
+  title: 'AI Components/AI Panel'
+};
+var AIMenuPopover = function AIMenuPopover() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return ___EmotionJSX(PopoverMenu, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "more options"
+  }, ___EmotionJSX(Icon, {
+    icon: DotsIcon,
+    size: "sm",
+    title: {
+      name: 'Dots Vertical Icon'
+    }
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete"))));
+};
+export var Default = function Default() {
+  var _useOverlayPanelState = useOverlayPanelState({
+      transitionDuration: 1000
+    }),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  var onPanelClose = function onPanelClose() {
+    state.close();
+    onClose();
+  };
+  var setIsPanelExpanded = function setIsPanelExpanded() {
+    setIsExpanded(!isExpanded);
+  };
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: state.isOpen ? 'calc(100% - 420px)' : '100%',
+      transition: '.4s all ease'
+    }
+  }, ___EmotionJSX(Button, {
+    ref: triggerRef,
+    onPress: state.open,
+    "aria-expanded": state.isOpen,
+    variant: "aiChat",
+    title: "open ai chat panel"
+  }, ___EmotionJSX(Icon, {
+    icon: AutoAwesomeIcon
+  }), "Open Panel"), ___EmotionJSX(AIPanel, {
+    state: state,
+    triggerRef: triggerRef,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }, ___EmotionJSX(AIPanelHeader, {
+    slots: {
+      menuSlot: ___EmotionJSX(AIMenuPopover, null)
+    },
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }), ___EmotionJSX(Box, {
+    gap: "md",
+    py: "md",
+    minHeight: "100%",
+    maxWidth: "768px",
+    alignSelf: "center"
+  }, "AI Component Children will render here")));
+};

package/lib/components/AIComponents/AIPanel/AIPanel.test.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { useOverlayPanelState } from '../../../hooks';
+import { Box, Button } from '../../../index';
+import { fireEvent, render, screen } from '../../../utils/testUtils/testWrapper';
+import AIPanel from './AIPanel';
+import AIPanelHeader from './AIPanelHeader';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-overlayPanel';
+var closeButtonId = 'close-button';
+var defaultProps = {
+  'data-testid': testId
+};
+var slotText = 'slot text';
+var AIMenuPopover = function AIMenuPopover() {
+  return ___EmotionJSX("p", null, slotText);
+};
+var Component = function Component(props) {
+  var slots = props.slots;
+  var _useOverlayPanelState = useOverlayPanelState({
+      transitionDuration: 1000
+    }),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var onPanelClose = function onPanelClose() {
+    state.close();
+    onClose();
+  };
+  var setIsPanelExpanded = function setIsPanelExpanded() {
+    setIsExpanded(!isExpanded);
+  };
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: state.isOpen ? 'calc(100% - 420px)' : '100%',
+      transition: '.4s all ease'
+    }
+  }, ___EmotionJSX(Button, {
+    ref: triggerRef,
+    onPress: state.open,
+    "aria-expanded": state.isOpen
+  }, "Open Panel"), ___EmotionJSX(AIPanel, _extends({
+    triggerRef: triggerRef,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }, defaultProps, {
+    state: state
+  }), ___EmotionJSX(AIPanelHeader, {
+    slots: slots,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }), "AI Component Children will render here"));
+};
+test('AIPanel renders correctly', function () {
+  render(___EmotionJSX(Component, null));
+  expect(screen.getByText('Open Panel')).toBeInTheDocument();
+});
+test('AIPanel opens and closes correctly', function () {
+  render(___EmotionJSX(Component, null));
+  var openButton = screen.getByText('Open Panel');
+  fireEvent.click(openButton);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  var closeButton = screen.getByTestId(closeButtonId);
+  fireEvent.click(closeButton);
+  expect(screen.queryByTestId(testId)).not.toHaveClass('is-open');
+});
+test('AIPanel expands and collapses correctly', function () {
+  render(___EmotionJSX(Component, null));
+  var openButton = screen.getByText('Open Panel');
+  fireEvent.click(openButton);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  var expandButton = screen.getByTestId('expand-button');
+  fireEvent.click(expandButton);
+  expect(screen.getByTestId(testId)).toHaveClass('is-full');
+  fireEvent.click(expandButton);
+  expect(screen.getByTestId(testId)).not.toHaveClass('is-full');
+});
+test('AIPanel menuSlot renders correctly', function () {
+  render(___EmotionJSX(Component, {
+    slots: {
+      menuSlot: ___EmotionJSX(AIMenuPopover, null)
+    }
+  }));
+  var openButton = screen.getByText('Open Panel');
+  fireEvent.click(openButton);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  var thisSlot = screen.getByText(slotText);
+  expect(thisSlot).toBeInTheDocument();
+});

package/lib/components/AIComponents/AIPanel/AIPanelHeader.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import CollapseIcon from '@pingux/mdi-react/ArrowCollapseIcon';
+import OpenIcon from '@pingux/mdi-react/ArrowTopRightBottomLeftIcon';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { Box, Icon, IconButton, Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var AIPanelHeader = function AIPanelHeader(props) {
+  var setIsExpanded = props.setIsExpanded,
+    isExpanded = props.isExpanded,
+    onPanelClose = props.onPanelClose,
+    slots = props.slots,
+    expandButtonProps = props.expandButtonProps,
+    closeButtonProps = props.closeButtonProps;
+  var toggleExpanded = function toggleExpanded() {
+    if (setIsExpanded) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Text, {
+    variant: "aiPanelHeader"
+  }, "AI Assistant"), ___EmotionJSX(Box, {
+    sx: {
+      ml: 'auto',
+      mr: '0px'
+    },
+    isRow: true,
+    alignItems: "center",
+    gap: "xs"
+  }, (slots === null || slots === void 0 ? void 0 : slots.menuSlot) && slots.menuSlot, ___EmotionJSX(IconButton, _extends({
+    onPress: toggleExpanded,
+    "data-testid": "expand-button",
+    title: "toggle panel expansion"
+  }, expandButtonProps), ___EmotionJSX(Icon, {
+    icon: isExpanded ? CollapseIcon : OpenIcon
+  })), ___EmotionJSX(IconButton, _extends({
+    onPress: onPanelClose,
+    title: "close panel",
+    "data-testid": "close-button"
+  }, closeButtonProps), ___EmotionJSX(Icon, {
+    icon: CloseIcon
+  }))));
+};
+export default AIPanelHeader;

package/lib/components/AIComponents/AIPanel/index.js

@@ -0,0 +1,2 @@
+export { default } from './AIPanel';
+export { default as AIPanelHeader } from './AIPanelHeader';