@loja-integrada/admin-components 0.14.1 → 0.15.0

package/dist/Components/TableList/TableList.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { TableListItemProps } from './TableListItem.interface';
+export declare const TableList: React.MemoExoticComponent<({ className, itemWrapper, items, isLoading, empty, withHover, isInsideContainer, }: TableListProps) => JSX.Element>;
+export interface TableListProps extends Pick<TableListItemProps, 'withHover' | 'isInsideContainer' | 'itemWrapper'> {
+    /**
+     * Custom class name
+     * */
+    className?: string;
+    /**
+     * Items of the TableList
+     */
+    items?: Omit<TableListItemProps, 'forceBorderDesktop' | 'itemWrapper' | 'withHover'>[];
+    /** TableList is loading
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Content to show when TableList is empty
+     */
+    empty?: {
+        /** Title when is empty
+         * @default 'Nenhum registro encontrado'
+         */
+        title?: string | React.ReactNode;
+        /**
+         * Subtitle when is empty
+         */
+        subTitle?: string | React.ReactNode;
+        /**
+         * Illustration or icon for when is empty
+         */
+        illustration?: React.ReactNode;
+        /**
+         * Action (button) for when is empty
+         */
+        action?: React.ReactNode;
+    };
+}

package/dist/Components/TableList/TableList.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/TableList/TableList.stories.d.ts

@@ -0,0 +1,7 @@
+import { TableListProps } from './TableList';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableListProps>;
+export declare const WithLoading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableListProps>;
+export declare const WithEmpty: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableListProps>;
+export declare const WithLink: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableListProps>;

package/dist/Components/TableList/TableListItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableListItemProps } from './TableListItem.interface';
+export declare const TableListItem: React.FunctionComponent<TableListItemProps>;

package/dist/Components/TableList/TableListItem.interface.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { IconProps } from '../../Icons';
+export declare type TableListItemWrapperProp = React.ComponentClass<any> | React.FunctionComponent<any>;
+export interface TableListItemProps {
+    /**
+     * Title of the item
+     */
+    title: string | React.ReactNode;
+    /**
+     * Description that appears above the title
+     */
+    description?: string | React.ReactNode;
+    /**
+     * Timestamp of the item, usually in HH:mm
+     */
+    timestampTime?: string;
+    /**
+     * Timestamp of the item, usually in dd/mm/yyyy
+     */
+    timestampDate?: string;
+    /**
+     * Icon to show at item
+     */
+    withIcon?: {
+        /**
+         * Classes with text-color and background of icon
+         */
+        class?: string;
+        /**
+         * Icon to use
+         */
+        icon?: IconProps['icon'];
+    };
+    /** Force border top at desktop even if is first item
+     * @default false
+     */
+    forceBorderDesktop?: boolean;
+    /** Show hover effect
+     * @default false
+     */
+    withHover?: boolean;
+    /** Adds hover effect and mobile border with negative margin to fulfill container padding
+     * @default false
+     */
+    isInsideContainer?: boolean;
+    /**
+     * Props of the `item.itemWrapper`
+     */
+    itemWrapperProps?: {
+        [key: string]: unknown;
+    };
+    /**
+     * Component to wrap item. Usually an <a> or related. Props of each item are placed at `items.itemWrapperProps`
+     */
+    itemWrapper?: TableListItemWrapperProp;
+}

package/dist/Components/TableList/TableListItem.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/TableList/TableListItem.stories.d.ts

@@ -0,0 +1,4 @@
+import { TableListItemProps } from './TableListItem.interface';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const Item: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableListItemProps>;

package/dist/Components/TableList/TableListItemLoading.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableListItemProps } from './TableListItem.interface';
+export declare const TableListItemLoading: React.FunctionComponent<Pick<TableListItemProps, 'forceBorderDesktop'>>;

package/dist/Components/TableList/TableListItemLoading.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/TableList/TableListItemLoading.stories.d.ts

@@ -0,0 +1,4 @@
+import { TableListItemProps } from './TableListItem.interface';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const ItemLoading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<TableListItemProps, "forceBorderDesktop">>;

