@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/layout.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import { bool, func, objectOf, string } from 'prop-types';
+import UTButton from '../../../../../../../UTButton';
+import UTLabel from '../../../../../../../UTLabel';
+import UTSearchField from '../../../../../../../UTSearchField';
+import UTTooltip from '../../../../../../../UTTooltip';
+import { customSearchActionType, refType } from '../../../../../../types';
+import { ID_CONSTANTS, TEST_IDS } from '../../../../../../../../constants/testIds';
+import { ICON_BY_POSITION, TOOLTIP_PLACEMENT } from './constants';
+const {
+  filterGrouping
+} = TEST_IDS;
+const {
+  ADD_FILTER_BUTTON,
+  COLLAPSE_BUTTON,
+  COLLAPSE_BUTTON_TOOLTIP,
+  SEARCH_BUTTON,
+  SEARCH_BUTTON_TOOLTIP,
+  SEARCH_FIELD,
+  TITLE
+} = ID_CONSTANTS;
+const ExpandedPanelContentHeader = _ref => {
+  let {
+    animationEnd,
+    classes,
+    collapseButtonTippyRef,
+    collapseButtonTooltip,
+    customSearchAction,
+    dataTestId,
+    handleAddFilterGroup,
+    handleFilterGroupSearch,
+    handleSearchToggle,
+    handleTogglePanel,
+    hideAddFilterButton,
+    panelTitle,
+    position,
+    searchButtonTippyRef,
+    searchButtonTooltip,
+    searchOpen,
+    searchValue
+  } = _ref;
+  return /*#__PURE__*/React.createElement("header", {
+    className: "".concat(classes.expandedPanelContentHeader, " ").concat(searchOpen ? classes.expandedPanelContentHeaderSearchOpen : '')
+  }, searchOpen ? /*#__PURE__*/React.createElement(UTSearchField, {
+    customAction: customSearchAction,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_FIELD) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchField,
+    onChange: handleFilterGroupSearch,
+    value: searchValue,
+    variant: "white"
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.expandedPanelContentTitle,
+    colorTheme: "dark",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(TITLE) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.title,
+    shade: "05",
+    variant: "subtitle1",
+    weight: "medium"
+  }, panelTitle), /*#__PURE__*/React.createElement("section", {
+    className: classes.expandedPanelContentActions
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.expandedPanelContentActionsContainer,
+    onAnimationEnd: animationEnd
+  }, /*#__PURE__*/React.createElement(UTTooltip, {
+    arrow: false,
+    content: searchButtonTooltip,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_BUTTON_TOOLTIP) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButtonTooltip,
+    tippyProps: {
+      onCreate: instance => {
+        searchButtonTippyRef.current = instance;
+      },
+      placement: TOOLTIP_PLACEMENT
+    }
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButton,
+    Icon: "IconSearch",
+    onClick: handleSearchToggle,
+    variant: "text"
+  }))), /*#__PURE__*/React.createElement(UTTooltip, {
+    arrow: false,
+    content: collapseButtonTooltip,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON_TOOLTIP) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButtonTooltip,
+    tippyProps: {
+      onCreate: instance => {
+        collapseButtonTippyRef.current = instance;
+      },
+      placement: TOOLTIP_PLACEMENT
+    }
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButton,
+    Icon: ICON_BY_POSITION[position],
+    onClick: handleTogglePanel,
+    variant: "text"
+  })))), !hideAddFilterButton && /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "dark",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ADD_FILTER_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.addFilterButton,
+    Icon: "IconPlus",
+    onClick: handleAddFilterGroup,
+    variant: "text"
+  }))));
+};
+ExpandedPanelContentHeader.propTypes = {
+  animationEnd: func,
+  classes: objectOf(string),
+  collapseButtonTippyRef: refType,
+  collapseButtonTooltip: string,
+  customSearchAction: customSearchActionType,
+  dataTestId: string,
+  handleAddFilterGroup: func,
+  handleFilterGroupSearch: func,
+  handleSearchToggle: func,
+  handleTogglePanel: func,
+  hideAddFilterButton: bool,
+  panelTitle: string,
+  position: string,
+  searchButtonTippyRef: refType,
+  searchButtonTooltip: string,
+  searchOpen: bool,
+  searchValue: string
+};
+export default ExpandedPanelContentHeader;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentPopper/constants.js

