@stack-spot/portal-components 0.0.17 → 1.0.0-dev.1768482754546

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,113 @@
+import { Box, Flex } from '@citric/core'
+import { FC, ReactElement, createContext, useState } from 'react'
+import { styled } from 'styled-components'
+import { StepperHeaders } from './headers'
+import { StepProps } from './Step'
+
+export interface StepperContextProps {
+  /**
+   * Informs the index of the active step.
+   */
+  activeIndex: number,
+  /**
+   * Informs data for all steps.
+   * @default 0
+   */
+  stepsData: Record<string, any>,
+  /**
+   * Saves data for a given steps.
+   */
+  setStepData: (name: string, data: any) => void,
+  /**
+   * Takes data from a given step.
+   */
+  getStepData: (name: string) => any | null | undefined,
+  /**
+   * Navigate to the next step.
+   */
+  goToNextStep: () => void,
+  /**
+   * Navigate to the previous step.
+   */
+  goToPreviousStep: () => void,
+  /**
+   * Navigate to the provided step.
+   */
+  goToStep: (step: number) => void,
+}
+
+const StepperContext = createContext<StepperContextProps>({ 
+  activeIndex: 0,
+  stepsData: {},
+  setStepData: () => {},
+  getStepData: () => {},
+  goToNextStep: () => {},
+  goToPreviousStep: () => {},
+  goToStep: () => {},
+})
+
+export interface StepperProps {
+  children: ReactElement<StepProps>[],
+}
+
+const Wrapper = styled(Box)`
+  width: 100%;
+  gap: 1.5rem;
+`
+
+const ContentWrapper = styled(Flex)`
+  width: 100%;
+`
+
+/**
+ * Renders a component that provides an interface of steps for creating some content.
+ * 
+ * The component wraps the Step component.
+ */
+
+const Stepper: FC<StepperProps> = ({ children }) => {
+  const [activeIndex, setActiveIndex] = useState<number>(0)
+  const [stepsData, setStepsData] = useState<Record<string, any>>({})
+  const headers = children.map((child) => ({ title: child.props.title }))
+
+  const setStepData = (name: string, data: any) => {
+    setStepsData({ ...stepsData, ...{ [name]: data } })
+  }
+
+  const getStepData = (name: string) => stepsData[name]
+
+  const setNextStep = () => {
+    if (activeIndex < (children.length - 1)) {
+      setActiveIndex(activeIndex + 1)
+    }
+  }
+
+  const setPreviousStep = () => {
+    if (activeIndex > 0) {
+      setActiveIndex(activeIndex - 1)
+    }    
+  }
+
+  const contextValue: StepperContextProps = {
+    activeIndex,
+    stepsData,
+    setStepData,
+    getStepData,
+    goToNextStep: setNextStep,
+    goToPreviousStep: setPreviousStep,
+    goToStep: setActiveIndex,
+  }
+
+  return (
+    <StepperContext.Provider value={contextValue}>
+      <Wrapper>
+        <StepperHeaders {...{ headers }} />
+        <ContentWrapper>
+          {children[activeIndex]}
+        </ContentWrapper>
+      </Wrapper>
+    </StepperContext.Provider>
+  )
+}
+export { StepperContext, Stepper }
+

package/src/components/Stepper/headers.tsx

@@ -0,0 +1,64 @@
+import { Box, Flex, Text } from '@citric/core'
+import { theme } from '@stack-spot/portal-theme'
+import { FC, useContext } from 'react'
+import { styled } from 'styled-components'
+import { StepperContext } from './Stepper'
+
+const StyledStepHeader = styled(Box)`
+  flex: 1;
+  border-top: 0.25rem solid ${theme.color.light[600]};
+  padding-top: 1rem;
+
+  &.active {
+    border-color: ${theme.color.primary[500]};
+  }
+
+  &.finished {
+    flex: unset;
+    width: 4.5rem;
+    border-color: ${theme.color.success[500]};
+  }
+`
+
+const StyledStepHeaderText = styled(Text)`
+  color: ${theme.color.light.contrastText};
+  width: 100%;
+  height: 1.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`
+
+interface StepperHeader {
+  /**
+   * Title that is passed to the step component is used here.
+   */
+  title: string,
+}
+
+export interface StepperHeadersProps {
+  headers: StepperHeader[],
+}
+
+/**
+ * Renders a component that represents the visual part of a step within the stepper component. 
+ * The initial color of the step is primary.500 and when completed it is changed to the success.500 color.
+ * 
+ * The component stepper wraps this component.
+ */
+
+export const StepperHeaders: FC<StepperHeadersProps> = ({ headers }) => {
+  const { activeIndex } = useContext(StepperContext)
+  return (
+    <Flex sx={{ gap: '1rem' }}>
+      {headers.map((header, index) => (
+        <StyledStepHeader 
+          key={header.title}
+          className={index < activeIndex ? 'finished' : (index === activeIndex ? 'active' : '')}
+        >
+          <StyledStepHeaderText>{header.title}</StyledStepHeaderText>
+        </StyledStepHeader>
+      ))}
+    </Flex>
+  )
+}

