@stack-spot/citric-react 0.35.1 → 0.37.0

package/src/components/Avatar.tsx

@@ -1,45 +1,45 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { WithColorPalette } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-import { ImageWithFallback } from './ImageWithFallback'
-
-export interface BaseAvatarProps extends WithColorPalette {
-  /**
-   * @default 'lg'
-   */
-  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
-  /**
-   * This name will be reduced to a maximum of 2 capital letters (first letter of each word).
-   */
-  name?: string,
-  /**
-   * @default 'circle'
-   */
-  appearance?: 'square' | 'circle',
-  /**
-   * If instead of the name you want to use an image, this should be the image's url.
-   */
-  image?: string,
-}
-
-export type AvatarProps = React.JSX.IntrinsicElements['div'] & BaseAvatarProps
-
-/**
- * Renders an avatar. If an image is provided it's rendered within the space reserved to the avatar, otherwise, the initial of the names
- * are used.
- * 
- * @example
- * ```
- * <Avatar name="Rick Sanchez" />
- * ```
- */
-export const Avatar = withRef(({ size, name, appearance, className, image, ...props }: AvatarProps) => {
-  const parts = name?.split(' ') ?? ['']
-  const acronym = parts.length >= 2 ? `${parts[0][0]}${parts[1][0]}` : parts[0][0]
-  return (
-    <CitricComponent tag="div" component="avatar" className={listToClass([size, appearance, className])} {...props}>
-      <ImageWithFallback src={image} fallback={acronym} />
-    </CitricComponent>
-  )
-})
+import { listToClass } from '@stack-spot/portal-theme'
+import { WithColorPalette } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+import { ImageWithFallback } from './ImageWithFallback'
+
+export interface BaseAvatarProps extends WithColorPalette {
+  /**
+   * @default 'lg'
+   */
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  /**
+   * This name will be reduced to a maximum of 2 capital letters (first letter of each word).
+   */
+  name?: string,
+  /**
+   * @default 'circle'
+   */
+  appearance?: 'square' | 'circle',
+  /**
+   * If instead of the name you want to use an image, this should be the image's url.
+   */
+  image?: string,
+}
+
+export type AvatarProps = React.JSX.IntrinsicElements['div'] & BaseAvatarProps
+
+/**
+ * Renders an avatar. If an image is provided it's rendered within the space reserved to the avatar, otherwise, the initial of the names
+ * are used.
+ * 
+ * @example
+ * ```
+ * <Avatar name="Rick Sanchez" />
+ * ```
+ */
+export const Avatar = withRef(({ size, name, appearance, className, image, ...props }: AvatarProps) => {
+  const parts = name?.split(' ') ?? ['']
+  const acronym = parts.length >= 2 ? `${parts[0][0]}${parts[1][0]}` : parts[0][0]
+  return (
+    <CitricComponent tag="div" component="avatar" className={listToClass([size, appearance, className])} {...props}>
+      <ImageWithFallback src={image} fallback={acronym} />
+    </CitricComponent>
+  )
+})

package/src/components/AvatarGroup.tsx