@@ -0,0 +1,5 @@
+import { PANEL_POSITIONS } from '../../../../../../constants';
+export const POPPER_PLACEMENT = {
+  [PANEL_POSITIONS.LEFT]: 'right',
+  [PANEL_POSITIONS.RIGHT]: 'left'
+};

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentPopper/index.js

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import { string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../../../context';
+import ExpandedPanelContentPopper from './layout';
+const ExpandedPanelContentPopperContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    closePopper,
+    popperState: {
+      anchor,
+      description,
+      title
+    } = {},
+    position
+  } = useContext(UTShortcutPanelContext);
+  return /*#__PURE__*/React.createElement(ExpandedPanelContentPopper, {
+    anchor: anchor,
+    classes: classes,
+    dataTestId: dataTestId,
+    description: description,
+    onClose: closePopper,
+    position: position,
+    title: title
+  });
+};
+ExpandedPanelContentPopperContainer.propTypes = {
+  dataTestId: string
+};
+export default ExpandedPanelContentPopperContainer;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentPopper/layout.js

@@ -0,0 +1,48 @@
+import capitalize from 'lodash/capitalize';
+import React from 'react';
+import { func, object, objectOf, string } from 'prop-types';
+import UTPopper from '../../../../../../../UTPopper';
+import UTLabel from '../../../../../../../UTLabel';
+import { ID_CONSTANTS } from '../../../../../../../../constants/testIds';
+import { POPPER_PLACEMENT } from './constants';
+const {
+  TITLE,
+  LABEL
+} = ID_CONSTANTS;
+const ExpandedPanelContentPopper = _ref => {
+  let {
+    anchor,
+    classes,
+    dataTestId,
+    description,
+    onClose,
+    position,
+    title
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTPopper, {
+    anchor: anchor,
+    className: "".concat(classes.popper, " ").concat(classes["popper".concat(capitalize(position))]),
+    onClose: onClose,
+    placement: POPPER_PLACEMENT[position]
+  }, /*#__PURE__*/React.createElement("article", {
+    className: classes.expandedPanelContentPopperContent
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    dataTestId: "".concat(dataTestId, ".").concat(TITLE),
+    variant: "small",
+    weight: "medium"
+  }, title), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(LABEL),
+    variant: "small"
+  }, description)));
+};
+ExpandedPanelContentPopper.propTypes = {
+  anchor: object,
+  classes: objectOf(string),
+  dataTestId: string,
+  description: string,
+  onClose: func,
+  position: string,
+  title: string
+};
+export default ExpandedPanelContentPopper;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/index.js

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import { string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../context';
+import { ID_CONSTANTS } from '../../../../../../constants/testIds';
+import ExpandedPanelContent from './layout';
+const {
+  EXPANDED_PANEL_CONTENT
+} = ID_CONSTANTS;
+const ExpandedPanelContentContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    categories,
+    categoriesConfig
+  } = useContext(UTShortcutPanelContext);
+  const modifiedDataTestId = dataTestId ? "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT) : undefined;
+  return /*#__PURE__*/React.createElement(ExpandedPanelContent, {
+    categories: categories,
+    categoriesConfig: categoriesConfig,
+    classes: classes,
+    modifiedDataTestId: modifiedDataTestId
+  });
+};
+ExpandedPanelContentContainer.propTypes = {
+  dataTestId: string
+};
+export default ExpandedPanelContentContainer;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/layout.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { array, object, objectOf, string } from 'prop-types';
+import { ID_CONSTANTS } from '../../../../../../constants/testIds';
+import ExpandedPanelContentCategory from './components/ExpandedPanelContentCategory';
+import ExpandedPanelContentHeader from './components/ExpandedPanelContentHeader';
+import ExpandedPanelContentPopper from './components/ExpandedPanelContentPopper';
+const {
+  EXPANDED_PANEL_CONTENT_CATEGORY,
+  POPPER
+} = ID_CONSTANTS;
+const ExpandedPanelContent = _ref => {
+  let {
+    modifiedDataTestId,
+    classes,
+    categories,
+    categoriesConfig
+  } = _ref;
+  return /*#__PURE__*/React.createElement("article", {
+    className: classes.expandedPanelContent
+  }, /*#__PURE__*/React.createElement(ExpandedPanelContentHeader, {
+    dataTestId: modifiedDataTestId
+  }), categories && Array.isArray(categories) && categories.map(category => /*#__PURE__*/React.createElement(ExpandedPanelContentCategory, {
+    key: category.id,
+    category: category,
+    dataTestId: modifiedDataTestId ? "".concat(modifiedDataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY) : undefined,
+    categoryConfig: categoriesConfig[category.category]
+  })), /*#__PURE__*/React.createElement(ExpandedPanelContentPopper, {
+    dataTestId: "".concat(modifiedDataTestId, ".").concat(POPPER)
+  }));
+};
+ExpandedPanelContent.propTypes = {
+  categories: array,
+  categoriesConfig: objectOf(object),
+  classes: objectOf(string),
+  modifiedDataTestId: string
+};
+export default ExpandedPanelContent;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/index.js