package/src/components/Stepper/index.ts

@@ -0,0 +1,3 @@
+export { Stepper, StepperContext } from './Stepper'
+export { Step } from './Step'
+export { StepperNavigation } from './Navigation'

package/src/components/Table/HeaderItem.tsx

@@ -0,0 +1,52 @@
+import { Button, Flex, IconBox, Styles, Text } from '@citric/core'
+import { Props as FlexProps } from '@citric/core/dist/Flex'
+import { SortAscending, SortDescending } from '@citric/icons'
+import React, { ReactNode } from 'react'
+
+export type SortTypes = 'ASC' | 'DESC' | undefined
+
+interface HeaderSortProps extends FlexProps {
+  children: ReactNode | string,
+  sortType: SortTypes,
+  onSort: (sortType: SortTypes) => void,
+}
+
+export const parseParams = ({ key, sort }: { key: string | undefined, sort: 'ASC' | 'DESC' | undefined }) =>
+  key && sort ? `${key?.toUpperCase()}_${sort?.toUpperCase()}` : undefined
+
+function next(current: SortTypes) {
+  switch (current) {
+    case undefined: return 'ASC'
+    case 'ASC': return 'DESC'
+    case 'DESC': return undefined
+  }
+}
+
+export const HeaderSort: React.FC<HeaderSortProps> = ({ children, sortType, onSort, ...props }) => (
+  <Flex
+    as={Button}
+    appearance="text"
+    alignItems="center"
+    flexWrap="nowrap"
+    sx={{ '&:hover, &:active, &:focus': { borderColor: 'transparent' }, padding: 0 } as Styles}
+    onClick={() => onSort(next(sortType))} {...props}>
+    <Text appearance="microtext1" mr="2" colorScheme="light.700">
+      {children}
+    </Text>
+
+    <IconBox colorIcon="inverse.500" size="xs">
+      {sortType === 'ASC' && <SortAscending />}
+      {sortType === 'DESC' && <SortDescending />}
+    </IconBox>
+  </Flex>
+)
+
+type FullFlexProps = Parameters<typeof Flex>[0]
+
+export const Header: React.FC<FullFlexProps> = ({ children, ...props }) => (
+  <Flex alignItems="center" {...props}>
+    <Text appearance="microtext1" mr="2" colorScheme="light.700">
+      {children}
+    </Text>
+  </Flex>
+)

package/src/components/Table/SettingsVerticalMenu.tsx

@@ -0,0 +1,50 @@
+import { Box, IconBox, OneOfIconSizes } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { EllipsisVertical } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { useState } from 'react'
+
+interface SettingsVerticalMenuProps {
+  id: string,
+  buttonAriaLabel?: string,
+  size?: OneOfIconSizes,
+  sxIconButton?: SxProperties,
+  buttonDataTestHint?: string,
+  items: React.ComponentProps<typeof SelectionList>['items'],
+}
+
+export const SettingsVerticalMenu = ({ 
+  id, 
+  buttonAriaLabel, 
+  size, 
+  buttonDataTestHint, 
+  sxIconButton, 
+  items = [] }: SettingsVerticalMenuProps) => {
+  const [visibleMenu, setVisibleMenu] = useState(false)
+  if (items?.length === 0) {
+    return null
+  }
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <IconButton 
+        role="button"
+        title={buttonAriaLabel} 
+        data-test-hint={buttonDataTestHint} 
+        aria-label={buttonAriaLabel} 
+        onClick={() => setVisibleMenu(state => !state)} >
+        <IconBox size={size} sx={sxIconButton}>
+          <EllipsisVertical />
+        </IconBox>
+      </IconButton>
+      <SelectionList
+        id={id}
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        style={{ position: 'absolute', top: 40, right: 0, minWidth: '200px' }}
+        items={items}
+      />
+    </Box>
+  )
+}

