@stack-spot/citric-react 0.1.0

package/src/components/Table.tsx

@@ -0,0 +1,219 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useRef } from 'react'
+import { HTMLExtension } from '../types'
+import { applyCSSVariable } from '../utils/css'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseTableProps {
+  /**
+   * The overall table's appearance. Includes a default configuration for every other styling related prop.
+   * 
+   * @default 'spaced'
+   */
+  appearance?: 'stripped' | 'spaced',
+  /**
+   * Whether or not to color each row a different color. Only valid when appearance is "spaced".
+   * 
+   * @default false
+   */
+  stripped?: boolean,
+  /**
+   * If true, there's no spacing between rows. Only valid when appearance is "spaced".
+   * 
+   * @default false
+   */
+  compressed?: boolean,
+  /**
+   * Shows an outer border for the whole table.
+   * 
+   * @default "true if appearance is 'stripped', false otherwise"
+   */
+  showBorders?: boolean,
+  /**
+   * Shows borders in each of the rows.
+   * 
+   * @default false
+   */
+  showRowBorders?: boolean,
+  /**
+   * Shows borders in the header.
+   * 
+   * @default "false if appearance is 'stripped', true otherwise"
+   */
+  showHeaderBorders?: boolean,
+  /**
+   * Whether or not the table borders are rounded.
+   * 
+   * @default true
+   */
+  rounded?: boolean,
+  /**
+   * Whether or not each row in the table have rounded borders.
+   * 
+   * @default "false if appearance is 'stripped', true otherwise"
+   */
+  roundedRows?: boolean,
+  /**
+   * If true, all headers are uppercase.
+   * 
+   * @default false
+   */
+  uppercaseHeader?: boolean,
+  /**
+   * Allows rows to act as accordions. To create an accordion row, use `<tbody>` to group two `<tr>` elements, where the first is the actual
+   * row and the second is the collapsible content of the row. The row with the collapsible content must be defined as `<Tr accordion>`.
+   * 
+   * @default false
+   */
+  accordionRows?: boolean,
+}
+
+export type SortingDirection = 'asc' | 'desc'
+
+interface BaseThProps {
+  /**
+   * Which is the current direction of the sorting? Only relevant if 'onSort' is set.
+   * 
+   * @default 'desc'
+   */
+  direction?: SortingDirection,
+  /**
+   * What to do when the header is clicked (sorting).
+   */
+  onSort?: (value: SortingDirection | undefined) => void,
+}
+
+interface BaseTrProps {
+  /**
+   * True if this table is an accordion, false otherwise.
+   * 
+   * @default false
+   */
+  accordion?: boolean,
+  /**
+   * If the next row is an accordion, what should make it expand or contract? A click on a button in the last column or a click anywhere in
+   * the row?
+   * 
+   * @default 'button'
+   */
+  accordionTrigger?: 'button' | 'row',
+  /**
+   * Sets the maximum height of this accordion. Only valid if `accordion` is true.
+   * 
+   * @default '200px'
+   */
+  accordionMaxHeight?: string,
+}
+
+export type TableProps = HTMLExtension<'table', BaseTableProps>
+export type ThProps = HTMLExtension<'th', BaseThProps>
+export type TrProps = HTMLExtension<'tr', BaseTrProps>
+
+export const Table = ({
+  appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className,
+  children, accordionRows, ...props
+}: TableProps) => {
+  const classes = listToClass([
+    className,
+    stripped && 'stripped',
+    compressed && 'compressed',
+    showBorders && 'bordered',
+    showHeaderBorders === false && 'borderless-header',
+    showRowBorders && 'bordered-rows',
+    rounded === false && 'square',
+    roundedRows === false && 'square-rows',
+    uppercaseHeader && 'uppercase-header',
+    accordionRows && 'accordion-rows',
+  ])
+  return (
+    <CitricComponent tag="table" component="table" data-appearance={appearance} className={classes} {...props}>
+      {children}
+    </CitricComponent>
+  )
+}
+
+export const Th = ({ direction, onSort, children, className, ...props }: ThProps) => {
+  const t = useTranslate(dictionary)
+  let tip: string | undefined
+  const label = typeof children === 'string' ? children : undefined
+  if (onSort && !direction) tip = label ? `${label}. ${t.sortAscending}` : t.sortAscending
+  if (onSort && direction === 'asc') tip = label ? `${label}. ${t.sortDescending}` : t.sortDescending
+  if (onSort && direction === 'desc') tip = label ? `${label}. ${t.sortNone}` : t.sortNone
+
+  function handleSort() {
+    if (!direction) onSort?.('asc')
+    else if (direction === 'asc') onSort?.('desc')
+    else onSort?.(undefined)
+  }
+
+  return (
+    <th
+      className={listToClass([onSort && 'sortable', direction, className])}
+      onClick={onSort? handleSort : undefined}
+      onKeyDown={onSort ? (e => e.key === 'Enter' && handleSort()) : undefined}
+      aria-label={tip}
+      tabIndex={onSort ? 0 : undefined}
+      {...props}
+    >
+      {children}
+    </th>
+  )
+}
+
+export const Tr = ({ accordion, accordionTrigger, accordionMaxHeight, children, className, style, onClick, ...props }: TrProps) => {
+  const ref = useRef<HTMLTableRowElement | null>(null)
+
+  useEffect(() => {
+    if (!accordion) return
+    const checkbox = ref.current?.closest('tbody')?.querySelector('td:last-child input[aria-controls]')
+    if (checkbox instanceof HTMLElement) {
+      const onChange = (e: Event) => {
+        if (!ref.current || !(e.target instanceof HTMLInputElement)) return
+        if (e.target.checked) {
+          ref.current.setAttribute('aria-hidden', 'false')
+          ref.current.removeAttribute('inert')
+        } else {
+          ref.current.setAttribute('aria-hidden', 'true')
+          ref.current.setAttribute('inert', 'true')
+        }
+      }
+      checkbox.addEventListener('change', onChange)
+      return () => checkbox.removeEventListener('change', onChange)
+    }
+  }, [ref.current])
+
+  return (
+    <tr
+      ref={ref}
+      {...props}
+      className={listToClass([className, accordion && 'accordion', accordionTrigger === 'row' && 'clickable'])}
+      onClick={accordionTrigger === 'row'
+        ? (e) => {
+          const checkbox = ref.current?.querySelector('td:last-child input[aria-controls]')
+          if (checkbox instanceof HTMLInputElement && e.target !== checkbox) checkbox.click()
+          onClick?.(e)
+        }
+        : onClick
+      }
+      style={applyCSSVariable(style, 'max-height', accordionMaxHeight)}
+      aria-hidden={accordion}
+      {...(accordion ? { inert: 'true' } : {})}
+    >
+      {children}
+    </tr>
+  )
+}
+
+const dictionary = {
+  en: {
+    sortAscending: 'Click to sort in ascending order.',
+    sortDescending: 'Click to sort in descending order.',
+    sortNone: 'Click to remove sorting.',
+  },
+  pt: {
+    sortAscending: 'Clique para ordenar em ordem crescente.',
+    sortDescending: 'Clique para ordenar em ordem decrescente.',
+    sortNone: 'Clique para remover a ordenação.',
+  },
+} satisfies Dictionary

