From 4ef1850bf1d73660be8991f0b8e8b35f7785df78 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 20 Jun 2025 16:34:55 +0100 Subject: [PATCH] Fix report Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 253 ++++++++++++++++++ packages/canon/src/types.ts | 51 ++-- .../canon/src/utils/componentDefinitions.ts | 4 + 3 files changed, 286 insertions(+), 22 deletions(-) diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index abe30ea93b..e382eb1cc7 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -243,6 +243,9 @@ export interface CheckboxProps { value?: string; } +// @public +export type ClassNamesMap = Record; + // @public export const Collapsible: { Root: ForwardRefExoticComponent< @@ -265,6 +268,250 @@ export const Collapsible: { // @public (undocumented) export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'; +// @public +export type ComponentClassNames = + (typeof componentDefinitions)[T]['classNames']; + +// @public +export interface ComponentDefinition { + // (undocumented) + classNames: ClassNamesMap; + // (undocumented) + dataAttributes?: DataAttributesMap; +} + +// @public +export type ComponentDefinitionName = keyof typeof componentDefinitions; + +// @public +export const componentDefinitions: { + readonly Avatar: { + readonly classNames: { + readonly root: 'canon-AvatarRoot'; + readonly image: 'canon-AvatarImage'; + readonly fallback: 'canon-AvatarFallback'; + }; + readonly dataAttributes: { + readonly size: readonly ['small', 'medium', 'large']; + }; + }; + readonly Box: { + readonly classNames: { + readonly root: 'canon-Box'; + }; + }; + readonly Button: { + readonly classNames: { + readonly root: 'canon-Button'; + }; + readonly dataAttributes: { + readonly size: readonly ['small', 'medium', 'large']; + readonly variant: readonly ['primary', 'secondary', 'ghost']; + }; + }; + readonly ButtonIcon: { + readonly classNames: { + readonly root: 'canon-ButtonIcon'; + }; + }; + readonly ButtonLink: { + readonly classNames: { + readonly root: 'canon-ButtonLink'; + }; + }; + readonly Container: { + readonly classNames: { + readonly root: 'canon-Container'; + }; + }; + readonly Flex: { + readonly classNames: { + readonly root: 'canon-Flex'; + }; + }; + readonly Grid: { + readonly classNames: { + readonly root: 'canon-Grid'; + }; + }; + readonly Text: { + readonly classNames: { + readonly root: 'canon-Text'; + }; + readonly dataAttributes: { + readonly variant: readonly ['body', 'caption', 'label']; + readonly weight: readonly ['regular', 'medium', 'bold']; + readonly color: readonly ['primary', 'secondary', 'muted']; + readonly truncate: readonly [true, false]; + }; + }; + readonly Heading: { + readonly classNames: { + readonly root: 'canon-Heading'; + }; + readonly dataAttributes: { + readonly variant: readonly ['title1', 'title2', 'title3', 'subtitle']; + readonly color: readonly ['primary', 'secondary', 'muted']; + readonly truncate: readonly [true, false]; + }; + }; + readonly TextField: { + readonly classNames: { + readonly root: 'canon-TextField'; + readonly input: 'canon-TextField-input'; + readonly label: 'canon-TextField-label'; + readonly error: 'canon-TextField-error'; + readonly helper: 'canon-TextField-helper'; + readonly container: 'canon-TextField-container'; + }; + readonly dataAttributes: { + readonly invalid: readonly [true, false]; + readonly disabled: readonly [true, false]; + }; + }; + readonly FieldLabel: { + readonly classNames: { + readonly root: 'canon-FieldLabel'; + readonly required: 'canon-FieldLabel-required'; + }; + readonly dataAttributes: { + readonly required: readonly [true, false]; + }; + }; + readonly Select: { + readonly classNames: { + readonly root: 'canon-Select'; + readonly trigger: 'canon-Select-trigger'; + readonly content: 'canon-Select-content'; + readonly item: 'canon-Select-item'; + readonly value: 'canon-Select-value'; + readonly icon: 'canon-Select-icon'; + readonly separator: 'canon-Select-separator'; + }; + readonly dataAttributes: { + readonly invalid: readonly [true, false]; + readonly disabled: readonly [true, false]; + readonly open: readonly [true, false]; + }; + }; + readonly Checkbox: { + readonly classNames: { + readonly root: 'canon-Checkbox'; + readonly input: 'canon-Checkbox-input'; + readonly indicator: 'canon-Checkbox-indicator'; + readonly label: 'canon-Checkbox-label'; + }; + readonly dataAttributes: { + readonly checked: readonly [true, false]; + readonly indeterminate: readonly [true, false]; + readonly disabled: readonly [true, false]; + }; + }; + readonly Switch: { + readonly classNames: { + readonly root: 'canon-Switch'; + readonly thumb: 'canon-Switch-thumb'; + readonly track: 'canon-Switch-track'; + }; + readonly dataAttributes: { + readonly checked: readonly [true, false]; + readonly disabled: readonly [true, false]; + }; + }; + readonly Link: { + readonly classNames: { + readonly root: 'canon-Link'; + }; + readonly dataAttributes: { + readonly variant: readonly ['primary', 'secondary']; + }; + }; + readonly Menu: { + readonly classNames: { + readonly root: 'canon-Menu'; + readonly trigger: 'canon-Menu-trigger'; + readonly content: 'canon-Menu-content'; + readonly item: 'canon-Menu-item'; + readonly separator: 'canon-Menu-separator'; + readonly label: 'canon-Menu-label'; + readonly group: 'canon-Menu-group'; + }; + }; + readonly Tabs: { + readonly classNames: { + readonly root: 'canon-Tabs'; + readonly list: 'canon-Tabs-list'; + readonly tab: 'canon-Tabs-tab'; + readonly panel: 'canon-Tabs-panel'; + readonly trigger: 'canon-Tabs-trigger'; + }; + }; + readonly Table: { + readonly classNames: { + readonly root: 'canon-Table'; + readonly header: 'canon-Table-header'; + readonly body: 'canon-Table-body'; + readonly footer: 'canon-Table-footer'; + readonly row: 'canon-Table-row'; + readonly cell: 'canon-Table-cell'; + readonly headerCell: 'canon-Table-headerCell'; + readonly caption: 'canon-Table-caption'; + }; + }; + readonly DataTable: { + readonly classNames: { + readonly root: 'canon-DataTable'; + readonly container: 'canon-DataTable-container'; + readonly header: 'canon-DataTable-header'; + readonly body: 'canon-DataTable-body'; + readonly row: 'canon-DataTable-row'; + readonly cell: 'canon-DataTable-cell'; + readonly headerCell: 'canon-DataTable-headerCell'; + readonly toolbar: 'canon-DataTable-toolbar'; + readonly pagination: 'canon-DataTable-pagination'; + readonly search: 'canon-DataTable-search'; + readonly filters: 'canon-DataTable-filters'; + }; + }; + readonly Icon: { + readonly classNames: { + readonly root: 'canon-Icon'; + }; + readonly dataAttributes: { + readonly size: readonly ['small', 'medium', 'large']; + }; + }; + readonly Tooltip: { + readonly classNames: { + readonly root: 'canon-Tooltip'; + readonly trigger: 'canon-Tooltip-trigger'; + readonly content: 'canon-Tooltip-content'; + readonly arrow: 'canon-Tooltip-arrow'; + }; + }; + readonly Collapsible: { + readonly classNames: { + readonly root: 'canon-Collapsible'; + readonly trigger: 'canon-Collapsible-trigger'; + readonly content: 'canon-Collapsible-content'; + readonly icon: 'canon-Collapsible-icon'; + }; + readonly dataAttributes: { + readonly open: readonly [true, false]; + }; + }; + readonly ScrollArea: { + readonly classNames: { + readonly root: 'canon-ScrollArea'; + readonly viewport: 'canon-ScrollArea-viewport'; + readonly scrollbar: 'canon-ScrollArea-scrollbar'; + readonly thumb: 'canon-ScrollArea-thumb'; + readonly corner: 'canon-ScrollArea-corner'; + readonly track: 'canon-ScrollArea-track'; + }; + }; +}; + // @public (undocumented) export const Container: ForwardRefExoticComponent< ContainerProps & RefAttributes @@ -292,6 +539,12 @@ export interface ContainerProps { style?: React.CSSProperties; } +// @public +export type DataAttributesMap = Record; + +// @public +export type DataAttributeValues = readonly (string | number | boolean)[]; + // @public export const DataTable: { Root: ( diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts index 056d4772ba..073aa0d6cb 100644 --- a/packages/canon/src/types.ts +++ b/packages/canon/src/types.ts @@ -134,35 +134,42 @@ export interface UtilityProps extends SpaceProps { rowSpan?: Responsive; } -// Base types for the component styles structure -type ClassNamesMap = Record; -type DataAttributeValues = readonly (string | number | boolean)[]; -type DataAttributesMap = Record; +/** + * Base type for the component styles structure + * @public + */ +export type ClassNamesMap = Record; +/** + * Base type for the component styles structure + * @public + */ +export type DataAttributeValues = readonly (string | number | boolean)[]; + +/** + * Base type for the component styles structure + * @public + */ +export type DataAttributesMap = Record; + +/** + * Base type for the component styles structure + * @public + */ export interface ComponentDefinition { classNames: ClassNamesMap; dataAttributes?: DataAttributesMap; } -// Type utilities for extracting information from the component styles +/** + * Type utilities for extracting information from the component styles + * @public + */ export type ComponentDefinitionName = keyof typeof componentDefinitions; +/** + * Helper type to extract class names for a component + * @public + */ export type ComponentClassNames = (typeof componentDefinitions)[T]['classNames']; - -export type ComponentDataAttributes = - (typeof componentDefinitions)[T] extends { dataAttributes: infer DA } - ? DA - : Record; - -export type ComponentDataAttributeProps = { - [K in keyof ComponentDataAttributes]?: ComponentDataAttributes[K] extends readonly (infer U)[] - ? U - : never; -}; - -// Helper type to check if a component has data attributes -export type HasDataAttributes = - (typeof componentDefinitions)[T] extends { dataAttributes: any } - ? true - : false; diff --git a/packages/canon/src/utils/componentDefinitions.ts b/packages/canon/src/utils/componentDefinitions.ts index 97261f80e7..009b61c9f0 100644 --- a/packages/canon/src/utils/componentDefinitions.ts +++ b/packages/canon/src/utils/componentDefinitions.ts @@ -16,6 +16,10 @@ import type { ComponentDefinition } from '../types'; +/** + * Component definitions for the Canon library + * @public + */ export const componentDefinitions = { Avatar: { classNames: {