@stack-spot/citric-react 0.35.1 → 0.37.0

package/src/components/ImageBox.tsx

@@ -1,125 +1,125 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { useCitricController } from '../context/hooks'
-import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
-import { withRef } from '../utils/react'
-import { asCitricProps, CitricComponent } from './CitricComponent'
-
-type ImageBoxTag = 'a' | 'button' | 'span' | 'div'
-
-export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalette, WithColorScheme {
-  /**
-   * The HTML element to render.
-   * 
-   * @default 'div'
-   */
-  tag?: T,
-  /**
-   * The box appearance.
-   * 
-   * @default 'circle'
-   */
-  appearance?: 'circle' | 'square',
-  /**
-   * Size of the box.
-   * 
-   * - xs: 20px;
-   * - sm: 24px;
-   * - md: 32px;
-   * - lg: 40px.
-   * 
-   * @default 'sm'
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg',
-  /**
-   * Animated text to show on when the button/link is clicked. This is only valid for buttons and anchors.
-   */
-  feedback?: string,
-  /**
-   * Only valid if `tag` is "button" or "a".
-   * 
-   * 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/onClickLink` of the controller.
-   * 
-   * @default false
-   */
-  metadata?: any,
-}
-
-export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>
-
-/**
- * Renders a wrapper for its child (normally an image). The image will be resized and cropped to fit the container. The image is not cropped
- * if the property "feedback" is set.
- * 
- * Hover and focus effects are applied if the ImageBox is focusable.
- * 
- * This works exactly like an IconBox, but instead of an Icon, it can contain anything.
- * 
- * @example
- * ```
- * <ImageBox><img src="https://images.com/myimage.png" /></ImageBox>
- * ```
- */
-export const ImageBox = withRef(
-  function ImageBox<T extends ImageBoxTag = 'div'>(
-    { tag, appearance, size, className, metadata, onClick, feedback, ...props }: ImageBoxProps<T>,
-  ) {
-    props['aria-label'] ||= props.title // accessibility
-    const citric = useCitricController()
-
-    function handleClick(e: React.MouseEvent<any>) {
-      onClick?.(e)
-      if (tag === 'button') citric?.onClickButton?.(e, metadata)
-      else if (tag === 'a') citric?.onClickLink?.(e, metadata)
-    }
-
-    const componentProps = {
-      tag: (tag || 'i') as any,
-      component: 'icon-box',
-      className: listToClass([appearance, size, className]),
-      'data-feedback': feedback || undefined,
-      onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
-      ...props,
-    } as const
-
-    return tag === 'a' && citric?.renderLink
-      ? citric.renderLink(asCitricProps(componentProps))
-      : <CitricComponent {...componentProps} />
-  },
-)
-
-/**
- * A shortcut for `<ImageBox tag="button">`.
- * 
- * 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
- * ```
- * <ImageButton><img src="https://images.com/myimage.png" /></ImageButton>
- * ```
- */
-export const ImageButton = withRef(
-  function ImageButton(props: Omit<ImageBoxProps<'button'>, 'tag'>) {
-    return <ImageBox {...props} tag="button" type={props.type || 'button'} />
-  },
-)
-
-/**
- * A shortcut for `<ImageBox tag="a">`.
- * 
- * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
- * prop `metadata`.
- * 
- * @example
- * ```
- * <ImageLink href="#"><img src="https://images.com/myimage.png" /></ImageButton>
- * ```
- */
-export const ImageLink = withRef(
-  function ImageLink(props: Omit<ImageBoxProps<'a'>, 'tag'>) {
-    return <ImageBox {...props} tag="a" />
-  },
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { useCitricController } from '../context/hooks'
+import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
+import { asCitricProps, CitricComponent } from './CitricComponent'
+
+type ImageBoxTag = 'a' | 'button' | 'span' | 'div'
+
+export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalette, WithColorScheme {
+  /**
+   * The HTML element to render.
+   * 
+   * @default 'div'
+   */
+  tag?: T,
+  /**
+   * The box appearance.
+   * 
+   * @default 'circle'
+   */
+  appearance?: 'circle' | 'square',
+  /**
+   * Size of the box.
+   * 
+   * - xs: 20px;
+   * - sm: 24px;
+   * - md: 32px;
+   * - lg: 40px.
+   * 
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg',
+  /**
+   * Animated text to show on when the button/link is clicked. This is only valid for buttons and anchors.
+   */
+  feedback?: string,
+  /**
+   * Only valid if `tag` is "button" or "a".
+   * 
+   * 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/onClickLink` of the controller.
+   * 
+   * @default false
+   */
+  metadata?: any,
+}
+
+export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>
+
+/**
+ * Renders a wrapper for its child (normally an image). The image will be resized and cropped to fit the container. The image is not cropped
+ * if the property "feedback" is set.
+ * 
+ * Hover and focus effects are applied if the ImageBox is focusable.
+ * 
+ * This works exactly like an IconBox, but instead of an Icon, it can contain anything.
+ * 
+ * @example
+ * ```
+ * <ImageBox><img src="https://images.com/myimage.png" /></ImageBox>
+ * ```
+ */
+export const ImageBox = withRef(
+  function ImageBox<T extends ImageBoxTag = 'div'>(
+    { tag, appearance, size, className, metadata, onClick, feedback, ...props }: ImageBoxProps<T>,
+  ) {
+    props['aria-label'] ||= props.title // accessibility
+    const citric = useCitricController()
+
+    function handleClick(e: React.MouseEvent<any>) {
+      onClick?.(e)
+      if (tag === 'button') citric?.onClickButton?.(e, metadata)
+      else if (tag === 'a') citric?.onClickLink?.(e, metadata)
+    }
+
+    const componentProps = {
+      tag: (tag || 'i') as any,
+      component: 'icon-box',
+      className: listToClass([appearance, size, className]),
+      'data-feedback': feedback || undefined,
+      onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
+      ...props,
+    } as const
+
+    return tag === 'a' && citric?.renderLink
+      ? citric.renderLink(asCitricProps(componentProps))
+      : <CitricComponent {...componentProps} />
+  },
+)
+
+/**
+ * A shortcut for `<ImageBox tag="button">`.
+ * 
+ * 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
+ * ```
+ * <ImageButton><img src="https://images.com/myimage.png" /></ImageButton>
+ * ```
+ */
+export const ImageButton = withRef(
+  function ImageButton(props: Omit<ImageBoxProps<'button'>, 'tag'>) {
+    return <ImageBox {...props} tag="button" type={props.type || 'button'} />
+  },
+)
+
+/**
+ * A shortcut for `<ImageBox tag="a">`.
+ * 
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `metadata`.
+ * 
+ * @example
+ * ```
+ * <ImageLink href="#"><img src="https://images.com/myimage.png" /></ImageButton>
+ * ```
+ */
+export const ImageLink = withRef(
+  function ImageLink(props: Omit<ImageBoxProps<'a'>, 'tag'>) {
+    return <ImageBox {...props} tag="a" />
+  },
+)

package/src/components/ImageWithFallback.tsx

@@ -1,65 +1,65 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { useEffect, useMemo, useState } from 'react'
-import { WithStyleShortcuts } from '../types'
-import { getStyleFromProps } from '../utils/css'
-import { Skeleton } from './Skeleton'
-
-export interface BaseImageWithFallbackProps extends Pick<WithStyleShortcuts, 'w' | 'h' | 'radius' | 'bg'> {
-  /**
-   * The react element to fallback to if the image can't be rendered.
-   */
-  fallback: React.ReactNode,
-  /**
-   * Whether or not to show a skeleton when the image is still loading.
-   * @default false
-   */
-  showLoading?: boolean,
-}
-
-export type ImageWithFallbackProps = JSX.IntrinsicElements['img'] & BaseImageWithFallbackProps
-
-/**
- * Attempts to render an image. If it succeeds, the image is displayed, otherwise, a fallback is rendered.
- * 
- * This is very useful if the value of "src" may be empty or if it may be broken. Instead of rendering nothing or the default browser error,
- * it renders the fallback passed as parameter.
- * 
- * @example
- * ```
- * <ImageWithFallback src={item.image} fallback={<Icon icon="Agent" />} />
- * ```
- */
-export const ImageWithFallback = (
-  { onLoad, onError, className, style: ogStyle, fallback, showLoading, w, h, radius, bg, ...props }: ImageWithFallbackProps,
-) => {
-  const [state, setState] = useState<'loading' | 'ready' | 'error'>(props.src ? 'loading' : 'error')
-  const isLoading = state === 'loading' && showLoading
-  const style = useMemo(() => ({ ...getStyleFromProps({ w, h, radius, bg }), ...ogStyle }), [ogStyle, w, h, radius, bg])
-
-  function handleLoad(e: React.SyntheticEvent<HTMLImageElement, Event>) {
-    if (state === 'loading') setState('ready')
-    onLoad?.(e)
-  }
-
-  function handleError(e: React.SyntheticEvent<HTMLImageElement, Event>) {
-    setState('error')
-    onError?.(e)
-  }
-
-  useEffect(() => {
-    if (state !== 'loading') setState(props.src ? 'loading' : 'error')
-  }, [props.src])
-
-  if (state === 'error') return <div className={listToClass([className, 'center'])} style={style}>{fallback}</div>
-  return <>
-    {isLoading && <Skeleton className={className} style={style} />}
-    <img
-      onLoad={handleLoad}
-      onError={handleError}
-      style={{ ...style, ...(isLoading ? { pointerEvents: 'none', position: 'absolute', opacity: 0 } : {}) }}
-      aria-hidden={isLoading}
-      className={className}
-      {...props}
-    />
-  </>
-}
+import { listToClass } from '@stack-spot/portal-theme'
+import { useEffect, useMemo, useState } from 'react'
+import { WithStyleShortcuts } from '../types'
+import { getStyleFromProps } from '../utils/css'
+import { Skeleton } from './Skeleton'
+
+export interface BaseImageWithFallbackProps extends Pick<WithStyleShortcuts, 'w' | 'h' | 'radius' | 'bg'> {
+  /**
+   * The react element to fallback to if the image can't be rendered.
+   */
+  fallback: React.ReactNode,
+  /**
+   * Whether or not to show a skeleton when the image is still loading.
+   * @default false
+   */
+  showLoading?: boolean,
+}
+
+export type ImageWithFallbackProps = JSX.IntrinsicElements['img'] & BaseImageWithFallbackProps
+
+/**
+ * Attempts to render an image. If it succeeds, the image is displayed, otherwise, a fallback is rendered.
+ * 
+ * This is very useful if the value of "src" may be empty or if it may be broken. Instead of rendering nothing or the default browser error,
+ * it renders the fallback passed as parameter.
+ * 
+ * @example
+ * ```
+ * <ImageWithFallback src={item.image} fallback={<Icon icon="Agent" />} />
+ * ```
+ */
+export const ImageWithFallback = (
+  { onLoad, onError, className, style: ogStyle, fallback, showLoading, w, h, radius, bg, ...props }: ImageWithFallbackProps,
+) => {
+  const [state, setState] = useState<'loading' | 'ready' | 'error'>(props.src ? 'loading' : 'error')
+  const isLoading = state === 'loading' && showLoading
+  const style = useMemo(() => ({ ...getStyleFromProps({ w, h, radius, bg }), ...ogStyle }), [ogStyle, w, h, radius, bg])
+
+  function handleLoad(e: React.SyntheticEvent<HTMLImageElement, Event>) {
+    if (state === 'loading') setState('ready')
+    onLoad?.(e)
+  }
+
+  function handleError(e: React.SyntheticEvent<HTMLImageElement, Event>) {
+    setState('error')
+    onError?.(e)
+  }
+
+  useEffect(() => {
+    if (state !== 'loading') setState(props.src ? 'loading' : 'error')
+  }, [props.src])
+
+  if (state === 'error') return <div className={listToClass([className, 'center'])} style={style}>{fallback}</div>
+  return <>
+    {isLoading && <Skeleton className={className} style={style} />}
+    <img
+      onLoad={handleLoad}
+      onError={handleError}
+      style={{ ...style, ...(isLoading ? { pointerEvents: 'none', position: 'absolute', opacity: 0 } : {}) }}
+      aria-hidden={isLoading}
+      className={className}
+      {...props}
+    />
+  </>
+}

package/src/components/Input.tsx

@@ -1,49 +1,49 @@
-import { ControlledInput, WithColorScheme } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export type SupportedInputType = 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 
-  'text' | 'time' | 'url' | 'week'
-
-export interface BaseInputProps<T extends SupportedInputType> extends WithColorScheme {
-  /**
-   * @default 'text'
-   */
-  type?: T,
-  value?: T extends 'number' ? number : string,
-  onChange?: (value: T extends 'number' ? (number | undefined) : string) => void,
-}
-
-export type InputProps<T extends SupportedInputType = 'text'> = 
-  ControlledInput & BaseInputProps<T> & { type?: T }
-
-/**
- * Renders a input.
- * 
- * Attention: "onChange" doesn't receive an event, instead, it receives the new value of the input: a string, unless "type" is "number",
- * in this case, it receives a number.
- * 
- * @example
- * 
- * ```
- * const [value, setValue] = useState('')
- * 
- * return <Input value={value} onChange={setValue} />
- * ```
- */
-export const Input = withRef(
-  function Input<T extends SupportedInputType = 'text'>({ type, value, onChange, ...props }: InputProps<T>) {
-    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-      if (!onChange) return
-      const newValue = e.target.value
-      if (type === 'number') {
-        const parsed = newValue ? parseFloat(newValue) : undefined
-        onChange(parsed as any)
-      } else {
-        onChange(newValue as any)
-      }
-    }
-
-    return <CitricComponent tag="input" component="input" type={type} value={value} onChange={handleChange} {...props} />
-  },
-)
+import { ControlledInput, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export type SupportedInputType = 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 
+  'text' | 'time' | 'url' | 'week'
+
+export interface BaseInputProps<T extends SupportedInputType> extends WithColorScheme {
+  /**
+   * @default 'text'
+   */
+  type?: T,
+  value?: T extends 'number' ? number : string,
+  onChange?: (value: T extends 'number' ? (number | undefined) : string) => void,
+}
+
+export type InputProps<T extends SupportedInputType = 'text'> = 
+  ControlledInput & BaseInputProps<T> & { type?: T }
+
+/**
+ * Renders a input.
+ * 
+ * Attention: "onChange" doesn't receive an event, instead, it receives the new value of the input: a string, unless "type" is "number",
+ * in this case, it receives a number.
+ * 
+ * @example
+ * 
+ * ```
+ * const [value, setValue] = useState('')
+ * 
+ * return <Input value={value} onChange={setValue} />
+ * ```
+ */
+export const Input = withRef(
+  function Input<T extends SupportedInputType = 'text'>({ type, value, onChange, ...props }: InputProps<T>) {
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+      if (!onChange) return
+      const newValue = e.target.value
+      if (type === 'number') {
+        const parsed = newValue ? parseFloat(newValue) : undefined
+        onChange(parsed as any)
+      } else {
+        onChange(newValue as any)
+      }
+    }
+
+    return <CitricComponent tag="input" component="input" type={type} value={value} onChange={handleChange} {...props} />
+  },
+)