package/src/components/Tabs/TabController.ts

@@ -0,0 +1,40 @@
+import { ValueController } from '../../utils/ValueController'
+
+export class TabController<Key extends string> extends ValueController<Key> {
+  private tabOrder: Key[]
+
+  constructor(tabOrder: Key[], value: Key) {
+    super(value)
+    this.tabOrder = tabOrder
+  }
+
+  private getCurrentIndex() {
+    return this.tabOrder.findIndex(t => t === this.value)
+  }
+
+  hasNext(): boolean {
+    const current = this.getCurrentIndex()
+    return current > -1 && current + 1 < this.tabOrder.length
+  }
+
+  hasPrevious(): boolean {
+    const current = this.getCurrentIndex()
+    return current > -1 && current - 1 >= 0
+  }
+
+  next(): boolean {
+    if (this.hasNext()) {
+      this.setValue(this.tabOrder[this.getCurrentIndex() + 1])
+      return true
+    }
+    return false
+  }
+
+  previous(): boolean {
+    if (this.hasPrevious()) {
+      this.setValue(this.tabOrder[this.getCurrentIndex() - 1])
+      return true
+    }
+    return false
+  }
+}

package/src/components/Tabs/index.tsx

@@ -0,0 +1,64 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react'
+import { CitricComponent } from '../CitricComponent'
+import { ErrorBoundary } from '../ErrorBoundary'
+import { ProgressCircular } from '../ProgressCircular'
+import { Center } from '../layout'
+import { TabController } from './TabController'
+import { TabsProps } from './types'
+import { findSelectedIndex } from './utils'
+
+const ctx = createContext<TabController<any> | undefined>(undefined)
+
+export function Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ...props }: TabsProps<Key>) {
+  const controller = useMemo(() => ctrl ?? new TabController<Key>(tabs.map(t => t.key), value || tabs[0]?.key), [])
+  const t = useTranslate(dictionary)
+  const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
+
+  useEffect(() => {
+    if (value) controller.setValue(value)
+  }, [value])
+
+  useEffect(() => controller.onChange((v) => {
+    setSelectedIndex(findSelectedIndex(tabs, v))
+    onChange?.(v)
+  }), [tabs])
+
+  const nav = useMemo(
+    () => tabs.map(({ key, label, disabled }, index) => (
+      <label key={key}>
+        <input type="radio" role="tab" checked={index === selectedIndex} onChange={() => controller.setValue(key)} disabled={disabled} />
+        {label || key}
+      </label>
+    )),
+    [tabs, selectedIndex],
+  )
+
+  return (
+    <ctx.Provider value={controller}>
+      <CitricComponent tag="div" component="tabs" {...props}>
+        <nav>{nav}</nav>
+        <section>
+          <ErrorBoundary key={selectedIndex} message={t.error}>
+            <Suspense fallback={<Center style={{ padding: '20px' }}><ProgressCircular /></Center>}>
+              {selectedIndex === -1 ? null : tabs[selectedIndex]?.content}
+            </Suspense>
+          </ErrorBoundary>
+        </section>
+      </CitricComponent>
+    </ctx.Provider>
+  )
+}
+
+export function useTabController<Key extends string = string>(): TabController<Key> | undefined {
+  return useContext(ctx)
+}
+
+const dictionary = {
+  en: {
+    error: 'Error while loading the tab.',
+  },
+  pt: {
+    error: 'Ocorreu um erro ao carregar a aba.',
+  },
+} satisfies Dictionary

