@stack-spot/citric-react 0.35.1 → 0.37.0

package/src/components/FieldGroup.tsx

@@ -1,46 +1,46 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseFieldGroupProps {
-  /**
-   * When this is true, the component will automatically mark the addons.
-   * 
-   * When this is false, you must add the class "addon" manually to each of the addons.
-   * 
-   * @default true 
-   */
-  auto?: boolean,
-  /**
-   * When this is true, the FieldGroup will occupy all the width available instead of just what its children need.
-   * 
-   * @default false
-   */
-  fullWidth?: boolean,
-}
-
-export type FieldGroupProps = React.JSX.IntrinsicElements['div'] & BaseFieldGroupProps
-
-/**
- * A FieldGroup is used to concatenate an input with other UI elements, like icons and buttons.
- * 
- * @example
- * A search field, with a search icon and a button to submit the search.
- * ```
- * <FieldGroup>
- *   <Icon icon="Search" />
- *   <Input type="search" />
- *   <Button colorScheme="light">Submit</Button>
- * </FieldGroup>
- * ```
- */
-export const FieldGroup = withRef(({ auto = true, fullWidth, className, children, ...props }: FieldGroupProps) => (
-  <CitricComponent
-    tag="div"
-    component="field-group"
-    className={listToClass([className, auto && 'auto', fullWidth && 'full-width'])}
-    {...props}
-  >
-    {children}
-  </CitricComponent>
-))
+import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseFieldGroupProps {
+  /**
+   * When this is true, the component will automatically mark the addons.
+   * 
+   * When this is false, you must add the class "addon" manually to each of the addons.
+   * 
+   * @default true 
+   */
+  auto?: boolean,
+  /**
+   * When this is true, the FieldGroup will occupy all the width available instead of just what its children need.
+   * 
+   * @default false
+   */
+  fullWidth?: boolean,
+}
+
+export type FieldGroupProps = React.JSX.IntrinsicElements['div'] & BaseFieldGroupProps
+
+/**
+ * A FieldGroup is used to concatenate an input with other UI elements, like icons and buttons.
+ * 
+ * @example
+ * A search field, with a search icon and a button to submit the search.
+ * ```
+ * <FieldGroup>
+ *   <Icon icon="Search" />
+ *   <Input type="search" />
+ *   <Button colorScheme="light">Submit</Button>
+ * </FieldGroup>
+ * ```
+ */
+export const FieldGroup = withRef(({ auto = true, fullWidth, className, children, ...props }: FieldGroupProps) => (
+  <CitricComponent
+    tag="div"
+    component="field-group"
+    className={listToClass([className, auto && 'auto', fullWidth && 'full-width'])}
+    {...props}
+  >
+    {children}
+  </CitricComponent>
+))

package/src/components/Form.tsx

@@ -1,36 +1,36 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export type FormProps = JSX.IntrinsicElements['form']
-export type ButtonGroupProps = JSX.IntrinsicElements['div']
-
-/**
- * A form, styled to receive rows, form groups and button groups.
- * 
- * This has the exact same interface as the HTML form.
- */
-export const Form = ({ children, ...props }: FormProps) => (
-  <CitricComponent tag="form" component="form" {...props}>
-    {children}
-  </CitricComponent>
-)
-
-/**
- * Renders a group of buttons in a form.
- * 
- * @example
- * ```
- * <Form>
- *   <ButtonGroup>
- *     <Button>Cancel</Button>
- *     <Button type="submit">Submit</Button>
- *   </ButtonGroup>
- * </Form>
- * ```
- */
-export const ButtonGroup = withRef(({ className, children, ...props }: ButtonGroupProps) => (
-  <div className={listToClass([className, 'button-group'])} {...props}>
-    {children}
-  </div>
-))
+import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export type FormProps = JSX.IntrinsicElements['form']
+export type ButtonGroupProps = JSX.IntrinsicElements['div']
+
+/**
+ * A form, styled to receive rows, form groups and button groups.
+ * 
+ * This has the exact same interface as the HTML form.
+ */
+export const Form = ({ children, ...props }: FormProps) => (
+  <CitricComponent tag="form" component="form" {...props}>
+    {children}
+  </CitricComponent>
+)
+
+/**
+ * Renders a group of buttons in a form.
+ * 
+ * @example
+ * ```
+ * <Form>
+ *   <ButtonGroup>
+ *     <Button>Cancel</Button>
+ *     <Button type="submit">Submit</Button>
+ *   </ButtonGroup>
+ * </Form>
+ * ```
+ */
+export const ButtonGroup = withRef(({ className, children, ...props }: ButtonGroupProps) => (
+  <div className={listToClass([className, 'button-group'])} {...props}>
+    {children}
+  </div>
+))

