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

package/src/components/Notifications/NotificationItem.tsx

@@ -0,0 +1,136 @@
+import { Button, Flex, IconBox, OneOfColorSchemesWithVariants, SxProp, Text } from '@citric/core'
+import { Envelope, EnvelopeOpen } from '@citric/icons'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { differenceInDays, parseISO } from 'date-fns'
+import { useAnchorTag } from '../../context/anchor'
+import { useDateFormatter } from '../../hooks/date'
+import { LazyMarkdown } from '../LazyMarkdown/index'
+import { StackspotNotification } from './types'
+
+const styles = {
+  item: (color: string, isRead: boolean) => ({
+    borderLeft: `2px solid ${color}`,
+    opacity: isRead ? 0.5 : 1,
+  }),
+} satisfies Record<string, (...args: any) => SxProp>
+
+const statusToColor: Record<string, OneOfColorSchemesWithVariants> = {
+  LOW: 'success.500',
+  MEDIUM: 'warning.500',
+  HIGH: 'danger.500',
+}
+
+interface Props {
+  notification: StackspotNotification,
+  isSummary: boolean,
+}
+
+const NotificationHeader = ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => (
+  <Flex justifyContent="space-between" mb={2}>
+    <Text appearance={isSummary ? 'body2' : 'body1'}>
+      {notification.title}
+    </Text>
+    <IconBox appearance="circle" 
+      onClick={() => {
+        !notification.committed && onClickMarkRead()
+      }}
+      sx={{ border: `1px solid ${theme.color.light[500]}`, cursor: notification.committed ? 'default' : 'pointer' }}>
+      {notification.committed ? <Envelope /> : <EnvelopeOpen />}
+    </IconBox>
+  </Flex>
+)
+
+const getDaysAgo = (dateString: string): number => {
+  const givenDate = parseISO(dateString)
+  const today = new Date()
+  return differenceInDays(today, givenDate)
+}
+
+const NotificationContent = ({ notification, isSummary }: Props) => {
+  const { formatDate } = useDateFormatter()
+  const t = useTranslate(dictionary)
+
+  const daysAgo = getDaysAgo(notification.trigger_at)
+
+  return (
+    <>
+      {!isSummary && <Flex mt={4} mb={3}>
+        <LazyMarkdown>{notification.description}</LazyMarkdown>
+      </Flex>}
+      <Flex>
+        <Text appearance="microtext1" colorScheme="light.700">
+          {t[notification.context]}
+        </Text>
+        <Text appearance="microtext1" colorScheme="light.700" mx="2">
+        •
+        </Text>
+        {!isSummary && <>
+          <Text appearance="microtext1" colorScheme="light.700">
+            {formatDate(notification.created_at)}
+          </Text>
+          <Text appearance="microtext1" colorScheme="light.700" mx="2">
+          •
+          </Text>
+        </>}
+        <Text appearance="microtext1" colorScheme="light.700">
+          {daysAgo > 0 ? daysAgo + ' '+ t.daysAgo : t.today }
+        </Text>
+      </Flex>
+    </>
+  )
+}
+interface NotificationFooterProps  { 
+  call_to_action: string, 
+  onClickMarkRead: () => void,
+}
+
+const NotificationFooter = ({ call_to_action, onClickMarkRead }: NotificationFooterProps) => {
+  const t = useTranslate(dictionary)
+  const Link = useAnchorTag()
+  
+  return (
+    <Flex mt="5">
+      <Button size="sm" colorScheme="inverse" onClick={onClickMarkRead}>
+        <Link href={call_to_action}>
+          <Text colorScheme={'inverse.contrastText'}>
+            {t.takeMeThere}
+          </Text>
+        </Link>
+      </Button>
+    </Flex>
+  )
+}
+
+interface NotificationItemProps extends Props {
+  onClickMarkRead: () => void,
+}
+
+export const NotificationItem = ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => (
+  <Flex bg="light.400" p="3 3 3 5" r="xs"
+    flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
+    <NotificationHeader notification={notification} isSummary={isSummary} onClickMarkRead={onClickMarkRead}/>
+    <NotificationContent notification={notification} isSummary={isSummary} />
+    {notification.call_to_action && <NotificationFooter call_to_action={notification.call_to_action} 
+      onClickMarkRead={onClickMarkRead} />}
+  </Flex>
+)
+
+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',
+  },
+} satisfies Dictionary

package/src/components/Notifications/index.tsx

@@ -0,0 +1,3 @@
+export { NotificationComponent } from './NotificationComponent'
+export { NotificationItem } from './NotificationItem'
+export * from './types'

package/src/components/Notifications/types.ts

@@ -0,0 +1,46 @@
+// eslint-disable-next-line no-restricted-syntax
+export enum NotificationType {
+  High = 'HIGH',
+  Medium = 'MEDIUM',
+  Low = 'LOW',
+}
+
+// eslint-disable-next-line no-restricted-syntax
+export 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,
+}
+
+// eslint-disable-next-line no-restricted-syntax
+export enum UnreadType {
+  Unread = 'unread',
+}

package/src/components/ScrollView.tsx

@@ -0,0 +1,51 @@
+import { OneOfColorSchemesWithVariants, OneOfPalettesWithVariants } from '@citric/core'
+import { getColor } from '@citric/core/dist/utils/theme'
+import { styled } from 'styled-components'
+
+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',
+}
+
+function getDirectionStyle({ direction = 'both', scrollType = 'auto' }: Props) {
+  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<Props>`
+  ${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;
+  }
+`

package/src/components/StatusCircle.tsx

@@ -0,0 +1,44 @@
+import { OneOfColorSchemesWithVariants, OneOfPalettesWithVariants, Theme } from '@citric/core'
+import { getColor } from '@citric/core/dist/utils/theme'
+import { Tooltip } from '@citric/ui'
+import styled from 'styled-components'
+
+type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants
+
+export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress'
+
+interface Props {
+  status?: Status,
+  tooltip?: string,
+}
+
+const statusToColor: Record<Status, Color> = {
+  success: 'success.500',
+  warning: 'warning.500',
+  danger: 'danger.500',
+  progress: 'secondary.500',
+  unknown: 'light.contrastText',
+}
+
+function getColorFromStatus(theme: Theme, status?: Status) {
+  const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown
+  return getColor(theme, colorName)
+}
+
+interface WithTooltip {
+  tooltip?: string,
+  className?: string,
+  style?: React.CSSProperties,
+}
+
+const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
+  const circle = <div style={style} className={className}></div>
+  return tooltip && tooltip.length ? <Tooltip text={tooltip}>{circle}</Tooltip> : circle
+}
+
+export const StatusCircle = styled(CircleWithTooltip)<Props>`
+  background-color: ${({ status, theme }) => getColorFromStatus(theme as any, status)};
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+`

package/src/hooks/date.ts

@@ -0,0 +1,43 @@
+import { Language, useLanguage } from '@stack-spot/portal-translate'
+import { format } from 'date-fns'
+import { ptBR } from 'date-fns/locale'
+
+function formatDate(date: string, locale: Language, includeTime: boolean) {
+  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?: string) {
+  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?: string) {
+  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?: string) => date ? formatDate(date, locale, false) : undefined,
+    formatDateWithTime: (date?: string) => date ? formatDate(date, locale, true) : undefined,
+  }
+}

package/src/index.ts

@@ -7,4 +7,3 @@ export { titleEffect, useTitleEffect } from './hooks/title'
 export { useEffectOnce } from './hooks/use-effect-once'
 export * from './utils/accessibility'
 export * from './utils/cookie'
-