@stack-spot/citric-react 0.36.0 → 0.37.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
+    "./package.json": "./package.json",
     "./theme.css": "./dist/theme.css",
     "./citric.css": "./dist/citric.css"
   },
@@ -15,7 +16,7 @@
     "url": "https://github.com/stack-spot/citric"
   },
   "peerDependencies": {
-    "@stack-spot/citric-icons": ">=0.2.2",
+    "@stack-spot/citric-icons": ">=0.2.3",
     "@stack-spot/portal-theme": ">=1.2.1",
     "@stack-spot/portal-translate": ">=2.0.0",
     "lodash": ">=4.17.21",

package/scripts/build-css.ts

@@ -1,49 +1,49 @@
-import { readFile, writeFile } from 'fs/promises'
-import { glob } from 'glob'
-import yargs from 'yargs'
-import { hideBin } from 'yargs/helpers'
-
-interface Argv {
-  o?: string,
-  output?: string,
-}
-
-function getArguments() {
-  const argv = yargs(hideBin(process.argv)).parse() as Argv
-  const output = argv.o || argv.output || './dist'
-  return { output }
-}
-
-async function readInput() {
-  const themeFiles = await glob('../css/theme/**.css')
-  const otherFiles = await glob('../css/**/**.css', { ignore: '../css/theme/**' })
-  const themeCss: string[] = []
-  const otherCss: string[] = []
-  for (const f of themeFiles) {
-    themeCss.push(await readFile(f, { encoding: 'utf8' }))
-  }
-  for (const f of otherFiles) {
-    otherCss.push(await readFile(f, { encoding: 'utf8' }))
-  }
-  return { theme: themeCss.join('\n\n'), citric: otherCss.join('\n\n') }
-}
-
-async function start() {
-  try {
-    const { output } = getArguments()
-    const { theme, citric } = await readInput()
-    await Promise.all([
-      writeFile(`${output}/theme.css`, theme, { encoding: 'utf8' }),
-      writeFile(`${output}/citric.css`, citric, { encoding: 'utf8' }),
-    ])
-    // eslint-disable-next-line no-console
-    console.log(`CSS built at ${output}`)
-    process.exit(0)
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error)
-    process.exit(1)
-  }
-}
-
-start()
+import { readFile, writeFile } from 'fs/promises'
+import { glob } from 'glob'
+import yargs from 'yargs'
+import { hideBin } from 'yargs/helpers'
+
+interface Argv {
+  o?: string,
+  output?: string,
+}
+
+function getArguments() {
+  const argv = yargs(hideBin(process.argv)).parse() as Argv
+  const output = argv.o || argv.output || './dist'
+  return { output }
+}
+
+async function readInput() {
+  const themeFiles = await glob('../css/theme/**.css')
+  const otherFiles = await glob('../css/**/**.css', { ignore: '../css/theme/**' })
+  const themeCss: string[] = []
+  const otherCss: string[] = []
+  for (const f of themeFiles) {
+    themeCss.push(await readFile(f, { encoding: 'utf8' }))
+  }
+  for (const f of otherFiles) {
+    otherCss.push(await readFile(f, { encoding: 'utf8' }))
+  }
+  return { theme: themeCss.join('\n\n'), citric: otherCss.join('\n\n') }
+}
+
+async function start() {
+  try {
+    const { output } = getArguments()
+    const { theme, citric } = await readInput()
+    await Promise.all([
+      writeFile(`${output}/theme.css`, theme, { encoding: 'utf8' }),
+      writeFile(`${output}/citric.css`, citric, { encoding: 'utf8' }),
+    ])
+    // eslint-disable-next-line no-console
+    console.log(`CSS built at ${output}`)
+    process.exit(0)
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    process.exit(1)
+  }
+}
+
+start()

package/src/components/Accordion.tsx