package/dist/Components/TableList/TableListItemWrapper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TableListItemWrapperProp } from './TableListItem.interface';
+export declare const TableListItemWrapper: ({ Wrapper, props, children, withHover, isInsideContainer, }: TableListItemWrapperProps) => JSX.Element;
+export interface TableListItemWrapperProps {
+    Wrapper?: TableListItemWrapperProp;
+    children: React.ReactNode;
+    props?: {
+        [key: string]: unknown;
+    };
+    withHover?: boolean;
+    isInsideContainer?: boolean;
+}

package/dist/Components/TableList/TableListItemWrapper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/TableList/TableListItemWrapper.stories.d.ts

@@ -0,0 +1,4 @@
+import { TableListItemWrapperProps } from './TableListItemWrapper';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const ItemWrapper: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableListItemWrapperProps>;

package/dist/Components/TableList/index.d.ts

@@ -0,0 +1 @@
+export * from './TableList';

package/dist/Components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './LoadingPlaceholder';
 export * from './Table';
+export * from './TableList';
 export * from './Tabs';
 export * from './Timeline';
 export * from './Modal';

package/dist/Navigation/Breadcrumb/index.d.ts

@@ -22,8 +22,7 @@ export interface BreadcrumbProps {
      * Example: `const Link = (props: any) => { return  <a href="https://www.google.com" target="_blank" className={`underline ` + props.className}>{props.children}</a> }`
      * */
     Link?: React.ElementType;
-    /**
-     * Aligment of `currentTitle` at mobile
+    /** Aligment of `currentTitle` at mobile
      * @default 'left'
      * */
     mobileAlign?: 'left' | 'center';
@@ -39,4 +38,8 @@ export interface BreadcrumbProps {
      * Custom actions and buttons
      * */
     actions?: React.ReactNode;
+    /** Should show actions only at one resolution or always
+     * @default 'both'
+     * */
+    actionsDisplay?: 'desktop' | 'mobile' | 'both';
 }

package/dist/admin-components.cjs.development.js

@@ -2038,6 +2038,185 @@ var TableComponent = function TableComponent(_ref2) {
 
 var Table = /*#__PURE__*/React__default.memo(TableComponent);
 
+var ItemWrapperClasses = "flex relative py-6 text-f7 leading-4 break-words no-underline";
+var ItemWrapperClassesContainerHover = "before:hover:block before:hover:absolute before:hover:h-full before:hover:w-8 before:hover:top-0 before:hover:-left-8 before:hover:bg-base-2 after:hover:block after:hover:absolute after:hover:h-full after:hover:w-8 after:hover:top-0 after:hover:-right-8 after:hover:bg-base-2";
+
+var DefaultWrapper = function DefaultWrapper(props) {
+  var children = props.children,
+      restProps = _objectWithoutPropertiesLoose(props, ["children"]);
+
+  return React__default.createElement("div", Object.assign({}, restProps), children);
+};
+
+var TableListItemWrapper = function TableListItemWrapper(_ref) {
+  var _ref$Wrapper = _ref.Wrapper,
+      Wrapper = _ref$Wrapper === void 0 ? DefaultWrapper : _ref$Wrapper,
+      _ref$props = _ref.props,
+      props = _ref$props === void 0 ? {} : _ref$props,
+      children = _ref.children,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine;
+  return React__default.createElement(Wrapper, Object.assign({
+    className: "table-item-wrapper " + ItemWrapperClasses + " " + (withHover ? "hover:bg-base-2 " + (isInsideContainer ? ItemWrapperClassesContainerHover : '') : '')
+  }, props), children);
+};
+
+var TableListItem = function TableListItem(_ref) {
+  var _ref$forceBorderDeskt = _ref.forceBorderDesktop,
+      forceBorderDesktop = _ref$forceBorderDeskt === void 0 ? false : _ref$forceBorderDeskt,
+      title = _ref.title,
+      description = _ref.description,
+      timestampTime = _ref.timestampTime,
+      timestampDate = _ref.timestampDate,
+      itemWrapper = _ref.itemWrapper,
+      itemWrapperProps = _ref.itemWrapperProps,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine,
+      withIcon = _ref.withIcon;
+  return React__default.createElement("div", {
+    className: "table-item border-primary-bold border-opacity-10 border-t first:border-t-0 " + (forceBorderDesktop ? 'lg:first:border-t' : '')
+  }, React__default.createElement(TableListItemWrapper, {
+    Wrapper: itemWrapper,
+    props: itemWrapperProps,
+    withHover: withHover,
+    isInsideContainer: isInsideContainer
+  }, withIcon && React__default.createElement("div", {
+    className: "table-item-icon flex items-center justify-center flex-none mr-4"
+  }, React__default.createElement("div", {
+    className: "table-item-icon-background h-8 w-8 flex items-center justify-center rounded " + (withIcon["class"] || '')
+  }, React__default.createElement(Icon, {
+    icon: withIcon.icon || 'minus',
+    block: true,
+    size: 5
+  }))), React__default.createElement("div", {
+    className: "table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full"
+  }, React__default.createElement("div", {
+    className: "table-item-title text-f6 font-semibold"
+  }, title), description && React__default.createElement("div", {
+    className: "table-item-description"
+  }, description)), timestampTime && React__default.createElement("div", {
+    className: "table-item-timestamp flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right"
+  }, React__default.createElement("div", {
+    className: "table-item-timestamp-time w-full"
+  }, timestampTime), timestampDate && React__default.createElement("div", {
+    className: "table-item-timestamp-date w-full hidden lg:block"
+  }, timestampDate))));
+};
+
+var TableListItemLoading = function TableListItemLoading(_ref) {
+  var _ref$forceBorderDeskt = _ref.forceBorderDesktop,
+      forceBorderDesktop = _ref$forceBorderDeskt === void 0 ? false : _ref$forceBorderDeskt;
+  return React__default.createElement("div", {
+    className: "table-item table-item-loading border-primary-bold border-opacity-10 border-t first:border-t-0 " + (forceBorderDesktop ? 'lg:first:border-t' : '')
+  }, React__default.createElement(TableListItemWrapper, null, React__default.createElement("div", {
+    className: "table-item-icon flex items-center justify-center flex-none mr-4"
+  }, React__default.createElement("div", {
+    className: "table-item-icon-background h-8 w-8 flex items-center justify-center rounded"
+  }, React__default.createElement(LoadingPlaceholder, {
+    className: "w-full"
+  }))), React__default.createElement("div", {
+    className: "table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full"
+  }, React__default.createElement("div", {
+    className: "table-item-title text-f6 font-semibold"
+  }, React__default.createElement(LoadingPlaceholder, {
+    className: "w-2/3"
+  })), React__default.createElement("div", {
+    className: "table-item-description"
+  }, React__default.createElement(LoadingPlaceholder, {
+    className: "w-1/3"
+  }))), React__default.createElement("div", {
+    className: "table-item-timestamp flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right"
+  }, React__default.createElement("div", {
+    className: "table-item-timestamp-time w-full"
+  }, React__default.createElement(LoadingPlaceholder, {
+    className: "w-16"
+  })))));
+};
+
+var groupTitleMobileClass = "before:block before:absolute before:h-0 before:w-5 before:-top-px before:-left-5 before:border-t before:border-primary-bold before:border-opacity-10 after:block after:absolute after:h-0 after:w-5 after:-top-px after:-right-5 after:border-t after:border-primary-bold after:border-opacity-10";
+
+var TableListComponent = function TableListComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      itemWrapper = _ref.itemWrapper,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$empty = _ref.empty,
+      empty = _ref$empty === void 0 ? {
+    title: 'Nenhum registro encontrado'
+  } : _ref$empty,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine;
+  var itemsMemoized = React__default.useMemo(function () {
+    var groups = items.reduce(function (groups, item) {
+      var groupTitle = item.timestampDate || item.timestampTime || 'no_title';
+
+      if (!groups[groupTitle]) {
+        groups[groupTitle] = [];
+      }
+
+      groups[groupTitle].push(item);
+      return groups;
+    }, {});
+    return Object.keys(groups).map(function (groupTitle) {
+      return {
+        title: groupTitle,
+        items: groups[groupTitle]
+      };
+    });
+  }, [items]);
+  return React__default.createElement("div", {
+    className: "table-list tracking-tight " + className
+  }, isLoading ? React__default.createElement("div", {
+    className: "table-list-loading"
+  }, React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null)) : !itemsMemoized || !itemsMemoized.length ? React__default.createElement("div", {
+    className: "table-list-empty flex flex-col items-center justify-center gap-5 min-h-[80vh] lg:min-h-[60vh] max-w-sm mx-auto px-4"
+  }, empty.illustration && React__default.createElement("div", {
+    className: "table-list-empty-illustration text-center"
+  }, empty.illustration), React__default.createElement("div", {
+    className: "table-list-empty-title text-center text-f4 font-semibold text-primary-bold leading-7"
+  }, empty.title), empty.subTitle && React__default.createElement("div", {
+    className: "table-list-empty-subtitle text-center text-f6 text-on-base-2 leading-6 -mt-1"
+  }, empty.subTitle), empty.action && React__default.createElement("div", {
+    className: "table-list-empty-action text-center"
+  }, empty.action)) : itemsMemoized.map(function (group, indexGroup) {
+    return React__default.createElement("div", {
+      key: "group-items-" + indexGroup,
+      className: "table-list-group"
+    }, group.title && group.title !== 'no_title' && React__default.createElement("div", {
+      className: "table-list-title relative lg:hidden border-primary-bold border-opacity-10 " + (indexGroup !== 0 ? "border-t " + (isInsideContainer ? groupTitleMobileClass : '') : '')
+    }, React__default.createElement("span", {
+      className: "text-f5 text-on-base-2 leading-4 break-words inline-block pt-6 pb-2"
+    }, group.title)), React__default.createElement("div", {
+      className: "group-items"
+    }, group.items.map(function (item, indexItem) {
+      return React__default.createElement(TableListItem, {
+        key: "group-item-" + indexItem,
+        forceBorderDesktop: indexItem === 0 && indexGroup !== 0,
+        title: item.title,
+        description: item.description,
+        timestampTime: item.timestampTime,
+        timestampDate: item.timestampDate,
+        itemWrapper: itemWrapper,
+        itemWrapperProps: item.itemWrapperProps,
+        withIcon: item.withIcon,
+        withHover: withHover,
+        isInsideContainer: isInsideContainer
+      });
+    })));
+  }));
+};
+
+var TableList = /*#__PURE__*/React__default.memo(TableListComponent);
+
 var activeStyles = function activeStyles(active) {
   return active ? "border-primary font-semibold" : "border-transparent";
 }; // When using bold at hover, prevent text shift
