@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/Chips/chipTypes.ts

@@ -0,0 +1,113 @@
+import { ReactElement, ReactNode } from 'react';
+
+export type ChipProps = {
+    /**
+     * The aria-haspopup attribute for the chip.
+     */
+    ['aria-haspopup']?: boolean;
+    /**
+     * The aria-label attribute for the chip.
+     */
+    ['aria-label']?: string;
+    /**
+     * The HTML element to render as. Defaults to 'button'.
+     * Use 'a' for link chips or 'button' for interactive chips.
+     */
+    as?: 'a' | 'button';
+    /**
+     * The content of the chip.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes to apply to the chip.
+     */
+    className?: string;
+    /**
+     * Whether the chip is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The number of filters in the chip.
+     */
+    filterCount?: number;
+    /**
+     * The href of the chip. Only applies when `as="a"`.
+     */
+    href?: string;
+    /**
+     * The id of the chip.
+     */
+    id?: string;
+    /**
+     * The onClick handler for the chip.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * The onClose handler for the filter chip.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * Whether the chip is selected.
+     */
+    selected?: boolean;
+    /**
+     * The size of the chip.
+     */
+    size?: 'xs' | 'md';
+    /**
+     * The style of the chip.
+     */
+    style?: 'selectable' | 'input' | 'singleFilter' | 'allFilters' | 'suggestion';
+    /**
+     * The value of the chip.
+     */
+    value?: unknown;
+};
+
+export type ChipGroupProps = {
+    /**
+     * These children should be a Chip component.
+     */
+    children: ReactElement<ChipProps> | ReactElement<ChipProps>[];
+    /**
+     * The type of the rendered chips. If the type is `link`, the chips will be rendered as `<a>`. If the type is `radio` or `checkbox`, the chips will be rendered as `<input type="radio">` or `<input type="checkbox">` (the text is a span next to the inputs).
+     */
+    chipType: 'link' | 'radio' | 'checkbox';
+    className?: string;
+    /**
+     * @default 'chip-group'
+     */
+    'data-testid'?: string;
+    /**
+     * How to interact with the rendered chip components. Returns both the just mutated chip and the entire state of the chip group.
+     */
+    onChange?: (changed: ChipState, state: TotalChipState) => void;
+} & (
+    | {
+          chipType: 'link';
+          /** `name` is only required when chipType is `'radio'` or `'checkbox'` */
+          name?: string;
+      }
+    | {
+          chipType: 'radio' | 'checkbox';
+          /** `name` is only required when chipType is `'radio'` or `'checkbox'` */
+          name: string;
+      }
+);
+
+export type ChipState = {
+    /**
+     * The id of the chip
+     */
+    id: string;
+    /**
+     * Whether the chip is selected or not
+     */
+    selected: boolean;
+    /**
+     * The value of the chip, marked as unknown since there's no way to carry types.
+     */
+    value: unknown;
+};
+
+export type TotalChipState = Record<string, ChipState>;

package/src/Chips/index.ts

@@ -0,0 +1,4 @@
+export * from './Chip';
+export * from './ChipGroup';
+export * from './chipTypes';
+export * from './SuggestionChip';

package/src/ChoiceListItem/Checkbox.tsx

