@stack-spot/portal-components 1.2.0 → 1.3.0-rc

package/dist/components/Notifications/NotificationComponent.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, Flex, IconBox, Text } from '@citric/core';
+import { Bell, TimesMini } from '@citric/icons';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { AsyncContent } from '../AsyncContent.js';
+import { InfiniteScroll } from '../InfiniteScroll.js';
+import { ScrollView } from '../ScrollView.js';
+import { StatusCircle } from '../StatusCircle.js';
+import { NotificationItem } from './NotificationItem.js';
+import { NotificationType, UnreadType } from './types.js';
+const ANIMATION_DURATION_MS = 300;
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`;
+const NotificationsComponent = styled(Flex) `
+  max-height: 0;
+  z-index: 1;
+  visibility: hidden;
+  position: absolute;
+  top: calc(var(--header-height) - 2px);
+  right: -270%;
+  width: 400px;
+
+  &.visible {
+    min-height: 802px;
+    visibility: visible;
+    transition: ${MAX_HEIGHT_TRANSITION};
+  }
+
+  .content {
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[400]};
+    box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
+    background-color: ${theme.color.light[300]};
+    overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
+    overflow-x: hidden;
+    transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-width: 10px;
+    border-style: solid;
+    border-color: transparent;
+    bottom: 100%;
+    left: 74%;
+    margin-left: -5px;
+    transform: rotate(180deg);
+    border-top-color: ${theme.color.light[400]};
+  }
+`;
+const StyledBox = styled(Box) `
+  width: 100%;
+  > div:first-child{
+    width: 100%;
+  }
+`;
+const NotificationFilterButton = (props) => {
+    const { type, onChangeFilterType, ariaLabel, label, enumType } = props;
+    return (_jsx(Button, { appearance: "text", role: "button", "aria-label": ariaLabel, "aria-pressed": type === enumType, onClick: () => onChangeFilterType(enumType), sx: { borderColor: type === enumType ? 'primary' : 'transparent' }, children: _jsx(Text, { colorScheme: "inverse", appearance: "microtext1", children: label }) }));
+};
+const NotificationsFilter = ({ type, onChangeFilterType }) => {
+    const t = useTranslate(dictionary);
+    return (_jsxs(Flex, { alignItems: "center", sx: { gap: '4px' }, my: "5", children: [_jsx(Button, { "aria-pressed": !type, appearance: "text", role: "button", "aria-label": t.filterAll, onClick: () => onChangeFilterType(), sx: { borderColor: !type ? 'primary' : 'transparent' }, children: _jsx(Text, { colorScheme: "inverse", appearance: "microtext1", children: t.all }) }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterUnread, label: t.unread, enumType: UnreadType.Unread }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterHigh, label: t.high, enumType: NotificationType.High }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterMedium, label: t.medium, enumType: NotificationType.Medium }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterLow, label: t.low, enumType: NotificationType.Low })] }));
+};
+export const NotificationComponent = ({ hasUnreadNotification, onMarkAsRead, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary = false, }) => {
+    const t = useTranslate(dictionary);
+    const [visible, setVisible] = useState(false);
+    const updateType = (updatedType) => {
+        onUpdateType(updatedType);
+    };
+    return (_jsxs(Flex, { sx: { position: 'relative' }, children: [_jsx(IconBox, { size: "md", sx: { cursor: 'pointer' }, onClick: () => {
+                    onClickViewNotifications();
+                    setVisible(true);
+                }, className: "notificationsTour", children: _jsx(Bell, {}) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, children: _jsx(StatusCircle, { status: 'danger' }) }), _jsx(NotificationsComponent, { className: listToClass(['selection-list', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconBox, { appearance: "circle", onClick: () => setVisible(false), sx: { border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }, children: _jsx(TimesMini, {}) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: '630px' }, children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", children: notifications?.map((item) => (_jsx(NotificationItem, { notification: item, isSummary: isSummary, onClickMarkRead: () => onMarkAsRead(item.id) }, item.id))) }) }) }) })
+                                        :
+                                            _jsx(_Fragment, { children: placeholderComponent }) })] }), _jsx(Flex, { w: "100%", pt: 3, children: _jsx(Button, { size: "sm", sx: { width: '100%' }, colorScheme: "inverse", appearance: "text", onClick: () => {
+                                    setVisible(false);
+                                    onClickViewAll();
+                                }, children: _jsx(Text, { appearance: "microtext1", children: t.seeAll }) }) })] }) })] }));
+};
+const dictionary = {
+    en: {
+        notifications: 'Notifications',
+        all: 'All',
+        filterAll: 'Filter all notifications',
+        filterUnread: 'Filter unread notifications',
+        filterHigh: 'Filter high notifications',
+        filterMedium: 'Filter medium notifications',
+        filterLow: 'Filter low notifications',
+        unread: 'Unread',
+        high: 'High',
+        medium: 'Medium',
+        low: 'Low',
+        seeAll: 'See all notifications',
+    },
+    pt: {
+        notifications: 'Notificações',
+        all: 'Todos',
+        filterAll: 'Filtrar todas as notificações ',
+        filterUnread: 'Filtrar notificações não lidas',
+        filterHigh: 'Filtrar notificações criticidade alta',
+        filterMedium: 'Filtrar notificações criticidade média',
+        filterLow: 'Filtrar notificações criticidade baixa',
+        unread: 'Não lidas',
+        high: 'Alto',
+        medium: 'Médio',
+        low: 'Baixo',
+        seeAll: 'Ver todas as notificações',
+    },
+};
+//# sourceMappingURL=NotificationComponent.js.map

package/dist/components/Notifications/NotificationComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"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"}

package/dist/components/Notifications/NotificationItem.d.ts

@@ -0,0 +1,11 @@
+import { StackspotNotification } from './types.js';
+interface Props {
+    notification: StackspotNotification;
+    isSummary: boolean;
+}
+interface NotificationItemProps extends Props {
+    onClickMarkRead: () => void;
+}
+export declare const NotificationItem: ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NotificationItem.d.ts.map

package/dist/components/Notifications/NotificationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CACpB;AA8ED,UAAU,qBAAsB,SAAQ,KAAK;IAC3C,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,iDAAkD,qBAAqB,4CAQnG,CAAA"}

package/dist/components/Notifications/NotificationItem.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Flex, IconBox, Text } from '@citric/core';
+import { Envelope, EnvelopeOpen } from '@citric/icons';
+import { theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { differenceInDays, parseISO } from 'date-fns';
+import { useAnchorTag } from '../../context/anchor.js';
+import { useDateFormatter } from '../../hooks/date.js';
+import { LazyMarkdown } from '../LazyMarkdown/index.js';
+const styles = {
+    item: (color, isRead) => ({
+        borderLeft: `2px solid ${color}`,
+        opacity: isRead ? 0.5 : 1,
+    }),
+};
+const statusToColor = {
+    LOW: 'success.500',
+    MEDIUM: 'warning.500',
+    HIGH: 'danger.500',
+};
+const NotificationHeader = ({ notification, isSummary, onClickMarkRead }) => (_jsxs(Flex, { justifyContent: "space-between", mb: 2, children: [_jsx(Text, { appearance: isSummary ? 'body2' : 'body1', children: notification.title }), _jsx(IconBox, { appearance: "circle", onClick: () => {
+                !notification.committed && onClickMarkRead();
+            }, sx: { border: `1px solid ${theme.color.light[500]}`, cursor: notification.committed ? 'default' : 'pointer' }, children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) })] }));
+const getDaysAgo = (dateString) => {
+    const givenDate = parseISO(dateString);
+    const today = new Date();
+    return differenceInDays(today, givenDate);
+};
+const NotificationContent = ({ notification, isSummary }) => {
+    const { formatDate } = useDateFormatter();
+    const t = useTranslate(dictionary);
+    const daysAgo = getDaysAgo(notification.trigger_at);
+    return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, children: _jsx(LazyMarkdown, { children: notification.description }) }), _jsxs(Flex, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t[notification.context] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" }), !isSummary && _jsxs(_Fragment, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: formatDate(notification.created_at) }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" })] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: daysAgo > 0 ? daysAgo + ' ' + t.daysAgo : t.today })] })] }));
+};
+const NotificationFooter = ({ call_to_action, onClickMarkRead }) => {
+    const t = useTranslate(dictionary);
+    const Link = useAnchorTag();
+    return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: onClickMarkRead, children: _jsx(Link, { href: call_to_action, children: _jsx(Text, { colorScheme: 'inverse.contrastText', children: t.takeMeThere }) }) }) }));
+};
+export const NotificationItem = ({ notification, isSummary, onClickMarkRead }) => (_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], notification.committed), children: [_jsx(NotificationHeader, { notification: notification, isSummary: isSummary, onClickMarkRead: onClickMarkRead }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { call_to_action: notification.call_to_action, onClickMarkRead: onClickMarkRead })] }));
+const dictionary = {
+    en: {
+        takeMeThere: 'Take me there',
+        ACCOUNT: 'Account',
+        WORKSPACE: 'Workspace',
+        STUDIO: 'Studio',
+        daysAgo: 'days ago',
+        today: 'today',
+    },
+    pt: {
+        takeMeThere: 'Leve-me para lá',
+        ACCOUNT: 'Conta',
+        WORKSPACE: 'Workspace',
+        STUDIO: 'Estúdio',
+        daysAgo: 'dias atrás',
+        today: 'hoje',
+    },
+};
+//# sourceMappingURL=NotificationItem.js.map

package/dist/components/Notifications/NotificationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}

package/dist/components/Notifications/index.d.ts

@@ -0,0 +1,4 @@
+export { NotificationComponent } from './NotificationComponent.js';
+export { NotificationItem } from './NotificationItem.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Notifications/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,cAAc,SAAS,CAAA"}

package/dist/components/Notifications/index.js

@@ -0,0 +1,4 @@
+export { NotificationComponent } from './NotificationComponent.js';
+export { NotificationItem } from './NotificationItem.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/components/Notifications/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Notifications/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,cAAc,SAAS,CAAA"}

package/dist/components/Notifications/types.d.ts

@@ -0,0 +1,38 @@
+export declare enum NotificationType {
+    High = "HIGH",
+    Medium = "MEDIUM",
+    Low = "LOW"
+}
+export declare enum NotificationContext {
+    Account = "ACCOUNT",
+    Workspace = "WORKSPACE",
+    Studio = "STUDIO"
+}
+export interface StackspotNotification {
+    id: string;
+    title: string;
+    description: string;
+    criticality: NotificationType;
+    call_to_action?: string;
+    committed: boolean;
+    context: NotificationContext;
+    trigger_at: string;
+    created_at: string;
+}
+export type NotificationTypeFilters = NotificationType | UnreadType;
+export interface NotificationFilters {
+    filterBy?: 'criticality' | 'context';
+    filterValue?: string;
+    sort?: string;
+    direction?: string;
+    page?: any;
+    size?: string;
+}
+export interface NotificationCommitted {
+    id: string;
+    committed: boolean;
+}
+export declare enum UnreadType {
+    Unread = "unread"
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Notifications/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/types.ts"],"names":[],"mappings":"AACA,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,GAAG,QAAQ;CACZ;AAGD,oBAAY,mBAAmB;IAC7B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,UAAU,CAAA;AAEnE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;CACpB;AAGD,oBAAY,UAAU;IACpB,MAAM,WAAW;CAClB"}

package/dist/components/Notifications/types.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line no-restricted-syntax
+export var NotificationType;
+(function (NotificationType) {
+    NotificationType["High"] = "HIGH";
+    NotificationType["Medium"] = "MEDIUM";
+    NotificationType["Low"] = "LOW";
+})(NotificationType || (NotificationType = {}));
+// eslint-disable-next-line no-restricted-syntax
+export var NotificationContext;
+(function (NotificationContext) {
+    NotificationContext["Account"] = "ACCOUNT";
+    NotificationContext["Workspace"] = "WORKSPACE";
+    NotificationContext["Studio"] = "STUDIO";
+})(NotificationContext || (NotificationContext = {}));
+// eslint-disable-next-line no-restricted-syntax
+export var UnreadType;
+(function (UnreadType) {
+    UnreadType["Unread"] = "unread";
+})(UnreadType || (UnreadType = {}));
+//# sourceMappingURL=types.js.map

package/dist/components/Notifications/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Notifications/types.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,iCAAa,CAAA;IACb,qCAAiB,CAAA;IACjB,+BAAW,CAAA;AACb,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AAED,gDAAgD;AAChD,MAAM,CAAN,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,8CAAuB,CAAA;IACvB,wCAAiB,CAAA;AACnB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;AA8BD,gDAAgD;AAChD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,+BAAiB,CAAA;AACnB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}

package/dist/components/ScrollView.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { OneOfColorSchemesWithVariants, OneOfPalettesWithVariants } from '@citric/core';
+type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants;
+interface Props {
+    /**
+     * By default, the ScrollView scrolls in both directions
+     */
+    direction?: 'horizontal' | 'vertical' | 'both';
+    /**
+     * The color of the track in the scroll bar (background)
+     * light.400 by default
+     */
+    trackColor?: Color;
+    /**
+     * The color of the thumb in the scroll bar (foreground)
+     * light.700 by default
+     */
+    thumbColor?: Color;
+    /**
+     * `auto` to show the scroll-bar only when the content overflows. `scroll` to always show it.
+     * `auto` by default
+     */
+    scrollType?: 'auto' | 'scroll';
+}
+export declare const ScrollView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
+export {};
+//# sourceMappingURL=ScrollView.d.ts.map

package/dist/components/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AAIvF,KAAK,KAAK,GAAG,6BAA6B,GAAG,yBAAyB,CAAA;AAEtE,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC/C;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAChC;AAQD,eAAO,MAAM,UAAU,0OAgBtB,CAAA"}

package/dist/components/ScrollView.js

@@ -0,0 +1,25 @@
+import { getColor } from '@citric/core/dist/utils/theme.js';
+import { styled } from 'styled-components';
+function getDirectionStyle({ direction = 'both', scrollType = 'auto' }) {
+    const x = direction === 'both' || direction === 'horizontal' ? `overflow-x: ${scrollType};` : '';
+    const y = direction === 'both' || direction === 'vertical' ? `overflow-x: ${scrollType};` : '';
+    return `${x}${y}`;
+}
+export const ScrollView = styled.div `
+  ${getDirectionStyle}
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: ${({ theme, trackColor = 'light.400' }) => getColor(theme, trackColor)};
+    border-radius: 2px;
+    left: 40px;
+  }
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ theme, thumbColor = 'light.700' }) => getColor(theme, thumbColor)};
+    border-radius: 2px;
+  }
+`;
+//# sourceMappingURL=ScrollView.js.map

package/dist/components/ScrollView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.js","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AA0B1C,SAAS,iBAAiB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,UAAU,GAAG,MAAM,EAAS;IAC3E,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAChG,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9F,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,CAAA;AACnB,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAO;IACvC,iBAAiB;;;;;;kBAMH,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;;;;kBAMpE,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;CAGrF,CAAA"}

package/dist/components/StatusCircle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress';
+interface Props {
+    status?: Status;
+    tooltip?: string;
+}
+interface WithTooltip {
+    tooltip?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const StatusCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<WithTooltip, Props>> & string & Omit<({ tooltip, className, style }: WithTooltip) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export {};
+//# sourceMappingURL=StatusCircle.d.ts.map

package/dist/components/StatusCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAeD,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAOD,eAAO,MAAM,YAAY,4LALiC,WAAW,4FAUpE,CAAA"}

package/dist/components/StatusCircle.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getColor } from '@citric/core/dist/utils/theme.js';
+import { Tooltip } from '@citric/ui';
+import styled from 'styled-components';
+const statusToColor = {
+    success: 'success.500',
+    warning: 'warning.500',
+    danger: 'danger.500',
+    progress: 'secondary.500',
+    unknown: 'light.contrastText',
+};
+function getColorFromStatus(theme, status) {
+    const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown;
+    return getColor(theme, colorName);
+}
+const CircleWithTooltip = ({ tooltip, className, style }) => {
+    const circle = _jsx("div", { style: style, className: className });
+    return tooltip && tooltip.length ? _jsx(Tooltip, { text: tooltip, children: circle }) : circle;
+};
+export const StatusCircle = styled(CircleWithTooltip) `
+  background-color: ${({ status, theme }) => getColorFromStatus(theme, status)};
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+`;
+//# sourceMappingURL=StatusCircle.js.map

package/dist/components/StatusCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAWtC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAQD,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}

package/dist/hooks/date.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @deprecated this hook is prone to errors due to how React Hooks work. Use `useDateFormatter()` instead.
+ * @param date
+ * @returns the formatted date
+ */
+export declare function useFormatDate(date?: string): string | undefined;
+/**
+ * @deprecated this hook is prone to errors due to how React Hooks work. Use `useDateFormatter()` instead.
+ * @param date
+ * @returns the formatted date with its time
+ */
+export declare function useFormatDateWithTime(date?: string): string | undefined;
+/**
+ * A utility for formatting dates.
+ * @param date
+ * @returns a date formatter object.
+ */
+export declare function useDateFormatter(): {
+    formatDate: (date?: string) => string | undefined;
+    formatDateWithTime: (date?: string) => string | undefined;
+};
+//# sourceMappingURL=date.d.ts.map

package/dist/hooks/date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/hooks/date.ts"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,sBAG1C;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,CAAC,EAAE,MAAM,sBAGlD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB;wBAGR,MAAM;gCACE,MAAM;EAErC"}

package/dist/hooks/date.js

@@ -0,0 +1,40 @@
+import { useLanguage } from '@stack-spot/portal-translate';
+import { format } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+function formatDate(date, locale, includeTime) {
+    const time = includeTime ? ' HH:mm' : '';
+    return locale === 'pt'
+        ? format(new Date(date), `dd/MM/yyyy${time}`, { locale: ptBR })
+        : format(new Date(date), `MMMM dd yyyy${time}`);
+}
+/**
+ * @deprecated this hook is prone to errors due to how React Hooks work. Use `useDateFormatter()` instead.
+ * @param date
+ * @returns the formatted date
+ */
+export function useFormatDate(date) {
+    const locale = useLanguage();
+    return date ? formatDate(date, locale, false) : undefined;
+}
+/**
+ * @deprecated this hook is prone to errors due to how React Hooks work. Use `useDateFormatter()` instead.
+ * @param date
+ * @returns the formatted date with its time
+ */
+export function useFormatDateWithTime(date) {
+    const locale = useLanguage();
+    return date ? formatDate(date, locale, true) : undefined;
+}
+/**
+ * A utility for formatting dates.
+ * @param date
+ * @returns a date formatter object.
+ */
+export function useDateFormatter() {
+    const locale = useLanguage();
+    return {
+        formatDate: (date) => date ? formatDate(date, locale, false) : undefined,
+        formatDateWithTime: (date) => date ? formatDate(date, locale, true) : undefined,
+    };
+}
+//# sourceMappingURL=date.js.map

package/dist/hooks/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/hooks/date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAEtC,SAAS,UAAU,CAAC,IAAY,EAAE,MAAgB,EAAE,WAAoB;IACtE,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IACxC,OAAO,MAAM,KAAK,IAAI;QACpB,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,aAAa,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;QAC/D,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,eAAe,IAAI,EAAE,CAAC,CAAA;AACnD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,IAAa;IACzC,MAAM,MAAM,GAAG,WAAW,EAAE,CAAA;IAC5B,OAAO,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAC3D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,IAAa;IACjD,MAAM,MAAM,GAAG,WAAW,EAAE,CAAA;IAC5B,OAAO,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAC1D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,MAAM,GAAG,WAAW,EAAE,CAAA;IAC5B,OAAO;QACL,UAAU,EAAE,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QACjF,kBAAkB,EAAE,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;KACzF,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "1.2.0",
+  "version": "1.3.0-rc",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,6 +10,10 @@
     "./ErrorFeedback": "./dist/components/ErrorFeedback.js",
     "./SelectionList": "./dist/components/SelectionList.js",
     "./Tour": "./dist/components/Tour/index.js",
+    "./LazyMarkdown": "./dist/components/LazyMarkdown/index.js",
+    "./Notifications": "./dist/components/Notifications/index.js",
+    "./StatusCircle": "./dist/components/StatusCircle.js",
+    "./InfiniteScroll": "./dist/components/InfiniteScroll.js",
     "./svg": "./dist/svg/index.js",
     "./anchor": "./dist/context/anchor.js"
   },
@@ -31,6 +35,7 @@
     "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/reactour": "^1.18.5",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
@@ -43,15 +48,21 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "rimraf": "^5.0.7",
     "styled-components": "6.1.10",
     "tsc-esm-fix": "^2.20.26",
-    "typescript": "^5.2.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "typescript": "^5.2.2"
   },
   "dependencies": {
+    "date-fns": "^3.6.0",
     "lodash": "^4.17.21",
-    "reactour": "^1.19.3"
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "reactour": "^1.19.3",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0"
   }
 }

package/src/components/AsyncContent.tsx

@@ -0,0 +1,70 @@
+import { Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
+
+export interface ErrorProps {
+  /**
+   * The error component to be rendered in case of error. It should receive error props
+   */
+  errorComponent:  React.FC<{ error: any }>,
+  /**
+   * The function to report the error.
+   */
+  reportError: (error: any) => void,
+}
+
+interface Props {
+  /**
+   * Whether or not to show the loading feedback.
+   */
+  loading: boolean,
+  /**
+   * A javascript error. Used to show error feedbacks.
+   */
+  error?: any,
+  /**
+   * If provided, this element will receive focus as soon as the content is loaded and has no errors.
+   * Can be either a React Ref Object or a query selector.
+   */
+  autofocus?: string | MutableRefObject<HTMLElement>,
+  /**
+   * The content to show if it's not loading or has errors.
+   */
+  children: React.ReactNode,
+  /**
+   * The error details component.
+  */
+  errorDetails: ErrorProps,
+}
+
+export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }: Props) => {
+  const ErrorComponent = errorDetails.errorComponent
+
+  useEffect(() => {
+    if (error) {
+      errorDetails.reportError(error)
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }, [error])
+
+  useLayoutEffect(() => {
+    if (!loading && !error) {
+      typeof autofocus === 'string' ? (document.querySelector(autofocus) as HTMLElement)?.focus?.() : autofocus?.current?.focus()
+    }
+  }, [loading, error])
+
+  if (loading) {
+    return (
+      <Flex alignItems="center" justifyContent="center" flex={1} style={{ padding: '80px' }} data-test-hint="loading">
+        <LoadingCircular />
+      </Flex>
+    )
+  }
+
+  if (error) {
+    return <ErrorComponent error={error} />
+  }
+
+  return children
+}

package/src/components/InfiniteScroll.tsx

@@ -0,0 +1,13 @@
+import { LoadingCircular } from '@citric/ui'
+import ReactInfiniteScroll, { Props as ReactInfiniteScrollProps } from 'react-infinite-scroll-component'
+
+export const InfiniteScroll = ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, 'loader'>) => (
+  <ReactInfiniteScroll
+    loader={<LoadingCircular />}
+    scrollableTarget={scrollableTarget || 'page'}
+    style={{ overflow: 'hidden', ...style }}
+    {...props}
+  >
+    {children}
+  </ReactInfiniteScroll>
+)