@@ -2926,6 +3105,11 @@ var Header = function Header(_ref2) {
 ContainerComponent.Header = Header;
 var Container$1 = ContainerComponent;
 
+var actionsDisplayClass = {
+  both: 'flex',
+  desktop: 'hidden lg:flex',
+  mobile: 'flex lg:hidden'
+};
 var Breadcrumb = /*#__PURE__*/React__default.memo(function (_ref) {
   var Link = _ref.Link,
       currentTitle = _ref.currentTitle,
@@ -2935,6 +3119,8 @@ var Breadcrumb = /*#__PURE__*/React__default.memo(function (_ref) {
       mobileAlign = _ref$mobileAlign === void 0 ? 'left' : _ref$mobileAlign,
       help = _ref.help,
       actions = _ref.actions,
+      _ref$actionsDisplay = _ref.actionsDisplay,
+      actionsDisplay = _ref$actionsDisplay === void 0 ? 'both' : _ref$actionsDisplay,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className;
   var renderPrevTitle = React__default.createElement("span", {
@@ -2999,7 +3185,7 @@ var Breadcrumb = /*#__PURE__*/React__default.memo(function (_ref) {
   }), help.title && React__default.createElement("span", {
     className: "text-f6 font-semibold tracking-4 leading-6 ml-2 " + (!help.mobileText ? 'hidden md:inline' : '')
   }, help.title))), actions && React__default.createElement("div", {
-    className: "header-navigation-actions flex items-center gap-5"
+    className: "header-navigation-actions items-center gap-5 " + (actionsDisplayClass[actionsDisplay] || '')
   }, actions)));
 });
 
@@ -3193,6 +3379,7 @@ exports.SidebarItem = SidebarItem;
 exports.SidebarSubItem = SidebarSubItem;
 exports.Status = Status;
 exports.Table = Table;
+exports.TableList = TableList;
 exports.Tabs = Tabs;
 exports.Timeline = Timeline;
 exports.Toast = Toast;