@@ -1,130 +1,130 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useMemo, useState } from 'react'
-import { applyCSSVariable } from '../utils/css'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseAccordionProps {
-  /**
-   * A unique id for this accordion.
-   */
-  id?: string,
-  /**
-   * The Accordion's appearance. If unset, the appearance is customizable.
-   */
-  appearance?: 'card',
-  /**
-   * Controls the expansion state of the accordion.
-   */
-  expanded?: boolean,
-  /**
-   * If the expansion is not controlled externally (expanded/onChange), this tells if the Accordion should start opened.
-   * @default false
-   */
-  startExpanded?: boolean,
-  /**
-   * Controls the expansion state of the accordion. Called when the accordion is expanded or collapsed.
-   */
-  onChange?: (expanded: boolean) => void,
-  /**
-   * The header for the accordion, i.e. the part that is always rendered. You can use either a simple title or a custom set of components,
-   * in the second case, you may pass a function that receives the "expand/collapse" button as parameter. 
-   */
-  header: React.ReactNode | ((expandButton: React.ReactElement) => React.ReactNode),
-  /**
-   * The maximum height for the accordion.
-   * 
-   * @default 300
-   */
-  maxHeight?: number,
-}
-
-export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & BaseAccordionProps
-
-/**
- * Creates an accordion, showing/hiding the children according to the state of the expand/collapse checkbox.
- * 
- * The accordion must define a max height, which is 300 by default (measured in pixels). Whenever the content surpasses "maxHeight", a 
- * vertical scroll is created. If your content is much shorter than "maxHeight", consider reducing its value for a better animation.
- * 
- * @example
- * A simple accordion, styled like a card:
- * ```
- * <Accordion appearance="card" header="This is the title of the accordion" maxHeight={80}>
- *   <p>This is the content of the accordion</p>
- * </Accordion>
- * ```
- * 
- * A more complex accordion:
- * ```
- * const header = (toggle: React.ReactElement) => (
- *   <Row justifyContent="space-between" bg="cyan.500" border="cyan.700" radius="sm">
- *     <ImageBox><img src="/my-image.png" /></ImageBox>
- *     <Text>Joseph Clinton</Text>
- *     <Text>40 years old</Text>
- *     {toggle}
- *   </Row>
- * )
- * return (
- *   <Accordion header={header}>
- *     <Center>
- *       <img src="/an-image.png" />
- *       <p>This is the content of the accordion</p>
- *     </Center>
- *   </Accordion>
- * )
- * ```
- */
-export const Accordion = withRef((
-  { id, appearance, expanded, onChange, header, maxHeight = 300, startExpanded, className, style, children, ...props }: AccordionProps,
-) => {
-  const t = useTranslate(dictionary)
-  const initialExpanded = expanded ?? startExpanded ?? false
-  const [ariaHidden, setAriaHidden] = useState(!initialExpanded)
-  const accordionId = useMemo(() => id || `${Math.random()}`, [id])
-
-  useEffect(() => {
-    if (expanded !== undefined) setAriaHidden(!expanded)
-  }, [expanded])
-
-  const expandBtn = <input
-    type="checkbox"
-    defaultChecked={initialExpanded}
-    checked={expanded}
-    onChange={() => {
-      setAriaHidden(!ariaHidden)
-      onChange?.(!expanded)
-    }}
-    aria-label={ariaHidden ? t.open : t.close}
-    title={ariaHidden ? t.open : t.close}
-    onKeyDown={e => e.key === 'Enter' && (e.target as HTMLElement).click?.()}
-    aria-controls={accordionId}
-  />
-  const headerContent = typeof header === 'function' ? header(expandBtn) : <label>{header}{expandBtn}</label>
-  return (
-    <CitricComponent
-      tag="div"
-      component="accordion"
-      className={listToClass([appearance, className])}
-      style={applyCSSVariable(style, 'max-height', `${maxHeight}px`)}
-      {...props}
-    >
-      <header>{headerContent}</header>
-      <section id={accordionId} aria-hidden={ariaHidden} {...(ariaHidden ? { inert: 'true' } : {})}>
-        {appearance === 'card' ? <div className="content">{children}</div> : children}
-      </section>
-    </CitricComponent>
-  )
-})
-
-const dictionary = {
-  en: {
-    open: 'Open',
-    close: 'Close',
-  },
-  pt: {
-    open: 'Abrir',
-    close: 'Fechar',
-  },
-} satisfies Dictionary
+import { listToClass } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo, useState } from 'react'
+import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseAccordionProps {
+  /**
+   * A unique id for this accordion.
+   */
+  id?: string,
+  /**
+   * The Accordion's appearance. If unset, the appearance is customizable.
+   */
+  appearance?: 'card',
+  /**
+   * Controls the expansion state of the accordion.
+   */
+  expanded?: boolean,
+  /**
+   * If the expansion is not controlled externally (expanded/onChange), this tells if the Accordion should start opened.
+   * @default false
+   */
+  startExpanded?: boolean,
+  /**
+   * Controls the expansion state of the accordion. Called when the accordion is expanded or collapsed.
+   */
+  onChange?: (expanded: boolean) => void,
+  /**
+   * The header for the accordion, i.e. the part that is always rendered. You can use either a simple title or a custom set of components,
+   * in the second case, you may pass a function that receives the "expand/collapse" button as parameter. 
+   */
+  header: React.ReactNode | ((expandButton: React.ReactElement) => React.ReactNode),
+  /**
+   * The maximum height for the accordion.
+   * 
+   * @default 300
+   */
+  maxHeight?: number,
+}
+
+export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & BaseAccordionProps
+
+/**
+ * Creates an accordion, showing/hiding the children according to the state of the expand/collapse checkbox.
+ * 
+ * The accordion must define a max height, which is 300 by default (measured in pixels). Whenever the content surpasses "maxHeight", a 
+ * vertical scroll is created. If your content is much shorter than "maxHeight", consider reducing its value for a better animation.
+ * 
+ * @example
+ * A simple accordion, styled like a card:
+ * ```
+ * <Accordion appearance="card" header="This is the title of the accordion" maxHeight={80}>
+ *   <p>This is the content of the accordion</p>
+ * </Accordion>
+ * ```
+ * 
+ * A more complex accordion:
+ * ```
+ * const header = (toggle: React.ReactElement) => (
+ *   <Row justifyContent="space-between" bg="cyan.500" border="cyan.700" radius="sm">
+ *     <ImageBox><img src="/my-image.png" /></ImageBox>
+ *     <Text>Joseph Clinton</Text>
+ *     <Text>40 years old</Text>
+ *     {toggle}
+ *   </Row>
+ * )
+ * return (
+ *   <Accordion header={header}>
+ *     <Center>
+ *       <img src="/an-image.png" />
+ *       <p>This is the content of the accordion</p>
+ *     </Center>
+ *   </Accordion>
+ * )
+ * ```
+ */
+export const Accordion = withRef((
+  { id, appearance, expanded, onChange, header, maxHeight = 300, startExpanded, className, style, children, ...props }: AccordionProps,
+) => {
+  const t = useTranslate(dictionary)
+  const initialExpanded = expanded ?? startExpanded ?? false
+  const [ariaHidden, setAriaHidden] = useState(!initialExpanded)
+  const accordionId = useMemo(() => id || `${Math.random()}`, [id])
+
+  useEffect(() => {
+    if (expanded !== undefined) setAriaHidden(!expanded)
+  }, [expanded])
+
+  const expandBtn = <input
+    type="checkbox"
+    defaultChecked={initialExpanded}
+    checked={expanded}
+    onChange={() => {
+      setAriaHidden(!ariaHidden)
+      onChange?.(!expanded)
+    }}
+    aria-label={ariaHidden ? t.open : t.close}
+    title={ariaHidden ? t.open : t.close}
+    onKeyDown={e => e.key === 'Enter' && (e.target as HTMLElement).click?.()}
+    aria-controls={accordionId}
+  />
+  const headerContent = typeof header === 'function' ? header(expandBtn) : <label>{header}{expandBtn}</label>
+  return (
+    <CitricComponent
+      tag="div"
+      component="accordion"
+      className={listToClass([appearance, className])}
+      style={applyCSSVariable(style, 'max-height', `${maxHeight}px`)}
+      {...props}
+    >
+      <header>{headerContent}</header>
+      <section id={accordionId} aria-hidden={ariaHidden} {...(ariaHidden ? { inert: 'true' } : {})}>
+        {appearance === 'card' ? <div className="content">{children}</div> : children}
+      </section>
+    </CitricComponent>
+  )
+})
+
+const dictionary = {
+  en: {
+    open: 'Open',
+    close: 'Close',
+  },
+  pt: {
+    open: 'Abrir',
+    close: 'Fechar',
+  },
+} satisfies Dictionary

