@stack-spot/portal-components 2.0.2 → 2.1.0

package/src/components/error/ErrorFeedback.tsx

@@ -1,6 +1,8 @@
-import { Box, Button, Container, Flex, LinkBox, Text } from '@citric/core'
+import { Button, LinkBox, Text } from '@citric/core'
+import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useState } from 'react'
+import { styled } from 'styled-components'
 import { Forbidden } from '../../svg/Forbidden'
 import { Logo } from '../../svg/Logo'
 import { NotFound } from '../../svg/NotFound'
@@ -55,8 +57,52 @@ export interface ErrorDescription {
    * The image for the error. Overwrites anything preset by "code".
    */
   image?: React.ReactElement,
+  /**
+   * Whether to show the feedback horizontally (row) or vertically (column).
+   * 
+   * @default 'row'
+   */
+  direction?: 'row' | 'column',
+  style?: React.CSSProperties,
+  className?: string,
 }
 
+const FeedbackBox = styled.div`
+  background-color: ${theme.color.light[400]};
+  padding: 24px;
+  .content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.row {
+      flex-direction: row;
+      gap: 40px;
+    }
+    &.column {
+      flex-direction: column;
+      .text-content {
+        align-items: center;
+      }
+    }
+    .text-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      gap: '10px';
+    }
+    .details {
+      background-color: ${theme.color.danger[500]};
+      color: ${theme.color.danger.contrastText};
+      padding: 12px;
+      border-radius: 5px;
+    }
+  }
+`
+
 /**
  * A box with an icon and an error message. This is used for giving error feedbacks to the user.
  * 
@@ -64,72 +110,64 @@ export interface ErrorDescription {
  * 
  * @param options the error code, the error message and whether or not the application is in debug mode.
  */