package/src/components/Tabs/types.ts

@@ -0,0 +1,48 @@
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../../types'
+import { TabController } from './TabController'
+
+export interface Tab<Key extends string> {
+  /**
+   * A unique identifier for the tab.
+   */
+  key: Key,
+  /**
+   * The tab's label. Will be the "key" if not provided.
+   */
+  label?: string,
+  /**
+   * The tab's content. This can be a suspended component.
+   * 
+   * Attention: consider using React's lazy loading to render the tab view.
+   */
+  content: React.ReactNode,
+  /**
+   * Whether or not this tab is disabled.
+   * 
+   * @default false
+   */
+  disabled?: boolean,
+}
+
+export interface BaseTabsProps<Key extends string> extends WithColorScheme, WithColorPalette {
+  /**
+   * The tabs to render.
+   */
+  tabs: Tab<Key>[],
+  /**
+   * The key of the current tab. Use this only if you intend to control the tabs from the outside.
+   */
+  value?: Key,
+  /**
+   * What to do when the tab changes. Use this only if you intend to control the tabs from the outside.
+   * 
+   * @param key the key of the selected tab.
+   */
+  onChange?: (key: Key) => void,
+  /**
+   * A tab-controller, useful if you want to control the tabs outside the component context.
+   */
+  controller?: TabController<Key>,
+}
+
+export type TabsProps<Key extends string> = HTMLExtension<'div', BaseTabsProps<Key>, 'children' | 'value' | 'onChange'>

package/src/components/Tabs/utils.ts

@@ -0,0 +1,6 @@
+import { Tab } from './types'
+
+export function findSelectedIndex<Key extends string>(tabs: Tab<Key>[], selectedTabKey: Key) {
+  const index = tabs.findIndex(t => t.key === selectedTabKey)
+  return index === -1 ? 0 : index
+}

package/src/components/Text.ts

