From d24860707a98a2e31d1bff3d890c5970eb72d76b Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 27 Nov 2024 22:00:46 -0500 Subject: [PATCH 1/4] reorganized grouping of props to follow RAC --- apps/docs/scripts/generateComponentData.ts | 90 +++++++++++++++++++--- 1 file changed, 78 insertions(+), 12 deletions(-) diff --git a/apps/docs/scripts/generateComponentData.ts b/apps/docs/scripts/generateComponentData.ts index b3784d141..06efe4712 100644 --- a/apps/docs/scripts/generateComponentData.ts +++ b/apps/docs/scripts/generateComponentData.ts @@ -16,7 +16,7 @@ interface Groups { } interface GroupsConfig { - [key: string]: string | string[]; + [key: string]: (string | RegExp)[]; } export interface ComponentDocWithGroups extends ComponentDoc { @@ -102,10 +102,62 @@ function getFormattedData(data: ComponentDoc[]): ComponentDocWithGroups[] { // Define the groups and their corresponding terms const groupsConfig: GroupsConfig = { - events: ["Events", "DOMAttributes"], - accessibility: ["Aria", "Focusable"], - layout: "Slot" - // Add more groups here as needed + Events: [ + /^on[A-Z]/ + ], + Layout: [ + "flex", "flexGrow", "flexShrink", "flexBasis", "alignSelf", "justifySelf", "order", "flexOrder", + "gridArea", "gridColumn", "gridRow", "gridColumnStart", "gridColumnEnd", "gridRowStart", "gridRowEnd", "slot", + "overflow" + ], + Spacing: [ + "margin", "marginTop", "marginLeft", "marginRight", "marginBottom", "marginStart", "marginEnd", "marginX", "marginY", + "padding", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom", "paddingStart", "paddingEnd", "paddingX", "paddingY" + ], + Sizing: [ + "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "defaultWidth" + ], + Background: [ + "background", "backgroundColor", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", + "opacity" // ??? + ], + Borders: [ + "border", + "borderX", + "borderY", + "borderStyle", + "borderTop", + "borderLeft", + "borderRight", + "borderTop", + "borderBottom", + "borderWidth", "borderStartWidth", "borderEndWidth", "borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth", "borderXWidth", "borderYWidth", + "borderColor", "borderStartColor", "borderEndColor", "borderLeftColor", "borderRightColor", "borderTopColor", "borderBottomColor", "borderXColor", "borderYColor", + "borderRadius", "borderTopStartRadius", "borderTopEndRadius", "borderBottomStartRadius", "borderBottomEndRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius" + ], + Shadows: [ + "boxShadow", + "textShadow" + ], + Positioning: [ + "position", "top", "bottom", "left", "right", "start", "end", "zIndex", "isHidden", "hidden", "display" + ], + Typography: [ + "font", + "fontFamily", + "fontSize", + "fontStyle", + "textAlign", + "verticalAlign", + "lineHeight", + "letterSpacing" + ], + Accessibility: [ + "role", "id", "tabIndex", "excludeFromTabOrder", "preventFocusOnPress", /^aria-/ + ], + Advanced: [ + "UNSAFE_className", "UNSAFE_style" + ] }; // Define the exceptions that should be added to a specific group @@ -136,18 +188,32 @@ function getFormattedData(data: ComponentDoc[]): ComponentDocWithGroups[] { Object.entries(props).forEach(([key, prop]) => { let added = false; + // Special handling for the "id" prop + if (key === "id") { + if (prop.type?.name === "string") { + groups.Accessibility[key] = prop; // Group under Accessibility if the type is string + added = true; + } else { + groups.default[key] = prop; // Group under default for non-string types + added = true; + } + delete props[key]; // Remove it from the props to prevent further processing + + return; // Skip to the next prop + } + // Check each group to see if the prop should be added to it - Object.entries(groupsConfig).forEach(([group, term]) => { - if (Array.isArray(term)) { - term.forEach(t => { - if (prop.parent?.name.includes(t)) { + Object.entries(groupsConfig).forEach(([group, terms]) => { + if (Array.isArray(terms)) { + terms.forEach(term => { + if ( + (typeof term === "string" && prop.name.includes(term)) || + (term instanceof RegExp && term.test(prop.name)) + ) { groups[group][key] = prop; added = true; } }); - } else if (prop.parent?.name.includes(term)) { - groups[group][key] = prop; - added = true; } }); From 53db4098a8110178ad638ef27958abb73473995d Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 28 Nov 2024 09:14:26 -0500 Subject: [PATCH 2/4] fixed an issue where strings partly evaluated resulting in isFluid beind treated as an id --- apps/docs/scripts/generateComponentData.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/scripts/generateComponentData.ts b/apps/docs/scripts/generateComponentData.ts index 06efe4712..74dab7af7 100644 --- a/apps/docs/scripts/generateComponentData.ts +++ b/apps/docs/scripts/generateComponentData.ts @@ -119,7 +119,7 @@ function getFormattedData(data: ComponentDoc[]): ComponentDocWithGroups[] { ], Background: [ "background", "backgroundColor", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", - "opacity" // ??? + "opacity" ], Borders: [ "border", @@ -207,7 +207,7 @@ function getFormattedData(data: ComponentDoc[]): ComponentDocWithGroups[] { if (Array.isArray(terms)) { terms.forEach(term => { if ( - (typeof term === "string" && prop.name.includes(term)) || + (typeof term === "string" && prop.name === term) || (term instanceof RegExp && term.test(prop.name)) ) { groups[group][key] = prop; From 3746f92b126a69de10611899d491d3b6d86866a6 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 28 Nov 2024 09:39:06 -0500 Subject: [PATCH 3/4] removed unnecessayu comments --- apps/docs/components/tag/tag.css | 6 ++++++ apps/docs/scripts/generateComponentData.ts | 8 ++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/apps/docs/components/tag/tag.css b/apps/docs/components/tag/tag.css index a0e3967c2..d1b8e6d9c 100644 --- a/apps/docs/components/tag/tag.css +++ b/apps/docs/components/tag/tag.css @@ -1,3 +1,9 @@ +@property --font-size { + syntax: ''; + inherits: false; + initial-value: 1rem; +} + :root { --hd-tag-font-family: var(--hd-default-font-family); --hd-tag-font-size: 0.875rem; diff --git a/apps/docs/scripts/generateComponentData.ts b/apps/docs/scripts/generateComponentData.ts index 74dab7af7..c756ed166 100644 --- a/apps/docs/scripts/generateComponentData.ts +++ b/apps/docs/scripts/generateComponentData.ts @@ -191,15 +191,15 @@ function getFormattedData(data: ComponentDoc[]): ComponentDocWithGroups[] { // Special handling for the "id" prop if (key === "id") { if (prop.type?.name === "string") { - groups.Accessibility[key] = prop; // Group under Accessibility if the type is string + groups.Accessibility[key] = prop; added = true; } else { - groups.default[key] = prop; // Group under default for non-string types + groups.default[key] = prop; added = true; } - delete props[key]; // Remove it from the props to prevent further processing + delete props[key]; - return; // Skip to the next prop + return; } // Check each group to see if the prop should be added to it From ce719b4c0f74d0c07e182ee5ad205e5e56149049 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 28 Nov 2024 09:49:14 -0500 Subject: [PATCH 4/4] removed advanced props as we dont use them --- apps/docs/scripts/generateComponentData.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/docs/scripts/generateComponentData.ts b/apps/docs/scripts/generateComponentData.ts index c756ed166..7d44f380b 100644 --- a/apps/docs/scripts/generateComponentData.ts +++ b/apps/docs/scripts/generateComponentData.ts @@ -154,9 +154,6 @@ function getFormattedData(data: ComponentDoc[]): ComponentDocWithGroups[] { ], Accessibility: [ "role", "id", "tabIndex", "excludeFromTabOrder", "preventFocusOnPress", /^aria-/ - ], - Advanced: [ - "UNSAFE_className", "UNSAFE_style" ] };