@stack-spot/citric-react 0.41.1 → 0.42.0-beta.0

package/src/components/Circle.tsx

@@ -1,43 +1,43 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { WithColorPalette, WithColorScheme } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseCircleProps extends WithColorPalette, WithColorScheme {
-  /**
-   * Whether or not to show borders.
-   * 
-   * @default false
-   */
-  showBorders?: boolean,
-  /**
-   * The size of the circle.
-   * 
-   * - xxs: 8px;
-   * - xs: 12px;
-   * - sm: 18px;
-   * - md: 27px;
-   * - lg: 40px;
-   * - xl: 60px;
-   * - xxl: 90px.
-   * 
-   * @default 'xs'
-   */
-  size?: 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | 'xxl',
-}
-
-export type CircleProps = React.JSX.IntrinsicElements['div'] & BaseCircleProps
-
-/**
- * Renders a simple circle. If the circle has any children, it gets cropped by the circle borders. The content of the circle is centered.
- * 
- * @example
- * ```
- * <Circle colorScheme="success" />
- * ```
- */
-export const Circle = withRef(({ showBorders, className, size, children, ...props }: CircleProps) => (
-  <CitricComponent tag="div" component="circle" className={listToClass([className, showBorders && 'bordered', size])} {...props}>
-    {children}
-  </CitricComponent>
-))
+import { listToClass } from '@stack-spot/portal-theme'
+import { WithColorPalette, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseCircleProps extends WithColorPalette, WithColorScheme {
+  /**
+   * Whether or not to show borders.
+   * 
+   * @default false
+   */
+  showBorders?: boolean,
+  /**
+   * The size of the circle.
+   * 
+   * - xxs: 8px;
+   * - xs: 12px;
+   * - sm: 18px;
+   * - md: 27px;
+   * - lg: 40px;
+   * - xl: 60px;
+   * - xxl: 90px.
+   * 
+   * @default 'xs'
+   */
+  size?: 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | 'xxl',
+}
+
+export type CircleProps = React.JSX.IntrinsicElements['div'] & BaseCircleProps
+
+/**
+ * Renders a simple circle. If the circle has any children, it gets cropped by the circle borders. The content of the circle is centered.
+ * 
+ * @example
+ * ```
+ * <Circle colorScheme="success" />
+ * ```
+ */
+export const Circle = withRef(({ showBorders, className, size, children, ...props }: CircleProps) => (
+  <CitricComponent tag="div" component="circle" className={listToClass([className, showBorders && 'bordered', size])} {...props}>
+    {children}
+  </CitricComponent>
+))

package/src/components/CitricComponent.ts

@@ -1,47 +1,47 @@
-import { createElement, forwardRef } from 'react'
-import { WithColorPalette, WithColorScheme } from '../types'
-
-export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' | 'breadcrumb' | 'button' | 'card' | 'checkbox' |
-  'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' |
-  'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' |
-  'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' |
-  'circle' | 'multi-select'
-
-interface BaseCitricProps extends WithColorScheme, WithColorPalette {
-  component: CitricComponentName,
-  ref?: any,
-} 
-
-interface CitricComponentType {
-  <T extends keyof JSX.IntrinsicElements>(props: { tag: T } & BaseCitricProps & JSX.IntrinsicElements[T]): React.ReactNode,
-  <T extends Record<string, any>>(props: { render: React.FC<T> } & BaseCitricProps & T): React.ReactNode,
-}
-
-export function asCitricProps({ colorScheme, colorPalette, component, ...props }: BaseCitricProps & Record<string, any>) {
-  const citricProps: Record<string, any> = { ...props, 'data-citric': component }
-  if (colorScheme) citricProps['data-color-scheme'] = colorScheme
-  if (colorPalette) citricProps['data-color-palette'] = colorPalette
-  return citricProps
-}
-
-/**
- * Renders any tag or component with the appearance of a Citric Component.
- * 
- * @example
- * An anchor that looks like a card.
- * ```
- * <CitricComponent tag="a" component="card" href="https://www.google.com" target="_blank">This is a card link</CitricComponent>
- * ```
- * 
- * Suppose we have a component called "MyComponent" that accepts the property "myProp". We can make it look like a citric component:
- * ```
- * <CitricComponent render={MyComponent} component="card" myProp="my value" />
- * ```
- */
-// eslint-disable-next-line react/display-name
-export const CitricComponent: CitricComponentType = forwardRef<any, any>(
-  (props, ref) => {
-    const { tag, render, ...citricProps } = asCitricProps(props)
-    return createElement(tag || render, { ...citricProps, ref })
-  },
-)
+import { createElement, forwardRef } from 'react'
+import { WithColorPalette, WithColorScheme } from '../types'
+
+export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' | 'breadcrumb' | 'button' | 'card' | 'checkbox' |
+  'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' |
+  'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' |
+  'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' |
+  'circle' | 'multi-select' | 'autocomplete'
+
+interface BaseCitricProps extends WithColorScheme, WithColorPalette {
+  component: CitricComponentName,
+  ref?: any,
+} 
+
+interface CitricComponentType {
+  <T extends keyof JSX.IntrinsicElements>(props: { tag: T } & BaseCitricProps & JSX.IntrinsicElements[T]): React.ReactNode,
+  <T extends Record<string, any>>(props: { render: React.FC<T> } & BaseCitricProps & T): React.ReactNode,
+}
+
+export function asCitricProps({ colorScheme, colorPalette, component, ...props }: BaseCitricProps & Record<string, any>) {
+  const citricProps: Record<string, any> = { ...props, 'data-citric': component }
+  if (colorScheme) citricProps['data-color-scheme'] = colorScheme
+  if (colorPalette) citricProps['data-color-palette'] = colorPalette
+  return citricProps
+}
+
+/**
+ * Renders any tag or component with the appearance of a Citric Component.
+ * 
+ * @example
+ * An anchor that looks like a card.
+ * ```
+ * <CitricComponent tag="a" component="card" href="https://www.google.com" target="_blank">This is a card link</CitricComponent>
+ * ```
+ * 
+ * Suppose we have a component called "MyComponent" that accepts the property "myProp". We can make it look like a citric component:
+ * ```
+ * <CitricComponent render={MyComponent} component="card" myProp="my value" />
+ * ```
+ */
+// eslint-disable-next-line react/display-name
+export const CitricComponent: CitricComponentType = forwardRef<any, any>(
+  (props, ref) => {
+    const { tag, render, ...citricProps } = asCitricProps(props)
+    return createElement(tag || render, { ...citricProps, ref })
+  },
+)

package/src/components/Divider.tsx

@@ -1,24 +1,24 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { WithColorScheme } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseDividerProps extends WithColorScheme {
-  /**
-   * @default 'horizontal'
-   */
-  direction?: 'horizontal' | 'vertical',
-  /**
-   * @default 'sm'
-   */
-  size?: 'sm' | 'md' | 'lg',
-}
-
-export type DividerProps = React.JSX.IntrinsicElements['hr'] & BaseDividerProps
-
-/**
- * Renders a divider (hr). "size" determines how thick the ruler is and "direction" places it on the vertical or horizontal axis.
- */
-export const Divider = withRef(({ size, direction, className, ...props }: DividerProps) =>
-  <CitricComponent tag="hr" component="divider" className={listToClass([className, size, direction])} {...props} />,
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseDividerProps extends WithColorScheme {
+  /**
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical',
+  /**
+   * @default 'sm'
+   */
+  size?: 'sm' | 'md' | 'lg',
+}
+
+export type DividerProps = React.JSX.IntrinsicElements['hr'] & BaseDividerProps
+
+/**
+ * Renders a divider (hr). "size" determines how thick the ruler is and "direction" places it on the vertical or horizontal axis.
+ */
+export const Divider = withRef(({ size, direction, className, ...props }: DividerProps) =>
+  <CitricComponent tag="hr" component="divider" className={listToClass([className, size, direction])} {...props} />,
+)

package/src/components/ErrorBoundary.tsx

@@ -1,75 +1,75 @@
-import { Component } from 'react'
-import { CitricContext } from '../context/CitricContext'
-import { ErrorMessage } from './ErrorMessage'
-
-interface State {
-  error?: any,
-}
-
-interface Props {
-  children: React.ReactNode,
-  /**
-   * Sets a default error string when a string is provided.
-   * 
-   * Replaces the error component, if a function is provided.
-   */
-  message?: React.ReactNode | ((error: any) => React.ReactNode),
-}
-
-/**
- * An Error Boundary that renders an error feedback instead of its content if any of its children throws.
- * 
- * You can customize the appearance of the error through the function `renderError` of a CitricController.
- * 
- * Errors can be watched through the function `onError` of a CitricController.
- * 
- * Attention: if you're using React Suspense, consider using the component "FallbackBoundary" instead.
- * 
- * @example
- * ```
- * <ErrorBoundary>
- *   {content}
- * </ErrorBoundary>
- * ```
- */
-export class ErrorBoundary extends Component<Props, State> {
-  static contextType = CitricContext
-  declare context: React.ContextType<typeof CitricContext>
-
-  constructor(props: Props) {
-    super(props)
-    this.state = {}
-  }
-
-  static getDerivedStateFromError(error: any) {
-    return { error }
-  }
-
-  componentDidCatch(error: any, errorInfo: any) {
-    this.context?.onError?.(error)
-    // eslint-disable-next-line no-console
-    console.error(error, errorInfo)
-  }
-
-  componentDidUpdate(prevProps: Readonly<Props>) {
-    if (this.state.error && this.props.children !== prevProps.children) {
-      this.setState({ error: null })
-    }
-  }
-
-  private renderCustomErrorUI() {
-    return this.context?.renderError?.(this.state.error)
-  }
-
-  private renderErrorUI() {
-    if (typeof this.props.message === 'function') return this.props.message(this.state.error)
-    return (this.props.message || !this.context?.renderError)
-      ? <ErrorMessage error={this.props.message || this.state.error} />
-      : this.renderCustomErrorUI()
-  }
-
-
-  render() {
-    return this.state.error ? this.renderErrorUI() : this.props.children
-  }
-}
+import { Component } from 'react'
+import { CitricContext } from '../context/CitricContext'
+import { ErrorMessage } from './ErrorMessage'
+
+interface State {
+  error?: any,
+}
+
+interface Props {
+  children: React.ReactNode,
+  /**
+   * Sets a default error string when a string is provided.
+   * 
+   * Replaces the error component, if a function is provided.
+   */
+  message?: React.ReactNode | ((error: any) => React.ReactNode),
+}
+
+/**
+ * An Error Boundary that renders an error feedback instead of its content if any of its children throws.
+ * 
+ * You can customize the appearance of the error through the function `renderError` of a CitricController.
+ * 
+ * Errors can be watched through the function `onError` of a CitricController.
+ * 
+ * Attention: if you're using React Suspense, consider using the component "FallbackBoundary" instead.
+ * 
+ * @example
+ * ```
+ * <ErrorBoundary>
+ *   {content}
+ * </ErrorBoundary>
+ * ```
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  static contextType = CitricContext
+  declare context: React.ContextType<typeof CitricContext>
+
+  constructor(props: Props) {
+    super(props)
+    this.state = {}
+  }
+
+  static getDerivedStateFromError(error: any) {
+    return { error }
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    this.context?.onError?.(error)
+    // eslint-disable-next-line no-console
+    console.error(error, errorInfo)
+  }
+
+  componentDidUpdate(prevProps: Readonly<Props>) {
+    if (this.state.error && this.props.children !== prevProps.children) {
+      this.setState({ error: null })
+    }
+  }
+
+  private renderCustomErrorUI() {
+    return this.context?.renderError?.(this.state.error)
+  }
+
+  private renderErrorUI() {
+    if (typeof this.props.message === 'function') return this.props.message(this.state.error)
+    return (this.props.message || !this.context?.renderError)
+      ? <ErrorMessage error={this.props.message || this.state.error} />
+      : this.renderCustomErrorUI()
+  }
+
+
+  render() {
+    return this.state.error ? this.renderErrorUI() : this.props.children
+  }
+}

package/src/components/ErrorMessage.tsx

@@ -1,11 +1,11 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { theme } from '@stack-spot/portal-theme'
-import { Row } from './layout'
-import { Text } from './Text'
-
-export const ErrorMessage = ({ error }: { error: any }) => (
-  <Row gap="18px" p="20px" justifyContent="center">
-    <Icon icon="TimesCircle" size="xl" style={{ color: theme.color.danger[500] }} />
-    <Text>{error.message || `${error}`}</Text>
-  </Row>
-)
+import { Icon } from '@stack-spot/citric-icons'
+import { theme } from '@stack-spot/portal-theme'
+import { Row } from './layout'
+import { Text } from './Text'
+
+export const ErrorMessage = ({ error }: { error: any }) => (
+  <Row gap="18px" p="20px" justifyContent="center">
+    <Icon icon="TimesCircle" size="xl" style={{ color: theme.color.danger[500] }} />
+    <Text>{error.message || `${error}`}</Text>
+  </Row>
+)

package/src/components/FallbackBoundary.tsx

@@ -1,40 +1,40 @@
-import { Suspense } from 'react'
-import { ErrorBoundary } from './ErrorBoundary'
-import { Center } from './layout'
-import { ProgressCircular } from './ProgressCircular'
-
-interface Props {
-  /**
-   * Replaces the error message with this text.
-   */
-  message?: string,
-  children: React.ReactNode,
-}
-
-const loading = (
-  <Center flex={1} p="80px" data-test-hint="loading">
-    <ProgressCircular />
-  </Center>
-)
-
-/**
- * A Boundary that renders an error feedback if a child throws an error or a loading feedback if it suspends.
- * 
- * You can customize the appearance of the loading and error views through a CitricController.
- * 
- * Errors can be watched through the function `onError` of a CitricController.
- * 
- * @example
- * ```
- * <FallbackBoundary>
- *   {content}
- * </FallbackBoundary>
- * ```
- */
-export const FallbackBoundary = ({ children, message }: Props) => (
-  <ErrorBoundary message={message}>
-    <Suspense fallback={loading}>
-      {children}
-    </Suspense>
-  </ErrorBoundary>
-)
+import { Suspense } from 'react'
+import { ErrorBoundary } from './ErrorBoundary'
+import { Center } from './layout'
+import { ProgressCircular } from './ProgressCircular'
+
+interface Props {
+  /**
+   * Replaces the error message with this text.
+   */
+  message?: string,
+  children: React.ReactNode,
+}
+
+const loading = (
+  <Center flex={1} p="80px" data-test-hint="loading">
+    <ProgressCircular />
+  </Center>
+)
+
+/**
+ * A Boundary that renders an error feedback if a child throws an error or a loading feedback if it suspends.
+ * 
+ * You can customize the appearance of the loading and error views through a CitricController.
+ * 
+ * Errors can be watched through the function `onError` of a CitricController.
+ * 
+ * @example
+ * ```
+ * <FallbackBoundary>
+ *   {content}
+ * </FallbackBoundary>
+ * ```
+ */
+export const FallbackBoundary = ({ children, message }: Props) => (
+  <ErrorBoundary message={message}>
+    <Suspense fallback={loading}>
+      {children}
+    </Suspense>
+  </ErrorBoundary>
+)

package/src/components/Favorite.tsx

@@ -1,57 +1,57 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { ControlledInput } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-type FavoriteAppearance = 'square' | 'circle' | 'text'
-
-export interface BaseFavoriteProps {
-  value: boolean | undefined,
-  /**
-   * Size of the button.
-   * 
-   * @default 'md'
-   */
-  size?: 'sm' | 'md' | 'lg' | 'fit-parent',
-  /**
-   * Button appearance.
-   * 
-   * @default 'text'
-   */
-  appearance?: FavoriteAppearance,
-  onChange: (value: boolean) => void,
-  /**
-   * Whether or not to show the loading feedback.
-   * 
-   * If `loading` is true, this button becomes disabled.
-   */
-  loading?: boolean,
-}
-
-export type FavoriteProps = Omit<ControlledInput, 'size'> & BaseFavoriteProps
-
-/**
- * Renders a checkbox with the appearance of a favorite button. If unchecked, the stroke of a star is rendered, when checked, a filled
- * yellow star is rendered.
- * 
- * You can also set a loading state to indicate the component is busy.
- * 
- * @example
- * ```
- * const { isFavorite, setFavorite, isLoading } = useRemoteFavoriteStatus()
- * return <Favorite value={isFavorite} onChange={setFavorite} loading={isLoading} />
- * ``` 
- */
-export const Favorite = withRef(({ value, size, appearance, onChange, loading, disabled, className, ...props }: FavoriteProps) =>
-  <CitricComponent
-    tag="input"
-    type="checkbox"
-    component="favorite"
-    className={listToClass([appearance, size, className])}
-    checked={!!value}
-    onChange={() => onChange(!value)}
-    aria-busy={loading}
-    disabled={loading || disabled}
-    {...props}
-  />,
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { ControlledInput } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+type FavoriteAppearance = 'square' | 'circle' | 'text'
+
+export interface BaseFavoriteProps {
+  value: boolean | undefined,
+  /**
+   * Size of the button.
+   * 
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'fit-parent',
+  /**
+   * Button appearance.
+   * 
+   * @default 'text'
+   */
+  appearance?: FavoriteAppearance,
+  onChange: (value: boolean) => void,
+  /**
+   * Whether or not to show the loading feedback.
+   * 
+   * If `loading` is true, this button becomes disabled.
+   */
+  loading?: boolean,
+}
+
+export type FavoriteProps = Omit<ControlledInput, 'size'> & BaseFavoriteProps
+
+/**
+ * Renders a checkbox with the appearance of a favorite button. If unchecked, the stroke of a star is rendered, when checked, a filled
+ * yellow star is rendered.
+ * 
+ * You can also set a loading state to indicate the component is busy.
+ * 
+ * @example
+ * ```
+ * const { isFavorite, setFavorite, isLoading } = useRemoteFavoriteStatus()
+ * return <Favorite value={isFavorite} onChange={setFavorite} loading={isLoading} />
+ * ``` 
+ */
+export const Favorite = withRef(({ value, size, appearance, onChange, loading, disabled, className, ...props }: FavoriteProps) =>
+  <CitricComponent
+    tag="input"
+    type="checkbox"
+    component="favorite"
+    className={listToClass([appearance, size, className])}
+    checked={!!value}
+    onChange={() => onChange(!value)}
+    aria-busy={loading}
+    disabled={loading || disabled}
+    {...props}
+  />,
+)