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

package/src/components/SelectBox.tsx

@@ -1,167 +1,181 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { useMemo } from 'react'
-import { WithColorPalette, WithColorScheme } from '../types'
-import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-import { layout } from './layout'
-
-export interface SelectBoxLabel {
-  icon?: React.ReactElement,
-  title: string,
-  description?: string,
-}
-
-export interface CommonSelectBoxProps<T> extends WithColorPalette, WithColorScheme {
-  /**
-   * If multiple is true, checkboxes will be rendered instead of radio buttons.
-   * 
-   * @default false
-   */
-  multiple?: boolean,
-  /**
-   * The name for all checkboxes or radio buttons.
-   */
-  name?: string,
-  /**
-   * The options to show as select boxes.
-   */
-  options: T[],
-  /**
-   * A function that returns the data to render a select box for an option.
-   * 
-   * @default "extracts the title by converting the option to a string"
-   */
-  renderLabel?: (option: T) => SelectBoxLabel,
-  /**
-   * A function that returns a unique identifier for an option.
-   * 
-   * @default "if the option is a string, uses it as the key. Otherwise, the key won't be specified."
-   */
-  renderKey?: (option: T) => string | number | undefined,
-  /**
-   * A function that receives an option and decides if it's disabled or not.
-   */
-  isDisabled?: (option: T) => boolean,
-  /**
-   * Whether to render a row (horizontal) or a column (vertical).
-   * 
-   * @default 'horizontal'
-   */
-  direction?: 'horizontal' | 'vertical',
-  /**
-   * The background color level.
-   * 
-   * @default 300
-   */
-  bgLevel?: 300 | 400 | 500 | 600 | 700,
-}
-
-interface CheckboxProps<T> extends CommonSelectBoxProps<T> {
-  multiple: true,
-  value?: T[],
-  onChange?: (value: T[]) => void,
-}
-
-interface RadioProps<T> extends CommonSelectBoxProps<T> {
-  multiple?: false,
-  value?: T,
-  onChange?: (value: T) => void,
-}
-
-export type BaseSelectBoxProps<T> = RadioProps<T> | CheckboxProps<T>
-
-export type SelectBoxProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseSelectBoxProps<T>
-
-/**
- * This component does exactly the same thing as "CheckboxGroup" and "RadioGroup", but with different visuals and less customization.
- * 
- * Each option is rendered as a selectable card. The user can select a single option (radio buttons) or multiple options (checkboxes),
- * depending on the value of the property "multiple", which is false by default.
- * 
- * Use `renderLabel` to determine what to render inside each card. This is not a free react element, it must return an object containing an
- * icon, a title and a description.
- * 
- * @example
- * 
- * ```
- * const options = useMemo(() => [
- *   { id: 1, image: 'https://images.com/1.png', name: 'Basic plan', price: 59 },
- *   { id: 2, image: 'https://images.com/2.png', name: 'Gold plan', price: 69 },
- *   { id: 3, image: 'https://images.com/3.png', name: 'Safira plan', price: 79' },
- *   { id: 4, image: 'https://images.com/4.png', name: 'Diamond plan', price: 99 },
- * ], [])
- * 
- * return <SelectBox
- *   options={options}
- *   renderKey={o => o.id}
- *   renderLabel={o => ({
- *     icon: <img src={o.image} />,
- *     title: o.name,
- *     description: `$${price.toFixed(2)}`,
- *   })}
- * />
- * ```
- */
-export const SelectBox = withRef(
-  function SelectBox<T>({
-    multiple,
-    name,
-    value,
-    options,
-    onChange,
-    renderLabel = o => ({ title: defaultRenderLabel(o) }),
-    renderKey = defaultRenderKey,
-    isDisabled,
-    className,
-    style,
-    direction,
-    bgLevel,
-    colorPalette,
-    colorScheme,
-    ...props
-  }: SelectBoxProps<T>) {
-    const items = useMemo(() => {
-      const valueAsArray = value ? (Array.isArray(value) ? value : [value]) : []
-      const valueKeys = valueAsArray.map(renderKey)
-      return options.map((o) => {
-        const key = renderKey(o)
-        const label = renderLabel(o)
-        return (
-          <CitricComponent key={key} tag="label" component="select-box" className={bgLevel ? `bg-${bgLevel}` : undefined}>
-            <input
-              type={multiple ? 'checkbox' : 'radio'}
-              name={name}
-              value={key}
-              checked={value ? valueKeys.includes(key) : undefined}
-              disabled={isDisabled?.(o)}
-              onChange={onChange ? (e) => {
-                if (multiple) {
-                  onChange(e.target.checked ? [...valueAsArray, o] : valueAsArray.filter(v => renderKey(v) !== key)) 
-                } else {
-                  onChange(o)
-                }
-              } : undefined}
-            />
-            <div className="option">
-              {label.icon}
-              <p className="title">{label.title}</p>
-              {label.description && <p className="description">{label.description}</p>}
-            </div>
-          </CitricComponent>
-        )
-      })
-    }, [options, value, name, multiple, bgLevel])
-    return (
-      <div
-        data-color-palette={colorPalette}
-        data-color-scheme={colorScheme}
-        className={listToClass([className, direction === 'vertical' ? layout.column : layout.row])}
-        style={{ gap: '5px', ...style }}
-        {...props}
-      >
-        {items}
-      </div>
-    )
-  },
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { useMemo } from 'react'
+import { WithColorPalette, WithColorScheme } from '../types'
+import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+import { layout } from './layout'
+
+export interface SelectBoxLabel {
+  icon?: React.ReactElement,
+  title: string,
+  description?: string,
+}
+
+export interface CommonSelectBoxProps<T> extends WithColorPalette, WithColorScheme {
+  /**
+   * If multiple is true, checkboxes will be rendered instead of radio buttons.
+   * 
+   * @default false
+   */
+  multiple?: boolean,
+  /**
+   * The name for all checkboxes or radio buttons.
+   */
+  name?: string,
+  /**
+   * The options to show as select boxes.
+   */
+  options: T[],
+  /**
+   * A function that returns the data to render a select box for an option.
+   * 
+   * @default "extracts the title by converting the option to a string"
+   */
+  renderLabel?: (option: T) => SelectBoxLabel,
+  /**
+   * A function that returns a unique identifier for an option.
+   * 
+   * @default "if the option is a string, uses it as the key. Otherwise, the key won't be specified."
+   */
+  renderKey?: (option: T) => string | number | undefined,
+  /**
+   * A function that receives an option and decides if it's disabled or not.
+   */
+  isDisabled?: (option: T) => boolean,
+  /**
+   * Whether to render a row (horizontal) or a column (vertical).
+   * 
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical',
+  /**
+   * The background color level.
+   * 
+   * @default 300
+   */
+  bgLevel?: 300 | 400 | 500 | 600 | 700,
+  /**
+   * The appearance of each option.
+   * 
+   * Attention: the appearance "button" hides the description text.
+   * 
+   * @default 'box'
+   */
+  appearance?: 'box' | 'button',
+}
+
+interface CheckboxProps<T> extends CommonSelectBoxProps<T> {
+  multiple: true,
+  value?: T[],
+  onChange?: (value: T[]) => void,
+}
+
+interface RadioProps<T> extends CommonSelectBoxProps<T> {
+  multiple?: false,
+  value?: T,
+  onChange?: (value: T) => void,
+}
+
+export type BaseSelectBoxProps<T> = RadioProps<T> | CheckboxProps<T>
+
+export type SelectBoxProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseSelectBoxProps<T>
+
+/**
+ * This component does exactly the same thing as "CheckboxGroup" and "RadioGroup", but with different visuals and less customization.
+ * 
+ * Each option is rendered as a selectable card. The user can select a single option (radio buttons) or multiple options (checkboxes),
+ * depending on the value of the property "multiple", which is false by default.
+ * 
+ * Use `renderLabel` to determine what to render inside each card. This is not a free react element, it must return an object containing an
+ * icon, a title and a description.
+ * 
+ * @example
+ * 
+ * ```
+ * const options = useMemo(() => [
+ *   { id: 1, image: 'https://images.com/1.png', name: 'Basic plan', price: 59 },
+ *   { id: 2, image: 'https://images.com/2.png', name: 'Gold plan', price: 69 },
+ *   { id: 3, image: 'https://images.com/3.png', name: 'Safira plan', price: 79' },
+ *   { id: 4, image: 'https://images.com/4.png', name: 'Diamond plan', price: 99 },
+ * ], [])
+ * 
+ * return <SelectBox
+ *   options={options}
+ *   renderKey={o => o.id}
+ *   renderLabel={o => ({
+ *     icon: <img src={o.image} />,
+ *     title: o.name,
+ *     description: `$${price.toFixed(2)}`,
+ *   })}
+ * />
+ * ```
+ */
+export const SelectBox = withRef(
+  function SelectBox<T>({
+    multiple,
+    name,
+    value,
+    options,
+    onChange,
+    renderLabel = o => ({ title: defaultRenderLabel(o) }),
+    renderKey = defaultRenderKey,
+    isDisabled,
+    className,
+    style,
+    direction,
+    bgLevel,
+    colorPalette,
+    colorScheme,
+    appearance,
+    ...props
+  }: SelectBoxProps<T>) {
+    const items = useMemo(() => {
+      const valueAsArray = value ? (Array.isArray(value) ? value : [value]) : []
+      const valueKeys = valueAsArray.map(renderKey)
+      return options.map((o) => {
+        const key = renderKey(o)
+        const label = renderLabel(o)
+        const checked = value ? valueKeys.includes(key) : undefined
+        return (
+          <CitricComponent key={key} tag="label" component="select-box" className={listToClass([bgLevel && `bg-${bgLevel}`, appearance])}>
+            <input
+              // Fixes a super weird bug that happens only when rendering this component in an external project (not in Storybook). The bug
+              // prevents the initially checked option from ever being unchecked. By attaching this key to the checked attribute, we can
+              // guarantee this input will always be destroyed and reconstructed whenever the value changes.
+              key={`${key}-${checked}`}
+              type={multiple ? 'checkbox' : 'radio'}
+              name={name}
+              value={key}
+              checked={checked}
+              disabled={isDisabled?.(o)}
+              onChange={onChange ? (e) => {
+                if (multiple) {
+                  onChange(e.target.checked ? [...valueAsArray, o] : valueAsArray.filter(v => renderKey(v) !== key)) 
+                } else {
+                  onChange(o)
+                }
+              } : undefined}
+            />
+            <div className="option">
+              {label.icon}
+              <p className="title">{label.title}</p>
+              {label.description && appearance !== 'button' && <p className="description">{label.description}</p>}
+            </div>
+          </CitricComponent>
+        )
+      })
+    }, [options, value, name, multiple, bgLevel, appearance])
+    return (
+      <div
+        data-color-palette={colorPalette}
+        data-color-scheme={colorScheme}
+        className={listToClass([className, direction === 'vertical' ? layout.column : layout.row])}
+        style={{ gap: '5px', ...style }}
+        {...props}
+      >
+        {items}
+      </div>
+    )
+  },
+)

package/src/components/Skeleton.tsx

@@ -1,53 +1,53 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseSkeletonProps {
-  /**
-   * The skeleton's appearance.
-   * 
-   * @default 'square'
-   */
-  appearance?: 'square' | 'circle',
-  /**
-   * The skeleton's width.
-   * 
-   * @default "the available width if 'square', 50px if 'circle'".
-   */
-  width?: string,
-  /**
-   * The skeleton's width.
-   * 
-   * @default "32px if 'square', 50px if 'circle'".
-   */
-  height?: string,
-  /**
-   * The background color level.
-   * 
-   * @default 500
-   */
-  bgLevel?: 400 | 500 | 600, 
-}
-
-export type SkeletonProps = React.JSX.IntrinsicElements['div'] & BaseSkeletonProps
-
-/**
- * A loading feedback with a discrete animation. Use this to replace elements on the page that are still loading and will be replaced by
- * the same shape when the loading ends.
- * 
- * Use the property "bgLevel" to manage how light/dark the background is.
- * 
- * @example
- * ```
- * <Skeleton width="100%" height="20px" />
- * ```
- */
-export const Skeleton = withRef(({ appearance, className, style, width, height, bgLevel, ...props }: SkeletonProps) =>
-  <CitricComponent
-    tag="div"
-    component="skeleton"
-    className={listToClass([appearance, bgLevel && `bg-${bgLevel}`, className])}
-    style={{ width, height, ...style }}
-    {...props}
-  />,
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseSkeletonProps {
+  /**
+   * The skeleton's appearance.
+   * 
+   * @default 'square'
+   */
+  appearance?: 'square' | 'circle',
+  /**
+   * The skeleton's width.
+   * 
+   * @default "the available width if 'square', 50px if 'circle'".
+   */
+  width?: string,
+  /**
+   * The skeleton's width.
+   * 
+   * @default "32px if 'square', 50px if 'circle'".
+   */
+  height?: string,
+  /**
+   * The background color level.
+   * 
+   * @default 500
+   */
+  bgLevel?: 400 | 500 | 600, 
+}
+
+export type SkeletonProps = React.JSX.IntrinsicElements['div'] & BaseSkeletonProps
+
+/**
+ * A loading feedback with a discrete animation. Use this to replace elements on the page that are still loading and will be replaced by
+ * the same shape when the loading ends.
+ * 
+ * Use the property "bgLevel" to manage how light/dark the background is.
+ * 
+ * @example
+ * ```
+ * <Skeleton width="100%" height="20px" />
+ * ```
+ */
+export const Skeleton = withRef(({ appearance, className, style, width, height, bgLevel, ...props }: SkeletonProps) =>
+  <CitricComponent
+    tag="div"
+    component="skeleton"
+    className={listToClass([appearance, bgLevel && `bg-${bgLevel}`, className])}
+    style={{ width, height, ...style }}
+    {...props}
+  />,
+)

package/src/components/Slider.tsx

@@ -1,89 +1,89 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { ControlledInput, WithColorPalette, WithColorScheme } from '../types'
-import { applyCSSVariable } from '../utils/css'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseSliderProps extends WithColorScheme, WithColorPalette {
-  value: number,
-  /**
-   * The minimum value in the numeric range.
-   * 
-   * @default 0
-   */
-  min?: number,
-  /**
-   * The maximum value in the numeric range.
-   * 
-   * @default 100
-   */
-  max?: number,
-  onChange: (value: number) => void,
-  /**
-   * When should we render the current value of the input?
-   * 
-   * @default 'always'
-   */
-  showValue?: 'always' | 'hover' | 'never',
-  /**
-   * A function to customize how the value of the input is rendered.
-   * 
-   * @default "{value}% if 'min' and 'max' are not provided. {value} otherwise."
-   */
-  renderValue?: (value: number) => string,
-}
-
-export type SliderProps =  ControlledInput & BaseSliderProps
-
-/**
- * A UI element where the user can slide a knob over a bar to select a number. By default, a number between 0 and 100 can be selected, use
- * the properties "min" and "max" to change this.
- * 
- * Attention: "onChange" receives the new value (number) instead of the event.
- * 
- * @example
- * ```
- * const [value, setValue] = useState(0)
- * return <Slider value={value} setValue={setValue} />
- * ```
- */
-export const Slider = withRef((
-  { value, onChange, min, max, style, showValue, renderValue, colorPalette, colorScheme, className, ...props }: SliderProps,
-) => {
-  const percent = Math.floor((value / ((max ?? 100) - (min ?? 0))) * 100)
-  style = applyCSSVariable(style, 'percent', percent)
-  const rangeProps = {
-    value,
-    min,
-    max,
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(parseInt(e.target.value)),
-    ...props,
-  }  
-
-  return showValue === 'never'
-    ? <CitricComponent
-      tag="input"
-      type="range"
-      component="slider"
-      style={style}
-      className={className}
-      colorPalette={colorPalette}
-      colorScheme={colorScheme}
-      {...rangeProps}
-    />
-    : (
-      <CitricComponent
-        tag="div"
-        component="labeled-slider"
-        style={style}
-        colorPalette={colorPalette}
-        colorScheme={colorScheme}
-        className={listToClass([className, showValue === 'hover' && 'value-on-hover'])}
-      >
-        <input type="range" {...rangeProps} />
-        <div className="value">
-          {renderValue ? renderValue(value) : `${value}${min === undefined && max === undefined ? '%' : ''}`}
-        </div>
-      </CitricComponent>
-    )
-})
+import { listToClass } from '@stack-spot/portal-theme'
+import { ControlledInput, WithColorPalette, WithColorScheme } from '../types'
+import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseSliderProps extends WithColorScheme, WithColorPalette {
+  value: number,
+  /**
+   * The minimum value in the numeric range.
+   * 
+   * @default 0
+   */
+  min?: number,
+  /**
+   * The maximum value in the numeric range.
+   * 
+   * @default 100
+   */
+  max?: number,
+  onChange: (value: number) => void,
+  /**
+   * When should we render the current value of the input?
+   * 
+   * @default 'always'
+   */
+  showValue?: 'always' | 'hover' | 'never',
+  /**
+   * A function to customize how the value of the input is rendered.
+   * 
+   * @default "{value}% if 'min' and 'max' are not provided. {value} otherwise."
+   */
+  renderValue?: (value: number) => string,
+}
+
+export type SliderProps =  ControlledInput & BaseSliderProps
+
+/**
+ * A UI element where the user can slide a knob over a bar to select a number. By default, a number between 0 and 100 can be selected, use
+ * the properties "min" and "max" to change this.
+ * 
+ * Attention: "onChange" receives the new value (number) instead of the event.
+ * 
+ * @example
+ * ```
+ * const [value, setValue] = useState(0)
+ * return <Slider value={value} setValue={setValue} />
+ * ```
+ */
+export const Slider = withRef((
+  { value, onChange, min, max, style, showValue, renderValue, colorPalette, colorScheme, className, ...props }: SliderProps,
+) => {
+  const percent = Math.floor((value / ((max ?? 100) - (min ?? 0))) * 100)
+  style = applyCSSVariable(style, 'percent', percent)
+  const rangeProps = {
+    value,
+    min,
+    max,
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(parseInt(e.target.value)),
+    ...props,
+  }  
+
+  return showValue === 'never'
+    ? <CitricComponent
+      tag="input"
+      type="range"
+      component="slider"
+      style={style}
+      className={className}
+      colorPalette={colorPalette}
+      colorScheme={colorScheme}
+      {...rangeProps}
+    />
+    : (
+      <CitricComponent
+        tag="div"
+        component="labeled-slider"
+        style={style}
+        colorPalette={colorPalette}
+        colorScheme={colorScheme}
+        className={listToClass([className, showValue === 'hover' && 'value-on-hover'])}
+      >
+        <input type="range" {...rangeProps} />
+        <div className="value">
+          {renderValue ? renderValue(value) : `${value}${min === undefined && max === undefined ? '%' : ''}`}
+        </div>
+      </CitricComponent>
+    )
+})