package/src/components/Alert.tsx

@@ -1,24 +1,24 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseAlertProps {
-  /**
-   * Type of the message.
-   * @default 'warning'
-   */
-  type?: 'error' | 'info' | 'warning',
-}
-
-export type AlertProps = React.JSX.IntrinsicElements['div'] & BaseAlertProps
-
-/**
- * Renders an alert message with an icon and a background. This may be an error, warning or a success feedback.
- * 
- * @example
- * ```
- * <Alert type="warning">My warning!</Alert>
- * ```
- */
-export const Alert = withRef(({ type, className, children, ...props }: AlertProps) =>
-  <CitricComponent tag="div" component="alert" className={listToClass([type, className])} {...props}>{children}</CitricComponent>)
+import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseAlertProps {
+  /**
+   * Type of the message.
+   * @default 'warning'
+   */
+  type?: 'error' | 'info' | 'warning',
+}
+
+export type AlertProps = React.JSX.IntrinsicElements['div'] & BaseAlertProps
+
+/**
+ * Renders an alert message with an icon and a background. This may be an error, warning or a success feedback.
+ * 
+ * @example
+ * ```
+ * <Alert type="warning">My warning!</Alert>
+ * ```
+ */
+export const Alert = withRef(({ type, className, children, ...props }: AlertProps) =>
+  <CitricComponent tag="div" component="alert" className={listToClass([type, className])} {...props}>{children}</CitricComponent>)