@@ -0,0 +1,75 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { createElement } from 'react'
+import { HTMLExtension, TextAppearance, WithColor } from '../types'
+import { applyColor, applyTextAppearance } from '../utils/css'
+
+type SupportedTags = 'span' | 'small' | 'p' | `h${1|2|3|4|5|6}` | 'pre'
+
+export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends WithColor {
+  /**
+   * If "tag" is not defined, it will be based on the value of "appearance".
+   * If neither "appearance" or "tag" are defined, the tag will be "p".
+   */
+  tag?: T,
+  /**
+   * If "appearance" is not defined, it will be based on the value of "tag".
+   * If neither "appearance" or "tag" are defined, the appearance will be inherited from the parent HTML element.
+   */
+  appearance?: TextAppearance,
+  /**
+   * Add default margins to the text.
+   * 
+   * @default false
+   */
+  showMargins?: boolean,
+}
+
+export type TextProps<T extends SupportedTags> = HTMLExtension<T, BaseTextProps<T>>
+
+const tagToAppearance: Record<SupportedTags, TextAppearance | undefined> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  span: undefined,
+  small: 'microtext1',
+  p: 'body2',
+  pre: 'code2',
+}
+
+const appearanceToTag: Record<TextAppearance, SupportedTags> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  body1: 'p',
+  body2: 'p',
+  code1: 'pre',
+  code2: 'pre',
+  display1: 'h1',
+  microtext1: 'small',
+  overheader1: 'p',
+  overheader2: 'p',
+  subtitle1: 'p',
+  subtitle2: 'p',
+  subtitle3: 'p',
+  subtitle4: 'p',
+}
+
+export function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, style, className, children, ...props }: TextProps<T>) {
+  const renderedTag = tag || appearanceToTag[appearance || 'body2']
+  const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined)
+  return createElement(
+    renderedTag,
+    {
+      className: applyTextAppearance(listToClass([className, showMargins && 'text-with-margins']), renderedAppearance),
+      style: applyColor(style, color),
+      ...props,
+    },
+    children,
+  )
+}

package/src/components/Textarea.tsx

@@ -0,0 +1,12 @@
+import { HTMLExtension, WithColorScheme } from '../types'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseTextareaProps extends WithColorScheme {
+  value?: string,
+  onChange?: (value: string) => void,
+}
+
+export type TextareaProps = HTMLExtension<'textarea', BaseTextareaProps, 'onChange'>
+
+export const Textarea = ({ value, onChange, ...props }: TextareaProps) =>
+  <CitricComponent tag="textarea" component="textarea" value={value} onChange={e => onChange?.(e.target.value)} {...props} />

package/src/components/Tooltip.tsx

@@ -0,0 +1,53 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useRef } from 'react'
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { Overlay } from './Overlay'
+import { BaseOverlayProps } from './Overlay/types'
+
+export interface BaseTooltipProps extends
+  Omit<BaseOverlayProps<'div'>, 'tag' | 'onRenderChild' | 'reference'>, WithColorPalette, WithColorScheme {
+  /**
+   * Whether or not to show the tooltip's arrow.
+   * 
+   * @default true
+   */
+  showArrow?: boolean,
+  /**
+   * The unique id of the HTML element to be created to show the tooltip. If not provided, a random number will be used.
+   */
+  tooltipId?: string,
+  /**
+   * Makes the tooltip text compact, centering it better when it's a single line.
+   * 
+   * Effectively, it makes the line height equals to 1 and applies a slightly larger padding.
+   * 
+   * @default true
+   */
+  compact?: boolean,
+}
+
+export type TooltipProps = HTMLExtension<'div', BaseTooltipProps, 'children' | 'content'>
+
+export const Tooltip = (
+  { tooltipId, children, showArrow = true, compact = true, attributes, colorScheme, colorPalette, ...props }: TooltipProps,
+) => {
+  const id = useRef(tooltipId || `${Math.random()}`)
+  return (
+    <Overlay
+      attributes={{
+        className: listToClass([attributes?.className, showArrow && 'with-arrow', compact && 'compact']),
+        style: { margin: '6px', ...attributes?.style },
+        role: 'tooltip',
+        id: id.current,
+        'data-citric': 'tooltip',
+        'data-color-scheme': colorScheme,
+        'data-color-palette': colorPalette,
+        ...attributes,
+      }}
+      onRenderChild={e => e.setAttribute('aria-describedby', id.current)}
+      {...props}
+    >
+      {children}
+    </Overlay>
+  )
+}

package/src/components/layout.tsx