@@ -0,0 +1,69 @@
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef } from 'react';
+
+import { ChoiceListItem } from './choiceListItem';
+import { ChoiceListItemGroup, CommonProps } from './common';
+
+const CheckboxVisual = ({ className }: { className?: string }) => (
+    <svg
+        aria-hidden="true"
+        className={cn(
+            // Base styles
+            'rounded-checkbox border border-border-primary bg-background-primary text-icon-primary',
+            'h-5 w-5', // 20px
+            'transition-colors',
+            // Placement
+            'ml-3xs mt-3xs',
+            // State styles
+            'peer-checked:border-border-selected peer-checked:text-icon-secondary peer-hover:border-border-hover peer-checked:[&>.checked]:opacity-100',
+            // Arbitrary `peer-[:indeterminate]` ensures JIT emits sibling rules (peer-indeterminate can be absent in some scans).
+            'peer-[:indeterminate]:border-border-selected peer-[:indeterminate]:text-icon-secondary peer-[:indeterminate]:[&>.indeterminate]:opacity-100',
+            'peer-disabled:cursor-not-allowed peer-disabled:border-border-disabled peer-disabled:bg-background-disabled peer-disabled:text-icon-disabled',
+            // Custom className
+            className
+        )}
+        fill="none"
+        height="20"
+        viewBox="2 2 20 20"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            className="checked opacity-0 transition-opacity"
+            clipRule="evenodd"
+            d="M9.75502 16.8036L5.20502 12.4453C4.93166 12.1835 4.93166 11.759 5.20502 11.4971L6.19494 10.5489C6.4683 10.287 6.91154 10.287 7.1849 10.5489L10.25 13.4848L16.8151 7.19638C17.0885 6.93454 17.5317 6.93454 17.8051 7.19638L18.795 8.14461C19.0683 8.40645 19.0683 8.83098 18.795 9.09285L10.745 16.8036C10.4716 17.0655 10.0284 17.0655 9.75502 16.8036Z"
+            fill="currentColor"
+            fillRule="evenodd"
+        />
+        <rect
+            className="indeterminate opacity-0 transition-opacity"
+            fill="currentColor"
+            height="4"
+            rx="1"
+            width="12"
+            x="6"
+            y="10"
+        />
+    </svg>
+);
+
+const CheckboxOption = forwardRef<HTMLInputElement | null, CommonProps>((props, ref) => {
+    return (
+        <ChoiceListItem
+            {...props}
+            ref={ref}
+            type="checkbox"
+            visual={<CheckboxVisual />}
+        />
+    );
+});
+
+CheckboxOption.displayName = 'CheckboxOption';
+
+export const Checkbox = {
+    Group: ChoiceListItemGroup,
+    Option: CheckboxOption,
+};
+
+export { CheckboxOption };
+export const CheckboxGroup = ChoiceListItemGroup;

package/src/ChoiceListItem/Radio.tsx

@@ -0,0 +1,61 @@
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef } from 'react';
+
+import { ChoiceListItem } from './choiceListItem';
+import { ChoiceListItemGroup, CommonProps } from './common';
+
+const RadioVisual = ({ className }: { className?: string }) => (
+    <svg
+        aria-hidden="true"
+        className={cn(
+            // Base styles
+            'rounded-full border border-border-primary bg-background-primary text-icon-default',
+            'h-5 w-5', // 20px
+            'transition-colors',
+            // Placement
+            'ml-3xs mt-3xs',
+            // State styles
+            'peer-checked:border-border-selected peer-checked:text-icon-secondary peer-hover:border-border-hover peer-checked:[&>circle]:opacity-100',
+            'peer-disabled:cursor-not-allowed peer-disabled:border-border-disabled peer-disabled:bg-background-disabled peer-disabled:text-icon-disabled',
+            // Custom className
+            className
+        )}
+        fill="none"
+        height="20"
+        viewBox="2 2 20 20"
+        width="20"
+    >
+        <circle
+            className="opacity-0 transition-opacity"
+            cx="12"
+            cy="12"
+            fill="currentColor"
+            r="7"
+        />
+    </svg>
+);
+
+/**
+ * RadioOption component using Tailwind CSS.
+ * @see CommonProps for prop details.
+ */
+export const RadioOption = forwardRef<HTMLInputElement, CommonProps>((props, ref) => {
+    return (
+        <ChoiceListItem
+            {...props}
+            ref={ref}
+            type="radio"
+            visual={<RadioVisual />}
+        />
+    );
+});
+
+RadioOption.displayName = 'RadioOption';
+
+export const Radio = {
+    Group: ChoiceListItemGroup,
+    Option: RadioOption,
+};
+
+// export { RadioOption };
+export const RadioGroup = ChoiceListItemGroup;

package/src/ChoiceListItem/choiceListItem.tsx