package/src/components/FormGroup.tsx

@@ -1,57 +1,57 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-import { IconButton } from './IconBox'
-import { Text } from './Text'
-import { Tooltip } from './Tooltip'
-
-export interface BaseFormGroupProps {
-  /**
-   * The error string to show, if any. The empty string is equivalent to undefined, i.e. no errors.
-   */
-  error?: string,
-  /**
-   * The input's label.
-   */
-  label?: string,
-  /**
-   * A help string, to show as a tooltip.
-   */
-  help?: string,
-  /**
-   * A warning string, to show right below the field, at all times.
-   */
-  warning?: string,
-}
-
-export type FormGroupProps = React.JSX.IntrinsicElements['div'] & BaseFormGroupProps
-
-/**
- * A form group renders everything a field in a form needs: the input, its label, a tooltip (help), an error and a remark (warning).
- * 
- * Labels, errors, tooltips and warnings are only rendered when they're strings with at least one character.
- * 
- * @example
- * ```
- * <FormGroup label="Birth Date" help="The date when you were born" error="The date you typed is invalid!">
- *   <Input type="date" />
- * </FormGroup>
- * ```
- */
-export const FormGroup = withRef(({ error, help, label, warning, className, children, ...props }: FormGroupProps) => (
-  <CitricComponent tag="div" component="form-group" className={listToClass([className, error && 'error'])} {...props}>
-    <label>
-      {help ? (
-        <div className="row">
-          <Text>{label}</Text>
-          <Tooltip content={help}>
-            <IconButton icon="InfoCircle" size="xs" />
-          </Tooltip>
-        </div>
-      ): label}
-      {children}
-      <div className="feedback">{error}</div>
-      {warning && <div className="warning">{warning}</div>}
-    </label>
-  </CitricComponent>
-))
+import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+import { IconButton } from './IconBox'
+import { Text } from './Text'
+import { Tooltip } from './Tooltip'
+
+export interface BaseFormGroupProps {
+  /**
+   * The error string to show, if any. The empty string is equivalent to undefined, i.e. no errors.
+   */
+  error?: string,
+  /**
+   * The input's label.
+   */
+  label?: string,
+  /**
+   * A help string, to show as a tooltip.
+   */
+  help?: string,
+  /**
+   * A warning string, to show right below the field, at all times.
+   */
+  warning?: string,
+}
+
+export type FormGroupProps = React.JSX.IntrinsicElements['div'] & BaseFormGroupProps
+
+/**
+ * A form group renders everything a field in a form needs: the input, its label, a tooltip (help), an error and a remark (warning).
+ * 
+ * Labels, errors, tooltips and warnings are only rendered when they're strings with at least one character.
+ * 
+ * @example
+ * ```
+ * <FormGroup label="Birth Date" help="The date when you were born" error="The date you typed is invalid!">
+ *   <Input type="date" />
+ * </FormGroup>
+ * ```
+ */
+export const FormGroup = withRef(({ error, help, label, warning, className, children, ...props }: FormGroupProps) => (
+  <CitricComponent tag="div" component="form-group" className={listToClass([className, error && 'error'])} {...props}>
+    <label>
+      {help ? (
+        <div className="row">
+          <Text>{label}</Text>
+          <Tooltip content={help}>
+            <IconButton icon="InfoCircle" size="xs" />
+          </Tooltip>
+        </div>
+      ): label}
+      {children}
+      <div className="feedback">{error}</div>
+      {warning && <div className="warning">{warning}</div>}
+    </label>
+  </CitricComponent>
+))