package/src/components/Table/StyledLinkTable.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { ReactNode } from 'react'
+import { useAnchorTag } from '../../context/anchor'
+
+const StyledLink = styled.a`
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const StyledLinkTable = ({
+  children,
+  ...props
+}: { children: ReactNode } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  const Link = useAnchorTag()
+
+  return (
+    <StyledLink as={Link} {...props}>
+      {children}
+    </StyledLink>
+  )
+}

package/src/components/Table/TableData.tsx

@@ -0,0 +1,251 @@
+import { Button, IconBox, Text } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { Trash } from '@citric/icons'
+import { LoadingCircular, Table, Tbody, Td, Th, Thead, Tr } from '@citric/ui'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { useState } from 'react'
+import styled from 'styled-components'
+import { ContentValidateFilter } from '../ContentValidateFilter'
+import { HeaderSort, SortTypes } from './HeaderItem'
+import { SettingsVerticalMenu } from './SettingsVerticalMenu'
+
+export type TableColumnsDefault = 'name' | 'description'
+
+export type ColumnDefinition<T, K extends keyof T> = {
+  key: K,
+  header: string,
+  sortable?: boolean,
+  customRender?: (data: T) => JSX.Element | string | null,
+  sx?: SxProperties,
+  width?: string,
+}
+
+type SortDetailsType<T, K extends keyof T> = {
+  sort: K,
+  direction: SortTypes,
+  index?: number,
+}
+
+type TableHeaderProps<T, K extends keyof T> = {
+  columns: ColumnDefinition<T, K>[],
+  onSort?: ({ sort, direction, index }: SortDetailsType<T, K>) => void,
+  onRemove?: (row: T) => void,
+  sxTh?: SxProperties,
+  hasBorder?: boolean,
+  initialSortDetails?: Omit<SortDetailsType<T, K>, 'sort'>,
+}
+
+const StyledTh = styled(Th)<{ $hasBorder?: boolean }>`
+  border-top: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+  border-bottom: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+  &:first-child {
+    border-left: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  &:last-child {
+    border-right: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+`
+
+const StyledTd = styled(Td)<{ $hasBorder?: boolean }>`
+  border-radius: 0px !important;
+  
+  &:first-child {
+    border-top-left-radius: 4px !important;
+    border-bottom-left-radius: 4px !important;
+  }
+  &:last-child {
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
+  }
+`
+
+const TableHeader = <T, K extends keyof T>({ columns, onSort, onRemove, sxTh, hasBorder, initialSortDetails }: TableHeaderProps<T, K>) => {
+  const [sort, setSort] = useState<SortTypes>(initialSortDetails?.direction)
+  const [activeSort, setActiveSort] = useState<number | undefined>(initialSortDetails?.index)
+
+  const Sortable = ({ sort, direction, index }: { sort: K, direction: SortTypes, index: number }) => {
+    onSort?.({ sort, direction, index })
+    setSort(direction)
+    setActiveSort(index)
+  }
+
+  return (
+    <Thead>
+      <Tr>
+        {columns.map((column, index) => column?.sortable && onSort ? (
+          <StyledTh key={column.key.toString()} sx={sxTh} $hasBorder={hasBorder}>
+            <HeaderSort
+              sortType={activeSort !== index ? undefined : sort}
+              onSort={(sortType) => Sortable?.({ sort: column.key, direction: sortType, index })}
+            >
+              {column.header}
+            </HeaderSort>
+          </StyledTh>
+        ) : (
+          <StyledTh key={column.key.toString()} sx={sxTh} $hasBorder={hasBorder}>
+            <Text appearance="microtext1" mr="2">
+              {column.header}
+            </Text>
+          </StyledTh>
+        ))}
+        {onRemove && <Th />}
+      </Tr>
+    </Thead>
+  )
+}
+
+type TableRowsProps<T, K extends keyof T> = {
+  data: T[],
+  columns: ColumnDefinition<T, K>[],
+  onRemove?: (row: T) => void,
+  canRemove?: (row: T) => boolean,
+  options?: React.ComponentProps<typeof SelectionList>['items'],
+  onClickRow?: (data: T) => void,
+}
+
+interface RemoveButtonProps<T> {
+  row: T,
+  onRemove?: (row: T) => void,
+  canRemove?: (row: T) => boolean,
+}
+
+function RemoveButton<T>({ row, onRemove, canRemove }: RemoveButtonProps<T>) {
+  const t = useTranslate(dictionary)
+  const [isLoading, setLoading] = useState(false)
+
+  if (!onRemove || (canRemove && !canRemove(row))) {
+    return null
+  }
+
+  const handleRemove = async () => {
+    if (isLoading) return
+    setLoading(true)
+    try {
+      await onRemove(row)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Button colorScheme="danger" onClick={handleRemove} size="sm">
+      {isLoading ? <LoadingCircular/> : <>
+        <IconBox size="xs" mr={2} colorIcon="danger">
+          <Trash />
+        </IconBox><Text appearance="microtext1" mr="2">
+          {t.remove}
+        </Text>
+      </>}
+    </Button>
+  )
+}
+
+const TableRows = <T, K extends keyof T>({ data, columns, options, onRemove, canRemove }: TableRowsProps<T, K>) => {
+  const rows = data.map((row, index) => (
+    <Tr key={`row-${index}`}>
+      {columns.map((column, columnIndex) => (
+        <StyledTd
+          key={columnIndex}
+          sx={{ ...column.sx }}>
+          <> {column?.customRender ? column.customRender(row) : row[column.key]}</>
+        </StyledTd>
+      ))}
+
+      {canRemove && <StyledTd>
+        <RemoveButton row={row} onRemove={onRemove} canRemove={canRemove} />
+      </StyledTd>}
+      {options && <StyledTd>
+        <SettingsVerticalMenu
+          id="workflow-studio-menu"
+          items={options}
+          size="xs"
+        />
+      </StyledTd>}
+    </Tr>
+  ))
+
+  return <Tbody sx={{ borderSpacing: '0 8px' }}>{rows}</Tbody>
+}
+
+type TableProps<T, K extends keyof T> = {
+  data: T[],
+  columns: ColumnDefinition<T, K>[],
+  onSort?: ({ sort, direction, index }: SortDetailsType<T, K>) => void,
+  onRemove?: (data: T) => void,
+  canRemove?: (row: T) => boolean,
+  tableAppearance?: 'striped' | 'filled',
+  options?: React.ComponentProps<typeof SelectionList>['items'],
+  sxHeader?: SxProperties,
+  hasHeaderBorder?: boolean,
+  searchParamName?: string,
+  initialSortDetails?: Omit<SortDetailsType<T, K>, 'sort'>,
+  /**
+   * Accepts a react element that is rendered below the table, used mostly for pagination.
+   */
+  afterContent?: React.ReactElement,
+}
+
+export const TableData = <T, K extends keyof T>({
+  data,
+  columns,
+  onSort,
+  onRemove,
+  canRemove,
+  tableAppearance = 'striped',
+  options,
+  sxHeader,
+  hasHeaderBorder,
+  searchParamName = 'search',
+  initialSortDetails,
+  afterContent,
+}: TableProps<T, K>) => {
+  const searchParams = new URLSearchParams(window.location.search)
+  const search = searchParams.get(searchParamName) ?? ''
+
+  return (
+    <ContentValidateFilter listLength={data.length} searchText={search}>
+      {!!data.length && (
+        <>
+          <Table appearance={tableAppearance} sx={{ mb: 5 }}>
+            <colgroup>
+              {columns.map((column, index) => (
+                <col key={index} style={{ width: column.width || 'auto' }} />
+              ))}
+            </colgroup>
+            <TableHeader
+              sxTh={sxHeader}
+              columns={columns}
+              onSort={onSort}
+              onRemove={onRemove}
+              hasBorder={tableAppearance === 'striped' ? false : hasHeaderBorder}
+              initialSortDetails={initialSortDetails}
+            />
+            <TableRows
+              data={data}
+              columns={columns}
+              onRemove={onRemove}
+              canRemove={canRemove}
+              options={options}
+            />
+          </Table>
+          {!!afterContent && afterContent}
+        </>
+      )}
+    </ContentValidateFilter>
+  )
+}
+
+const dictionary = {
+  en: {
+    remove: 'Remove',
+  },
+  pt: {
+    remove: 'Remover',
+  },
+}

package/src/components/Table/index.tsx

@@ -0,0 +1,2 @@
+export { StyledLinkTable } from '../Table/StyledLinkTable'
+export { TableData, ColumnDefinition } from '../Table/TableData'

package/src/components/TimelineSection.tsx

@@ -0,0 +1,66 @@
+import { Text } from '@citric/core'
+import { Month, useMonthDictionary, useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+
+interface Props {
+  /**
+   * The month. 0 for January, 11 for December.
+   */
+  month: Month,
+  /**
+   * The day of the month (1 - 31).
+   */
+  day: number,
+  /**
+   * The section's content.
+   */
+  children: React.ReactNode,
+  style?: React.CSSProperties,
+  className?: string,
+}
+
+const Styled = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+
+  .timeline-section-header {
+    width: 80px;
+  }
+
+  .timeline-section-content {
+    min-width: 0;
+    flex: 1;
+  }
+`
+
+/**
+ * Renders a section in a timeline where the left side is a header with the date and the right side is the content (children).
+ * @param props React props: {@link Props}. 
+ */
+export const TimelineSection = ({ children, day, month, className, style }: Props) => {
+  const months = useMonthDictionary()
+  const t = useTranslate(locale)
+
+  const ariaLabel = t.dayMonth.replace('%d', `${day}`).replace('%m', months[month])
+  return (
+    <Styled style={style} className={className}>
+      <div className="timeline-section-header">
+        <Text appearance="h2" aria-label={ariaLabel}>{day >= 10 ? day : `0${day}`}</Text>
+        <Text appearance="subtitle4" aria-hidden="true">{months[month].toUpperCase().substring(0, 3)}</Text>
+      </div>
+      <div className="timeline-section-content">
+        {children}
+      </div>
+    </Styled>
+  )
+}
+
+const locale = {
+  pt: {
+    dayMonth: '%d de %m',
+  },
+  en: {
+    dayMonth: '%m %d',
+  },
+}