@@ -0,0 +1,99 @@
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef, ReactNode, useMemo } from 'react';
+
+import { getMixinClasses } from '../mixins';
+import { BodyPrimary, BodySecondary } from '../Typography/Text/Text';
+import { ChoiceListItemLabel, CommonProps } from './common';
+
+type TypeOfChoice = {
+    type: 'checkbox' | 'radio';
+    visual: ReactNode;
+};
+
+export const ChoiceListItem = forwardRef<HTMLInputElement | null, CommonProps & TypeOfChoice>(
+    (
+        {
+            $gridLocation,
+            $lineClamp,
+            $margin,
+            $marginBottom,
+            $marginLeft,
+            $marginRight,
+            $marginTop,
+            $padding,
+            $paddingBottom,
+            $paddingLeft,
+            $paddingRight,
+            $paddingTop,
+            children,
+            className,
+            description: descriptionText,
+            labelSize = 'primary',
+            type,
+            visual,
+            ...rest
+        },
+        ref
+    ) => {
+        const mixinClasses = getMixinClasses({
+            $gridLocation,
+            $lineClamp,
+            $margin,
+            $marginBottom,
+            $marginLeft,
+            $marginRight,
+            $marginTop,
+            $padding,
+            $paddingBottom,
+            $paddingLeft,
+            $paddingRight,
+            $paddingTop,
+        });
+
+        const description = useMemo(
+            () =>
+                descriptionText ? (
+                    <BodySecondary
+                        className="grid-area-[description]"
+                        color="secondary"
+                    >
+                        {descriptionText}
+                    </BodySecondary>
+                ) : null,
+            [descriptionText]
+        );
+
+        return (
+            <ChoiceListItemLabel
+                as="label"
+                className={cn(mixinClasses, className)}
+            >
+                <input
+                    className="peer absolute h-0 w-0 opacity-0"
+                    tabIndex={0}
+                    {...rest}
+                    ref={ref}
+                    type={type}
+                />
+                {visual}
+                {labelSize === 'primary' ? (
+                    <BodyPrimary className="grid-area-[label]">{children}</BodyPrimary>
+                ) : (
+                    <BodySecondary className="grid-area-[label]">{children}</BodySecondary>
+                )}
+
+                {description}
+            </ChoiceListItemLabel>
+        );
+    }
+);
+
+ChoiceListItem.displayName = 'ChoiceListItem';
+
+export const ChoiceListItemCustomLabelContainer = ({
+    children,
+    className,
+}: {
+    children: ReactNode;
+    className?: string;
+}) => <div className={cn('grid-area-[labelExtra]', className)}>{children}</div>;

package/src/ChoiceListItem/common.tsx

@@ -0,0 +1,148 @@
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef, HTMLProps, ReactElement, ReactNode, SVGProps } from 'react';
+
+import { GenericCSSMixinProps, getMixinClasses } from '../mixins';
+
+export const ChoiceListItemIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...rest }, ref) => (
+    <svg
+        className={cn('border border-current bg-background-primary text-icon-secondary', className)}
+        ref={ref}
+        {...rest}
+    />
+));
+
+ChoiceListItemIcon.displayName = 'ChoiceListItemIcon';
+
+type ChoiceListItemLabelProps = {
+    /** Hammer passes `as="label"`; ignored at runtime (label is always `<label>`). */
+    as?: 'label' | string;
+    children: ReactNode;
+    className?: string;
+};
+
+export const ChoiceListItemLabel = ({ as: _as, children, className }: ChoiceListItemLabelProps) => (
+    <label
+        className={cn(
+            'grid cursor-pointer grid-cols-[24px_10px_1fr]',
+            'cursor-pointer',
+            '[&>input:focus-visible~svg]:outline [&>input:focus-visible~svg]:outline-4 [&>input:focus-visible~svg]:outline-offset-1 [&>input:focus-visible~svg]:outline-focus-primary',
+            '[&>input:checked~svg]:text-icon-secondary [&>input[type="checkbox"]:indeterminate~svg]:text-icon-secondary',
+            '[&>input:hover~svg]:bg-background-hover [&>input:hover~svg]:text-icon-hover',
+            '[&>input:disabled~span]:text-text-disabled',
+            '[&>input:disabled~svg]:cursor-not-allowed [&>input:disabled~svg]:bg-background-disabled [&>input:disabled~svg]:text-icon-disabled',
+            className
+        )}
+        style={{ gridTemplateAreas: "'input . label' '. . description'" }}
+    >
+        {children}
+    </label>
+);
+
+export const ChoiceListItemGroup = forwardRef<HTMLFieldSetElement, GroupProps>(
+    (
+        {
+            $gridLocation,
+            $lineClamp,
+            $margin,
+            $marginBottom,
+            $marginLeft,
+            $marginRight,
+            $marginTop,
+            $padding,
+            $paddingBottom,
+            $paddingLeft,
+            $paddingRight,
+            $paddingTop,
+            children,
+            className,
+            id,
+            label,
+            ...rest
+        },
+        ref
+    ) => {
+        const mixinClasses = getMixinClasses({
+            $gridLocation,
+            $lineClamp,
+            $margin,
+            $marginBottom,
+            $marginLeft,
+            $marginRight,
+            $marginTop,
+            $padding,
+            $paddingBottom,
+            $paddingLeft,
+            $paddingRight,
+            $paddingTop,
+        });
+
+        return (
+            <fieldset
+                className={cn(
+                    'm-0 flex flex-col gap-y-xs border-0 p-0 text-[inherit] xsMax:gap-y-sm',
+                    mixinClasses,
+                    className
+                )}
+                id={id}
+                ref={ref}
+                {...rest}
+            >
+                {Boolean(label) && <legend className="hui-text-label-mini pb-xs">{label}</legend>}
+                {children}
+            </fieldset>
+        );
+    }
+);
+
+ChoiceListItemGroup.displayName = 'ChoiceListItemGroup';
+
+export type GroupProps = Omit<HTMLProps<HTMLFieldSetElement>, 'as' | 'ref' | 'id' | 'children'> & {
+    /** Checkboxes or Radios for this group. */
+    children: ReactElement<CommonProps> | ReactElement<CommonProps>[];
+    /** This will match children's name prop. */
+    id?: string;
+    /** Text for the group label */
+    label?: ReactNode;
+} & GenericCSSMixinProps;
+
+export type CommonProps = {
+    /** Secondary text for the input. Usually doesn't directly describe it */
+    description?: ReactNode;
+    /**
+     * The size of the label.
+     *
+     * @default 'primary'
+     */
+    labelSize?: 'primary' | 'secondary';
+    /**
+     * Should match the id of the group that surrounds it.
+     *
+     * ```html
+     * <Component.Group id="someGroup">
+     *     <Component.Option value="someValue" name="someGroup">
+     *         Label 1
+     *     </Component.Option>
+     *     <Component.Option value={231} name="someGroup">
+     *         Label 2
+     *     </Component.Option>
+     * </Component.Group>
+     * ```
+     */
+    name?: string;
+    /**
+     * Represents the value that selecting this input provides.
+     *
+     * ```html
+     * <Component.Group id="someGroup">
+     *     <Component.Option value="someValue" name="someGroup">
+     *         Label 1
+     *     </Component.Option>
+     *     <Component.Option value={231} name="someGroup">
+     *         Label 2
+     *     </Component.Option>
+     * </Component.Group>
+     * ```
+     */
+    value?: string | number;
+} & Omit<HTMLProps<HTMLInputElement>, 'for' | 'ref' | 'type' | 'name' | 'value'> &
+    GenericCSSMixinProps;