@@ -0,0 +1,51 @@
+import React, { useContext, useRef } from 'react';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import { bool, func, string } from 'prop-types';
+import UTShortcutPanelContext from '../../context';
+import { iconPropTypes } from '../../../../types/iconTypes';
+import { ID_CONSTANTS } from '../../../../constants/testIds';
+import { refType } from '../../../../types/commonTypes';
+import GroupingPanel from './layout';
+const {
+  GROUPING_PANEL
+} = ID_CONSTANTS;
+const GroupingPanelContainer = _ref => {
+  let {
+    containerRef,
+    dataTestId,
+    iconProps,
+    onClose,
+    open,
+    panelTitle,
+    position
+  } = _ref;
+  const {
+    classes,
+    scrollProps
+  } = useContext(UTShortcutPanelContext);
+  const appendedDataTestId = dataTestId ? "".concat(dataTestId, ".").concat(GROUPING_PANEL) : undefined;
+  const drawerRef = useRef(null);
+  return /*#__PURE__*/React.createElement(GroupingPanel, {
+    appendedDataTestId: appendedDataTestId,
+    classes: classes,
+    containerRef: containerRef,
+    dataTestId: appendedDataTestId,
+    drawerRef: drawerRef,
+    iconProps: iconProps,
+    onClose: onClose,
+    open: open,
+    panelTitle: panelTitle,
+    position: position,
+    scrollProps: scrollProps
+  });
+};
+GroupingPanelContainer.propTypes = {
+  containerRef: refType,
+  dataTestId: string,
+  onClose: func,
+  open: bool,
+  position: string,
+  panelTitle: string,
+  iconProps: iconPropTypes
+};
+export default GroupingPanelContainer;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/layout.js

@@ -0,0 +1,60 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import capitalize from 'lodash/capitalize';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import React from 'react';
+import { bool, func, object, objectOf, refType, string } from 'prop-types';
+import { Drawer } from '@material-ui/core';
+import CollapsedPanelContent from './components/CollapsedPanelContent';
+import ExpandedPanelContent from './components/ExpandedPanelContent';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+const GroupingPanel = _ref => {
+  let {
+    appendedDataTestId,
+    classes,
+    containerRef,
+    drawerRef,
+    onClose,
+    open,
+    position,
+    scrollProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Drawer, {
+    anchor: position,
+    classes: {
+      paper: "".concat(classes.paper, " ").concat(open ? classes.paperOpen : ''),
+      root: classes["panelRoot".concat(capitalize(position))]
+    },
+    disablePortal: true,
+    ModalProps: {
+      hideBackdrop: true,
+      disableEnforceFocus: true,
+      container: containerRef,
+      keepMounted: !!containerRef
+    },
+    onClose: onClose,
+    open: open,
+    ref: drawerRef,
+    swipeAreaWidth: 0,
+    variant: "permanent"
+  }, open ? /*#__PURE__*/React.createElement(PerfectScrollbar, _extends({}, scrollProps, {
+    className: classes.perfectScrollbar,
+    options: {
+      suppressScrollX: true
+    }
+  }), /*#__PURE__*/React.createElement(ExpandedPanelContent, {
+    dataTestId: appendedDataTestId
+  })) : /*#__PURE__*/React.createElement(CollapsedPanelContent, {
+    dataTestId: appendedDataTestId
+  }));
+};
+GroupingPanel.propTypes = {
+  appendedDataTestId: string,
+  classes: objectOf(string),
+  containerRef: refType,
+  drawerRef: refType,
+  onClose: func,
+  open: bool,
+  position: string,
+  scrollProps: object
+};
+export default GroupingPanel;

