Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110export const PROP_GROUP_ORDER = [ 'Component props', 'Events', 'Styling', 'Forms', 'Accessibility', 'Advanced',] as const;
export type PropGroupName = (typeof PROP_GROUP_ORDER)[number];
/** * Synthetic entry name the component props generator adds to a `type` record to carry whether the * type forwards native DOM props, since the record otherwise holds only documented prop entries. */export const NATIVE_PROPS_FORWARDING_KEY = '__nativePropsForwarding';
/** Sentence shown above a type's prop groups when it forwards native DOM and ARIA props. */export function renderNativePropsNote(typeName: string): string { return `\`${typeName}\` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.`;}
const EVENT_PROP = /^on[A-Z]/;const ARIA_PROP = /^aria(-|[A-Z])/;
const FORM_PROPS = new Set([ 'autoComplete', 'autoFocus', 'defaultValue', 'enterKeyHint', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'inputMode', 'isDisabled', 'isInvalid', 'isReadOnly', 'isRequired', 'max', 'maxLength', 'min', 'minLength', 'name', 'pattern', 'step', 'type', 'validate', 'validationBehavior', 'value',]);
const STYLING_PROPS = new Set(['className', 'style', 'UNSAFE_className', 'UNSAFE_style']);
const ADVANCED_PROPS = new Set([ 'children', 'dangerouslySetInnerHTML', 'elementType', 'id', 'inert', 'key', 'popover', 'ref', 'render', 'renderRoot', 'slot', 'suppressHydrationWarning',]);
/** Groups visible prop names in the shared documentation order, omitting empty groups and the native-props marker. */export function groupPropNames(names: ReadonlyArray<string>): ReadonlyArray<{ defaultOpen: boolean; name: PropGroupName; props: ReadonlyArray<string>;}> { const buckets = new Map<PropGroupName, Array<string>>();
for (const name of names) { if (name === NATIVE_PROPS_FORWARDING_KEY) continue; const group = classifyPropGroup(name); const bucket = buckets.get(group) ?? []; bucket.push(name); buckets.set(group, bucket); }
return PROP_GROUP_ORDER.flatMap((name) => { const props = buckets.get(name); if (props === undefined || props.length === 0) return []; return [ { defaultOpen: name === 'Component props', name, props: [...props].sort((left, right) => left.localeCompare(right)), }, ]; });}
/** Classifies a visible prop name into one shared documentation group. */export function classifyPropGroup(name: string): PropGroupName { if (EVENT_PROP.test(name)) return 'Events'; if (STYLING_PROPS.has(name)) return 'Styling'; if (FORM_PROPS.has(name)) return 'Forms'; if (ARIA_PROP.test(name) || name === 'role') return 'Accessibility'; if (ADVANCED_PROPS.has(name)) return 'Advanced'; return 'Component props';}