@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/avatar/Avatar.tsx

@@ -1,137 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { ContextColor, ExtendedSizing } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef,
-  PolymorphicRefWithFallback
-} from '../../utils/polymorphic'
-import { Link } from '../link/Link'
-import { Badge } from '../badge'
-import { AvatarImage } from './AvatarImage'
-
-type AvatarOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Toggle the disabled state for the component. Only applies when `component` is `a` or `button`.
-   */
-  disabled?: boolean
-  /**
-   * Renders the smooth (tinted background) context variant instead of the solid default.
-   */
-  smooth?: boolean
-  /**
-   * Sets the size of the component to one of Chassis component sizes.
-   */
-  size?: ExtendedSizing
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   * Defaults to `span`, or `a` when `href` is set. Set explicitly to `button` (or another
-   * interactive element/component) to make a non-link avatar focusable and clickable.
-   */
-  component?: C
-  /**
-   * Image source. When set, renders an `AvatarImage` in place of `children`.
-   */
-  src?: string
-  /**
-   * Alt text for the image rendered when `src` is set.
-   */
-  alt?: string
-  /**
-   * Renders the avatar as a link to this URL. Defaults `component` to `a`. Passed through to a
-   * custom `component` too, regardless of whether it resolves to a native `a`/`button`.
-   */
-  href?: string
-  /**
-   * Renders a status badge in the bottom-end corner, in one of the Chassis themed colors.
-   */
-  status?: ContextColor
-  /**
-   * Accessible label for the status badge, exposed to assistive tech as visually hidden text.
-   * Falls back to the `status` value itself.
-   */
-  statusLabel?: string
-}
-
-export type AvatarProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  AvatarOwnProps<C>
->
-
-type AvatarComponent = (<C extends ElementType = 'span'>(
-  props: AvatarProps<C> & {
-    ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>
-  }
-) => ReactElement | null) & { displayName?: string }
-
-function AvatarRender<C extends ElementType = 'span'>(
-  {
-    children,
-    className,
-    color,
-    disabled,
-    smooth,
-    size,
-    component,
-    src,
-    alt = 'Profile picture',
-    href,
-    status,
-    statusLabel,
-    ...rest
-  }: AvatarProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const tag = component ?? (href ? 'a' : 'span')
-  const isInteractive = tag === 'a' || tag === 'button'
-
-  const _className = classNames(
-    'avatar',
-    color,
-    size,
-    { smooth },
-    !isInteractive && { disabled },
-    className
-  )
-
-  const Component = (isInteractive ? Link : tag) as ElementType
-
-  return (
-    <Component
-      className={_className}
-      {...(isInteractive && { component: tag })}
-      // `disabled`/`href` used to only reach `Component` when `tag` was the native `'a'`/`'button'`
-      // string (routed through `Link`, which already forwards them itself) — a custom `component`
-      // (e.g. a router `Link`) fell through this `isInteractive` check and silently never received
-      // either prop. Passing them unconditionally fixes that; they're harmless no-ops on a plain,
-      // non-interactive `'span'`.
-      disabled={disabled}
-      href={href}
-      {...(tag === 'button' && { type: 'button' })}
-      {...rest}
-      ref={ref}
-    >
-      {src ? <AvatarImage src={src} alt={alt} /> : children}
-      {status && (
-        <Badge color={status} circle>
-          <span className="visually-hidden">{statusLabel ?? status}</span>
-        </Badge>
-      )}
-    </Component>
-  )
-}
-
-export const Avatar = createPolymorphicComponent<AvatarComponent>(
-  AvatarRender as ForwardRefRenderFunction<Element, AvatarProps<ElementType>>,
-  'Avatar'
-)

package/src/components/avatar/AvatarImage.tsx

@@ -1,19 +0,0 @@
-import React, { forwardRef, ImgHTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-export interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
-  ({ className, ...rest }, ref) => {
-    const _className = classNames('avatar-image', className)
-
-    return <img className={_className} {...rest} ref={ref} />
-  }
-)
-
-AvatarImage.displayName = 'AvatarImage'

package/src/components/avatar/AvatarStack.tsx