package/src/components/Icon.tsx

@@ -1,35 +1,35 @@
-import { IconGroup, Icon as OgIcon, IconProps as OgIconProps } from '@stack-spot/citric-icons'
-import { ColorKey } from '@stack-spot/portal-theme'
-import { colorNameToColorVariable } from '../utils/css'
-
-export type IconProps<T extends IconGroup> = Omit<OgIconProps<T>, 'color'> & {
-  /**
-   * The color for the icon. Can be any color in the theme.
-   */
-  color?: ColorKey,
-}
-
-/**
- * Renders an icon based on the properties "icon" and "group".
- * 
- * There are three icon groups:
- * - outline: most of the icons are in this group. The icons are stroke only.
- * - fill: most outline icons have a fill version. Fill icons are filled with solid colors, they're not just strokes.
- * - social: icons for brands (logos).
- * 
- * By default, the group is "outline".
- * 
- * The icon size depends on the font-size of the current context. To set a specific size, use the property "size".
- * 
- * Attention: this is the same as using the component Icon from the icons component, the only difference is that this accepts the property
- * "color".
- * 
- * @example
- * 
- * ```
- * <Icon icon="Search" />
- * ```
- */
-export function Icon<T extends IconGroup>({ color, style, ...props }: IconProps<T>) {
-  return <OgIcon {...props} style={{ color: color ? colorNameToColorVariable(color) : undefined, ...style }} />
-}
+import { IconGroup, Icon as OgIcon, IconProps as OgIconProps } from '@stack-spot/citric-icons'
+import { ColorKey } from '@stack-spot/portal-theme'
+import { colorNameToColorVariable } from '../utils/css'
+
+export type IconProps<T extends IconGroup> = Omit<OgIconProps<T>, 'color'> & {
+  /**
+   * The color for the icon. Can be any color in the theme.
+   */
+  color?: ColorKey,
+}
+
+/**
+ * Renders an icon based on the properties "icon" and "group".
+ * 
+ * There are three icon groups:
+ * - outline: most of the icons are in this group. The icons are stroke only.
+ * - fill: most outline icons have a fill version. Fill icons are filled with solid colors, they're not just strokes.
+ * - social: icons for brands (logos).
+ * 
+ * By default, the group is "outline".
+ * 
+ * The icon size depends on the font-size of the current context. To set a specific size, use the property "size".
+ * 
+ * Attention: this is the same as using the component Icon from the icons component, the only difference is that this accepts the property
+ * "color".
+ * 
+ * @example
+ * 
+ * ```
+ * <Icon icon="Search" />
+ * ```
+ */
+export function Icon<T extends IconGroup>({ color, style, ...props }: IconProps<T>) {
+  return <OgIcon {...props} style={{ color: color ? colorNameToColorVariable(color) : undefined, ...style }} />
+}

package/src/components/IconBox.tsx