@@ -0,0 +1,53 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { createElement } from 'react'
+import { HTMLExtension, WithStyleShortcuts } from '../types'
+import { applyStyles } from '../utils/css'
+
+export const layout = {
+  center: 'center',
+  row: 'row',
+  column: 'column',
+}
+
+export interface BaseLayoutProps<T extends keyof React.JSX.IntrinsicElements> extends WithStyleShortcuts {
+  /**
+   * HTML tag to render.
+   * 
+   * @default 'div'
+   */
+  tag?: T,
+}
+
+export interface BaseRowProps<T extends keyof React.JSX.IntrinsicElements> extends BaseLayoutProps<T> {
+  /**
+   * Whether or not to center items horizontally.
+   * 
+   * @default true
+   */
+  center?: boolean,
+}
+
+export interface BaseColumnProps<T extends keyof React.JSX.IntrinsicElements> extends BaseLayoutProps<T> {
+  /**
+   * Whether or not to center items vertically.
+   * 
+   * @default false
+   */
+  center?: boolean,
+}
+
+export type CenterProps<T extends keyof React.JSX.IntrinsicElements> = HTMLExtension<T, BaseLayoutProps<T>>
+export type RowProps<T extends keyof React.JSX.IntrinsicElements> = HTMLExtension<T, BaseRowProps<T>>
+export type ColumnProps<T extends keyof React.JSX.IntrinsicElements> = HTMLExtension<T, BaseColumnProps<T>>
+
+export function Center<T extends keyof React.JSX.IntrinsicElements = 'div'>({ tag, className, ...props }: CenterProps<T>) {
+  return createElement(tag || 'div', { className: listToClass(['center', className]), ...applyStyles(props) })
+}
+
+export function Row<T extends keyof React.JSX.IntrinsicElements = 'div'>({ tag, className, center, ...props }: RowProps<T>) {
+  return createElement(tag || 'div', { className: listToClass(['row', center === false && 'no-center', className]), ...applyStyles(props) })
+}
+
+export function Column<T extends keyof React.JSX.IntrinsicElements = 'div'>({ tag, className, center, ...props }: ColumnProps<T>) {
+  return createElement(tag || 'div', { className: listToClass(['column', center && 'center', className]), ...applyStyles(props) })
+}

package/src/context/CitricContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+import { CitricController } from '../types'
+
+export const CitricContext = createContext<CitricController | undefined>(undefined)

package/src/context/CitricProvider.tsx

@@ -0,0 +1,14 @@
+import { FallbackBoundary } from '../components/FallbackBoundary'
+import { CitricController } from '../types'
+import { CitricContext } from './CitricContext'
+
+/**
+ * An optional provider for customizing the behavior of the Design System. This accepts a CitricController as its value.
+ */
+export const CitricProvider = ({ children, value }: { children: React.ReactNode, value?: CitricController }) => (
+  <CitricContext.Provider value={value}>
+    <FallbackBoundary>
+      {children}
+    </FallbackBoundary>
+  </CitricContext.Provider>
+)

package/src/context/hooks.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+import { CitricContext } from './CitricContext'
+
+export function useCitricController() {
+  return useContext(CitricContext)
+}

package/src/index.ts

@@ -0,0 +1,47 @@
+export * from './components/Accordion'
+export * from './components/Alert'
+export * from './components/Avatar'
+export * from './components/AvatarGroup'
+export * from './components/Badge'
+export * from './components/Blockquote'
+export * from './components/Breadcrumb'
+export * from './components/Button'
+export * from './components/Card'
+export * from './components/Checkbox'
+export * from './components/CheckboxGroup'
+export * from './components/Circle'
+export * from './components/CitricComponent'
+export * from './components/Divider'
+export * from './components/ErrorBoundary'
+export * from './components/Favorite'
+export * from './components/FieldGroup'
+export * from './components/Form'
+export * from './components/FormGroup'
+export * from './components/IconBox'
+export * from './components/Input'
+export * from './components/layout'
+export * from './components/Link'
+export * from './components/MenuOverlay'
+export * from './components/MenuOverlay/types'
+export * from './components/Overlay'
+export * from './components/Overlay/types'
+export * from './components/Pagination'
+export * from './components/ProgressBar'
+export * from './components/ProgressCircular'
+export * from './components/RadioGroup'
+export * from './components/Rating'
+export * from './components/Select'
+export * from './components/SelectBox'
+export * from './components/Skeleton'
+export * from './components/Slider'
+export * from './components/SmartTable'
+export * from './components/Stepper'
+export * from './components/Switch'
+export * from './components/Table'
+export * from './components/Tabs'
+export * from './components/Tabs/TabController'
+export * from './components/Tabs/types'
+export * from './components/Text'
+export * from './components/Textarea'
+export * from './components/Tooltip'
+export * from './utils/ValueController'