@@ -1,49 +1,49 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { WithColorPalette } from '../types'
-import { withRef } from '../utils/react'
-import { Avatar } from './Avatar'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseAvatarGroupProps extends WithColorPalette {
-  /**
-   * @default 'lg'
-   */
-  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
-  /**
-   * @default 'circle'
-   */
-  appearance?: 'square' | 'circle',
-  /**
-   * The avatars in the group. Use "image" for rendering images instead of the avatar.
-   */
-  items: { name?: string, image?: string }[],
-  /**
-   * A maximum number of avatars to show in the group.
-   **/
-  maxItems?: number,
-}
-
-export type AvatarGroupProps = React.JSX.IntrinsicElements['div'] & BaseAvatarGroupProps
-
-/**
- * Stacks a group of avatars horizontally.
- * 
- * @example
- * ```
- * <AvatarGroup items={[{ name: 'John Smith' }, { name: 'Mary Anne', image: 'https://profile.com/123.png' }]} />
- * ```
- */
-export const AvatarGroup = withRef(({ size, items, appearance, maxItems, className, ...props }: AvatarGroupProps) => {
-  const avatars = items.map(({ name, image }) => <Avatar key={name} name={name} image={image} />, [items])
-  return (
-    <CitricComponent
-      tag="div"
-      component="avatar-group"
-      className={listToClass([size, appearance, className])}
-      data-max-items={maxItems}
-      {...props}
-    >
-      {avatars}
-    </CitricComponent>
-  )
-})
+import { listToClass } from '@stack-spot/portal-theme'
+import { WithColorPalette } from '../types'
+import { withRef } from '../utils/react'
+import { Avatar } from './Avatar'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseAvatarGroupProps extends WithColorPalette {
+  /**
+   * @default 'lg'
+   */
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  /**
+   * @default 'circle'
+   */
+  appearance?: 'square' | 'circle',
+  /**
+   * The avatars in the group. Use "image" for rendering images instead of the avatar.
+   */
+  items: { name?: string, image?: string }[],
+  /**
+   * A maximum number of avatars to show in the group.
+   **/
+  maxItems?: number,
+}
+
+export type AvatarGroupProps = React.JSX.IntrinsicElements['div'] & BaseAvatarGroupProps
+
+/**
+ * Stacks a group of avatars horizontally.
+ * 
+ * @example
+ * ```
+ * <AvatarGroup items={[{ name: 'John Smith' }, { name: 'Mary Anne', image: 'https://profile.com/123.png' }]} />
+ * ```
+ */
+export const AvatarGroup = withRef(({ size, items, appearance, maxItems, className, ...props }: AvatarGroupProps) => {
+  const avatars = items.map(({ name, image }) => <Avatar key={name} name={name} image={image} />, [items])
+  return (
+    <CitricComponent
+      tag="div"
+      component="avatar-group"
+      className={listToClass([size, appearance, className])}
+      data-max-items={maxItems}
+      {...props}
+    >
+      {avatars}
+    </CitricComponent>
+  )
+})

package/src/components/Badge.tsx

@@ -1,47 +1,47 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-type ValidTags = 'a' | 'button' | 'li' | 'div' | 'span'
-
-export interface BaseBadgeProps<T extends ValidTags = ValidTags> extends WithColorPalette, WithColorScheme {
-  /**
-   * @default 'div'
-   */
-  tag?: T,
-  /**
-   * Determines how round the corners are.
-   * 
-   * @default 'circle'
-   */
-  appearance?: 'square' | 'circle',
-}
-
-export type BadgeProps<T extends ValidTags> = HTMLTag[T] & BaseBadgeProps<T>
-
-/**
- * Renders a badge. Badges have different color grades depending if they're focusable or not. Use `colorPalette` do determine the main
- * color.
- * 
- * @example
- * ```
- * <Badge>
- *   <Icon icon="PlusMini" />
- *   My first badge
- * </Badge>
- * ```
- */
-export const Badge = withRef(
-  function Badge<T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>) {
-    return (
-      <CitricComponent tag={tag || 'div'} component="badge" className={listToClass([appearance, className])} {...props as any}>
-        {children}
-      </CitricComponent>
-    )
-  },
-)
-
-
-// export const Badge = withRef(_Badge)
-
+import { listToClass } from '@stack-spot/portal-theme'
+import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+type ValidTags = 'a' | 'button' | 'li' | 'div' | 'span'
+
+export interface BaseBadgeProps<T extends ValidTags = ValidTags> extends WithColorPalette, WithColorScheme {
+  /**
+   * @default 'div'
+   */
+  tag?: T,
+  /**
+   * Determines how round the corners are.
+   * 
+   * @default 'circle'
+   */
+  appearance?: 'square' | 'circle',
+}
+
+export type BadgeProps<T extends ValidTags> = HTMLTag[T] & BaseBadgeProps<T>
+
+/**
+ * Renders a badge. Badges have different color grades depending if they're focusable or not. Use `colorPalette` do determine the main
+ * color.
+ * 
+ * @example
+ * ```
+ * <Badge>
+ *   <Icon icon="PlusMini" />
+ *   My first badge
+ * </Badge>
+ * ```
+ */
+export const Badge = withRef(
+  function Badge<T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>) {
+    return (
+      <CitricComponent tag={tag || 'div'} component="badge" className={listToClass([appearance, className])} {...props as any}>
+        {children}
+      </CitricComponent>
+    )
+  },
+)
+
+
+// export const Badge = withRef(_Badge)
+

package/src/components/Blockquote.tsx

