@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/Table/TableData.tsx

@@ -1,251 +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',
-  },
-}
+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

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

package/src/components/TimelineSection.tsx

@@ -1,66 +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',
-  },
-}
+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',
+  },
+}