-export const ErrorFeedback = ({ code = 0, message, debug, title, body, image, action, description, help }: ErrorDescription) => {
+export const ErrorFeedback = (
+  { code = 0, message, debug, title, body, image, action, description, help, direction = 'row', style, className }: ErrorDescription,
+) => {
   const t = useTranslate(dictionary) as Record<string, string>
   const [showDetails, setShowDetails] = useState(false)
   const shouldShowButtons = !!(action || (debug && message))
 
   function renderBody() {
-    return typeof body === 'string' ? <Text appearance="body1" mt={5} colorScheme="inverse">{body}</Text> : body
+    return typeof body === 'string' ? <Text appearance="body1" colorScheme="inverse" className="description">{body}</Text> : body
   }
 
   return (
-    <Box bg="light.400">
-      <Container>
-        <Flex alignItems="center" sx={{ padding: 12 }}>
-          <Box width={5} sx={{ display: ['block', 'none'] }}>
-            <Flex justifyContent="flex-end" pr={20}>
-              {image ?? imageMap[code] ?? <ServerError style={imageStyle} />}
-            </Flex>
-          </Box>
-          <Box width={[7, 12]}> 
-            <LinkBox href="/">
-              <Logo style={{ width: '130px', height: '30px' }} />
-            </LinkBox>
-            <Box w={[7, 12]}>
-              <Text appearance="h4" mt={5} colorScheme="inverse">
-                {(code && !title) ? `${code}. ` : ''}
-                <Text appearance="h4" as="span" colorScheme="light.700">
-                  {title ?? t[`${code}.title`]}
-                </Text>
+    <FeedbackBox style={style} className={className}>
+      <div className={listToClass(['content', direction])}>
+        <div className="image">{image ?? imageMap[code] ?? <ServerError style={imageStyle} />}</div>
+        <div className="text-content">
+          <LinkBox href="/" className="logo">
+            <Logo style={{ width: '130px', height: '30px' }} />
+          </LinkBox>
+          <Text appearance="h4" mt={5} colorScheme="inverse" className="title">
+            {(code && !title) ? `${code}. ` : ''}
+            <Text appearance="h4" as="span" colorScheme="light.700">
+              {title ?? t[`${code}.title`]}
+            </Text>
+          </Text>
+          {body ? renderBody() : (
+            <>
+              <Text appearance="body1" mt={5} colorScheme="inverse" className="description">
+                {description ?? t[`${code}.description`]}
               </Text>
 
-              {body ? renderBody() : (
-                <>
-                  <Text appearance="body1" mt={5} colorScheme="inverse">
-                    {description ?? t[`${code}.description`]}
-                  </Text>
-
-                  <Text appearance="body1" colorScheme="light.700" mt={1}>
-                    {help ?? t[`${code}.help`]}
-                  </Text>
-                </>
-              )}
-              
-              {shouldShowButtons && (
-                <Flex flexDirection="row" style={{ gap: '10px', marginTop: '12px' }}>
-                  {action && (
-                    <Button colorScheme="inverse" onClick={action.onClick}>
-                      {action.label}
-                    </Button>
-                  )}
-                  {debug && message && (
-                    <Button appearance="outlined" colorScheme="inverse" onClick={() => setShowDetails(v => !v)}>
-                      {showDetails ? t.hideDetails : t.showDetails}
-                    </Button>
-                  )}
-                </Flex>
+              <Text appearance="body1" colorScheme="light.700" className="help">
+                {help ?? t[`${code}.help`]}
+              </Text>
+            </>
+          )}
+          {shouldShowButtons && (
+            <div className="buttons">
+              {action && (
+                <Button colorScheme="inverse" onClick={action.onClick}>
+                  {action.label}
+                </Button>
               )}
-              {showDetails && (
-                <Box bg="danger" mt={8} p={4} sx={{ borderRadius: '5px' }}>
-                  <Text appearance="microtext1" colorScheme="danger.contrastText">{message}</Text>
-                </Box>
+              {debug && message && (
+                <Button appearance="outlined" colorScheme="inverse" onClick={() => setShowDetails(v => !v)}>
+                  {showDetails ? t.hideDetails : t.showDetails}
+                </Button>
               )}
-            </Box>
-          </Box>
-        </Flex>
-      </Container>
-    </Box>
+            </div>
+          )}
+          {showDetails && (
+            <div className="details">
+              <Text appearance="microtext1">{message}</Text>
+            </div>
+          )}
+        </div>
+      </div>
+    </FeedbackBox>
   )
 }
 

package/src/components/form/SearchInput.tsx

@@ -0,0 +1,69 @@
+import { Box, IconBox, Input } from '@citric/core'
+import { Filter, Times } from '@citric/icons'
+import { FieldAddon, FieldGroup, IconButton } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { debounce } from 'lodash'
+import { useCallback, useState } from 'react'
+
+export const SearchInput = ({
+  searchText,
+  defaultValue,
+  disabled = false,
+  onChange,
+  style,
+  className,
+}: {
+  searchText: string,
+  defaultValue?: string,
+  disabled?: boolean,
+  onChange: (value?: string) => void,
+  style?: React.CSSProperties,
+  className?: string,
+}) => {
+  const [value, setValue] = useState(defaultValue)
+  const runOnChange = useCallback(debounce(onChange, 800), [onChange])
+  const t = useTranslate(dictionary)
+
+  return (
+    <Box sx={{ position: 'relative' }} style={style} className={className}>
+      <FieldGroup>
+        <FieldAddon>
+          <IconBox size="xs" colorIcon="light.700">
+            <Filter />
+          </IconBox>
+        </FieldAddon>
+        <Input
+          value={value}
+          placeholder={searchText}
+          onChange={(e) => {
+            setValue(e.target.value)
+            runOnChange(e.target.value)
+          }}
+          disabled={disabled}
+          maxLength={255}
+        />
+      </FieldGroup>
+      {!!value && (
+        <IconButton
+          sx={{ position: 'absolute', right: '20px', top: '50%', transform: 'translate(50%, -50%)' }}
+          onClick={() => {
+            setValue('')
+            runOnChange('')
+          }}
+          aria-label={t.ariaClearField}
+        >
+          <Times />
+        </IconButton>
+      )}
+    </Box>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaClearField: 'Clear field',
+  },
+  pt: {
+    ariaClearField: 'Limpar campo',
+  },
+} satisfies Dictionary

package/src/components/form/Select.tsx

@@ -0,0 +1,264 @@
+import { IconBox, Text } from '@citric/core'
+import { ChevronDown } from '@citric/icons'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { InputHTMLAttributes, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+
+interface BaseSelectProps<T> extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
+  /**
+   * The current value.
+   */
+  value: T | undefined,
+  /**
+   * The label for the empty option. This sets the value to undefined.
+   * 
+   * If this is not set, there won't be an empty option for this select.
+   */
+  emptyOption?: string,
+  /**
+   * The options to render in this selection menu.
+   */
+  options: T[],
+  /**
+   * Provides the value of each option. This can be either a key of the option object or a function that receives the option and returns
+   * the value.
+   * 
+   * This is required if the options are not strings or numbers.
+   * 
+   * @example
+   * - `'id'`
+   * - `(option) => option.id`
+   */
+  renderValue?: keyof T | ((item: Exclude<T, undefined>) => string),
+  /**
+   * Provides the label of each option. This can be either a key of the option object or a function that receives the option and returns
+   * the label.
+   * 
+   * This is required if the options are not strings or numbers.
+   * 
+   * @example
+   * - `'name'`
+   * - `(option) => option.name`
+   */
+  renderLabel?: keyof T | ((item: Exclude<T, undefined>) => string),
+  /**
+   * Called when the value changes.
+   * @param value the new value.
+   */
+  onChange: (value: T | undefined) => void,
+  /**
+   * The maximum number of items before showing a vertical scroll bar.
+   * @default 6
+   */
+  maxItems?: number,
+}
+
+interface OptionalSelectProps<T> extends BaseSelectProps<T> {
+  emptyOption: string,
+}
+
+interface RequiredSelectProps<T> extends Omit<BaseSelectProps<T>, 'onChange'> {
+  emptyOption?: undefined,
+  value: T,
+  onChange: (value: T) => void,
+}
+
+type SelectProps<T> = OptionalSelectProps<T> | RequiredSelectProps<T>
+
+const OPTION_HEIGHT = 32
+const LIST_BOTTOM_PADDING = 7
+
+const SelectBox = styled.div<{ $maxItems: number }>`
+  position: relative;
+
+  select {
+    border: none;
+    height: 40px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  .fake-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${theme.color.light[600]};
+    transition: border-color 0.3s, box-shadow 0.3s;
+    z-index: 1;
+    background-color: ${theme.color.light[300]};
+
+    .arrow {
+      transition: transform ease-in-out 0.3s;
+    }
+
+    &.focused, &.open {
+      border: 1px solid ${theme.color.primary[500]};
+      box-shadow: 0 0 0 1px ${theme.color.primary[500]};
+    }
+
+    &.open {
+      .arrow {
+        transform: rotate(180deg);
+      }
+      .options {
+        /* lets the overflow be hidden until the animation on the height ends. */
+        overflow-y: auto;
+        animation: 0.3s overflow-animation;
+        @keyframes overflow-animation {
+          0% {
+            overflow-y: hidden;
+          }
+          99% {
+            overflow-y: hidden;
+          }
+          100% {
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+
+    .current-value {
+      height: 40px;
+      display: flex;
+      flex-direction: row;
+      padding: 0 8px;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .clipped-text {
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .options {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      overflow-y: hidden;
+      transition: height ease-in-out 0.3s;
+      max-height: ${({ $maxItems }) => $maxItems * OPTION_HEIGHT + LIST_BOTTOM_PADDING}px;
+
+      li {
+        height: ${OPTION_HEIGHT}px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0 8px;
+        border-top: 1px solid ${theme.color.light[600]};
+        cursor: pointer;
+        transition: background-color 0.2s;
+        &:hover {
+          background-color: ${theme.color.light[500]};
+        }
+      }
+    }
+  }
+`
+
+function renderProperty(option: any, renderer: any): string {
+  if (!renderer) return `${option ?? ''}`
+  return typeof renderer === 'function' ? renderer(option) : (option[renderer] ?? `${option ?? ''}`)
+}
+
+const FakeOption = (
+  { value, label, onChange }: { value: string, label: string, onChange: (event: { target: { value: string } }) => void },
+) => (
+  <li className="option" onClick={() => onChange({ target: { value } })}>
+    <Text className="clipped-text">{label}</Text>
+  </li>
+)
+
+/**
+ * Renders a Select component using the Citric Design System.
+ * 
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * @param props the component props: {@link SelectProps}.
+ */
+export function Select<T>({
+  onChange, options, value, emptyOption, renderLabel, renderValue, maxItems = 6, onFocus, onBlur, style, className, ...props
+}: SelectProps<T>) {
+  const [open, setOpen] = useState(false)
+  const [focused, setFocused] = useState(false)
+  const valueLabelRef = useRef<HTMLDivElement>(null)
+
+  const onChangeOption = useCallback((event: { target: { value: string } }) => {
+    const value = options.find(o => renderProperty(o, renderValue) === event.target.value)
+    onChange(value!)
+  }, [])
+
+  const onClickOutside = useCallback((event: MouseEvent) => {
+    if (valueLabelRef.current && !valueLabelRef.current.contains(event.target as Node)) setOpen(false)
+  }, [])
+
+  const [htmlOptions, fakeOptions] = useMemo(
+    () => options.reduce<[React.ReactElement[], React.ReactElement[]]>(([opts, fake], o) => {
+      const id = renderProperty(o, renderValue)
+      const label = renderProperty(o, renderLabel)
+      return [
+        [...opts, <option key={id} value={id} selected={value === id}>{label}</option>],
+        [...fake, <FakeOption key={id} value={id} label={label} onChange={onChangeOption} />],
+      ]
+    }, [[], []]),
+    [options, value],
+  )
+
+  const height = open ? (LIST_BOTTOM_PADDING + (options.length + (emptyOption === undefined ? 0 : 1)) * OPTION_HEIGHT) : 0
+
+  function getCurrentValue() {
+    return value === undefined ? '' : renderProperty(value, renderValue)
+  }
+
+  function getCurrentLabel() {
+    return value === undefined ? (emptyOption ?? '') : renderProperty(value, renderLabel)
+  }
+
+  useEffect(() => {
+    const detach = () => document.removeEventListener('mousedown', onClickOutside)
+    if (open) document.addEventListener('mousedown', onClickOutside)
+    else detach()
+    return detach 
+  }, [open])
+
+  return (
+    <SelectBox style={style} className={className} $maxItems={maxItems}>
+      { /* Screen readers can use the select component from the browser instead of the highly styled component we show. */ }
+      <select
+        {...props}
+        value={getCurrentValue()}
+        onChange={onChangeOption}
+        onFocus={(ev) => {
+          setFocused(true)
+          onFocus?.(ev)
+        }}
+        onBlur={(ev) => {
+          setFocused(false)
+          onBlur?.(ev)
+        }}
+      >
+        {emptyOption === undefined ? null : <option value="" selected={!value}>{emptyOption}</option>}
+        {htmlOptions}
+      </select>
+      <div className={listToClass(['fake-select', open && 'open', focused && 'focused'])} aria-hidden>
+        <div ref={valueLabelRef} className="current-value" onClick={() => setOpen(!open)}>
+          <Text className="clipped-text">{getCurrentLabel()}</Text>
+          <IconBox className="arrow"><ChevronDown /></IconBox>
+        </div>
+        <ul className="options" style={{ height: `${height}px` }}>
+          {emptyOption === undefined ? null : <FakeOption value="" label={emptyOption} onChange={onChangeOption} />}
+          {fakeOptions}
+        </ul>
+      </div>
+    </SelectBox>
+  )
+}

package/src/components/{Notifications → notification}/NotificationComponent.tsx

@@ -16,18 +16,25 @@ interface Props {
   hasUnreadNotification?: boolean,
 }
 
-const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
+const ANIMATION_DURATION_MS = 300
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
+
+const NotificationsComponent = styled.div<{ $scroll?: boolean }>`
   max-height: 0;
   z-index: 2;
   visibility: hidden;
   position: absolute;
   top: calc(var(--header-height) + 4px);
   right: -270%;
+  opacity: 0;
   width: 400px;
+  transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out, visibility 0s ${ANIMATION_DURATION_MS}ms;
 
   &.visible {
     visibility: visible;
     min-height: 400px;
+    opacity: 1;
+    transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out;
   }
 
   .content {
@@ -35,7 +42,7 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
     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-y: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
     overflow-x: hidden;
   }
 
@@ -160,11 +167,13 @@ interface Props {
   isSummary: boolean,
 }
 
+// fixme: remove this component in the next major
 /**
  * NotificationComponent component that renders the notifications panel.
- * It render the notification icon and when clicked the notification modal is opened.
+ * It renders the notification icon and when clicked the notification modal is opened.
  *
  * @param props the component's props {@link Props}.
+ * @deprecated this functionality has been moved to the Layout library. This is now a property of the Header.
  */
 export const NotificationComponent = ({
   hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error,
@@ -225,7 +234,7 @@ export const NotificationComponent = ({
     {visible && <Overlay onClick={() => setVisible(false)} />}
 
     <NotificationsComponent
-      className={listToClass(['notification-component', visible ? 'visible' : undefined])}
+      className={listToClass(['notification-list', visible ? 'visible' : undefined])}
       $scroll={true}
       aria-hidden={!visible}
     >
@@ -243,7 +252,6 @@ export const NotificationComponent = ({
           </Flex>
 
           <NotificationsFilter type={type} onChangeFilterType={updateType} />
-
           <AsyncContent error={error} errorDetails={errorDetails} loading={isLoading}>
             {notifications?.length ? <StyledBox>
               <ScrollView id="scrollableNotifications" direction="vertical" style={{ maxHeight: 'calc(100vh - 300px)' }}>