@@ -1,18 +1,18 @@
-import { WithColorPalette, WithColorScheme } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export type BaseBlockquoteProps = WithColorScheme & WithColorPalette
-
-export type BlockquoteProps = React.JSX.IntrinsicElements['blockquote'] & BaseBlockquoteProps
-
-/**
- * Renders a quote.
- * 
- * @example
- * ```
- * <Blockquote>To be or not to be, that's the question</Blockquote>
- * ```
- */
-export const Blockquote = withRef(({ children, ...props }: BlockquoteProps) =>
-  <CitricComponent tag="blockquote" component="blockquote" {...props}>{children}</CitricComponent>)
+import { WithColorPalette, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export type BaseBlockquoteProps = WithColorScheme & WithColorPalette
+
+export type BlockquoteProps = React.JSX.IntrinsicElements['blockquote'] & BaseBlockquoteProps
+
+/**
+ * Renders a quote.
+ * 
+ * @example
+ * ```
+ * <Blockquote>To be or not to be, that's the question</Blockquote>
+ * ```
+ */
+export const Blockquote = withRef(({ children, ...props }: BlockquoteProps) =>
+  <CitricComponent tag="blockquote" component="blockquote" {...props}>{children}</CitricComponent>)

package/src/components/Breadcrumb.tsx

@@ -1,33 +1,33 @@
-import { useMemo } from 'react'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-import { Link } from './Link'
-
-interface BreadCrumbItem {
-  label: string,
-  href?: string,
-}
-
-export interface BaseBreadcrumbProps {
-  items: BreadCrumbItem[],
-}
-
-export type BreadcrumbProps = React.JSX.IntrinsicElements['nav'] & BaseBreadcrumbProps
-
-/**
- * Renders a simple navigation bar with links to the previous pages.
- * 
- * @example
- * ```
- * <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Settings', href: '/settings' }, { label: 'Profile' }]} />
- * ```
- */
-export const Breadcrumb = withRef(({ items, ...props }: BreadcrumbProps) => {
-  const children = useMemo(
-    () => items.map(
-      (item, index) => item.href ? <li key={index}><Link href={item.href}>{item.label}</Link></li> : <li key={index}>{item.label}</li>,
-    ),
-    [items],
-  )
-  return <CitricComponent tag="nav" component="breadcrumb" {...props}><ul>{children}</ul></CitricComponent>
-})
+import { useMemo } from 'react'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+import { Link } from './Link'
+
+interface BreadCrumbItem {
+  label: string,
+  href?: string,
+}
+
+export interface BaseBreadcrumbProps {
+  items: BreadCrumbItem[],
+}
+
+export type BreadcrumbProps = React.JSX.IntrinsicElements['nav'] & BaseBreadcrumbProps
+
+/**
+ * Renders a simple navigation bar with links to the previous pages.
+ * 
+ * @example
+ * ```
+ * <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Settings', href: '/settings' }, { label: 'Profile' }]} />
+ * ```
+ */
+export const Breadcrumb = withRef(({ items, ...props }: BreadcrumbProps) => {
+  const children = useMemo(
+    () => items.map(
+      (item, index) => item.href ? <li key={index}><Link href={item.href}>{item.label}</Link></li> : <li key={index}>{item.label}</li>,
+    ),
+    [items],
+  )
+  return <CitricComponent tag="nav" component="breadcrumb" {...props}><ul>{children}</ul></CitricComponent>
+})

package/src/components/Button.tsx

@@ -1,105 +1,105 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { Children, useMemo, useState } from 'react'
-import { useCitricController } from '../context/hooks'
-import { WithColorScheme } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-import { ProgressCircular } from './ProgressCircular'
-
-export interface BaseButtonProps extends WithColorScheme {
-  /**
-   * - contained for buttons with background;
-   * - outlined for transparent buttons with borders;
-   * - text for buttons with no borders or background;
-   * - none for buttons with no borders, background, paddings or any state effect (e.g. hover).
-   * @default 'contained'
-   */
-  appearance?: 'outlined' | 'text' | 'contained' | 'none',
-  /**
-   * Size of the button.
-   * @default 'md'
-   */
-  size?: 'sm' | 'md' | 'lg',
-  /**
-   * Animated text to show on when the button is clicked.
-   */
-  feedback?: string,
-  /**
-   * Whether or not to show a loading feedback instead of the button's content.
-   * 
-   * Buttons in the loading state are also disabled.
-   */
-  loading?: boolean,
-  /**
-   * Function to run when the button is clicked. If this function returns a promise, the button will automatically show a loading feedback
-   * until the promise completes.
-   */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => any,
-  /**
-   * Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
-   * 
-   * This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
-   * `onClickButton` of the controller.
-   * 
-   * @default false
-   */
-  metadata?: any,
-}
-
-export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'> & BaseButtonProps
-
-/**
- * Renders a button. The type is "button" by default.
- * 
- * Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
- * prop `metadata`.
- * 
- * @example
- * ```
- * <Button>My Button</Button>
- * ```
- */
-export const Button = withRef((
-  { appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', metadata, ...props }: ButtonProps,
-) => {
-  const citric = useCitricController()
-  const [waiting, setWaiting] = useState(false)
-  const busy = loading || waiting
-  const isAllLowercase = useMemo(
-    () => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c),
-    [children],
-  )
-
-  async function handleClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-    const result = onClick?.(e)
-    citric?.onClickButton?.(e, metadata)
-    if (result instanceof Promise) {
-      setWaiting(true)
-      try {
-        await result
-      } catch { /* empty */ }
-      setWaiting(false)
-    }
-  }
-
-  return (
-    <CitricComponent
-      tag="button"
-      component="button"
-      className={listToClass([size, appearance, isAllLowercase && 'short-text', className])}
-      data-feedback={feedback || undefined}
-      onClick={handleClick}
-      aria-busy={busy}
-      disabled={disabled || busy}
-      type={type}
-      {...props}
-    >
-      {busy ? <div>{children}</div> : children}
-      {busy && (
-        <div className="loader">
-          <ProgressCircular size="sm" />
-        </div>
-      )}
-    </CitricComponent>
-  )
-})
+import { listToClass } from '@stack-spot/portal-theme'
+import { Children, useMemo, useState } from 'react'
+import { useCitricController } from '../context/hooks'
+import { WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+import { ProgressCircular } from './ProgressCircular'
+
+export interface BaseButtonProps extends WithColorScheme {
+  /**
+   * - contained for buttons with background;
+   * - outlined for transparent buttons with borders;
+   * - text for buttons with no borders or background;
+   * - none for buttons with no borders, background, paddings or any state effect (e.g. hover).
+   * @default 'contained'
+   */
+  appearance?: 'outlined' | 'text' | 'contained' | 'none',
+  /**
+   * Size of the button.
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg',
+  /**
+   * Animated text to show on when the button is clicked.
+   */
+  feedback?: string,
+  /**
+   * Whether or not to show a loading feedback instead of the button's content.
+   * 
+   * Buttons in the loading state are also disabled.
+   */
+  loading?: boolean,
+  /**
+   * Function to run when the button is clicked. If this function returns a promise, the button will automatically show a loading feedback
+   * until the promise completes.
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => any,
+  /**
+   * Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
+   * 
+   * This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
+   * `onClickButton` of the controller.
+   * 
+   * @default false
+   */
+  metadata?: any,
+}
+
+export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'> & BaseButtonProps
+
+/**
+ * Renders a button. The type is "button" by default.
+ * 
+ * Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
+ * prop `metadata`.
+ * 
+ * @example
+ * ```
+ * <Button>My Button</Button>
+ * ```
+ */
+export const Button = withRef((
+  { appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', metadata, ...props }: ButtonProps,
+) => {
+  const citric = useCitricController()
+  const [waiting, setWaiting] = useState(false)
+  const busy = loading || waiting
+  const isAllLowercase = useMemo(
+    () => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c),
+    [children],
+  )
+
+  async function handleClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    const result = onClick?.(e)
+    citric?.onClickButton?.(e, metadata)
+    if (result instanceof Promise) {
+      setWaiting(true)
+      try {
+        await result
+      } catch { /* empty */ }
+      setWaiting(false)
+    }
+  }
+
+  return (
+    <CitricComponent
+      tag="button"
+      component="button"
+      className={listToClass([size, appearance, isAllLowercase && 'short-text', className])}
+      data-feedback={feedback || undefined}
+      onClick={handleClick}
+      aria-busy={busy}
+      disabled={disabled || busy}
+      type={type}
+      {...props}
+    >
+      {busy ? <div>{children}</div> : children}
+      {busy && (
+        <div className="loader">
+          <ProgressCircular size="sm" />
+        </div>
+      )}
+    </CitricComponent>
+  )
+})