package/src/ChoiceListItem/index.ts

@@ -0,0 +1,3 @@
+export * from './Radio';
+export * from './Checkbox';
+export { type GroupProps, ChoiceListItemLabel } from './common';

package/src/Collapsible/Collapsible.tsx

@@ -0,0 +1,58 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+import { nodeEnv } from '../utils/nodeEnv';
+
+type Props = {
+    children: ReactNode;
+    className?: string;
+    expanded?: boolean;
+    timing?: number;
+};
+
+export const Collapsible = ({ children, className, expanded = false, timing = 400 }: Props) => {
+    const isTestEnv = nodeEnv === 'test';
+    const [isTransitioning, setIsTransitioning] = useState(expanded);
+    const isInitialRender = useRef(true);
+
+    useEffect(() => {
+        setIsTransitioning(true);
+        isInitialRender.current = false;
+    }, [expanded]);
+
+    return (
+        <div
+            className={cn(
+                'grid overflow-hidden transition-[grid-template-rows] ease-in-out',
+                expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+                className
+            )}
+            data-expanded={expanded}
+            data-hui-id="Collapsible"
+            style={{ transitionDuration: `${isTestEnv || isInitialRender.current ? 0 : timing}ms` }}
+        >
+            <div className="min-h-0">
+                <div
+                    className={cn('transform transition-[transform,opacity] ease-[ease]', {
+                        '-translate-y-full opacity-0': !expanded,
+                        'translate-y-0 opacity-100': expanded,
+                    })}
+                    data-testid="collapsible-content"
+                    onAnimationEnd={() => {
+                        if (isTestEnv) {
+                            setIsTransitioning(expanded);
+                        }
+                    }}
+                    onTransitionEnd={() => {
+                        setIsTransitioning(expanded);
+                    }}
+                    style={{
+                        transitionDuration: `${isTestEnv || isInitialRender.current ? 0 : timing}ms`,
+                    }}
+                >
+                    {(expanded || isTransitioning) && children}
+                </div>
+            </div>
+        </div>
+    );
+};