@@ -1,134 +1,134 @@
-import { BaseIconProps, IconGroup } from '@stack-spot/citric-icons'
-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 IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
-
-export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends BaseIconProps<G>, WithColorScheme, WithColorPalette {
-  /**
-   * The HTML element to render.
-   * 
-   * @default 'i'
-   */
-  tag?: T,
-  /**
-   * The box appearance.
-   * 
-   * - circle: a circle with a background color. Its size depends on the value of `size`. If this is clickable, the background and
-   * foreground colors change on hover or focus.
-   * - square: a square with rounded corners and a background color. Its size depends on the value of `size`. If this is clickable, the
-   * background and foreground colors change on hover or focus.
-   * - text: a circle with transparent background. Its size depends on the value of `size`. If this is clickable, the background and
-   * foreground colors change on hover or focus (it won't be transparent).
-   * - none: no special styling, its size depends only on the size of the icon (the property `size` is ignored). Even if this is clickable,
-   * the style doesn't change on hover or focus.
-   * 
-   * @default 'circle'
-   */
-  appearance?: 'circle' | 'square' | 'text' | 'none',
-  /**
-   * 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 IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>
-
-/**
- * Renders a wrapper for an icon. The icon must specified by the properties "icon" and "group", this component accepts no children.
- * 
- * If you don't need the icon to be rendered within a box, consider using the component "Icon" directly.
- * 
- * Hover and focus effects are applied if the IconBox is focusable.
- * 
- * @example
- * ```
- * <IconBox icon="Search" colorScheme="primary" />
- * ```
- */
-export const IconBox = withRef(
-  function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
-    { group, icon, tag, appearance, size, className, metadata, onClick, feedback, ...props }: IconBoxProps<T, G>,
-  ) {
-    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(['citric-icon', group || 'outline', icon, 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 `<IconBox 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
- * ```
- * <IconButton icon="Search" />
- * ```
- */
-export const IconButton = withRef(
-  function IconButton<G extends IconGroup = 'outline'>({ type, ...props }: Omit<IconBoxProps<'button', G>, 'tag'>) {
-    return <IconBox {...props} tag="button" type={type || 'button' } />
-  },
-)
-
-/**
- * A shortcut for `<IconBox 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
- * ```
- * <IconLink icon="Search" href="#" />
- * ```
- */
-export const IconLink = withRef(
-  function IconLink<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'a', G>, 'tag'>) {
-    return <IconBox {...props} tag="a" />
-  },
-)
+import { BaseIconProps, IconGroup } from '@stack-spot/citric-icons'
+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 IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
+
+export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends BaseIconProps<G>, WithColorScheme, WithColorPalette {
+  /**
+   * The HTML element to render.
+   * 
+   * @default 'i'
+   */
+  tag?: T,
+  /**
+   * The box appearance.
+   * 
+   * - circle: a circle with a background color. Its size depends on the value of `size`. If this is clickable, the background and
+   * foreground colors change on hover or focus.
+   * - square: a square with rounded corners and a background color. Its size depends on the value of `size`. If this is clickable, the
+   * background and foreground colors change on hover or focus.
+   * - text: a circle with transparent background. Its size depends on the value of `size`. If this is clickable, the background and
+   * foreground colors change on hover or focus (it won't be transparent).
+   * - none: no special styling, its size depends only on the size of the icon (the property `size` is ignored). Even if this is clickable,
+   * the style doesn't change on hover or focus.
+   * 
+   * @default 'circle'
+   */
+  appearance?: 'circle' | 'square' | 'text' | 'none',
+  /**
+   * 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 IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>
+
+/**
+ * Renders a wrapper for an icon. The icon must specified by the properties "icon" and "group", this component accepts no children.
+ * 
+ * If you don't need the icon to be rendered within a box, consider using the component "Icon" directly.
+ * 
+ * Hover and focus effects are applied if the IconBox is focusable.
+ * 
+ * @example
+ * ```
+ * <IconBox icon="Search" colorScheme="primary" />
+ * ```
+ */
+export const IconBox = withRef(
+  function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
+    { group, icon, tag, appearance, size, className, metadata, onClick, feedback, ...props }: IconBoxProps<T, G>,
+  ) {
+    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(['citric-icon', group || 'outline', icon, 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 `<IconBox 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
+ * ```
+ * <IconButton icon="Search" />
+ * ```
+ */
+export const IconButton = withRef(
+  function IconButton<G extends IconGroup = 'outline'>({ type, ...props }: Omit<IconBoxProps<'button', G>, 'tag'>) {
+    return <IconBox {...props} tag="button" type={type || 'button' } />
+  },
+)
+
+/**
+ * A shortcut for `<IconBox 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
+ * ```
+ * <IconLink icon="Search" href="#" />
+ * ```
+ */
+export const IconLink = withRef(
+  function IconLink<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'a', G>, 'tag'>) {
+    return <IconBox {...props} tag="a" />
+  },
+)