package/dist/esm/components/UTShortcutPanel/constants.js

@@ -0,0 +1,4 @@
+export const PANEL_POSITIONS = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};

package/dist/esm/components/UTShortcutPanel/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const UTShortcutPanelContext = /*#__PURE__*/createContext({});
+export default UTShortcutPanelContext;

package/dist/esm/components/UTShortcutPanel/index.js

@@ -0,0 +1,184 @@
+import React, { useRef, useMemo, useState, useEffect } from 'react';
+import { arrayOf, bool, func, number, object, objectOf, shape, string } from 'prop-types';
+import WithTheme from '../WithTheme';
+import { iconPropTypes } from '../../types/iconTypes';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import styles from './styles.module.scss';
+import UTShortcutPanel from './layout';
+import UTShortcutPanelContext from './context';
+import { PANEL_POSITIONS } from './constants';
+import { retrieveStyle } from './theme';
+const UTShortcutPanelContainer = _ref => {
+  let {
+    categories,
+    categoriesConfig,
+    children,
+    classNames,
+    classes: theme,
+    dataTestId,
+    disableCollapsibleCategories = false,
+    handleSelectFilter,
+    hideAddFilterButton = false,
+    iconProps,
+    noFiltersText,
+    noFiltersTitle,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping,
+    onTogglePanel,
+    panelTitle,
+    position = PANEL_POSITIONS.LEFT,
+    scrollProps,
+    selectedFilter,
+    startOpen = false,
+    tooltipsContentMap = {}
+  } = _ref;
+  const classes = useMemo(() => mergeMultipleClassNames(styles, theme, classNames), [classNames, theme]);
+  const containerRef = useRef(null);
+  const [open, setOpen] = useState(startOpen);
+  const [filteredValues, setFilteredValues] = useState(false);
+  const handleTogglePanel = () => {
+    setOpen(!open);
+    onTogglePanel === null || onTogglePanel === void 0 || onTogglePanel(!open);
+  };
+  const [filteredCategories, setFilteredCategories] = useState(categories);
+
+  // TODO: desarrollo en otro PR
+  const handleAddFilterGroup = () => {};
+  const handleFilterGroupSearch = value => {
+    const filteredResults = categories.map(category => {
+      const filters = category.filters.filter(filter => filter.name.toLowerCase().includes(value.toLowerCase()));
+      return {
+        ...category,
+        filters
+      };
+    }).filter(category => category.filters.length > 0);
+    setFilteredCategories(filteredResults);
+    setFilteredValues(Boolean(value));
+  };
+  const [popperState, setPopperState] = useState({});
+  const openPopper = _ref2 => {
+    let {
+      anchor,
+      title,
+      description
+    } = _ref2;
+    if (!anchor) return;
+    if (!description && title.length < 20) return;
+    setPopperState({
+      anchor,
+      title,
+      description
+    });
+  };
+  const closePopper = () => {
+    setPopperState({});
+  };
+  useEffect(() => {
+    setFilteredCategories(categories);
+  }, [categories]);
+  const contextValue = useMemo(() => ({
+    categories: filteredCategories,
+    categoriesConfig,
+    classes,
+    closePopper,
+    containerRef: containerRef.current,
+    disableCollapsibleCategories,
+    filteredValues,
+    handleAddFilterGroup,
+    handleFilterGroupSearch,
+    handleSelectFilter,
+    handleTogglePanel,
+    hideAddFilterButton,
+    iconProps,
+    noFiltersText,
+    noFiltersTitle,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping,
+    open,
+    openPopper,
+    panelTitle,
+    popperState,
+    position,
+    scrollProps,
+    selectedFilter,
+    theme,
+    tooltipsContentMap
+  }), [categories, categoriesConfig, classes, disableCollapsibleCategories, filteredCategories, filteredValues, hideAddFilterButton, iconProps, noFiltersText, noFiltersTitle, onDeleteFilterGrouping, onEditFilterGrouping, open, popperState, position, scrollProps, selectedFilter, theme, tooltipsContentMap]);
+  return /*#__PURE__*/React.createElement(UTShortcutPanelContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("section", {
+    className: classes.filterGroupingContainer,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(UTShortcutPanel, {
+    containerRef: containerRef.current,
+    dataTestId: dataTestId,
+    handleTogglePanel: handleTogglePanel,
+    iconProps: iconProps,
+    open: open,
+    position: position
+  }, children)));
+};
+UTShortcutPanelContainer.propTypes = {
+  categories: arrayOf(shape({
+    id: number,
+    category: string,
+    name: string,
+    filters: arrayOf(shape({
+      id: number,
+      name: string,
+      category: string,
+      description: string,
+      order: number,
+      pinned: bool,
+      visible: bool,
+      backoffice_user_id: string,
+      filter_params: arrayOf(shape({
+        key: string,
+        values: arrayOf(string)
+      }))
+    }))
+  })),
+  categoriesConfig: objectOf(shape({
+    icon: string,
+    avatarPalette: shape({
+      color: string,
+      backgroundColor: string,
+      colorTheme: string
+    })
+  })),
+  classNames: objectOf(string),
+  classes: objectOf(string),
+  dataTestId: string,
+  disableCollapsibleCategories: bool,
+  handleSelectFilter: func,
+  hideAddFilterButton: bool,
+  iconProps: iconPropTypes,
+  noFiltersText: string,
+  noFiltersTitle: string,
+  onDeleteFilterGrouping: func,
+  onEditFilterGrouping: func,
+  onTogglePanel: func,
+  panelTitle: string,
+  position: string,
+  scrollProps: object,
+  selectedFilter: shape({
+    id: number,
+    name: string,
+    category: string,
+    description: string,
+    order: number,
+    pinned: bool,
+    visible: bool,
+    backoffice_user_id: string,
+    filter_params: arrayOf(shape({
+      key: string,
+      values: arrayOf(string)
+    }))
+  }),
+  startOpen: bool,
+  tooltipsContentMap: shape({
+    collapseButton: string,
+    searchButton: string
+  })
+};
+export default WithTheme(retrieveStyle)(UTShortcutPanelContainer);

package/dist/esm/components/UTShortcutPanel/layout.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { bool, func, string, refType } from 'prop-types';
+import { iconPropTypes } from '../../types/iconTypes';
+import GroupingPanel from './components/GroupingPanel';
+const UTShortcutPanel = _ref => {
+  let {
+    children,
+    containerRef,
+    dataTestId,
+    handleTogglePanel,
+    iconProps,
+    open,
+    panelTitle,
+    position
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GroupingPanel, {
+    containerRef: containerRef,
+    dataTestId: dataTestId,
+    iconProps: iconProps,
+    onClose: handleTogglePanel,
+    open: open,
+    panelTitle: panelTitle,
+    position: position
+  }), children);
+};
+UTShortcutPanel.propTypes = {
+  containerRef: refType,
+  dataTestId: string,
+  handleTogglePanel: func,
+  iconProps: iconPropTypes,
+  open: bool,
+  panelTitle: string,
+  position: string
+};
+export default UTShortcutPanel;

package/dist/esm/components/UTShortcutPanel/stories/UTShortcutPanel.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/addon-docs';
+
+import * as UTShortcutPanelStories from './UTShortcutPanel.stories';
+
+<Meta of={UTShortcutPanelStories} />
+
+<Title>UTShortcutPanel</Title>
+
+<Description of={UTShortcutPanelStories} />
+
+<Canvas of={UTShortcutPanelStories.Playground} />
+
+<ArgTypes />