@@ -1,98 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement, ReactNode } from 'react'
-import classNames from 'classnames'
-
-import { ContextColor, ExtendedSizing } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { Avatar } from './Avatar'
-
-export interface AvatarStackItemDef {
-  /**
-   * React key for the rendered `Avatar`. Falls back to the item's index in `data`.
-   */
-  key?: string | number
-  /**
-   * Image source, rendered via `AvatarImage`.
-   */
-  src?: string
-  /**
-   * Alt text for the image rendered when `src` is set.
-   */
-  alt?: string
-  /**
-   * Renders the avatar as a link to this URL.
-   */
-  href?: string
-  /**
-   * Renders a status badge in one of the Chassis themed colors.
-   */
-  status?: ContextColor
-  /**
-   * Accessible label for the status badge.
-   */
-  statusLabel?: string
-  /**
-   * Content to render when `src` isn't set, e.g. initials or a "+5" overflow count.
-   */
-  content?: ReactNode
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: ElementType
-}
-
-type AvatarStackOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Sets the size of every `Avatar` in the stack to one of Chassis component sizes.
-   */
-  size?: ExtendedSizing
-  /**
-   * Renders a `Avatar` for each item, ahead of any JSX `children` (handy for a trailing "+N"
-   * overflow avatar).
-   */
-  items?: AvatarStackItemDef[]
-}
-
-export type AvatarStackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  AvatarStackOwnProps<C>
->
-
-type AvatarStackComponent = (<C extends ElementType = 'div'>(
-  props: AvatarStackProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function AvatarStackRender<C extends ElementType = 'div'>(
-  { children, className, component, items, size, ...rest }: AvatarStackProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = (component ?? 'div') as ElementType
-  const _className = classNames('avatar-stack', size, className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {items?.map(({ key, content, ...item }, index) => (
-        <Avatar key={key ?? index} {...item}>
-          {content}
-        </Avatar>
-      ))}
-      {children}
-    </Component>
-  )
-}
-
-export const AvatarStack = createPolymorphicComponent<AvatarStackComponent>(
-  AvatarStackRender as ForwardRefRenderFunction<Element, AvatarStackProps<ElementType>>,
-  'AvatarStack'
-)

package/src/components/avatar/index.ts

@@ -1,6 +0,0 @@
-export { Avatar } from './Avatar'
-export type { AvatarProps } from './Avatar'
-export { AvatarImage } from './AvatarImage'
-export type { AvatarImageProps } from './AvatarImage'
-export { AvatarStack } from './AvatarStack'
-export type { AvatarStackProps, AvatarStackItemDef } from './AvatarStack'

package/src/components/badge/Badge.tsx

@@ -1,94 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { ContextColor, ContextStyle, Sizing } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type BadgeOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Sets the context style of the component. `solid`/`basic` render the default look with no extra class.
-   */
-  variant?: ContextStyle
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Position badge in one of the corners of a link or button.
-   */
-  position?: 'top-start' | 'top-end' | 'bottom-end' | 'bottom-start'
-  /**
-   * Select the shape of the component.
-   */
-  circle?: boolean
-  /**
-   * Sets the size of the component to one of Chassis component sizes.
-   */
-  size?: Sizing
-}
-
-export type BadgeProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  BadgeOwnProps<C>
->
-
-type BadgeComponent = (<C extends ElementType = 'span'>(
-  props: BadgeProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function BadgeRender<C extends ElementType = 'span'>(
-  {
-    children,
-    className,
-    color,
-    variant,
-    component,
-    position,
-    circle,
-    size,
-    ...rest
-  }: BadgeProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'span'
-
-  const _className = classNames(
-    'badge',
-    color,
-    size,
-    {
-      outline: variant === 'outline',
-      smooth: variant === 'smooth',
-      'position-absolute translate-middle': position,
-      'top-0': position?.includes('top'),
-      'top-100': position?.includes('bottom'),
-      'start-100': position?.includes('end'),
-      'start-0': position?.includes('start')
-    },
-    { circle },
-    className
-  )
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const Badge = createPolymorphicComponent<BadgeComponent>(
-  BadgeRender as ForwardRefRenderFunction<Element, BadgeProps<ElementType>>,
-  'Badge'
-)

package/src/components/badge/index.ts

@@ -1,2 +0,0 @@
-export { Badge } from './Badge'
-export type { BadgeProps } from './Badge'

package/src/components/breadcrumb/Breadcrumb.tsx

@@ -1,68 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-import { BreadcrumbItem } from './BreadcrumbItem'
-
-export interface BreadcrumbItemDef {
-  /**
-   * Label for the breadcrumb item.
-   */
-  label: React.ReactNode
-  /**
-   * URL for the breadcrumb link. The last item in the array is always rendered as active (no link needed).
-   */
-  href?: string
-}
-
-export interface BreadcrumbProps extends HTMLAttributes<HTMLOListElement> {
-  /**
-   * Accessible name of the wrapping `<nav>` landmark. Defaults to the English `'breadcrumb'`;
-   * override it to translate the landmark, or to tell two breadcrumb trails on the same page
-   * apart (landmarks of the same role need distinct names to be distinguishable in a screen
-   * reader's landmark list).
-   *
-   * @default 'breadcrumb'
-   */
-  'aria-label'?: string
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Array of breadcrumb items for data-driven rendering. The last item is automatically marked active.
-   * When provided, children are ignored.
-   */
-  items?: BreadcrumbItemDef[]
-}
-
-export const Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(
-  ({ 'aria-label': ariaLabel = 'breadcrumb', children, className, items, ...rest }, ref) => {
-    const _className = classNames('breadcrumb', className)
-
-    const autoContent = items
-      ? items.map((item, idx) => {
-          const isLast = idx === items.length - 1
-          return (
-            <BreadcrumbItem
-              // eslint-disable-next-line react/no-array-index-key
-              key={idx}
-              active={isLast}
-              href={isLast ? undefined : item.href}
-            >
-              {item.label}
-            </BreadcrumbItem>
-          )
-        })
-      : null
-
-    return (
-      <nav aria-label={ariaLabel}>
-        <ol className={_className} {...rest} ref={ref}>
-          {autoContent ?? children}
-        </ol>
-      </nav>
-    )
-  }
-)
-
-Breadcrumb.displayName = 'Breadcrumb'

package/src/components/breadcrumb/BreadcrumbItem.tsx

@@ -1,38 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-import { Link } from '../link/Link'
-
-export interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * The `href` attribute for the inner `<Link>` component.
-   */
-  href?: string
-}
-
-export const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
-  ({ children, active, className, href, ...rest }, ref) => {
-    const _className = classNames(
-      'breadcrumb-item',
-      {
-        active: active
-      },
-      className
-    )
-    return (
-      <li className={_className} {...(active && { 'aria-current': 'page' })} {...rest} ref={ref}>
-        {href ? <Link href={href}>{children}</Link> : children}
-      </li>
-    )
-  }
-)
-
-BreadcrumbItem.displayName = 'BreadcrumbItem'

package/src/components/breadcrumb/index.ts

@@ -1,4 +0,0 @@
-export { Breadcrumb } from './Breadcrumb'
-export type { BreadcrumbProps, BreadcrumbItemDef } from './Breadcrumb'
-export { BreadcrumbItem } from './BreadcrumbItem'
-export type { BreadcrumbItemProps } from './BreadcrumbItem'