package/src/components/AsyncContent.tsx

@@ -1,70 +1,70 @@
-import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
-import { useCitricController } from '../context/hooks'
-import { withRef } from '../utils/react'
-import { ErrorMessage } from './ErrorMessage'
-import { LoadingPanel } from './LoadingPanel'
-
-interface Props {
-  /**
-   * Whether or not to show the loading feedback.
-   */
-  loading: boolean,
-  /**
-   * A javascript error. Used to show error feedbacks.
-   */
-  error?: any,
-  /**
-   * If provided, this element will receive focus as soon as the content is loaded and has no errors.
-   * Can be either a React Ref Object or a query selector.
-   */
-  autofocus?: string | MutableRefObject<HTMLElement>,
-  /**
-   * The content to show if it's not loading or has errors.
-   */
-  children: React.ReactNode,
-}
-
-/**
- * Renders a component that provides user feedback on async requests. It renders either a loading component, an error component or its
- * children.
- * 
- * The loading and error views can be customized through a CitricController.
- * 
- * Errors can be watched through the function `onError` of a CitricController.
- * 
- * Attention: for React Suspense, use the component "FallbackBoundary" instead.
- * 
- * @example
- * 
- * ```
- * const [data, isLoading, error] = useRemoteData()
- * 
- * return (
- *   <AsyncContent loading={isLoading} error={error}>
- *     {data}
- *   </AsyncContent>
- * )
- * ```
- */
-
-export const AsyncContent = withRef(({ loading, error, autofocus, children }: Props) => {
-  const citric = useCitricController()
-
-  useEffect(() => {
-    if (error) {
-      citric?.onError?.(error)
-      // eslint-disable-next-line no-console
-      console.error(error)
-    }
-  }, [error])
-
-  useLayoutEffect(() => {
-    if (!loading && !error) {
-      typeof autofocus === 'string' ? (document.querySelector(autofocus) as HTMLElement)?.focus?.() : autofocus?.current?.focus()
-    }
-  }, [loading, error])
-
-  if (loading) return <LoadingPanel />
-  if (error) return citric?.renderError ? citric.renderError(error) : <ErrorMessage error={error} />
-  return children
-})
+import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
+import { useCitricController } from '../context/hooks'
+import { withRef } from '../utils/react'
+import { ErrorMessage } from './ErrorMessage'
+import { LoadingPanel } from './LoadingPanel'
+
+interface Props {
+  /**
+   * Whether or not to show the loading feedback.
+   */
+  loading: boolean,
+  /**
+   * A javascript error. Used to show error feedbacks.
+   */
+  error?: any,
+  /**
+   * If provided, this element will receive focus as soon as the content is loaded and has no errors.
+   * Can be either a React Ref Object or a query selector.
+   */
+  autofocus?: string | MutableRefObject<HTMLElement>,
+  /**
+   * The content to show if it's not loading or has errors.
+   */
+  children: React.ReactNode,
+}
+
+/**
+ * Renders a component that provides user feedback on async requests. It renders either a loading component, an error component or its
+ * children.
+ * 
+ * The loading and error views can be customized through a CitricController.
+ * 
+ * Errors can be watched through the function `onError` of a CitricController.
+ * 
+ * Attention: for React Suspense, use the component "FallbackBoundary" instead.
+ * 
+ * @example
+ * 
+ * ```
+ * const [data, isLoading, error] = useRemoteData()
+ * 
+ * return (
+ *   <AsyncContent loading={isLoading} error={error}>
+ *     {data}
+ *   </AsyncContent>
+ * )
+ * ```
+ */
+
+export const AsyncContent = withRef(({ loading, error, autofocus, children }: Props) => {
+  const citric = useCitricController()
+
+  useEffect(() => {
+    if (error) {
+      citric?.onError?.(error)
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }, [error])
+
+  useLayoutEffect(() => {
+    if (!loading && !error) {
+      typeof autofocus === 'string' ? (document.querySelector(autofocus) as HTMLElement)?.focus?.() : autofocus?.current?.focus()
+    }
+  }, [loading, error])
+
+  if (loading) return <LoadingPanel />
+  if (error) return citric?.renderError ? citric.renderError(error) : <ErrorMessage error={error} />
+  return children
+})

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>
+  )
+})