package/src/components/Link.tsx

@@ -1,55 +1,55 @@
-import { useCitricController } from '../context/hooks'
-import { TextAppearance, WithColor } from '../types'
-import { applyColor, applyTextAppearance } from '../utils/css'
-import { withRef } from '../utils/react'
-import { asCitricProps, CitricComponent } from './CitricComponent'
-
-export interface BaseLinkProps extends WithColor {
-  /**
-   * The text appearance (font and size).
-   * By default, it inherits from the parent element.
-   */
-  appearance?: TextAppearance,
-  /**
-   * 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
-   * `onClickLink` of the controller.
-   * 
-   * @default false
-   */
-  metadata?: any,
-  /**
-   * Whether or not to underline the link.
-   * 
-   * @default true
-   */
-  underline?: boolean,
-}
-
-export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps
-
-/**
- * Renders an html anchor by default, the actual component to render may be set on a CitricController, through the function `renderLink`.
- * 
- * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
- * prop `metadata`.
- */
-export const Link = withRef(
-  ({ appearance, color, style, className, children, onClick, metadata, underline = true, ...props }: LinkProps) => {
-    const citric = useCitricController()
-    const linkProps = {
-      component: 'link',
-      style: applyColor({ ...style, textDecoration: underline ? undefined : 'none' }, color),
-      className: applyTextAppearance(className, appearance),
-      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
-        onClick?.(e)
-        citric?.onClickLink?.(e, metadata ?? false)
-      },
-      ...props,
-    } as const
-    return citric?.renderLink
-      ? citric.renderLink(asCitricProps({ ...linkProps, children }))
-      : <CitricComponent tag="a" {...linkProps}>{children}</CitricComponent>
-  },
-)
+import { useCitricController } from '../context/hooks'
+import { TextAppearance, WithColor } from '../types'
+import { applyColor, applyTextAppearance } from '../utils/css'
+import { withRef } from '../utils/react'
+import { asCitricProps, CitricComponent } from './CitricComponent'
+
+export interface BaseLinkProps extends WithColor {
+  /**
+   * The text appearance (font and size).
+   * By default, it inherits from the parent element.
+   */
+  appearance?: TextAppearance,
+  /**
+   * 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
+   * `onClickLink` of the controller.
+   * 
+   * @default false
+   */
+  metadata?: any,
+  /**
+   * Whether or not to underline the link.
+   * 
+   * @default true
+   */
+  underline?: boolean,
+}
+
+export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps
+
+/**
+ * Renders an html anchor by default, the actual component to render may be set on a CitricController, through the function `renderLink`.
+ * 
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `metadata`.
+ */
+export const Link = withRef(
+  ({ appearance, color, style, className, children, onClick, metadata, underline = true, ...props }: LinkProps) => {
+    const citric = useCitricController()
+    const linkProps = {
+      component: 'link',
+      style: applyColor({ ...style, textDecoration: underline ? undefined : 'none' }, color),
+      className: applyTextAppearance(className, appearance),
+      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+        onClick?.(e)
+        citric?.onClickLink?.(e, metadata ?? false)
+      },
+      ...props,
+    } as const
+    return citric?.renderLink
+      ? citric.renderLink(asCitricProps({ ...linkProps, children }))
+      : <CitricComponent tag="a" {...linkProps}>{children}</CitricComponent>
+  },
+)

package/src/components/LoadingPanel.tsx

@@ -1,8 +1,8 @@
-import { Center } from './layout'
-import { ProgressCircular } from './ProgressCircular'
-
-export const LoadingPanel = () => (
-  <Center flex={1} p="80px" style={{ alignSelf: 'stretch' }} data-test-hint="loading">
-    <ProgressCircular />
-  </Center>
-)
+import { Center } from './layout'
+import { ProgressCircular } from './ProgressCircular'
+
+export const LoadingPanel = () => (
+  <Center flex={1} p="80px" style={{ alignSelf: 'stretch' }} data-test-hint="loading">
+    <ProgressCircular />
+  </Center>
+)